These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.
How to target CSS for Chrome and Separate it from Safari
Much of my time in the last decade has been to study style sheets and how to target specific web browsers. Most web programmers are familiar with the desire to target Safari or Chrome but not both. This last year I have spent a lot of time and effort in order to research and create various CSS ‘hacks’ (ways to target and fix specific issues with page formatting in web browsers that just seem to not want to display your web work properly …for those who are new to the topic).
At this time, Safari 7 is the current stable version, so that is the place to start. (As it turns out, this also works for Safari 6.1, so Safari 6.1+ is the target here.)
My CSS media query for Chrome 22+:
/* Safari 6.1+, Chrome 22+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm),
screen and(-webkit-min-device-pixel-ratio:0) {
.selector {
property:value;
}
}
Now that we have recent versions of Chrome and Safari formatted, the next block is for Safari 6.1+ only:
/* Safari 6.1+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-color-index:0) {
.selector {(;
property:value;
);}
}
Example code:
/* Safari 6.1+, Chrome 22+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm),
screen and(-webkit-min-device-pixel-ratio:0) {
body {
color:red;
background-color:gray;
}
}
/* Safari 6.1+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-color-index:0) {
body {(;
color:blue;
background-color:gray;
);}
}
So now your web site would show blue text if Safari 6.1 or newer, and red text if Chrome 22 or newer.
If you are relatively new to CSS, the order of these is important as CSS is sequential, from top to bottom and left to right.
Much of this I do for fun or my own job(s), but also I edit and post stuff to BrowserHacks.com to help other programmers/developers have ways to resolve issues in web programming quickly when needed.
Enjoy!
Jeff
IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io
Jeff Clayton IT Director / Senior Software Engineer / Film & Photography 
Leave a Reply