2020年值得一用的11个CSS新功能

你可能很熟悉CSS,使用CSS可以创建出各种精美的网页版面。然而一时的熟悉是不够的,随着互联网的不断发展,作为核心客户端技术之一的CSS也在不断进化。接下来,我将介绍11个比较新的CSS功能,你可以尝试应用在自己的网站上。

在尝试本文介绍的CSS功能之前,你需要准备好一款现代浏览器,推荐Firefox或Chrome浏览器。部分版本的浏览器可能还没有对针对新的CSS进行更新,无法渲染出对应的效果。

01 文字描边(text-stroke)

如果你熟悉Adobe Illustrator等矢量编辑软件,应该使用过类似文字描边的功能。而如今,这一功能被加入到了CSS属性中。

文字描边(text-stroke)可以应用CSS动画,但只有描边颜色可以受影响,描边宽度则不行。

footer h3 {
/*more styles in style.css*/
/*...*/
   	-webkit-text-fill-color: transparent;
   	-webkit-text-stroke: 2px #000;
}

02 首字母选择器(:first-letter)

我们经常在报纸、杂志上看到首字母或首文字放大的效果,如今新的CSS选择器(:first-letter)可以帮助我们对首字母单独赋予属性,实现类似的效果。

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

03 渐变文字

现在设置渐变文字比过去要简单得多,因为CSS现在支持将文字作为背景(background)的蒙版。

h2.contact-heading {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background: radial-gradient(#ffbc00, #ff65aa);
}

当然,使用这个特性,你也可以用文字给背景图片制作蒙版,用CSS实现许多过去平面设计软件才能实现的的效果。

04 文本截断(line-clamp)

文本截断(line-clamp)属性可以在特定行数处截断文本,以实现对行数的绝对控制。

你需要配合至少3个其他属性来使用它:display要设置为-webkit-box 或-webkit-inline-box,-webkit-box-orient要设置为vertical,而overflow要设置为hidden。如果不这样设置,文本就不会被截断。

p.shortened {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

05 内容分列(column-count)

使用内容分列(column-count)属性,可以将内容均等分为多列显示。

.outro { 
	column-count: 2;
}

06 文字限宽

部分网页会用到等宽字体等对宽度有特殊要求的字体,而当客户端不支持对应字体的时候,就无法实现对应的效果。CSS现在引入了ch值的概念,一个0字符的宽度为6ch,你可以设置对应的ch值来限制文字的宽度。

h2.contact-heading {
/*more properties in the CSS file*
…
max-width: 8ch;
}

附加 断字标签(<wbr>)

虽然我们教程是关于CSS的,但既然我们说了这么多关于文本的CSS,这里我想提一句HTML。现在HTML加入了<wbr>标签,在内容超出宽度需要自动换行时,会优先在<wbr>标签的位置进行换行,这样可以让效果更可控。

<wbr>+0043<wbr>234-343<wbr>234-234<wbr>

07 适配对象(object-fit)

在容器中的图片如何适配容器尺寸?这个问题可以被新的适配对象(object-fit)属性完美解决。如果容器中有尺寸变化的<img>或<video>标签,可以用object-fit属性让它进行自适应。object-fit有4个可选的值:fill、contain、cover和scale-down。举例来说,如果使用cover,容器中的图片会在保持长宽比的情况下尽量填满容器。

.object-fit {
  object-fit: cover;
  height: 400px;
  width: 100%;
}

08 锥形渐变(conic-gradient)

2020 css Conic gradient - operation, design - 2020年值得一用的11个CSS新功能

在过去,绘制扇形图几乎必须用到Javascript,而现在有了锥形渐变(conic-gradient)属性,CSS也可以独立做到了。锥形渐变是一种垂直于半径方向的渐变,和径向渐变(radial-gradient)是不同的。

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

09 计数器(counter)

2020 css Counters - operation, design - 2020年值得一用的11个CSS新功能

如果你拥有一个非编号列表,通过CSS怎么将它转化为编号列表呢?这就要用到计数器(counter)属性了。

在content属性中加入counter() 或counters()函数即可对特定内容进行计数。counter的数值可以使用counter-increment进行增减。

ol.numbered-list > li:before {
 content: counter(li);
 position: absolute;
 box-sizing: border-box;
 width: 45px;
 height: 45px;
 background: #f3b70f;
 border-radius: 50%;
}
ol.numbered-list li {
  position: relative;
  left: 0px;
  list-style: none;
  counter-increment: li;
}

10 选区颜色(::selection)

新的伪元素选区颜色(::selection)可以覆盖浏览器的默认设置,修改文字选区的颜色。使用鼠标选中对应文字后,即可看到对应颜色。

::selection {
 	background-color: #f3b70f;
 }

11 兼容判断(@support)

我们在文章开头就说过,某些浏览器可能不支持特定CSS样式。而有了兼容判断(@support)属性,我们可以某种程度上解决这个问题。@support会检查浏览器是否支持特定的CSS样式,如果支持,@support下的CSS样式才会被渲染。

@supports (text-stroke: 4px navy;) {
  	.example {
text-stroke: 4px navy;
  	}
}

对于甚至不能识别@support的浏览器,@support下的CSS样式也不会被渲染。你可以通过设置多个@support,根据浏览器对不同属性的支持与否,灵活地分配多种CSS样式。

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注