Standard CSS Hacks To Detect Chrome and Safari (Together)

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.

These two I did not create, but are worth mentioning.

This one is an ‘old faithful’ CSS webkit hack, media query based:

/* Chrome and Safari (Any) */

@media screen and (-webkit-min-device-pixel-ratio:0) {
 
    .selector {
        property:value;
    }
}

Recently there has been another, a one-liner that also does this… and rather effectively:

/* Chrome and Safari (Any) */

.selector:not(*:root) { property:value; }

Both of these were posted (not by me) to BrowserHacks.com, but I am including them here to go with my others of the same types.

Jeff

Advertisements

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

Tagged with: , , , , , , , ,
Posted in Chrome, Chrome-All, Computers, Cool Code, CSS, CSS Hacks, Hacks, Safari, Safari-All, Software, 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: