CSS 仅针对 Safari 8答案

【问题标题】：CSS target Safari 8 onlyCSS 仅针对 Safari 8
【发布时间】：2016-01-22 09:35:44
【问题描述】：

当我对我的网络进行一些优化时，我在 Safari 上遇到了一些问题。

我有一些 CSS 命令在 Safari 8 上被破坏（可能不受支持？）、Safari 9 和所有其他浏览器都可以。

我想修复 safari 8 的代码，而不用破坏和重建我的代码，使用不同的（而且更复杂的）结构来实现相同的输出。

所以：这是一种定位的方法！只有！ Safari 版本 8？

目标可以是任意的-

作为 html 中的注释，例如“if IE7”的旧 cmets
以某种方式在 CSS 中（但 -webkit 针对所有 webkit 浏览器，不仅仅是 safari）
如在 javascript/jquery 中

那么，有什么建议吗？

【问题讨论】：

老实说，这听起来像是一个失败的事业。更好的办法是针对问题并找出 Safari 不喜欢它的原因，并为不支持某项功能的浏览器提供后备方案（如果这是问题所在）。
它实际上是唯一的 CSS 命令 transform: translate(0,50%); ... 在所有常见的浏览器（firefox、ie11+、opera、chrome）上都能完美运行。在 safari 7 及以下版本中，我的页面根本无法工作，似乎在加载处理我的 JS 和 CSS 文件时出现问题，但没关系...... SAFARI 8 几乎一切都很好，除了我用来制作的这个转换一些定位要简单得多，然后是 SAFARI 9，一切正常。即使只有极少数的人在这里使用苹果，我想添加对 Safari8 的支持，但它是唯一的浏览器，这个命令有问题...... :(

标签： javascript jquery html css safari

【解决方案1】：

您可以使用浏览器检测并向body 添加或不添加（取决于浏览器）类（例如<body class="is-safari-8">）。在您的 CSS 中，您可以设置仅适用于 .is-safari-8 及其后代的特定规则。

浏览器检测本身可以在服务器端或客户端完成。虽然服务器端可能更可取，但我假设您打算在客户端进行。为此，您可以使用一个库（您应该通过快速 google 搜索找到几个库，但由于您只在寻找一个特定案例，这可能有点过头了）或编写您自己的脚本来检查用户代理。

这里有一个有用的资源，可以帮助您入门： https://developer.mozilla.org/en/docs/Web/API/Navigator

附注：用户代理可以被伪造（但这在这里可能不是问题）。

更重要的是：您可能想查找https://modernizr.com/。这是一个特征检测脚本。它可能让您以更灵活的方式解决问题。

【讨论】：

【解决方案2】：

有很多不同的方法可以解决这个问题。如果要注入样式表，可以使用以下代码：

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);
}

如果是我的页面，我会编写代码在 Safari 上优雅降级。

【讨论】：

这似乎是触发并将 CSS 添加到所有浏览器。它是开箱即用还是我错过了什么？
它应该是“开箱即用”的，您可能需要检查 ua 字符串。在生产环境中，第四行的 ua 将被替换为 navigator.userAgent。