Safari 9 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.

Safari has changed since version 6.1, as many have noticed.

Please note: if you are using Chrome on iOS (at least in versions 6.1-8) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

For about a month I have been working on Safari 9 (beta) – Safari 9 on iOS (and the beta which is due to be released soon for desktops) and here is the resulting set of CSS hacks for you.

/* Safari 9 (only) */

@supports (overflow:-webkit-marquee)
   and (justify-content:inherit) {
     .selector { property:value; } 
}

Author: Jeff Clayton

A One-Liner:

/* Safari 9+ */

_::-webkit-:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton

And a One-Liner that is not for iOS:

/* Safari 9+ (non-iOS) */

_:-webkit-full-screen:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton

There is now a way as of Safari 9 to target iOS devices as well!

/* Safari 9+ (iOS Only!) */

@supports (-webkit-text-size-adjust:none) 
   and (not (-ms-ime-align:auto)) {
     .selector { property:value; } 
}

Author: Jeff Clayton

To see them working live, As always — I have created a test page here:

http://browserstrangeness.bitbucket.org/css_hacks.html#webkit

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 Apple, Computers, Cool Code, CSS, CSS Hacks, Safari, Safari 9
2 comments on “Safari 9 CSS Hacks
  1. […] For 9 specifically, I have been working on a page for that, so – rather than retype the same code, go here for hacks to affect Safari 9 (including a hack for iOS only now): My Safari 9 CSS Hacks […]

    Like

  2. Kiran says:

    I tried of searching on web for this little css hack. Lot of the resolutions are through jquery only. Thanks alot for this great post..

    Like

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: