5个你不知道的CSS功能

由卡米雷特 · 发布日期 2019年11月6日 · 已更新 2019年11月6日

在过去很长一段时间里，CSS并没有什么令人惊讶的功能。CSS这个语言是用来管理页面上的排版和样式的，尽管它一直保持着较为缓慢的开发速度，但如今已经像JavaScript一样有了越来越强大功能。

尤其是在近年，由于W3C工作对“现代化开发”这一目标的推进，CSS实现了自己的文艺复兴。如今CSS不仅仍然是那个可以给你带来交互式排版、像素级控制的语言，还更加智能化，帮助你更容易地实现新功能。

我们今天要讲的就是其中的5个，这些内容是从CSS项目组的专家Jen Simmons的讲座里摘取的，如果你有兴趣可以观看完整的讲座内容（英文，无字幕）：

优酷视频： https://v.youku.com/v_show/id_XNDA3NzU3OTM1Mg==.html
嵌入式视频暂不可用，抱歉！
可在国外搜索引擎搜索：Jen Simmons – Everything You Know About Web Design Just Changed

尽管在之前，CSS也具有创造网格的能力，但如今这一能力被进一步进化，并且非常智能。现在，你可以创建“初始网格”，然后进行应用，被应用的网格部分会按照网格排版，而未被应用的部分则会自动不做生成。

举例来说，我们要创造一个12列的网格作为核心排版参照，那么应该怎么做呢？我们只要预设一个分割网格的属性，就可以告诉浏览器接下来怎样分割：

.example-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

在过去，我们使用float的方法来创建网格，已经比html的table标签要好了不少。而如今，新方法让这一工作小菜一碟。在这个网格基础上，如果你希望一个div出现在网格中心，左右两侧留下空间，只需要类似这样的代码：

.example-div {
  grid-column: 3 / 11;
}

这种方式展示了如今的CSS网格有多么智能。仅仅两行代码，就可以说清楚元素占据多大空间，两边留出多少空隙，并且生命了对网格单元格（虽然并不实际存在这样的单元格）的合并。在完成了所有布局之后，CSS会自动判断哪些单元格是被用到的，然后保留你所用到的最大数量，将其它的自动略去。

很多人对这个新的CSS网格技术持批判态度，他们认为这就是旧的HTML排版方式，只不过换上了CSS的皮囊而已。

而其实而这完全不同。使用HTML的table标签创建表格来进行网站排版，那是互联网的黑暗的过去，而如今的CSS网格则是更扁平灵活的东西。比如，如果希望相邻的两个单元格内的内容超出单元格相互重叠，在过去需要至少2个参数来控制，而如今则变得非常简单。

另外，CSS网格是可响应式的，而HTML的网格是固定排版。在新的CSS网格中，你可以使用参数来控制在不同分辨率下，CSS网格中的内容如何做出响应。

在HTML王哥里，如果你设定好了基本的网格，想在某一个模块中进行进一步分割，那么可以在里面创建一个新的网格。尽管这种做法是可行的，但新的网格和旧的网格几乎没有任何关系。它无法继承旧网格的行列设置，尤其是无法进行对其，这让排版变得很困难，而且在分辨率不合适的情况下这种嵌套网格的排版可能会显得很糟糕。

而在CSS网格中加入了对子网格的支持，子网格默认继承父网格的属性，帮助你在不需要提高父网格精度的情况下，创建出更灵活的局部排版。

现代网页是理性、轻量而易用的，这意味着在同一个网页中，使用多种字体是一种不受欢迎的行为。而新的CSS可以很有效地实现对字体的管理，即便是单一字体，也可以方便地控制字重、字间距和具体属性。这意味着，你可以通过CSS来调用一个字体下庞大的字族，使用甚至单一的字体来创造丰富的效果。

CSS还有一个鲜为人知的能力，那就是对字体排版的控制。比如，有些字体是从右往左写的，如果你想实现这样的效果，可以简单地加入属性direction:rtl来实现。

另外，有时候我们会希望字体是竖着进行排版的，那么我们只需要这样的属性：writing-mode: vertical-rl（在竖着排版从右往左写的时候）或writing-mode: vertical-lr（在竖着排版从左往右写的时候）。

多种文字排版属性，可以让你创造出灵活而有创意的排版，非常值得一试。