仅适用于Safari的CSS hack [英] CSS hack for Safari ONLY
问题描述
我正在解决一个任务，我需要创建一段CSS，该CSS仅适用于Safari，而不适用于其他WebKit浏览器(必须不适用于Chrome等).拜托，任何人都可以提出一些想法吗?
自从有人问及HTML5成为新标准以来，由于Web开发的变化，更新了信息:
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 hack.一个用于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和8平台上经过测试)，由于Chrome使用内置的Safari引擎，因此会呈现为Safari.从我所看到的来看，它根本不是"Chrome"，而是具有不同外观的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
I'm solving one task and I need to create a piece of CSS what would apply only in Safari, NOT the other WebKit browser (mustn't apply in Chrome, f.e.). Please, could anyone toss in some ideas?
Updated info due to changes in web development since this was asked and HTML5 has become the new standard:
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
These worked great for Safari 2-3 but not newer safari versions which came later. They also required a more descriptive doctype/html spec. Here is the previous standard:
<!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 removes this however with the plain and rather basic:
<!DOCTYPE html>
<html>
Other ways to target only Safari, and not Chrome/Opera, and works in HTML5:
This one still works properly with Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
To cover more versions, 6.1 and up, at this time you have to use the next pair of css hacks. The one for 6.1-10.0 to go with one that handles 10.1 and up.
So then -- here is one I worked out for Safari 10.1+:
The double media query is important here, don't remove it.
/* 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;
}
}}
Try this one if SCSS or other tool set has trouble with the nested media query:
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
This next one works for 6.1-10.0 but not 10.1 (Late March 2017 update)
<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>
These combination css hacks are actually new as of this posting, I hope people find it handy. Meaning that I crafted these myself with many hours of testing and preparation so while you may have seen parts of them that look familiar out there, this was not copied from any site in this form but modified personally by myself to achieve this result. At the time of this posting Safari is in version 8 and Chrome is in version 37.
Please be aware that if you are using an iOS device, (tested on iOS 7 & 8 platforms) Chrome renders as Safari since it uses the built-in Safari engine. It is not 'Chrome' at all from what I can see, but Safari with a different look. Chrome hacks do not affect it, only the Safari ones. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
And to see it work:
<div class="safari_only">
Only Safari shows up in blue on gray here.
</div>
Live test page for this and many more CSS browser-specific hacks I have worked on:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari OR https://browserstrangeness.github.io/css_hacks.html#safari
这篇关于仅适用于Safari的CSS hack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
