Css cross-browser techniques

Css cross-browser round corners

.rounded{
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
}

For IE < IE8 download the htc file  border-radius.htc and add

.rounded {
  behavior: url(http://yoursite.com/border-radius.htc);
}

Css cross-browser Transparency

.selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */ }

Css reset

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

Css cross-browser shadow and glow

.shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

For ie download ie-css3.htc and add

.shadow {
  behavior: url(ie-css3.htc);
}

Cross-Browser CSS Gradient

webkit

.divbox {
  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
}

Firefox

.divbox {
 background: -moz-linear-gradient(top,  #ccc,  #000);
}

IE

.divbox {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
}

Combined

background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
This entry was posted in Free CSS and tagged , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.