使用范围内CSS拯救一天-CSDN博客

今天的文章是由阿利McBlain （ @ArleyM ），伯灵顿安大略前端开发人员在Thrillworks 。

在过去的几年中，HTML5和CSS3震惊了我们的世界以及我们处理常见网站问题的方式。每隔几天，似乎就会出现一些新的有规律的代码段或方法，从而改变游戏规则。今天可能只是那些日子中的另一天。

HTML5的一项鲜为人知的功能是范围CSS。这是样式块的属性，它可能会改变我们将来解决某些样式挑战的方式。

更新：据我所知， <style scoped>已从规范中删除，甚至支持它的浏览器也将其删除。即使在我撰写此更新（2017年8月）时，范围样式仍可以说比以往任何时候都更受欢迎和更受欢迎。 Vue文件支持此概念，就像此处描述的那样，并且弹出了许多其他支持该概念的库。本机浏览器可能正在考虑将Shadow DOM替换为该想法。

作用域的实现很简单。让我们看一下本来没有样式的页面上的一些代码，其中所有文本均为默认黑色：

<div>
  <style scoped>
    h1 { color: FireBrick;   }
    p  { color: SaddleBrown; }
  </style>
  <h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
  <p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>

<p>This is another paragraph, that will unaffected by the scoped style and remain black.</p>

具有scoped属性的style块将覆盖通常在头部（无论是在样式块还是在链接的样式表中）中找到的全局样式，但只会覆盖同一父对象中的同级/后继元素。在此示例中，包装div内的所有内容都将获得一些新的标题和段落颜色。如w3.org所说： “如果存在scoped属性，则用户代理必须仅将指定的样式信息应用于样式元素的父元素（如果有）以及该元素的子节点。”

这真太了不起了！尽管页面上的所有其他文本可能都是黑色的，但在此div中，我们可以自由设置样式，而不必担心在我们网站上其他任何地方更改相似元素的样式。这可能是一个非常强大的工具。

为什么这很酷？

“但是Arley，”您使用连词开始说一句， “为什么不只在该div和样式上使用类或ID，例如#foo h1和#foo p ？ 这不只是有组织的内联样式吗？” 在某些情况下，我可以想到很多情况下范围CSS是不错的选择：

可能希望将特定交互元素CSS与HTML保持在一起。如果有问题的元素在站点上是唯一的（例如，像一个复杂的滑块），则使用全局样式缓存它没有任何好处。
但是，将CSS与HTML保持对组织的使用可能会有所帮助。
与团队合作时，这是允许同时开发站点的各个区域的好方法，而不必担心全局CSS的状态–我可以将其视为短期解决方案。
如果您的文章被其他网站汇总，则可以在其他网站上自定义样式，否则这些样式将无法在全局样式表中显示。
如果您在网站的评论部分中启用了标签，则可以使读者能够设置其样式……没关系，这可能是一个糟糕的主意。
适用于CSS未知且第三方样式中的第三方网站的小部件，该样式不应影响其他任何地方。尽管能够重置小部件中的样式是那场战斗的另一半。
最后（对我来说，最激动的是），范围CSS是在内容管理系统中工作的理想之选，在这些系统中，您对于向通用模板区域添加唯一标记或无法访问现有样式表的灵活性要差得多。

我想更详细地讨论CMS的优势。

使用CMS

当我们在CMS中构建站点时，我们正在构建约束以确保元素和模板的可重用性，以及维护整个站点的一致性。 CMS是一种完美的工具，可以让某人比您创建和管理内容的方式更省心，而不必担心会破坏任何网站组件。 CMS的局限性之一是无法对唯一区域进行一次性调整。

我在企业级CMS中遇到此问题。基于原始版本和网站范围，我们构建了CMS，以使其具有一致的统一外观。发布后的几个月，人们就对灵活性有了更大的需求：增加了第二种更加冗长的语言，并且特殊的广告活动给样式带来了新的挑战。

我的第一个挑战是制作更大的文字块（有趣的事实：在加拿大设计双语时，设计师的经验法则是，当设计需要使用法语时，应留出50％的额外空间！）。我看了看我的页面，看了看我的样式表：即使我做了任何微小的更改，也都意味着要在整个站点上进行数小时的测试和质量检查，以确保不会因此而破坏其他区域。后果是天文的！由于没有时间，我发明了穷人的Scoped CSS，即众所周知的“代码块”。从技术上讲，代码块只是将带有ID的div包装在内容周围，然后具有一个相邻的样式块以进行必要的更改（虽然听起来很简单，但对于CMS的工作来说，它是开箱即用的）。由于此CSS仅适用于此页面，因此使这些样式膨胀全局样式没有任何意义。它是完美的。样式块不会影响网站的任何其他区域。双语和竞选内容变得易于开发和测试。

