如何使用纯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)。
- 文章包含作者的个人碎碎念，涉及生活琐事和对动画的感想。
➡️
