前沿动态 | 带你提早体验CSS将来的新特性

时间 2019-11-25

标签前沿动态提早体验 css 将来特性栏目 CSS 繁體版

原文原文链接

做者：Rachel Andrew

web开发，技术文章自由撰稿人和技术培训讲师；
Perch cms系统的联合创始人；
Notist、Smashing杂志的主编；
CSS工做组的特邀专家
我的博客：https://rachelandrew.co.uk/

【概要】

本篇文章，Rachel Andrew将会带着你们了解下浏览器在CSS方面的将来动向，例如Flexbox行和列布局支持gap间隙属性的标准。css

这是一件令网站开发人员十分振奋的事情。咱们将会领略将来CSS发展的全新属性和相关书写规范，其中一些已列入日程或在正在测试版本中进行使用，可是你将会很快在陆续的浏览器发布版本中看到它们。前端

Gutters(槽) for flexbox

CSS网格布局引入了 grid-column-gap, grid-row-gapl和grid-gapl 等属性，多列布局可使用 column-gap 属性，所以，从Grid和Multicol规范中删除这些属性并将它们放入Box（盒子模型） Alignment是有意义的。在Box Alignment中处理规范布局的方式和对齐的方式。所以相关属性的名称改为了column-gap, row-gap和gap应用于布局，好比flexbox布局方式。web

在撰写本文时，Firefox是目前惟一支持Flexbox这些新属性的浏览器，预计将在Firefox 63中版本中发布（在您阅读本文时应该可使用它）。可是我但愿其余浏览器也会效仿。这应该意味着您没必要使用margin属性在Flex内容元素之间控制间距，而是可使用网格布局的方式。编程

.flex{
display: flex:
flex-wrap: wrap
row-gap: 20px;
column-gap: 10px;
} 
复制代码

Logical properties and values(逻辑属性与值)

咱们的CSS属性和值传对应的是屏幕的物理属性。例如，咱们使用宽度和高度，并在元素的右上角，底部和左侧设置边距。在水平和从上到下的布局方式，这些物理属性看起来很奇怪。举个简单的例子，咱们能够考虑下面的一个盒子模型：
浏览器

.box{
height: 150 px
width: 250px
} 
复制代码

咱们的盒子在屏幕上高150像素，宽250像素。即便咱们将写入模式(writing-mode)更改成垂直模式。盒子将继续保持原先的物理属性，惟一的差异就是横着摆放或者竖着摆放。安全

咱们如今有了新的逻辑属性和值，使咱们可以调整元素大小或引用它们的边距，填充和边框，即便写入模式发生变化(writing-mode)。回到咱们上一个示例，咱们可能但愿咱们的box框始终具备250像素的长度，而无论方向如何。bash

这些新属性是在写入模式下(writing-mode)运行的方式——水平布局，在任何垂直书写模式下水平布局。而后咱们但愿它在块维度中具备150个像素的长度，经常使用在特定写入模式中显示例如文章段落的块状的显示方式。因此咱们能够按以下方式调整块咱们的BOX布局:微信

.box
{
block-size: 150px
inline-size: 250px 
} 
复制代码

该Box盒子模型在写入模式(writing-mode)下运行。目前Firefox浏览器支持这些逻辑值的新特性。app

Grid level 2 and subgrid

Subgrids——你可以在一个网格内部继续布局一个子网格，该子网格继承父网格的相关属性。布局

Grid(网格) level 2相关的规范正在制定中，主要增长了 subgrid（子网格）的新特性。

如今没有任何浏览器支持这些新属性，可是我相信并但愿这一天可以快点到来。

Initial letter——首字母下沉

Initial Letter——目前仅适用WebKit的浏览器，是一个解决常见问题的小功能。它能够建立一个大的首字母沉入其后的文本中，效果如上图。

这个CSS特性只有一个属性值：initial-letter，使用这个属性你须要加上webkit前缀，此属性接受两个参数值，第一个表示行高，第二个表示要跨越的行数，若是要实现上图效果，咱们能够这样写

h1+p: first-letter
{
font-weight: bold;
webkit-initial-letter: 43 3;
initial-letter: 43 3;
} 

复制代码

Variable fonts(可变字体)

若是您曾在设计中使用过Web字体，您须要明白这些问题 - 您的用户须要下载您须要使用的每种字体。对于大多数字体，您将须要常规字体，粗体和斜体版本。为了要表现字体的效果，您的用户要同时下载好几种字体。

Variable Fonts（可变字体）——无需多个文件就能经过编程方式让单一文件适应和生成自定义字体样式。 OpenType Font Variations 可变字体是由微软，谷歌，苹果和Adobe共同开发的技术，这个功能应用让咱们在网站上使用更丰富更漂亮的字体。

