少了一项使用第三方 UI 组件库的必要~~
accent-color
新增 CSS 属性accent-color
,用于修改表单元素的颜色。
<input type="checkbox" />checkbox
<input type="radio" />radio
style
input {
accent-color: deeppink;
color-scheme: dark;
/* color-scheme: light; */
}
浏览器兼容
dialog 原生dialog
<dialog id="dialog">
<form method="dialog">
<p>Hi, I'm a dialog.</p>
<button>确定</button>
</form>
</dialog>
loading="lazy"
## aspect-ratio
以前设置一个固定的盒子需要 padding-top + position 容器定位
以前定位一个盒子
.container {
width: 100%;
padding-top: 56.25%; /* 9/16 */
background-color: pink;
position: relative;
}
.container img {
width: 100%;
height: 100%;
现在
.container img { width: 100%; aspect-ratio: 16 / 9; }
优化性能方面
JavaScript 新增 at()
const array = [5, 12, 8, 130, 44];
console.log(array.at(1))
最方面的抵挡是可以传负数
console.log(array.at(-2))
输出 130
## CSS cascade layers
CSS Cascade Layers,也叫做CSS 级联层,划分样式的层级,防止意外的样式覆盖
@layer {
h1 {
color: blue;
}
}
还可以通过`@import`导入文件时创建层,这个非常有用
@import './theme.css' layer(theme);