Interesting techniques for cross browser CSS

Interesting techniques for cross browser CSS

Interesting techniques for cross browser CSS

As a front-end developer all the diferent browsers do give you headaches time to time… To reduce this hassle we have bundled some ineresting techniques for creating crossbrowser CSS.

Using reset CSS

Web browsers make use a different default styling for their HTML elements: that’s why it’s important to include a universal reset CSS for all the different HTML elements before creating own adaptations. Including this reset CSS will prevent future awkwardness.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Target Internet Explorer

Targetting only Inernet Explorer browsers can be really helpfull, especially the older versions (IE 6 & 7).

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

Targetting version specific Internet Explorers can be also be done.

<!--[if IE6]>
    <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Target Internet Explorer with CSS

These simple hacks will enable you to target Internet Explorer specific CSS elements.

.class {
  width:100px; /* All web browsers */
  *width:120px; /* only IE */
  _width:140px; /* only IE6 */
  .width:160px; /* only IE7 */
}

Targeting Opera only

@media all and (min-width: 0px){
    .classname {}
}

Targeting Firefox 1.5 and 2

body:empty #my-id {
    /* Firefox-specific rules go here */
}

Targeting all versions of Firefox

@-moz-document url-prefix() {
    #my-id { font-size: 100%; }
}

Targeting Safari only

html:lang(en)>body  .classname {}

Targeting Google Chrome only

body:nth-of-type(1) p{
   color: #333333;
}

Credits:
http://www.catswhocode.com/blog/15-techniques-and-tools-for-cross-browser-css-coding

http://www.webmonkey.com/2010/02/browser-specific_css_hacks/


About the Author

Daan is a Creative-Geek who loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]creative-geeks.com.