Skip to content

Dear Internet Explorer user: Your browser is no longer supported

Please switch to a modern browser such as Microsoft Edge, Mozilla Firefox or Google Chrome to view this website's content.

CSS Conditional Comments for Chrome and Safari

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”

On 13 May 2012, Solar Power Installer wrote: Hyperlink chain icon

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.

Reply

On 11 May 2013, Minul wrote: Hyperlink chain icon

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

It helps me a lot.

Thanks again

Reply

On 4 August 2014, rolland wrote: Hyperlink chain icon

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

Reply

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.