如何使用纯CSS鉴别是不是Safari浏览器
💡
原文中文，约2200字，阅读约需6分钟。
📝
内容提要
本文介绍了使用CSS的@supports规则和伪类、伪元素来识别Safari浏览器的方法，并附带了作者的碎碎念。
🎯
关键要点
- Safari浏览器存在特定问题，尤其在拖拽元素时出现残影。
- 缺乏专门匹配Safari的CSS资料，作者决定自己总结。
- 使用@supports规则可以识别Safari浏览器的特性。
- @supports not (background: paint(xxx))可以安全匹配iOS Safari。
- 使用@supports (image-rendering: optimizeSpeed)可以匹配Safari和Firefox。
- 不建议使用@supports not (scrollbar-gutter: none)来识别Safari，因为未来可能失效。
- 使用@supports (-webkit-touch-callout: none)可以专门针对iOS Safari。
- 使用私有函数@supports (background: -webkit-named-image(1))可以识别Safari。
- 伪类和伪元素也可以用于Safari的判断，例如@supports selector(::-webkit-details-marker)。
- 文章包含作者的个人碎碎念，涉及生活琐事和对动画的感想。
❓
延伸问答
如何使用CSS判断是否为Safari浏览器？
可以使用@supports规则来判断，例如@supports not (background: paint(xxx))可以安全匹配iOS Safari。
哪些CSS特性可以用来识别Safari浏览器？
可以使用特性如@supports (-webkit-touch-callout: none)专门针对iOS Safari，或@supports (image-rendering: optimizeSpeed)匹配Safari和Firefox。
为什么不建议使用某些方法来识别Safari？
例如，@supports not (scrollbar-gutter: none)可能在未来失效，因此不建议使用。
如何使用伪类和伪元素来判断Safari？
可以使用@supports selector(::-webkit-details-marker)来判断是否为Safari浏览器。
Safari浏览器在拖拽元素时会出现什么问题？
Safari浏览器在拖拽元素时可能会出现奇怪的残影问题。
使用@supports规则识别Safari的安全性如何？
使用@supports规则识别Safari的安全性较高，尤其是针对特定特性的判断。
➡️
