如何使用纯CSS鉴别是不是Safari浏览器
内容提要
本文介绍了使用CSS的@supports规则和伪类、伪元素来识别Safari浏览器的方法，并附带了作者的碎碎念。
延伸解读
识别 Safari 的实用价值
文章指出 Safari 存在拖拽元素残影等特定问题，因此需要专门针对 Safari 进行 CSS 处理。使用 @supports 规则可以检测浏览器对特定 CSS 特性的支持情况，从而区分 Safari 与其他浏览器。这为开发者提供了一种纯 CSS 的解决方案，无需依赖 JavaScript 即可实现浏览器差异化样式。
方法稳定性与风险提示
文章列举了多种识别方法，但强调部分方法存在风险。例如，使用 @supports not (scrollbar-gutter: none) 识别 Safari 并不安全，因为未来 Safari 可能支持该属性导致失效。而 @supports (-webkit-touch-callout: none) 则能稳定匹配 iOS Safari。开发者应优先选择特性稳定、不易随版本更新而失效的方法。
伪类与伪元素的补充手段
除了 @supports 规则，文章还提到可以使用伪类和伪元素来鉴别 Safari，例如 @supports selector(::-webkit-details-marker)。这类选择器检测同样基于 @supports，但针对的是 Safari 私有的伪元素。作者表示还有其他私有伪类伪元素，但未一一记录，建议开发者平时注意积累。
Q&A
如何使用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的安全性较高，尤其是针对特定特性的判断。
