Separating Chrome VS. Safari using CSS Hacks

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.

Tagged with: , , , , , , , ,
Posted in Chrome, Chrome-All, Computers, Cool Code, CSS, CSS Hacks, Hacks, Safari, Safari-All, Tech, Web, Web Browser, Web Browsers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: