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-

  • 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?

Answers


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.


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.


Need Your Help

WPF Toolkit's DataGrid sort, change reflect to the data source?

datagrid wpftoolkit

When I sort one of the columns (click the header column) in DataGrid, does the change on UI (the row order) reflected back to the data source ? I use List object as source.

debugging not working in javaScript code, in asp .net MVC4 application

javascript asp.net-mvc-4 debugging visual-studio-debugging script-debugging

I am building an application in asp .net MVC4 and I face a problem while debugging javaScript code, and I found this error on my breakpoint,