Wednesday, December 18, 2013

CSS hacks For IE, Mozilla, Chrome, Safari, Opera browsers

 @media all and ... hack for IE

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}

Text will be red in Opera7+, Firefox 3.5+, Chrome4+, IE9. Green in other browsers (also in Internet Explorer 8 but not in Internet Explorer 9).
This is old hack but few years ago it was used only for Opera 7+. Now it is used to filter IE.

.test{color:green;}
@media all and (min-width: 0px){
  .test{color:red;}
}


underscore hack

Will work only in IE5.5, IE6:

Text will be red in Internet Explorer 5.5 and Internet Explorer 6, blue in other browsers.

.example{
  color: blue;
  _color: red;
}

html>body hack for IE6

IE6 doesn't support child selectors (">"), so text will be red in IE6 and green in other browsers.

p{color: red;}
div#mydiv{color: red;}
html>body p {background-color: green;}
html>body div#myDiv{background-color: green;}

backslash in property hack for IE5.x

Those style wouldn't work in IE 5.x (Attention: those will work if backslash is first sign, eg: \width: 300px; will work):

.example{
  back\ground: red;
}
.example{
  font\t: bold 15px arial;
}
.example{
  bord\er: 1px solid red;
}

* html hack for IE6

Text will be red in Internet Explorer 6, green in other browsers.

IE6 thinks that html element has parent. For other browsers html is root element so * html is invalid.

p{color: green;}
* html p{color: red;}


Asterisk hack

In IE5, IE6, IE7(!) text will be blue, green in other browsers.

body{
  color: green;
  * color: blue;
}

Comments mess for IE5-Mac

Text will be green in Internet Explorer 5 for Mac. Red in other browsers.

p{color: green;}
/*hack for ie5\*/
p{color: red;}
/* end */

value comment hack for IE5

In IE5.x/WIN (don't know if works for Mac) text will be red, blue in other browsers:

.menu{
  width: red;
  width: /**/blue;
}

!important or not hack for IE7

In Internet Explorer 7 and below text will be green and red in other browsers.

.h19a{color:red; color: green !important!;}

 .h19b{color:red; color:green !inIE;}

\{space} hack

Text red underlined in IE < 8 and green, bold, without underline in other browsers.
\0 works with background in IE9 but it also works in Opera (10.5) so it unsafe. \0 not works in ie6.

div {color:green; font-weight:bold;}
div\ {color:red; text-decoration:underline;}
p{
    color:blue;
    color: pink\9;
    text-decoration:underline\a;
    font-weight:bold\b;
    background:yellow\d;
    border:1px solid\0; /*This works in IE7, IE8, IE9, Opera 10.63).*/
}

*+html hack working only in IE7

This is variant of * html hack for IE6 but this one works only in IE7.

Text will be green in IE7 and blue in other browsers.

.test { color: blue; }

*+html .test { color: green; }

hack to target IE7 and below

This is modification of hack 5. Ie 7 supports child selectors but not when there is an empty comment after it.

Text will be blue in IE7 and below and green in other browsers.

.test { color: blue; }
html >/**/body .test { color: green; }

Double ID hack for IE8

Text red only in Internet Explorer 8, green in other browsers (also in IE7 or IE9).

p{color:red;}
p,#ie8#bug{color:green;}



 hack to target IE8 and IE9 only

Text will be green in Internet Explorer 8 and 9. Red in other browsers. It will not work for background or font-*.

.test{color:red;}
.test{color:green \ ;}


hack to target IE9 only

Text will be green in Internet Explorer 9. Red in other browsers. It will not work for background or font-*.

.test{color:red;}
:root .test{color:green \ ;}

IE9 hack

On the web you can find hack for Internet Explorer 9 :root .test {color: green\0;}. But be careful. This declaration will work not only in IE9 but also in Opera (tested in 10.63).

You can replace \0 with other chars (see hack 17) but then it will not work for background.

Text green in Internet Explorer 9 and Opera.

.test{color:red;}
:root .test {color: green\0;}

\9 hack

Text green in Internet Explorer 7 and above, red in other browsers. Remove comment to make text green also in IE6.

p{color:red; color /*\**/: green\9;}

IE 10  hack

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}




