2013 CSS 愿望清单

我对 CSS 非常满意。我知道人们经常抱怨 CSS，以及它最初并非旨在像我们现在这样构建网页，它不适合许多任务等等。但我不确定。我每天都在使用它，我感觉它做得非常好。也许我没有那些可以预见存在更完美语言的替代宇宙的奇思妙想。或者其他什么。

正如 Hakim 所说

考虑到 CSS 是用来为文本文档设置样式的，我们今天可以用它做的事情真是令人印象深刻。

— Hakim El Hattab (@hakimel) 2013年1月24日

那么 2013 年对 CSS 意味着什么？Tab Atkins 直接参与 CSS 规范的工作，并 概述了他自己的计划。在我看来，这听起来都是好东西。我特别喜欢专注于 flexbox 和 grid。这些将提供非常强大的布局工具，只要网络是 2D 的，它们就会为我们服务。以及对原生 @extend 的关注，这将是惊人的。

老实说，我比自己更相信 Tab 对 CSS 如何需要演变的直觉，因为他非常参与其中，并且有系统思维。你不能仅仅满足任何作者告诉你的他们想要的所有东西，否则你最终会一团糟。现在，话虽如此，作为一个作者，这里有一些我想让他们加进去的东西。

1. 我希望能够根据元素是否包含另一个特定选择器来选择元素

例如，如果块引用包含段落，则选择它。

blockquote::contains("p") {
  /* Not like this, since it's not a pseudo element, but something like it */
}

我觉得这种情况总是出现，而且看起来很奇怪它是不可能的。这与我仍然想要的父选择器类似，并且是一个完整的 麻烦事。

2. 我希望能够根据元素包含的内容来选择元素

内容，字面意思是文本内容，无论它是否在另一个元素中。例如

h1::match-string("coyier") {
  /* Not this again, since it's not a pseudo element, but something like it */
}

我觉得如果我想的话，我应该能够定位包含我名字的元素。或者想象一个像 Twitter 这样的网站。如果您愿意，您可以以某种方式设置包含某个特定单词的推文的样式。或者搜索结果。

3. 我想要多个伪元素

就像

.speech-bubble::before(2) {
  /* Or ::before::before or something, smart people can decide */
}

正如我们在这里讨论的那样，这是一个好主意。Web Components/Shadow DOM 很酷，但对于像仅仅需要一个额外的无意义元素来完成一些视觉设计细节这样简单的事情来说，它过于复杂了。

4. 我希望能够将某个元素的动画/过渡设置为 height: auto;

就像

.flash-message {
  height: 0;
  opacity: 0;
  transition: all 0.2s ease;
}
.flash-message.loaded {
  height: auto;  /* nope */
  opacity: 1;    /* yep */
}

浏览器能够知道一个元素的高度，如果它上面有 height: auto;（而不是它当前具有的任何内容），对吧？所以算出它并动画到该值。

5. 我想要 Sass 中的一些好东西

按其酷炫程度排序

1. @extend – 即此选择器继承此选择器的内容
2. @mixin / @include – 即可重用/可更改的代码块
3. 嵌套 – 即 .module { background: black; h2 { color: white; } }

我会在循环等将 CSS 扩展到编程领域并且难以阅读的事情上划清界限。我甚至不怎么喜欢变量成为原生属性，尽管我认为现在已经太晚了。如果颜色函数可以通过简单、明显、易读的方式实现，那将是很棒的。

6. 我想要 ::nth-letter、::nth-word 等

::nth-everything，真的。字母、单词、行，以及它们的所有同类选择器。用于像这样的花哨的东西

article.poem p:first-child::nth-line(-n+2) {
  font-variant-caps: small-caps;
  color: red;
}

我明白这里最大的障碍是语言。例如，在某些语言中，一个字符代表一个完整的单词，这使这些概念变得模糊。在我看来，这些是可以克服的事情。

最大的愿望……

将是所有主要浏览器（包括移动浏览器）都内置了花哨的自动更新功能，可以在没有任何用户干预的情况下升级浏览器。就像 Google Chrome 桌面版一样。五年后，如果我们不再谈论浏览器版本，那将是美好的。我们只用名称来称呼它们，因为显然所有使用它们的人都在使用最新版本。