Question

我正在解决一个任务，我需要创建一个仅适用于Safari的CSS，而不是其他WebKit浏览器（不能在Chrome中应用，等等）。拜托，有人可以投入一些想法吗？

Answer 1

由于Web开发的变化而更新了信息，因为这被要求并且HTML5已成为新标准：

html[xmlns*=""] body:last-child #widget { background:#f00; }

html[xmlns*=""]:root #widget  { background:#f00;  }

这些适用于Safari 2-3，但不适用于后来的较新的Safari版本。他们还需要更具描述性的doctype / html规范。这是以前的标准：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5删除了这个，但使用简单而基本的：

<!DOCTYPE html>
<html>

仅定位Safari的其他方式，而不是Chrome / Opera，并且可以在HTML5中使用：

这个仍适用于Safari 10.1：

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

要涵盖更多版本，6.1及更高版本，此时你必须使用下一对css hacks。 6.1-10.0用于处理10.1及以上版本的那个。

那么 - 这是我为Safari 10.1 +制作的一个：

此处双重媒体查询非常重要，请勿将其删除。

/* Safari 10.1+ (which is the latest version of Safari at this time) */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

如果SCSS或其他工具集在嵌套媒体查询中遇到问题，请尝试使用此方法：

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

下一个适用于6.1-10.0但不适用于10.1（2017年3月下旬更新）

<style type="text/css">

/* Safari 6.1-10.0 [not 10.1+] */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media
{
    .safari_only { 
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}}

/* Safari 6.1-7.0 */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{  
   .safari_only {(;
      color:#0000FF; 
      background-color:#CCCCCC; 
    );}
}

</style>

这些组合css hacks实际上是新发布的，我希望人们觉得它很方便。这意味着我自己制作了很多小时的测试和准备工作，所以当你看到那些看起来很熟悉的部分时，这并没有从这个形式的任何网站复制，而是由我自己修改以实现这个结果。在此发布时，Safari版本为8，Chrome版本为版本37.

请注意，如果您使用的是iOS设备（在iOS 7＆amp; 8平台上测试过），Chrome会将其渲染为Safari，因为它使用内置的Safari引擎。它不是Chrome＆＃39;从我所能看到的一切，但Safari具有不同的外观。 Chrome黑客不会影响它，只会影响Safari。更多相关信息：http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

看到它有效：

<div class="safari_only">
   Only Safari shows up in blue on gray here.
</div>

此测试的实时测试页面以及我参与过的更多CSS浏览器特定的黑客攻击：

https://browserstrangeness.bitbucket.io/css_hacks.html#safari或https://browserstrangeness.github.io/css_hacks.html#safari

Answer 2

changing that particular property javascript that verifies what browser you're on可能是最好的。

否则其他一个问题指向this。它允许您在每个浏览器的基础上指定CSS属性，也可以使用javascript。

Answer 3

其中一项应该有效：

html[xmlns*=""] body:last-child #widget { background:#f00; }

html[xmlns*=""]:root #widget  { background:#f00;  }

只修改Safari的CSS攻击

3 个答案: