我试图找到一种方法来应用CSS只是Safari，但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器，但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个，但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
当前回答
当使用这个Safari专用过滤器时，我可以针对Safari (iOS和Mac)，但排除Chrome(和其他浏览器):
@supports (-webkit-backdrop-filter: blur(1px)) {
.safari-only {
background-color: rgb(76,80,84);
}
}
其他回答
第一步:使用https://modernizr.com/
第二步:使用html类.regions只选择Safari
a { color: blue; }
html.regions a { color: green; }
Modernizr将根据当前浏览器支持的内容向DOM添加html类。Safari支持区域http://caniuse.com/#feat=css-regions，而其他浏览器不支持。这种方法在选择不同版本的IE时也非常有效。原力与你同在
有一种方法可以从Chrome中过滤Safari 5+:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}
}
您可以使用媒体查询hack从其他浏览器中选择Safari 6.1-7.0。
@media \\0 screen {}
免责声明:此攻击也针对旧Chrome版本(2013年7月之前)。
适用于iOS 16和macOS Ventura:
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}
注意:如果只支持ios就足够了(如果你愿意牺牲Safari桌面)，那么这是可行的:
@supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
