跳到主要内容

10种惊人的新CSS技术

这是一个非常激动人心的时间成为Web开发人员。我们将看一些新的CSS属性和正在进入浏览器的整个规范。其中一些是落后于旗帜或仅在测试版的浏览器中可用,但您很快就会在发布版本中看到它们。

Flexbox的装订线

Browsers implementing the gap properties for Flexbox will mean an end to using margins and negative margins to make gutters

实现Flexbox间隙属性的浏览器将意味着使用边距和负边距来制作排水沟

CSS网格布局介绍了格列隙格列隙网格差距属性。多栏布局已经有了柱隙。因此,从Grid和Multicol规范中删除这些属性并将它们放入Box Alignment是有意义的,Box Alignment是处理所有规范中的空间分布和对齐的规范。这意味着间隙属性 - 现在已重命名柱隙行差距间隙对于所有上下文,可以为其他布局方法指定 - 例如Flexbox。

在撰写本文时,Firefox是唯一为Flexbox实现这些属性的浏览器,它们预计将在Firefox 63中发布(在您阅读本文时应该可以使用它)。但是我希望其他浏览器也会效仿。这应该意味着您不必使用边距来在Flex项目之间创建装订线,而是可以在网格布局中使用间隙。

.flex {display:flex; flex-wrap:wrap;行间距:20px;柱间隙:10px; }

逻辑属性和值

Using the logical sizes block-size and inline-size instead of width and height the box rotates to match the writing direction

使用逻辑大小块大小直列大小而不是宽度和高度,框旋转以匹配书写方向

我们的CSS属性和值传统上已映射到屏幕的物理属性。例如,我们使用宽度和高度,并在元素的顶部,右侧,底部和左侧设置边距。在水平和从上到下的写入模式下工作时,这些物理属性看起来很奇怪。作为一个简单的例子,我们可以考虑一个具有高度和宽度的盒子。

.box {height:150px;宽度:250px; }

我们的盒子在屏幕上高150像素,宽250像素。即使我们将写入模式更改为垂直模式,该框仍将与其物理尺寸相关联。

我们现在有了新的逻辑属性和值,使我们能够调整元素大小或引用它们的边距,填充和边框,即使写入模式发生变化也是有意义的。如果我们回到上一个示例,我们可能希望我们的框在内联维度中始终具有250像素的长度,而不管方向如何。

内联维度是句子在该书写模式下运行的方式 - 英语水平,垂直书写模式垂直。然后我们希望它在块维度中具有150个像素的长度,这是在该特定写入模式中显示诸如段落的块的方式。所以我们可以按如下方式调整块的大小:

.box {block-size:150px;内联大小:250px; }

该框现在遵循正在使用的书写模式。有逻辑属性和值在每个物理对应的值中创建和实现:Firefox目前对这些属性和值有最好的支持。

网格级别2和子网格

CSS Grid Layout规范的第2级工作已在进行中。此级别与子网格功能有关。子网格将意味着除了网格容器的直接子节点成为网格项之外,您还可以在网格项上创建网格并使其使用父节点的列和行轨道。例如,这意味着您可以为页面创建多列网格,并使用它来排列嵌套在标记中的项目。

.grid {display:grid; grid-template-columns:1fr 2fr 1fr 2fr; } .item {grid-column:2/5;显示:网格; grid-template-columns:subgrid; }

在上面的CSS示例中,我将父元素设置为显示:网格,它定义了一个四列网格。具有一类项目的子项目放置在从第2行到第5行的网格上,跨越父网格的三个轨道。通过使用值子网格代替子项上的网格模板列的轨道列表,我们告诉其网格使用父项中的轨道。因此,项目的任何子项都将使用父网格上定义的列轨道的大小。

这还没有在任何浏览器中实现,但我希望我们应该尽快开始实现。

首字母

A fancy initial letter can be inset into our content with the initial-letter property, which is currently only available in Safari

可以在我们的内容中添加一个精美的首字母,其中包含初始字母属性,该属性目前仅在Safari中提供

Initial Letter,目前仅在WebKit中实现,是一个解决常见问题的小功能。它可以创建一个大的首字母(或丢弃资本)沉入其后的文本中。

CSS是一个属性:初始字母;要看它工作,你需要Safari和iOS Safari的前缀WebKit属性。两个值为初始信是字母应在高度上跨越的行数,然后是要缩进到文本中的行数。

h1 + p ::第一个字母{font-weight:bold; -webkit-initial-letter:4 3;首字母:4 3; }

可变字体

Play with the capabilities of variable fonts using the Axis Praxis website, and find fonts which support the new features

使用Axis Praxis网站播放可变字体的功能,并查找支持新功能的字体

如果您曾在设计中使用过Web字体,那么您将了解需要包含的问题 - 因此需要您的用户需要下载 - 您需要使用的每种字体变体。对于大多数字体,您将需要字体的常规,粗体和斜体版本。这是四个请求加上合理数量的数据下载。

