文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

2022年鲜为人知的CSS 特性了解起来~

2024-12-01 01:34

关注

:is​和:where伪类选择器​

这两个伪选择器在去年获得了更广泛的浏览器支持,并且都是用来处理分组和特异性。

:is()

它是一个匹配伪类,:is()接受选择器列表作为它的参数来尝试匹配

:is()选择器列表的几个独特行为:

CSS 中的伪选择:is()器让你可以更简洁地编写复合选择器。

例子:

我们或许看过这样的CSS,为大量元素赋予同一段CSS样式

section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: #BADA55;
}

使用:is()写法后看起来就简洁了许多

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}

兼容性

:where()

这个伪类除了它总是具有零特异性这一特点外,其余跟​​:is()​​基本相同。它同样是接受选择器列表来作为它尝试匹配的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。

例子:

当header、main、footer中的p标签被hover时,给它添加如下样式,我们可能会这么写:

header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

我们也可以用:where()来实现:

:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

这样看起来就比上面简洁了许多。

:where()​ 和 ​:is()​总是为 0,但是 ​:is()​ 的优先级是由它的选择器列表中优先级最高的选择器决定的。

我们可以使用:is和:where​将多个选择器组合成一个表达式。使用:where,我们可以使用复杂的选择器设置安全的默认样式,这些选择器可以很容易地用简单的实用程序类覆盖,而无需增加特异性。

兼容性

currentColor

通常被称为“第一个 CSS 变量”,currentColor是一个等于元素color属性的值。它可用于将等于属性值的color给任何接受颜色值的 CSS 属性。它强制 CSS 属性继承该color属性的值。

这个值对于避免将相同的值分配给多个 CSS 属性非常有用,这些属性在同一选择器中接受颜色,例如border-color, background,box-shadow等。

例子:

如果我们需要将每个段落的文字颜色、边框、阴影做到统一,我们或许会这么写:

.green {
color: darkgreen;
border-left: 5px solid darkgreen;
box-shadow: 5px 5px 10px darkgreen;
}

.brown {
color: darkgoldenrod;
border-left: 5px solid darkgoldenrod;
box-shadow: 5px 5px 10px darkgoldenrod;
}

.red {
color: darkred;
border-left: 5px solid darkred;
box-shadow: 5px 5px 10px darkred;
}

但有了currentColor我们便可以这么写

.box {
border-left: 5px solid currentColor;
box-shadow: 5px 5px 10px currentColor;
}
.green {
color: darkgreen;
}
.brown {
color: darkgoldenrod;
}
.red {
color: darkred;
}

兼容性

自定义属性备用值

自定义属性通过允许开发人员在其样式表中创建可重用的值而无需像 SASS 这样的 CSS 预处理器,从而显着改进了 CSS。自定义属性立即被采用并在今天被广泛使用并产生了巨大的影响,尤其是在主题化和与 JavaScript 的交互方面。但很多人可能都忽略了var函数的第二个参数,它作为一个备用选项,在自定义属性无效时应用。

定义变量 --

:root {
--myColor: blue;
--color-default: black;
}

使用变量 var(variable_name, def_value)

var的第一个参数为变量名,第二个参数为变量找不到时的备用值

div {
background-color: var(--myColor, 'red');
}

我们还可以设置另外一个变量作为备用值

color: var(--myColor, var(--color-default));

交互媒体查询

在创建响应式网站时,我们通常会根据屏幕尺寸对输入机制做出假设。我们假设屏幕尺寸1920px属于台式电脑或笔记本电脑,并且用户使用鼠标和键盘与网站进行交互,但是带有触摸屏或智能电视屏幕的笔记本电脑呢?

这就是交互媒体功能的用武之地,它允许我们根据主要的输入机制——触摸、手写笔、鼠标,微调用户可以与之交互的组件的可用性(输入、画布外菜单、下拉菜单、模式等)指针等。

@media (pointer: fine) {

}
@media (pointer: coarse) {

}
@media (hover: hover) {

}
@media (hover: none) {

}

scroll-padding

在实现固定头部时,页面锚点滚动链接导致固定页眉覆盖部分内容。在之前我们必须使用 JavaScript 来解决这个问题并实现自定义滚动逻辑以考虑固定的偏移量。如果标头高度在断点处发生变化,事情只会变得更加复杂,幸运的是,我们不必再为此依赖 JavaScript。我们可以scroll-padding-top使用标准 CSS 媒体查询指定和更改它的值。

html {
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}

我们也可以设置其他方向或使用 普通的 scroll-padding。

scroll-padding: ;

scroll-padding-top: ;
scroll-padding-right: ;
scroll-padding-bottom: ;
scroll-padding-left: ;

兼容性

字体渲染选项

相信大家都做过一些倒计时场景,这里我们会发现如果纯文本渲染时,会出现一种奇怪的现象 ---- 数字诡异跳动。造成这个现象的主要原因是每个数字的渲染宽度其实并不一样。

比如这个,数字在变化的过程中,整个文本也在跟随左右跳动,这里我们可能会为每一个数字包一层盒子,然后将盒子的宽固定,再让数字剧中就可以避免这种情况了,但这样很麻烦。今天给大家介绍一种纯CSS的解决方案,只需要一行CSS!

font-variant-numeric: tabular-nums

tabular-nums通过为所有数字字符设置相同的宽度来解决上述问题。

我们再来对比看一下:

兼容性

来源:前端南玖内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