理解CSS嵌套及其兼容性挑战
css嵌套（css nesting）是一项激动人心的新特性，它允许开发者将相关的css规则嵌套在彼此内部，从而提高代码的可读性和组织性，类似于sass或less等css预处理器。例如，你可以在一个父选择器内部直接定义其子元素的样式，而无需重复父选择器。
然而，作为一项相对较新的W3C提案，CSS嵌套的浏览器支持度尚未普及。尽管现代的基于Chromium的浏览器（如Chrome、Edge）已经较早地实现了支持，但包括Safari和Firefox在内的其他浏览器，尤其是一些旧版本，可能尚未完全支持或仅在最新技术预览版中提供支持。当浏览器遇到不支持的CSS语法时，它通常会忽略这些规则，导致样式不生效，这正是SVG动画在Safari中不显示的核心原因。
问题示例：SVG动画失效的CSS嵌套代码
考虑一个常见的SVG动画场景：一个带勾选效果的圆形动画。以下是原始的HTML、CSS和JavaScript代码片段，它在Chrome浏览器中运行良好，但在Safari中SVG元素可能完全不显示或动画失效：
HTML结构:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<svg id="checkmark-svg" class="run-animation svg-check" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.3 193.3">
<circle class="cls-1 circle" cx="96.65" cy="96.65" r="94.15"/>
<polyline class="cls-1 checkmark" points="46.9 101.4 76.9 131.4 146.4 61.9"/>
</svg>JavaScript (用于动画重置):
立即学习“前端免费学习笔记（深入）”；
$('#checkmark-svg').on('click', function(){
svg = $(this);
svg.removeClass('run-animation').width(); // 强制重绘以重置动画
svg.addClass('run-animation');
return false;
});原始CSS (包含嵌套):
.cls-1{
fill:none;
stroke:#231f20;
stroke-miterlimit:10;
stroke-width:5px;
}
.svg-check {
position: inherit;
}
svg {
margin: auto;
width: 50px;
height: 50px;
display: block;
.cls-1 { /* 嵌套规则 */
stroke: #2d77e3;
}
}
.circle {
stroke-dasharray: 700;
stroke-dashoffset: 700;
}
.checkmark {
stroke-dasharray: 150;
stroke-dashoffset: 150;
}
.run-animation {
.circle { /* 嵌套规则 */
animation: 2.5s circleDraw forwards;
}
.checkmark { /* 嵌套规则 */
animation: 0.75s checkmarkDraw forwards;
animation-delay: 1s;
}
}
@keyframes circleDraw {
from {
stroke-dashoffset: 700;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes checkmarkDraw {
from {
stroke-dashoffset: 150;
}
to {
stroke-dashoffset: 0;
}
}在上述CSS代码中，有几处使用了CSS嵌套，例如svg .cls-1、.run-animation .circle和.run-animation .checkmark。这些嵌套规则在不支持CSS嵌套的浏览器中会被直接忽略，导致SVG元素的部分样式（如描边颜色）和动画属性无法应用，从而使动画失效或SVG不显示。
解决方案：解除CSS嵌套以提升兼容性
解决此问题的最直接和最有效方法是将所有嵌套的CSS规则重构为传统的、扁平化的选择器语法。这意味着每个选择器都将独立声明，而不是嵌套在父选择器内部。
以下是经过解除嵌套处理后的CSS代码：
重构后的CSS:
.cls-1 {
fill: none;
stroke: #231f20;
stroke-miterlimit: 10;
stroke-width: 5px;
}
.svg-check {
position: inherit;
}
svg {
margin: auto;
width: 50px;
height: 50px;
display: block;
}
/* 解除嵌套：将 'svg .cls-1' 独立声明 */
svg .cls-1 {
stroke: #2d77e3;
}
.circle {
stroke-dasharray: 700;
stroke-dashoffset: 700;
}
.checkmark {
stroke-dasharray: 150;
stroke-dashoffset: 150;
}
/* 解除嵌套：将 '.run-animation .circle' 独立声明 */
.run-animation .circle {
animation: 2.5s circleDraw forwards;
}
/* 解除嵌套：将 '.run-animation .checkmark' 独立声明 */
.run-animation .checkmark {
animation: 0.75s checkmarkDraw forwards;
animation-delay: 1s;
}
@keyframes circleDraw {
from {
stroke-dashoffset: 700;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes checkmarkDraw {
from {
stroke-dashoffset: 150;
}
to {
stroke-dashoffset: 0;
}
}通过将svg .cls-1、.run-animation .circle和.run-animation .checkmark等规则从嵌套结构中提取出来，并使用传统的后代选择器形式，我们确保了这些样式在所有主流浏览器中都能被正确解析和应用，包括Safari和Firefox。
完整的兼容性代码示例
以下是整合了HTML、JavaScript和解除嵌套后CSS的完整代码，确保了SVG动画在各种浏览器中的兼容性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Checkmark Animation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.cls-1 {
fill: none;
stroke: #231f20;
stroke-miterlimit: 10;
stroke-width: 5px;
}
.svg-check {
position: inherit;
}
svg {
margin: auto;
width: 100px; /* 稍微放大以便观察 */
height: 100px;
display: block;
cursor: pointer; /* 添加点击指示 */
}
/* 解除嵌套 */
svg .cls-1 {
stroke: #2d77e3;
}
.circle {
stroke-dasharray: 700;
stroke-dashoffset: 700;
}
.checkmark {
stroke-dasharray: 150;
stroke-dashoffset: 150;
}
/* 解除嵌套 */
.run-animation .circle {
animation: 2.5s circleDraw forwards;
}
/* 解除嵌套 */
.run-animation .checkmark {
animation: 0.75s checkmarkDraw forwards;
animation-delay: 1s;
}
@keyframes circleDraw {
from {
stroke-dashoffset: 700;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes checkmarkDraw {
from {
stroke-dashoffset: 150;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg id="checkmark-svg" class="run-animation svg-check" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.3 193.3">
<circle class="cls-1 circle" cx="96.65" cy="96.65" r="94.15"/>
<polyline class="cls-1 checkmark" points="46.9 101.4 76.9 131.4 146.4 61.9"/>
</svg>
<script>
$(document).ready(function() {
$('#checkmark-svg').on('click', function() {
var svg = $(this);
// 移除类并强制重绘以重置动画
svg.removeClass('run-animation').width();
svg.addClass('run-animation');
return false;
});
});
</script>
</body>
</html>跨浏览器兼容性最佳实践
- 关注浏览器兼容性列表： 在使用任何新的CSS特性时，务必查阅caniuse.com等兼容性网站，了解其在主流浏览器中的支持情况。对于生产环境，应优先使用具有广泛支持的特性，或为不支持的浏览器提供回退方案。
- 构建工具预处理： 如果你确实想利用CSS嵌套的便利性，可以考虑在开发流程中引入构建工具，如PostCSS。配合postcss-nesting等插件，可以在编译时自动将嵌套的CSS规则转换为兼容性更好的扁平化CSS，从而兼顾开发效率和生产环境的兼容性。
-
特性检测（@supports）： CSS的@supports规则允许你检测浏览器是否支持特定的CSS特性。虽然它可以用来判断浏览器是否支持CSS嵌套，例如：
.elem::after { content: "您的浏览器不支持CSS嵌套"; color: red; } @supports (selector(&)) { /* 检测是否支持CSS嵌套 */ .elem::after { content: "您的浏览器支持CSS嵌套"; color: green; } }然而，对于像本教程中SVG动画失效的问题，仅仅检测支持性并不能直接解决问题，因为你仍然需要为不支持的浏览器提供一套完整的、非嵌套的CSS规则。因此，在这种场景下，直接解除嵌套通常是更实用的解决方案。
- 广泛测试： 在项目发布前，务必在不同的浏览器（Chrome, Firefox, Safari, Edge等）和不同设备（桌面、移动端）上进行充分的测试，以确保所有功能和样式都能按预期工作。
总结
SVG动画在Safari中不显示的问题，往往是由于使用了CSS嵌套这一尚未获得广泛支持的新特性所致。通过将嵌套的CSS规则重构为传统的、扁平化的选择器语法，可以有效解决这一兼容性问题，确保SVG动画在包括Safari在内的所有主流浏览器上稳定运行。在Web开发中，尤其是在生产环境中，开发者应始终关注CSS新特性的浏览器兼容性，并采取适当的策略（如解除嵌套、使用构建工具或提供回退方案）来保障用户体验和应用的稳定性。