变量字体是单个字体文件,包含所有上述变体等等。 OpenType字体变体是由微软,谷歌,苹果和Adobe共同开发的技术,这个功能应该使得在网络上使用漂亮的排版变得更加容易。

要使用可变字体,您需要使用支持该功能的字体,以及实现了font-variation-settings属性的浏览器,该属性使您可以控制所选字体的各个轴。现代浏览器的支持非常好。要了解可控字体的可用性,请查看Axis Praxis网站,您可以在其中播放各种字体并复制用于您创建的字体变体的CSS。

要查找和测试可变字体,请访问v-fonts.com。可变字体Twitter帐户值得关注以发现新的字体版本和其他新闻。

滚动捕捉

Our scroll snap example snaps each item to the start as the visitor scrolls a box with overflow: scroll vertically

当访问者滚动带溢出的框时,我们的滚动快照示例会将每个项目捕捉到开头:垂直滚动

CSS Scroll Snapping意味着您可以创建捕捉到滚动点的界面。这对于您希望以与移动应用程序类似的方式执行的整页界面非常有用,可以在页面之间进行捕捉。

下面的代码创建了一个项目列表,其中父项具有固定高度,溢出设置为滚动。我希望项目在滚动到容器时捕捉到容器的顶部。

在父元素上,我们添加属性滚动式卡配型,它具有我们滚动的轴的值,然后是关键字强制性要么接近。该强制性关键字将强制捕捉到捕捉点,因此在使用此关键字时应小心不要因为滚动捕捉而导致用户无法滚动到某些内容。

在我们指定要使用属性捕捉到的位置的项目上滚动捕捉对齐。在这种情况下,我选择了开始;其他值是中央结束

ul {list-style:none;边界:5px solid rgb(126,63,222); border-radius:.5em;身高:300px;填充:0; overflow-y:scroll; scroll-snap-type:y mandatory; } li {background-color:rgba(126,63,222,.3);填充:40px 20px; border-bottom:1px solid rgb(126,63,222);最小高度:150px; scroll-snap-align:start; }

媒体查询等级4

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

检测指针类型

人们与您的网站或应用程序交互的方式正在发生变化。您的访问者可能正在使用键盘和鼠标在支持触摸屏的设备上访问您的网站,或者 - 使用像Microsoft Surface Book这样的设备,就像传统的笔记本电脑一样,也可以同时使用触摸屏。因此,查看屏幕大小并不是了解用户实际拥有的设备类型的好方法。媒体查询级别4引入了交互媒体功能,使我们能够找出用户具有什么类型的指针,并测试诸如悬停能力之类的属性。

例如,如果我想为触摸屏用户添加一些CSS,我可以使用以下代码来测试粗略指针:

@media(指针:粗略){/ *触摸屏的CSS规则* /}

我还可以测试悬停的能力:

@media(悬停){/ * CSS规则对拥有悬停支持的设备有用* /}

这些媒体查询为您提供了另一种测试设备功能的方法,以便为您网站的所有访问者提供出色的体验。它们目前在除Firefox之外的所有现代浏览器中都受支持。

媒体查询的语法改进

Level 4规范还包括一些语法改进,因为Media Queries目前非常详细 - 特别是在指定范围时,例如:

@media(min-width:40em)和(max-width:59em){/ *屏幕尺寸在40em和59em * /}之间的CSS规则

新规范使我们能够使用以下语法并实现相同的目标:

@media(40em <= width <= 59em){/ *屏幕尺寸在40em和59em * /}之间的CSS规则

这个语法起初看起来很奇怪,但我们所说的是宽度应该大于或等于40em,并且还小于或等于59em。首先查看宽度然后将其与两侧的东西进行比较可能会有所帮助。旧语法不会消失,因此您可以使用其中任何一种。

使用CSS测试浏览器支持

Feature Queries have excellent browser support, test-for support, and anything new in CSS&nbsp;can be tested for using them

功能查询具有出色的浏览器支持,测试支持,CSS中的任何新功能都可以使用它们进行测试

CSS甚至开发了一种方法,您可以使用功能查询来测试浏览器对新CSS功能的支持。功能查询的行为与媒体查询的行为大致相同,除了向浏览器询问有关用于查看网站的设备的信息,功能查询会询问浏览器是否支持特定的CSS功能。这使得以安全,渐进增强的方式使用新功能变得更加容易。

@supports(display:grid){/ *支持网格布局的浏览器的CSS规则* /}

浏览器对功能查询的支持很棒,但Internet Explorer 11及更低版本不支持它们。这不是您想象的问题:只要您测试支持然后编写支持浏览器的代码,您就可以覆盖以前在CSS中为那些旧浏览器执行的任何操作。任何进入CSS的新内容都可以使用功能查询进行测试。我认为它们是最近进入CSS的最佳方式之一,因为它们使我们能够更快地开始使用新功能,正如您在本文中看到的那样,有很多东西可以开始使用!

本文最初出现在网络杂志第312期。购买它这里

阅读更多:



翻译字数超限