即时通讯试图找到一个css黑客只是safari NOT chrome,我知道这些都是webkit浏览器但我在chrome和safari中遇到div对齐问题,每个都显示不同.
我一直试图使用它,但它也影响铬,
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有没有人知道另一个只适用于野生动物园的吗？
Jef*_*ton 314
注意:过滤器和编译器(例如SASS引擎)需要标准的"跨浏览器"代码 - 不是像这样的CSS黑客,这意味着他们将重写,销毁或删除黑客,因为这不是黑客的行为.这是非标准代码,经过精心设计,仅针对单个浏览器版本,如果更改则无法工作.如果您希望将它与那些一起使用,您必须在任何过滤器或编译器之后加载您选择的CSS hack.这可能看起来像一个给定的但是在那些没有意识到他们通过运行这种不是为此目的而设计的软件来破解黑客的人之间存在很多混淆.
自6.1版以来,Safari已经发生了变化,许多人已经注意到了
请注意:如果您在iOS上使用Chrome [现在也使用Firefox](至少在iOS版本6.1及更高版本中),您想知道为什么没有任何黑客似乎将Chrome与Safari分离,这是因为iOS版本的Chrome正在使用Safari引擎.它使用Safari hacks而不是Chrome.更多相关信息:https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
另外:如果您已经尝试了一个或多个黑客并且无法让它们工作,请发布示例代码(更好的是测试页) - 您正在尝试的黑客,以及您使用的浏览器(确切版本!)正在使用您正在使用的设备.没有这些额外信息,我或其他任何人都无法为您提供帮助.
通常它是一个简单的修复或缺少分号.使用CSS通常是样式表中列出代码的顺序或问题,如果不是CSS错误.请在测试网站上测试黑客攻击.如果它在那里工作,这意味着黑客确实适用于您的设置,但它是需要解决的其他东西.这里的人真的很乐意帮助,或者至少指出你正确的方向.
测试地点:
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
和镜子!
https://browserstrangeness.github.io/css_hacks.html#webkit
Firefox for iOS于2015年秋季发布,它也响应了Safari Hacks,但没有一款与iOS Chrome相同.
这里的方法是黑客,你可以使用更新版本的Safari.
您应首先尝试这个,因为它涵盖了当前的Safari版本,并且仅限纯Safari:
这个仍适用于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+ */
@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月下旬更新)
这个hack我通过组合多个其他hack来创建了数月的测试和实验.
注意:如上所述,双媒体查询并非偶然 - 它排除了许多无法处理媒体查询嵌套的旧浏览器. - 其中一个'和'之后缺少的空间也很重要.毕竟,这是一个黑客......而且是唯一适用于6.1和所有新版Safari的版本.另请注意,如下面的评论所列,黑客是非标准的CSS,必须在过滤器后应用.诸如SASS引擎之类的过滤器将重写/撤消或完全删除它.
如上所述,请检查我的测试页面,看它是否按原样运行(无需修改!)
以下是代码:
/* 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 CSS,请继续阅读以下内容.
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
稍微修改适用于10.1(仅限):
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
一个用于Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 10.0(非iOS设备):
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 CSS Hacks:
一个用于Safari 9.0及以上版本:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
和支持功能查询:
/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
一个用于Safari 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9现在包含功能检测,所以我们现在可以使用它...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
现在只针对iOS设备.如上所述,由于iOS上的Chrome已植根于Safari,因此当然也会遇到这种情况.
/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
一个用于Safari 9.0+而不是iOS设备:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
一个用于Safari 9.0-10.0但不适用于iOS设备:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
以下是分离6.1-7.0和7.1+的黑客攻击.这些也需要多个黑客的组合才能获得正确的结果:
/* 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;
);}
}
由于我已经指出了阻止iOS设备的方法,这里是针对非iOS设备的Safari 6.1+ hack的修改版本:
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
要使用它们:
<div class="safari_only">This text will be Blue in Safari</div>
通常[就像在这个问题中]人们询问Safari黑客的原因主要是指将它与谷歌Chrome分开(再次不是iOS!)发布备选方案可能很重要:如何将Chrome与Safari分开定位,所以如果需要,我会在这里为您提供.
以下是基础知识,再次查看我的测试页面,了解Chrome的许多特定版本,但这些内容涵盖了Chrome.Chrome版本为45,Dev和Canary版本目前版本为47.
我在浏览器上放置的旧媒体查询组合仍适用于Chrome 29+:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
@supports功能查询适用于Chrome 29+以及...我们用于Chrome 28+以下版本的修改版本.Safari 9,即将推出的Firefox浏览器和Microsoft Edge浏览器都没有使用这个浏览器:
/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
以前,Chrome 28和更新版本很容易定位.这是我发给浏览器的一个看到它包含在其他CSS代码块(最初不打算作为CSS黑客)并且意识到它做了什么,所以我为我们的目的提取了相关部分:
[注意:]现在,下面这个较旧的方法会在没有上述更新的情况下对Safari 9和Microsoft Edge浏览器进行设置.即将推出的Firefox和Microsoft Edge版本在其编程中增加了对多个-webkit-CSS代码的支持,Edge和Safari 9都增加了对@supports特征检测的支持.Chrome和Firefox之前包括@supports.
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
Chrome版本22-28(如果需要支持旧版本)的块也可以在我上面发布的我的Safari组合黑客上扭曲:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
与上面的Safari CSS格式化黑客一样,这些可以使用如下:
<div class="chrome_only">This text will be Blue in Chrome</div>
所以你不必在这篇文章中搜索它,这里是我的实时测试页面:
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
[或镜子]
https://browserstrangeness.github.io/css_hacks.html#webkit
测试页面还包含许多其他内容,特别是基于版本的版本,可进一步帮助您区分Chrome和Safari,以及针对Firefox,Microsoft Edge和Internet Explorer Web浏览器的许多黑客攻击.
注意:如果某些内容对您不起作用,请首先检查测试页,但提供示例代码以及您试图让任何人帮助您的黑客攻击.
小智 85
有一种方法可以从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;
}
}
Sab*_*ati 18
适用于 iOS 16 和 macOS Ventura：
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}
小智 17
只有萨拉里
.yourClass:not(:root:root){
/* ^_^ */
}
Vek*_*881 13
这个黑客100%仅适用于野生动物园.我刚刚成功测试了它.
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
小智 10
当使用这个仅限 Safari 的过滤器时，我可以定位 Safari（iOS 和 Mac），但排除 Chrome（和其他浏览器）：
@supports (-webkit-backdrop-filter: blur(1px)) {
.safari-only {
background-color: rgb(76,80,84);
}
}
对于那些想要为Safari 7.0及更低版本实现黑客攻击而不是7.1及以上版本的用户 - 请使用:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
小智 5
我喜欢使用以下方法：
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">')
};
| 归档时间： |
|
| 查看次数： |
312941 次 |
| 最近记录： |