2022年鲜为人知的CSS 特性了解起来~
前言
随着CSS的不断发展,一些很酷且有用的属性要么完全被忽视,要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CSS属性,这些属性你可能听说过,也可能没听说过,但了解之后你会觉得它们是如此的实用。
如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发,关注 前端南玖
第一时间获取最新文章~
:is()
和:where()
伪选择器
这两个伪选择器在去年获得了更广泛的浏览器支持,并且都是用来处理分组和特异性。
:is()
它是一个匹配伪类,:is()
接受选择器列表作为它的参数来尝试匹配
:is()
选择器列表的几个独特行为:
- 如果列出的选择器无效,规则将继续匹配有效的选择器。鉴于
:is(-ua-invalid, article, p)
规则将匹配article
和p
。 - 计算出的特异性将等于传递的具有最高特异性的选择器的特异性。例如,
: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 特性了解起来~的更多相关文章
- 深入探讨 CSS 特性检测 @supports 与 Modernizr
什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷.在 CSS 层面亦不例外. 一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下: 很多实验 ...
- 2017年值得学习的3个CSS特性
原文:https://bitsofco.de/3-new-css-features-to-learn-in-2017/译文:http://caibaojian.com/3-new-css-featur ...
- 即将来到: CSS Feature Queries (CSS特性查询)
Feature Queries 是CSS3 Conditional Rules specification中的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否 ...
- css基础(css书写 背景设置 标签分类 css特性)
css书写位置 行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link re ...
- CSS特性
css的特性 css具有两大特性:继承性和层叠性 1.继承性 指的是子元素继承父元素的样式,但没有所有的样式都可以继承(那样就太可怕了) 所以具有继承性的属性主要分为三大类 a.文本属性 font-s ...
- 一些你不知道的css特性【一】
浏览器禁止用户在标签的style中使用js写入"!important"的特性 我们在使用jQuery设置css的时候 $('#text').css('height', '200px ...
- WTF Python:有趣且鲜为人知的Python特性
Python 是一个设计优美的解释型高级语言,它提供了很多能让程序员感到舒适的功能特性.但有的时候,Python 的一些输出结果对于初学者来说似乎并不是那么一目了然. 这个有趣的项目意在收集 Pyth ...
- 容易被忽略CSS特性
CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .tes ...
- CSS特性: 继承 和 层叠
在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个”树型“ ...
- 容易被忽略的CSS特性
CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .tes ...
随机推荐
- open-falcon安装配置
1.安装工具 yum install git telnet net-tools tree nmap sysstat lrzsz dos2unix tcpdump ntpdate wget -y 2.对 ...
- Spring mvc源码分析系列--Servlet的前世今生
Spring mvc源码分析系列--Servlet的前世今生 概述 上一篇文章Spring mvc源码分析系列--前言挖了坑,但是由于最近需求繁忙,一直没有时间填坑.今天暂且来填一个小坑,这篇文章我们 ...
- SpringBoot框架SpEL表达式注入漏洞复现与原理分析
前言 这是2016年的一个洞,利用条件是至少知道一个触发 springboot 默认错误页面的接口及参数名. 影响版本:1.1.0-1.1.12 1.2.0-1.2.7 1.3.0 修复方案:升级版本 ...
- 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页面中存在一个超链接,单击超链接可以链接到第三个页面查看信息。若选择“
Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...
- python学习笔记----必备知识
一.必备知识 二.流程控制 https://blog.csdn.net/weixin_43304253/article/details/120778228 1.1语法特点: 1.1.1 代码注释 单行 ...
- 解决ffmpeg的播放摄像头的延时优化问题(项目案例使用有效)
在目前的项目中使用了flv的播放摄像头的方案,但是延时达到了7-8秒,所以客户颇有微词,没有办法,只能开始优化播放延时的问题,至于对接摄像头的方案有好几种,这种咱们以后在聊,今天只要聊聊聊优化参数的问 ...
- 项目实战:在线报价采购系统(React +SpreadJS+Echarts)
小伙伴们对采购系统肯定不陌生,小到出差路费.部门物资采购:大到生产计划.原料成本预估都会涉及到该系统. 管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助. 但 ...
- 解决@Url.Action("Action", "Controller",new {p1=v1,p2=v2 })的传参问题
1.首先@Url.Action("Action", "Controller",new {p1=v1,p2=v2 })后面的model参数不可以直接用变量 需要先 ...
- 二十一、Pod的存储之Secret
Pod 的存储之Secret 一.Secret 存在意义 Secret 解决了密码.token.密钥等敏感数据的配置问题,而不需要把这些敏感数据暴露到镜像或者 Pod Spec中.Secret 可以 ...
- ATT&CK框架整理(中英文整理)
工作需要了解了一下ATT&CK框架,留个记录.