CODEWITHSUNDEEP
javascriptjqueryhtmlcsssafari
Zorak
Zorak

Reputation: 709

CSS target Safari 8 only

While I was doing some optimizations on my web, I ran into some trouble with Safari.

I have some CSS commands, which are broken on Safari 8 (maybe unsupported?), Safari 9 and all other browsers are OK.

I would like to fix the code for safari 8, without breaking and rebuilding my code using different (and much more complicated) structure to achieve the same output.

So: Is here a way to target !ONLY! safari version 8?

Targeting could be any-

So, any sugggestions, please?

Upvotes: 0

Views: 836

Answers (2)

user2182349
user2182349

Reputation: 9782

There are lots of different ways you can solve the problem. If you want to inject a stylesheet, you may use the code below:

var ua='Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A';
var verRe = /Version\/(\d+)/;
var version = ua.match(verRe);
var safari = ua.indexOf("Safari");

if (safari !== -1) {
    if (version[1] <= 8) {
        addStyleTag("safari8.css");
    }
}

function addStyleTag(url) {
    var link,head;
    head = document.querySelector("head");
    link = document.createElement("link");
    link.setAttribute("href",url);
    link.setAttribute("type","text/css");
    link.setAttribute("rel","stylesheet");
    head.appendChild(link);
}

If it was my page, I would write the code to degrade gracefully on Safari.

Upvotes: 0

Ivan Modric
Ivan Modric

Reputation: 619

You could use browser detection and add or not add (depending on the browser) a class to the body (e.g. <body class="is-safari-8">). In your CSS you could set specific rules only applying to .is-safari-8 and its descendants.

The browser detection itself can be done either on the server or client side. While server side is probably preferable I'm assuming you intend to do it client side. For this you can either use a library (you should find several with a quick google search but it might be overkill since you are looking for just one specific case) or write your own script to check the user agent.

Here is a helpful source that should get you started: https://developer.mozilla.org/en/docs/Web/API/Navigator

On a sidenote: The user agent can be faked (but that probably won't be an issue here).


More importantly: you might want to look up https://modernizr.com/. It's a feature detection script. It might allow you to solve your problem in a more flexible way.

Upvotes: 1

Related Questions