moz-any() for Firefox 4-6


in firefox 4 you can use :-moz-any() grouping selector. Inside :-moz-any() you can use simple selectors. :any() grouping element cannot contains combinators.

In firefox 4 text will be green. Red in other browsers.

p.test{color:red;}
:-moz-any(p.test}{color:green;}


@-moz-document hack for firefox

Text will be green in firefox>1.5 and red in other browsers.

.h21{color:red;}
@-moz-document url-prefix(){
  .h21{color:green;}
}

@-moz-document url-prefix() {
  .selector {
     color:lime;
  }
}

-webkit-min-device- hack for Chrome and Safari

Hack for Google Chrome. In Google Chrome text will be green and red in other browsers.

#item .element{color:green;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #item .element{color:red;}
}

Bracket-property hacks
Hacks for goole Chrome and one for Opera. Text will be red in Google Chrome, green in other browsers.

/* will be red only in opera<10 and google chrome */
#test2{
    color:green;
    -bracket-:hack(;
        color:red;
    );
}
/* will be red only in google chrome */
#test3{
    color:green;
    (-bracket-:hack;
        color:red;
    );
}
/* will be red only in google chrome */
#test4{
    color:green;
    -bracket-:hack[;
        color:red;
    ];
}
 hack for Only Chrome

@media screen and (-webkit-min-device-pixel-ratio:0){
body:nth-of-type(1) .classname{ padding-left:0;}
}

hover , focus problem in safari and chrome


/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/*html { -webkit-animation: safariSelectorFix infinite 1s }
@-webkit-keyframes safariSelectorFix { 0% {
zoom:1;
}
100% {
zoom:1;
}

}*/


Multihack

Multihack sets red color for ie, blue for gecko (Firefox), pink for Opera > 8.5:

/*ie*/
#example{
  color: red;
}
/*firefox(gecko)*/
body:not([foobar]) #example{
  color: blue;
}
/*opera > v8.5*/
@media all and (min-height:0px;){
  body #example{
  color: pink;
  }
}


for older browsers and Operas < 8

Will not work in older browsers (Netscape 4) and Opera below version 8.

body{
  background-color: green;
  voice-family: "\"}\"";
  voice-family: inherit;
  background-color: red;

}

Monday, November 18, 2013

