春花秋月何时了,CSS 新旧事知多少?
CSS 对象模型
CSS.escape
确保字符串中的特殊字符在CSS选择器中能正确解析,避免因特殊字符导致的选择器匹配问题。
比如,对<div id="#id"></div>
使用 querySelector
进行查询。
引用
CSS.support
如果想通过JS代码知道浏览器是否支持某些css特性,那你找对人了。
在.css
文件里面也是同样支持的,殊途同归, 比如 检测浏览器是否支持 flex
css
@supports ( display: flex ) { // 支持flex使用如下代码
body, #navigation, #content { display: flex; }
#navigation { background: blue; color: white; }
#article { background: white; color: black; }
}
@supports not ( display: flex ) { // 不支持使用如下代码
body { width: 100%; height: 100%; background: white; color: black; }
#navigation { width: 25%; }
#article { width: 75%; }
}
引用
- Feature queries: the @supports rule
- CSS Conditional Rules Module Level 3 # ref-for-dom-css-supports
- CSS: supports() static method - Web APIs | MDN
CSS 属性
scroll-behavior
当用户手动导航 或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior
为一个滚动框指定滚动行为。
直接上疗效:
当然你通过 Element: scrollIntoView
也能达到相同的效果
javascript
const element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
那css有什么优势吗, 不会报错。 曾几何时,遇到过scrollIntoView不支持 behavior,就报错异常。
引用
accent-color
为某些元素所生成的用户界面控件设置了强调色, 比如 原生的checkbox, radio, progress, range等 选中时的颜色。
下面的实例就是原生checkbox<input type="checkbox" />
设置不同的accent-color时,被选中的不同表现。
aspect-ratio
用于设置元素的纵横比(宽度与高度的比例)。这个属性允许你为元素定义一个固定的宽高比,即使元素的高度或宽度未显式指定,也可以保持预期的形状比例。
caret-color
来定义插入光标的颜色。 这在需要凸显鼠标聚焦的时候,就非常有用了。
如果再支持,设置一下尺寸就完美了。
此外,你也可以自定义光标图片达到类似效果。
css
.custom-cursor {
cursor: url('path/to/my-custom-cursor.png'), auto;
}
引用: caret-color
mix-blend-mode
用于定义元素的内容(如图像、文本、图形等)与其底层背景或其他元素的内容混合的方式。这个属性主要应用于叠加效果,允许元素的颜色数据与它所在堆叠上下文中的底层元素颜色数据进行数学运算,生成新的混合颜色结果。
经典的demo可以参见 张鑫旭 大佬的 mix-blend-mode滤色screen混合模式
引用: mix-blend-mode
resize
用于设置元素是否可调整尺寸,以及可调整的方向。
引用: resize | MDN
object-position
规定了可替换元素的内容在其内容框中的位置。哪些是常见的可替换元素呢? <iframe>
, <video>
, <embed>
, <img>
都是。
object-fit
属性指定可替换元素(例如:<img>
或 <video>
)的内容应该如何适应到其使用高度和宽度确定的框。 和background-size
有类似的作用。
ruby-position
来展示东亚文字注音或字符注释。 通常配合ruby标签使用,用实例看疗效。
下面的例子就是把注解从上面 弄到了下面。
引用:
CSS 函数
color-mix 函数
函数表示法接受两个 color
值作为参数,并通过指定的数量,在特定的颜色空间中将它们混合,最后返回混合得到的新颜色结果。
再简单点, 两个颜色经过一定规则混合到新的颜色。
再看一个高级的应用 调色板
参考引用
clamp 函数
把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。 clamp()
被用在 <length>
、<frequency>
、<angle>
、<time>
、<percentage>
、<number>
、<integer>
中都是被允许的。
作为动态调节内容大小,是不是一种很好的手段呢?
功能特性
@scope
借助 @scope
@ 规则,开发者可以将样式规则的作用域限定为给定的范围根,并根据该范围根的邻近度来设置元素的样式。
借助 @scope
,您可以根据邻近度替换样式,这与常见的 CSS 样式不同,后者仅根据源代码顺序和特异性应用。
除了最基本的限定能力:
你还可以用style
节点来达到类似的效果:
样式仅对该元素及其后代元素生效,不会影响到文档的其他部分
html
<parent-element>
<style>
@scope {
rulesets
}
</style>
</parent-element>
此外还具备 起 始 的限定能力,一图胜千文。 蓝色区域就是查找的范围。
参考引用
- CSS 官方文档 Scoping Styles: the @scope rule
- MDN CSS/@scope
- chome CSS @scope 规则
- Chrome 118:CSS @scope 规则 来了!
@layer
@layer
规则在 CSS 中用于声明一个层叠层,并在存在多个层叠层的情况下定义它们的优先级顺序
如下面的图示, 按照传统, state层中的 ·alert
的css权重显然是低于 layer层 .app .alert
的,但是不好意思, state的优先级比 layer 层高, 所以背景色是蓝色。
只能说,给人无限遐想。
还可以将多个样式块分配给同一个层 (layer)。在下面的例子中,headings.css 和 links.css 文件中的内容与 audio[controls] 规则一起层叠在同一层内。
css
@import url(headings.css) layer(default);
@import url(links.css) layer(default);
@layer default {
audio[controls] {
display: block;
}
}
引用:
写在最后
不忘初衷,有所得,而不为所累,如果你觉得不错,你的一赞一评就是我前行的最大动力。
微信公众号:成长的程序世界 ,关注之后,海量电子书,打包拿走不送。
或者添加我的微信 dirge-cloud,一起学习。