要使用可变字体，您须要使用支持该功能的字体，以及支持font-variation-settings属性的浏览器，现代浏览器中对这个属性的支持很是好。要了解可变字体的可行性。能够查看Axis Praxis网站（axis-praxis.org），您能够在线体验各类可变字体并复制用于您建立的可变字体的css。

要查找和测试可变字体，您能够访问 http://v-fonts. com。可变字体Twitter账户（http://twitter.com/variablefonts）值得关注以——发现新的字体版本和最新的动态新闻。

Scroll snapping（滚动捕捉）

CSS Scroll Snapping意味着您能够建立捕捉滚动点的界面。这让您很方便在网页上实现与移动应用程序类那样整页滑动效果（滑块效果），能够在页面之间进行捕捉。

Scroll snapping——方便您实现相似APP那样的整页滑动的效果。

下面的代码建立了一个项目列表，其中父项具备固定高度，溢出设置为滚动。我但愿项目在滑动到顶部进行捕捉。

在父元素上，咱们添加了属性scroll-snap-type，滚动的轴方向的值，而后是一个必需或接近的关键数值设置捕捉点，所以在使用它时应该当心您不会由于滚动捕捉而致使用户没法滚动到某些内容。

在项目上，咱们使用属性scroll-snap-align指定要捕捉到的位置（指定元素哪一部分应该与容器对齐）。它有三个值可选择：start、center和end。这些是相对于滚动方向的。若是是垂直滚动，start指的是元素的顶部边缘。若是是水平滚动条，它指的是左边缘。center和end遵循相同的原则。你能够为滚动条的不一样方向设置不一样的值，这两个值之间用空格分隔开。

ul
{
list-style: none;
border: 5px solid rgb(126, 63, 222);
border-radius: 5em;
height: 300px;
padding: 0;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
li
{
background-color: rgba(126, 63, 222,. 3);
padding: 40px 20px:
border-bottom: 1px solid rgb(126, 63, 222);
min-height: 150px;
scroll-snap-align: start;
}
复制代码

目前浏览器的支持状况

Media Queries Level 4

Media Queries Level 4规范为咱们提供了一些有趣的新方法来检测访问者正在使用的设备，以及一些有助于使Media Queries更简洁的语法改进,

有兴趣的话能够查看这个网址 https://www.w3.org/TR/mediaqueries-4/#intro

Detect pointer type

人们与您的网站或应用程序交互的方式正在发生变化。您的访问者可能正在使用键盘、鼠标或可触摸设备访问您的网站。

例如微软Surface Book就像传统笔记本电脑同样，也有触摸屏。所以，查看屏幕大小并非查找用户实际拥有的设备类型的好方法。 Media Queries level 4 介绍了交互媒体功能，使咱们可以找出用户具备什么类型的指针，并测试此类属性是否为悬停。

例如，若是我想为触摸屏用户添加一些css。我可使用如下代码监测触摸并定义相关属性：

@media(pointer: coarse){
/ *CSS rules for touch screen*/
} 
复制代码

我也能够监测hover属性，定义相关的CSS样式属性。

@media(hover){
/*CSS rules useful to people with devices that have hover support*/
} 
复制代码

这些媒体查询为您提供了另外一种测试设备能力的方法，以便您能够很方便的为全部访问您的站点的用户提供很好的体验。这个新特性除了Firefox以外的全部现代浏览器都支持。

Syntax improvements for Media Queries(媒体查询的语法改进)

Level 4规范还包括一些语法改进，由于媒体查询当前很是冗长 - 特别是在指定范围时，例如：

@media(min-width: 40em)and(max-width:59em){
/ *CSS rules for screen sizes between 40em and 59em*/
} 
复制代码

新规范使咱们可以使用如下语法并实现相同的功能

@media(40em < width < 59em ){
/*CSS rules for screen sizes between 40em and 59em */
} 
复制代码

这个语法起初看起来很奇怪,可是简洁容易理解，旧的的语法不会消失，两种写法会共存。

Use CSS to test browser support

CSS甚至开发了一种方法，您可使用功能查询来测试浏览器对新CSS功能的支持。功能查询的行为与媒体查询的行为大体相同，不一样之处在于功能查询不是向浏览器询问有关用于查看站点的设备的信息，而是询问浏览器是否支持特定的CSS功能。这使得以安全逐步加强的方式使用新功能变得更加容易。

@supports(display: grid){
/*CSS rules for browsers that  support grid layout */
}
复制代码

浏览器对功能查询的支持很棒，但Internet Explorer 11及更低版本不支持它们。只要您测试支持而后编写支持浏览器的代码，就能够覆盖之前在CSS中为旧浏览器执行的任何操做。任何进入css的新功能均可以使用功能查询进行测试。我认为它们是使用css新特性的最佳方式之一，由于它们使咱们可以更快地开始使用新属性，正如您在本文中所看到的，有不少特性能够开始使用(以下图所示)！