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”
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.
Hi Adam Dimech
Thanks a lot to you for this article.
It helps me a lot.
Thanks again
What if i want to target all browsers except Chrome? how should i write the media query?
Thanks a lot