汇总一下近期发现的小东西

## 强调色 accent-color
> 新增 CSS 属性accent-color，用于修改表单元素的颜色

### 使用方法
只需要在CSS根样式中添加该属性即可：
```css
:root {
	accent-color: red;
}
```
完整示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      accent-color: red;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <form action="">
     <fieldset>
      <legend>Accent-color Demo</legend>
  
      <label>
       Strawberries
       <input type="checkbox" id="berries_1" value="strawberries">
      </label>
  
      <label>
       Radio Buttons
       <div>
        <input type="radio" name="accented-demo" checked>
        <input type="radio" name="accented-demo">
        <input type="radio" name="accented-demo">
       </div>
      </label>
  
      <label>
       Range Slider
       <input type="range">
      </label>
  
      <label>
       Progress element
       <progress max="100" value="50">50%</progress>
      </label>
     </fieldset>
    </form>
   </div>
</body>
</html>
```

效果如下图：

![](http://blog.lenton.cn/zb_users/upload/2024/03/202403271413315012156.jpg)

[了解更多accent-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/accent-color "了解更多accent-color")

## 原生嵌套选择器
可以使用 & 字符表达嵌套选择器，就像LESS/SASS一样
```css
body {
	& div {
		color: red;
	}
}
```

## <dialog>对话框元素
> HTML <dialog> 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。
这是一个纯原生的对话框！用法很简单，且能自定义样式。

```html
<!DOCTYPE html>
<html>
<head>
	<style>
		#dialog {
			border: 1px solid #999;
			border-radius: 8px;
		}
		#dialog::backdrop {
			background-color: #0000007a;
		}
	</style>
</head>
<body>
	<dialog id="dialog">
		<div>hi !</div>
		<button onclick="dialog.close()">close dialog</button>
	</dialog>
	<button onclick="dialog.showModal()">open dialog</button>
</body>
</html>
```

效果如下图：

![](http://blog.lenton.cn/zb_users/upload/2024/03/202403271712216740005.jpg)

提供三个方法：
- show() 非模式化的显示这个对话框
- showModal() 模式化的显示这个对话框
- close() 关闭对话框

[了解更多dialog](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLDialogElement "了解更多dialog")

## Input日期时间类型

### 使用方法

`<input type="datetime-local" onchange="console.log(this.value)">`

可以直接选择日期时间的input类型。效果如下图：

![](http://blog.lenton.cn/zb_users/upload/2024/03/202403271803109210910.jpg)

## 原生懒加载 loading 属性

img, iframe标签，支持loading属性,只需给标签加上:`loading="lazy"`

## 原生深拷贝 structuredClone()

### 在这之前

这是原生的深拷贝方法，不再用自己实现。在这之前，我们最常用的是`JSON.parse(JSON.stringify(obj))`方法。这是最方便的方式。但是它有一些弊端，一些内置 JS 类型：比如Map, Set, Date, RegExp 或 ArrayBuffer是无法处理的，会抛异常。

那`structuredClone()`有又有哪些限制呢：

### 注意限制

- 不能拷贝函数
- 不能拷贝 DOM nodes
- 拷贝对象时会丢弃以下内容：
 - RegExp 对象的lastIndex属性
 - 属性的 descriptors（描述），例如 getters、setters、readable 等
 - 原型链不会被拷贝，新对象的 prototype 都会指向 Object

## CSS layer 层级

待续

## CSS :has()伪类

待续

2024-03-27 14:01:01 184 2

Open Graph协议摘记-URL分享预览功能

参与讨论

访客 2024-04-20 20:44:52

单位
访客 2024-04-20 20:45:01

的

汇总一下近期发现的小东西

相关文章

参与讨论

选择你的头像