Blog: Web Design
Yosemite peak

Target Safari 7.1 and 8.0 CSS Styles (OSX Yosemite)

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Not long ago, I ran into a strange CSS bug with the newer versions of Safari.

As you may know, different web browsers treat CSS style rules differently.

Since the dawn of the web, there have always been browser-specific quirks that keep web developers up at night.

In this particular case, I was trying to add a rule, border-bottom: 6px double #e0e0e0; to certain page elements.

This rule worked as expected on Chrome, IE, Firefox, Opera, and older versions of Safari. On the very newest versions of Safari though, the double border ended up squished into a thick, single line border.

If you need to target CSS rules specifically for Safari 7.1 or 8.0, here’s how you’d do that.

Here’s the prefix you need to add to each rule to target Safari 7.1 and 8.0:


/* Safari 7.1 -8.0 (Safari 7.1+)
(Use this as a prefix to your normal CSS rule)
---------------------------------------------------------------- */

_::-webkit-full-page-media, _:future, :root {
}

If you wanted to add our double border rule to all div elements, that rule would look like this:


/* Safari 7.1 -8.0 (Safari 7.1+)
(Use this as a prefix to your normal CSS rule)
---------------------------------------------------------------- */

_::-webkit-full-page-media, _:future, :root div {
  border-bottom: 6px double #e0e0e0;
}

Looking for other browser hacks for specific browsers?

Here’s a reference page by Jeff Clayton, called Browser Strangeness.

BrowserHacks.com also has some CSS techniques for targeting specific browser versions, but it’s a little older.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Join the Conversation

Your email address will be kept private. Required fields marked *.