Javascript Frameworks


  • Jquery(jquery.com)
  • YUI (http://yuilibrary.com/)
  • Extjs(http://www.sencha.com/products/extjs/)
  • Json(http://www.json.org/)
  • Dojo (http://dojotoolkit.org/)
  • Backbone.js (http://documentcloud.github.io/backbone/)
  • script.aculo.us(http://script.aculo.us/)
  • UIZE (http://www.uize.com/)
  • Knockout(http://knockoutjs.com/)
  • qooxdoo(http://qooxdoo.org/)
  • Spine (http://spinejs.com/)
  • ActiveJS(http://www.activejs.org/)
  • Agility (http://agilityjs.com/)
  • Angular(http://angularjs.org/)
  • Eyeballs (https://github.com/paulca/eyeballs.js)
  • Sproutcore (www.sproutcore.com)
  • Cappuccino (cappuccino.org)
  • Pure MVC(puremvc.org)
  • JavaScriptMVC (http://javascriptmvc.com/)
  • Jamal(jamal-mvc.com)
  • Choco(https://github.com/ahe/choco)
  • Sammy (http://sammyjs.org/)
  • TrimJunction(http://code.google.com/p/trimpath/wiki/TrimJunction)
  • CorMVC(https://github.com/bennadel/CorMVC)
  • Batman(batmanjs.org)

CSS Frameworks


  • Bootstrap
  • Compass
  • Columnal
  • Fluid Baseline Grid
  • Profound
  • Goldilocks
  • Gridless
  • InuitCSS
  • Blueprint
  • YAML19 
  • Gridlock
  • Less Framework
  • 960 Grid System
  • Skeleton
  • Foundation
  • Responsive Grid System
  • Gumby Framework
  • Base
  • Semantic Grid System
  • Responsive Grid System

More CSS Frameworks

  • 34 Grid
  • Amazium
  • BluCSS Framework
  • CSS Horus
  • Golden Grid System
  • Gridiculo us
  • Groundwork CSS
  • HTML5 Mobile Boilerplate
  • Ingrid
  • Initializer
  • Ivory
  • Kube CSS Framework
  • Less+ Framework
  • Proportional Grids
  • ResponsiveAeon
  • Rock Hammer
  • Sassaparilla
  • Simple Grid
  • Stack Layout
  • Titan Framework
  • Toast CSS Framework
  • Unsemantic
  • Zen Grids


Friday, March 15, 2013

IE Bugs Fixing Hints for all browsers

For all versions of ie:-
<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

IE Bugs Fixing Hacks for all browsers :-

IE-6 ONLY
* html #div {
height: 300px;
}

IE-7 ONLY
*+html #div {
height: 300px;
}

IE-8 ONLY
#div {
height: 300px\0/;
}

IE-7 & IE-8
#div {
height: 300px\9;
}

NON IE-7 ONLY:
#div {
_height: 300px;
}

Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
 

IE-9 ONLY
:root  #div {
height: 300px\0/;
}



IE-9 and IE-10

@media all and (min-width:0) { .classname { right:15px\0/ ; } /* IE9-IE10pp4 */ }

Hacks for chrome and safari :-

@media screen and (-webkit-min-device-pixel-ratio:0)
.classname  {margin: 0px 5px 0px 0px; }  /*  Web kit and Chrome */ 
}

Thursday, February 14, 2013

Dynamic Input type File Browse button Method

/****** Browse Button Method ******/

<style type="text/css">
.upload_block {
position:relative;
width:250px;
height:36px;
float:left;
}
.trueupload {
position:absolute;
top:20px;
right:0;

/* start of transparency styles */
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
/* end of transparency styles */

z-index:2; /* bring the real upload interactivity up front */
width:100px;
}
.dummyupload {
background: url(images/browse_btn.jpg) no-repeat 100% 50%;
height:36px;

}
.dummyupload input {
width:150px;
height:30px;
}
</style>

<body>

<form>
<div class="upload_block">
<label for="upload">Upload Image: </label>
<div class="dummyupload">
<input type="text" name="dummyupload" /> <!-- browse button is here as background -->
</div>
<input type="file" name="upload" class="trueupload" onchange="this.form. dummyupload.value = this.value;" />
</div>
</form>
</body>

/*----------------------------------------------------*/




<style type="text/css">
.upload_photo { position:relative; width:460px; height:34px; float:left }
.trueup { height: 34px; left: 0; opacity: 0; position: absolute; top: 0px; width: 460px; z-index: 9 }
.dummyup { background:#faf8f6; width:460px }
.dummyup .filebtn { background: url("../images/browse_btn.png") no-repeat scroll right top rgba(0, 0, 0, 0); border: medium none; height: 34px; position: absolute; right: -26px; top: -2px; width: 168px; }
.dummyup input[type='text'] { border: 1px solid #E3DCDC; color: #444444; font-size: 13px; height: 26px;    padding: 0 10px;    width:290px !important;  }
</style>
<body> 
<form>
<div class="upload_photo">
           <div class="dummyup">
            <input type="text" name="dummyup" value="" />
            <input type="submit" class="filebtn" value=""   />
            <!-- browse button is here as background -->
           </div>
           <input type="file" name="upload" class="trueup" onchange="dummyup.value = this.value;" />
          </div>
</form>
</body>


For more details click here

Dynamic Input type File Drag and Drop Method

/****** Drag and Drop Method For Input type="file" *******/
<style type="text/css">
.upload_box {
width:350px;
height: 50px;
color: #000;
font-size: 19px;
text-align: center;
padding: 20px 10px 0px;
margin:20px 0px;
overflow: hidden;
position: relative;
background: url("/images/arrow_upload.png") repeat-x scroll left top transparent;
background:#eeeeee;
border:1px solid #bbbbbb;
}
.uploadfile {
cursor: pointer;
display: block;
font-size: 200px;
height: 140px;
left: -250px;
opacity: 0;
position: absolute;
top: -10px;
width: 600px;
z-index: 97;
}
h3 {
font:bold 18px/24px Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 0px;
padding:0px 0px;
}
</style>


<body>

<div class="upload_box">
<input type="file" multiple="multiple" class="uploadfile" name="uploadfile" id="uploadfile">
<h3>Drag &amp; Drop Files Here To upload</h3>
</div>

</body>




Tuesday, February 5, 2013

How to use Font Face


How to use Font Face :

The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. The Web Font Loader also lets you use multiple web-font providers. It was co-developed by Google and Type kit.

Simple Method :  (From our system local font)

@font-face {
  font-family: 'Awesome Font';
  src: url('awesome-font.ttf');
}

@font-face {
  font-family: 'Awesome Font';
  src: url('awesome-font.eot');  /* IE9 Compat Modes */
  src: url('awesome-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('awesome-font.woff') format('woff'), /* Modern Browsers */
         url('awesome-font.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Web Method :  (From  internet  web  font)

Full information you will get from here:


<script type="text/javascript" src="http://use.typekit.com/typekitid.js" ></script>
<script type="text/javascript">
try{Typekit.load();}catch(e){
}
</script>

<style type="text/css">
  .wf-loading h1 {
   visibility: hidden;
  }
.wf-active {
   /* styles to use when web fonts are active */
  }
  .wf-inactive {
   /* styles to use when web fonts are inactive */
  }
</style>


Web Method :  (From  Google  web  font)

Full information you will get from here:

<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

(OR )

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['yourfontname'],
    urls: ['http://paulirish.com/ yourfontname.css']
  }
});
</script>
    <style type="text/css">
      .wf-loading p {
        font-family: serif
      }
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-loading h1 {
        font-family: serif;
        font-weight: 400;
        font-size: 16px
      }
      .wf-inactive h1 {
        font-family: serif;
        font-weight: 400;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-weight: 400;
        font-size: 16px
      }
    </style>
  </head>

  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>

</html>

Thursday, January 31, 2013

Google Code Subversion Repository Error fixing

Google Code Subversion Repository Error will be fix it by deleting that  java script link in your HTML code.

Error will disply like this:

A username and password are being requested by https://blogsitename.googlecode.com The site says: "Google Code Subversion Repository"


I learn this error occurs when any script got deleted. This script will be hosted by other persons and when they remove those scripts, we are suffering if we were using those scripts on our website.

  • Go to the  template tab in settings.
  • Edit HTML
  • Find the script used by that address [ eg:- https://blogsitename.googlecode.com ]
  • It will be like <script src="https://blogsitename.googlecode.com/scriptcode" /> [scriptcode varies according to the link ]
  • Delete that script.
  • Save your template.
  • you fix the problem... :)

Pure CSS Dropdown menu

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="menu_style.css" />
</head>
<body>
<nav id="mainmenu">
<ul>
<li>
<a href="#">Menu 1</a>
   <ul>
       <li>
<a href="#">Sub Menu </a></li>
      <li><a href="#">Sub Menu </a></li>
      <li><a href="#">Sub Menu </a></li>
   </ul>
</li>
<li> <a href="#">Menu 2</a>    
   <ul>
       <li>
<a href="#">Sub Menu </a></li>
      <li><a href="#">Sub Menu </a></li>
      <li><a href="#">Sub Menu </a></li>
   </ul>

</li>
<li> <a href="#">Menu 3</a>      <ul>
       <li>
<a href="#">Sub Menu </a></li>
      <li><a href="#">Sub Menu </a></li>
      <li><a href="#">Sub Menu </a></li>
   </ul>

</li>
<li> <a href="#">Menu 4</a> </ul>
</nav>
</body>
</html>





Menu CSS :-



/*-------------------------
Global Reset CSS
--------------------------*/

* {
margin:0;
padding:0;
}
html {
position:relative;
}

/*----------------------------
Main Menu CSS
-----------------------------*/


#mainmenu > ul {
width: 500px; /* Increase when you adding more menu tabs */
margin:0 auto;
}
#mainmenu > ul > li { /* This style only for the top level li */
background:#eee;
list-style: none;
display: inline-block;
line-height: 1;
margin: 1px;
border-radius: 3px;
position:relative;
 font:12px/18px Arial, Helvetica, sans-serif;
text-decoration:none !important;
font-size:24px;
padding: 10px 10px;
}

#mainmenu li a {
text-decoration:none;
}

#mainmenu li ul {
position:absolute;
list-style:none;
text-align:left;
width:200px;
left:90%;
margin-left:-90px;
top:20px;
font:bold 12px Arial, Helvetica, sans-serif;
/* This is important for the show/hide CSS animation */
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}
#mainmenu li ul li {
background-color:#454545;
border-bottom:1px solid #222;
}
#mainmenu li ul li a {
padding:12px;
color:#fff !important;
text-decoration:none !important;
display:block;
}
#mainmenu li ul li:last-child {
border-bottom:0px solid #454545;
}
#mainmenu li ul li:hover {
background-color:#686868;
}
#mainmenu li ul li:first-child {
border-radius:3px 3px 0 0;
margin-top:25px;
position:relative;
}
#mainmenu li ul li:first-child:before { /* Top index arrow */
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#454545;
left:50%;
top:-10px;
margin-left:-60px;
}
#mainmenu li ul li:last-child {
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#mainmenu li:hover ul {
max-height:250px; /* Increase when you adding more dropdown tabs */
}

Thursday, January 24, 2013

CSS and HTML Hacks for IE Browsers

IE 6 and below
* html {  } 
IE 7 and below
*:first-child+html {  } * html {  } 
IE 7 only
*:first-child+html {  } 
IE 7 and modern browsers only
html>body {  } 
Modern browsers only (not IE 7)
html>/**/body {  }
Recent Opera versions 9 and below
html:first-child {  }

  1. Internet Explorer 7 and below ignore the additional punctuate and apply the property as if it just had the !important   identifier.
  2. IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
  3. IE7 or below: add an asterisk (*) before the CSS property.
  4. IE6: add an underscore (_) before the property.

.wrapper {


 background:  red;    /* standard */

background:   red \9;   /* IE 8 and below */

*background:  red ;   /* IE 7 and below */

_background:  red ;   /* IE 6 */

}



html>body #wrapper {

  width: 980px;   /* ..or this reinforcement of the standards width. */

}



IE                     Any version of IE
lt IE                  Version Versions less than version
lte IE version     Versions less than or equal to version
IE version         Only version version
gte IE version    Versions greater than or equal to version
gt IE version     Versions greater than version



Conditional of  HTML links Examples:-

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->



Conditional of  CSS  links Examples:-

<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>

<![endif]-->



<!--[if lt IE 8]>
 <link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if !lt IE 8]><![IGNORE[--><![IGNORE[]]> <link href="style.css" rel="stylesheet" type="text/css"> <!--<![endif]-->