如何使用 CSS Hacks 只设置 Safari 的样式?
仅针对 Safari 的 CSS 黑客
为什么要为 Safari 单独设置样式?
CSS 黑客通常用于针对特定目标用于样式目的的浏览器。在这种情况下,我们的目标是仅将样式应用于 Safari,不包括 Chrome 等其他浏览器。
当前黑客的无效性
正如原始帖子中提到的, @media screen 和 (-webkit-min-device-pixel-ratio:0) 黑客攻击已经影响了 Safari 和Chrome。
Safari 的更新解决方案
但是,这里有一些新的 CSS hack,专门针对Safari:
/* Safari 7.1+ */ _::-webkit-full-page-media, _:future, :root .safari_only { color:#0000FF; background-color:#CCCCCC; }
/* Safari 10.1+ */ @media not all and (min-resolution:.001dpcm) { @media { .safari_only { color:#0000FF; background-color:#CCCCCC; } }}
/ 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 中的元素,请使用 safari_only 类,例如this:
<div class="safari_only">This text will be blue in Safari</div>
注意:
在实现这些 hack 时使用自定义类名至关重要,以避免出现意想不到的后果。此外,请注意,这些 hack 可能并非在所有情况下都有效,特别是当网站使用 CSS 过滤器或编译器时,因为它们可能会改变或删除 hack。
以上是如何使用 CSS Hacks 只设置 Safari 的样式?的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...

在元素个数不固定的情况下如何通过CSS选择第一个指定类名的子元素在处理HTML结构时,常常会遇到元素个数不�...
