Ad

CSS Target Safari 8 Only

- 1 answer

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-

  • as comment in html, like old comments for "if IE7"
  • as in CSS somehow (but -webkit targets all webkit browsers, not only safari)
  • as in javascript/jquery

So, any sugggestions, please?

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad