gpt4 book ai didi

仅适用于 Safari 的 CSS hack

转载 作者:行者123 更新时间:2023-12-04 17:20:38 32 4
gpt4 key购买 nike

我正在解决一项任务,我需要创建一段仅适用于 Safari 的 CSS,而不适用于其他 WebKit 浏览器(不得适用于 Chrome,例如)。拜托,有人可以提出一些想法吗?

最佳答案

由于网络开发的变化而更新信息,因为这个被问及 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 hack 在这篇文章中实际上是新的,我希望人们觉得它很方便。这意味着我经过数小时的测试和准备自己制作了这些,所以虽然您可能已经看到其中看起来很熟悉的部分,但这并不是从任何站点以这种形式复制的,而是由我个人修改以实现这一结果。在发布本文时,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 浏览器的 hacks:

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

关于仅适用于 Safari 的 CSS hack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2860745/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com