Skip to content

CSS Conditional Comments for Chrome and Safari

G23rd July 2011

C3 Comments

Tbrowser, CSS

This nifty CSS hack will allow you to customise the layout of elements for Google Chrome and Apple Safari if they are only displaying correctly in Firefox and Internet Explorer.

Whilst working on a new website, I discovered a particular set of CSS descriptors controlling <span> elements that worked perfectly in Firefox 5.0 and Internet Explorer 9.0.1 but which displayed incorrectly in Chrome 12.0.742.122 and Safari 5.1.

The underlying problem was that the WebKit rendering engine, which is the basis of Chrome and Safari, wasn’t interpreting the CSS code as it should, despite the CSS and XHTML being valid.

Although I dislike conditional comments, they’re sometimes necessary. In my particular case, no amount of fiddling with the CSS would render the elements correctly in all four browsers.

If you find yourself in the same situation, you can employ the following CSS conditional comments in your style sheet which will be read by WebKit browsers and ignored by the others:

@media screen and (-webkit-min-device-pixel-ratio:0) {
#MyID { height: 100%; }
.MyClass { height: 100%; }
}

You can even use the same class and ID names twice, whereby WebKit browsers will ignore the first descriptors (which will be read by non-WekKit browsers) and preference the second:

#MyID { height: 90%; }
.MyClass { height: 90%; }

/*Code below will replace code above for WebKit browsers only*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#MyID { height: 100%; }
.MyClass { height: 100%; }
}

You can read a more detailed explanation of @media CSS queries (with examples) here.

   

Comments:

3 responses to “CSS Conditional Comments for Chrome and Safari”

  • Written by Solar Power Installer on 13 May 2012:

    hi. Thank you very much for sharing this. it saves my lots of time.
    Please keep it up, I think somebody needs this kind of CSS Hack.

    Thanks once again for this to share.

    Wishing new post like this.

  • Written by Minul on 11 May 2013:

    Hi Adam Dimech
    Thanks a lot to you for this article.

    It helps me a lot.

    Thanks again

  • Written by rolland on 4 August 2014:

    What if i want to target all browsers except Chrome? how should i write the media query?
    Thanks a lot

Have your say:

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.