前端界有哪些越早知道越好的小技巧、小知识

少了一项使用第三方 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);

参考：www.zhihu.com/question/43…