前言

随着CSS的不断发展,一些很酷且有用的属性要么完全被忽视,要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CSS属性,这些属性你可能听说过,也可能没听说过,但了解之后你会觉得它们是如此的实用。

如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发,关注 前端南玖 第一时间获取最新文章~

:is():where()伪选择器

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

:is()

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

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

  • 如果列出的选择器无效,规则将继续匹配有效的选择器。鉴于:is(-ua-invalid, article, p)规则将匹配articlep
  • 计算出的特异性将等于传递的具有最高特异性的选择器的特异性。例如,:is(#id, p)将具有#id— 1.0.0 — 的特异性,而:is(p, a)将具有 0.0.1 的特异性。

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函数的第二个参数,它作为一个备用选项,在自定义属性无效时应用。

定义变量 --

  • -- 开头,大小写敏感
  • 变量的定义必须有作用域,不能在外部直接定义,这点与scss和less不同
: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) {
/* 可以hover */
}
@media (hover: none) {
/* 不能hover */
}

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通过为所有数字字符设置相同的宽度来解决上述问题。

我们再来对比看一下:

兼容性

喜欢的同学欢迎点个赞呀~ 原文首发地址,欢迎大家关注公众号 「前端南玖」,如果你想进前端交流群一起学习,

我是南玖,我们下期见!!!

2022年鲜为人知的CSS 特性了解起来~的更多相关文章

  1. 深入探讨 CSS 特性检测 @supports 与 Modernizr

    什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷.在 CSS 层面亦不例外. 一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下: 很多实验 ...

  2. 2017年值得学习的3个CSS特性

    原文:http://bitsofco.de/3-new-css-features-to-learn-in-2017/译文:http://caibaojian.com/3-new-css-featur ...

  3. 即将来到: CSS Feature Queries (CSS特性查询)

    Feature Queries 是CSS3 Conditional Rules specification中的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否 ...

  4. css基础(css书写 背景设置 标签分类 css特性)

      css书写位置   行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link re ...

  5. CSS特性

    css的特性 css具有两大特性:继承性和层叠性 1.继承性 指的是子元素继承父元素的样式,但没有所有的样式都可以继承(那样就太可怕了) 所以具有继承性的属性主要分为三大类 a.文本属性 font-s ...

  6. 一些你不知道的css特性【一】

    浏览器禁止用户在标签的style中使用js写入"!important"的特性 我们在使用jQuery设置css的时候 $('#text').css('height', '200px ...

  7. WTF Python:有趣且鲜为人知的Python特性

    Python 是一个设计优美的解释型高级语言,它提供了很多能让程序员感到舒适的功能特性.但有的时候,Python 的一些输出结果对于初学者来说似乎并不是那么一目了然. 这个有趣的项目意在收集 Pyth ...

  8. 容易被忽略CSS特性

    CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .tes ...

  9. CSS特性: 继承 和 层叠

    在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个”树型“ ...

  10. 容易被忽略的CSS特性

    CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .tes ...

随机推荐

  1. 关于kibana启动时有几个warning警告信息的解决办法

    启动kibana时会有几个warning信息,具体如下: 针对xpack这几个相关的,在kibana.yml文件中新增如下三个配置即可: # 注意:参数值至少32位,否则启动会报错提示 xpack.e ...

  2. 使用 HammerDB 对 Citus 和 Postgres 进行 Benchmark,每分钟200万新订单处理测试(官方博客)

    在为 Postgres 运行性能基准测试时,主要建议是:"自动化!" 如果您正在测量数据库性能,您可能不得不一遍又一遍地运行相同的基准测试. 要么是因为你想要一个稍微不同的配置,要 ...

  3. P4047 [JSOI2010]部落划分 方法记录

    原题链接 [JSOI2010]部落划分 题目描述 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常 ...

  4. IPv4 与 IPv6的区别

    在介绍 IPv4 到 IPv6 区别之前,我们先来简单了解一下 IPv4 和 IPv6. IPv4 网际协议版本4(英语:Internet Protocol version 4,IPv4),又称互联网 ...

  5. [Mysql] 两段提交

    事务提交 Mysql 默认开启自动提交事务 两段提交 把一个事务分成两个阶段来提交,就是把redolog拆分成了prepare和commit两段 MySQL想要准备事务的时候会先写redolog.bi ...

  6. java 入土--集合详解

    java 集合 集合是对象的容器,实现了对对象的常用的操作,类似数组功能. 和数组的区别: 数组长度固定,集合长度不固定 数组可以存储基本类型和引用类型,集合只能存储引用类型 使用时需要导入类 Col ...

  7. Go | 讲解GOROOT、GOPATH、GOBIN

    前言 Go(又称 Golang)是 Google 开发的一种静态强类型.编译型.并发型,并具有垃圾回收功能的编程语言.Go 被誉为是未来的服务器端编程语言. Go是一门全新的静态类型开发语言,具有自动 ...

  8. 不妨试试更快更小更灵活Java开发双色球129期开奖结果 Solon

    @ 目录 概述 定义 性能 架构 实战 Solon Web示例 Solon Mybatis-Plus示例 Solon WebSocket示例 Solon Remoting RPC示例 Solon Cl ...

  9. .NET性能系列文章一:.NET7的性能改进

    这些方法在.NET7中变得更快 照片来自 CHUTTERSNAP 的 Unsplash 欢迎阅读.NET性能系列的第一章.这一系列的特点是对.NET世界中许多不同的主题进行研究.比较性能.正如标题所说 ...

  10. k8s集权IP更换

    -.背景描述 背景:在场内进行部署完成后标准版产品,打包服务器到客户现场后服务不能正常使用,因为客户现场的IP地址不能再使用场内的IP,导致部署完的产品环境在客户现场无法使用:此方案就是针对这一问题撰 ...