幸运的是，与我的McGyvered解决方案相比，作用域CSS更加干净，易于实施。不需要特殊的ID，实际上，具有像“ p”这样非常简单的选择器的功能将使您CSS看起来非常干净。

实用

您是否曾经想以某种方式使您的信息流中的某个特定帖子脱颖而出？即使CMS不允许在编辑器中进行编码，但由于Scoped CSS，您仍然可以选择。

WordPress是CMS的一个示例，它将限制您可以在内容区域中输入的代码。 WordPress开箱即用，在所见即所得的编辑器中删除了很多标记，这实际上是一件非常非常好的事情，因为它将清除n00b用户可能意外引入的任何杂散代码。授予用户访问权限以将代码输入CMS的权限是授予他们访问权限以破坏站点！封闭的div标签过多将意味着布局完全枯燥！

通过一些前期工作，您可以创建“代码块”自定义字段，该字段将使您可以将作用域CSS直接注入该帖子中。如果您真的想花哨的话，可以使用“ 自定义字段模板”之类的插件中的功能，通过简单的形式进行样式选择，即使是最不精明的用户也可以轻松利用它！

在下面的WordPress演示中，我创建了一个“二十一十一儿童主题”（这意味着我完全依赖默认的WordPress模板，但我对这三个页面也做了一些小的调整）。我所做的更改很少而且很简单（我可能还应该提到，在撰写本文时，还需要考虑另一个小问题，但我会保存到以后）。为了使Scoped CSS正常工作，我仅向content.php和content-single.php添加一点逻辑，以查找自定义字段“ scopedcss”，然后将其弹出到样式块中。我只是将这段代码放在相关内容循环的<article>块中：

<?php 
  $scopedcss = get_post_meta($post->ID, 'scopedcss', false); 

  foreach($scopedcss as $css) {
    echo '<style scoped>'.$css.'</style>';
  } 
?>

然后，在我的WordPress帖子中，我仅添加了自定义字段“ scopedcss”，并写了我想要的任何样式。

注意：如果您对每个帖子的创作方向感兴趣，但还不准备使用范围样式，请查看此插件，该插件为您提供了声明样式的元框，但不会将它们限制范围需要与常规CSS一样具体。

一句警告

我自己对穷人的看法并不只是阳光和雏菊。这种方法和范围CSS的一个主要缺点是：组织变得非常困难–您到处都有样式！作用域CSS可以节省一天的时间，但是如果可以的话，您应该使用ID选择器和链接的样式表。

这是我们应避免使用内联样式的主要原因之一，它们太乱了，它们增加了一些可能应该缓存的内容，难以覆盖，使疑难解答复杂化，最重要的是，它们很难保持。像内联样式一样，作用域样式确实占有一席之地，并且可以成为强大的工具。明智地使用它们。

更大的警告

在没有适当的polyfill的情况下使用作用域样式很危险。在不支持它们的浏览器中， 您声明的样式将影响整个页面。 想象一下，您使用作用域内的样式在网站上的文章内的h1标题上使用了图像替换技术。您的徽标也是h1，因此该徽标也会在不支持的浏览器中替换。结果是反向层叠样式灾难。

只是被警告。范围样式是一个非常有用的想法，但是使用不带polyfill的样式的日子已经很遥远了。

jQuery解决方案

由于缺乏本机浏览器支持，如果不是Simon Madine制作的出色的jQuery Polyfill的话，今天的演示将是一个令人失望的演示。为了使我的演示在WordPress中工作，我还：

将jQuery放入我的WordPress主题中。
将以下代码添加到主题的页脚（主题文件夹中的footer.php）。

<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/jquery.scoped.js"></script>
<script>
  $.scoped();
</script>

想玩？

Chrome 20是撰写本文时唯一支持范围样式的浏览器。 Chrome 20目前位于Canary中，这是一个测试版，您可以与稳定的Chrome并存运行，而不会出现任何问题。要使用它，您需要启用一个标志，方法是：

转到URL chrome：// flags /
在搜索页面中搜索“范围”
点击“启用”

Chrome浏览器运行很快，因此自撰写本文起（2012年7月中旬）约有12周的时间，Chrome 20应保持稳定。是否启用该功能是另一回事（我们尚不知道）。

演示版

不久，Scoped CSS将在浏览器中完成您在这些演示中看到的所有惊人功能，而无需额外JavaScript。在此之前，您可以梦想，在w3.org上阅读有关内容，并查看以下演示：

Scoped CSS的正确实现的纯HTML演示（在撰写本文时不起作用）
一个简单HTML演示，实际上感谢jQuery
可行的WordPress演示

范围样式虽然提供了上述功能，但在W3C中提出的在Web组件中被证明非常强大，该组件是W3C提出的在下一代Web应用程序中定义可重用的小部件的建议。令人兴奋的东西。

翻译自: https://css-tricks.com/saving-the-day-with-scoped-css/