CSS 自定义属性 @property 的使用
介绍CSS 属性和值 API 是 CSS Houdini API（一组底层渲染 API）的一部分，包括 JS 接口CSS.registerProperty 和 CSS 接口 @property 两部分。
CSS.registerProperty用于注册自定义属性，允许检查属性类型、默认值以及继承或不继承其值。
语法1CSS.registerProperty(PropertyDefinition)
PropertyDefinition 是一个字典对象，包含以下字段：
name
一个字符串，表示正在定义的属性的名称。
syntax
表示已定义属性的预期语法的字符串。默认为 *。
inherits
一个布尔值，定义是否应该继承定义的属性。默认为 false.
initialValue
表示已定义属性的初始值的字符串。
@property@property 规则提供了一个直接在样式表中注册自定义属性的方式，跟 CSS.registerProperty 函数使用同样的参数调用效果相同。并可以对属性类型检查、设定默认值及定义是否可以被继承。
语法12345@property - ...
CSS @layer 规则的使用
介绍CSS @规则 中的 @layer 声明了一个级联层，同一层内的规则将级联在一起。也可用于定义多个级联层的优先顺序。
语法123456/* layer-name 的主要作用是用来灵活设置 @layer 和其他 @layer 规则的前后优先级。 *//* rules 是级联层中的一组 CSS 规则 */@layer layer-name {rules}@layer layer-name;@layer layer-name1, layer-name2, layer-name3;@layer {rules}
注意：不属于任何一级联层的样式将被集中到同一匿名层，并置于所有层的后部，这意味着任何在层外声明的样式都会覆盖在层内声明的样式，而不管选择器权重和优先级如何。
@layer 的使用场景问题1我们在实际开发的时候，经常会使用第三方组件。但是这些组件虽然功能是我们需要的，但是 UI 样式却和产品的风格不一致，我们需要对这些组件的 UI 进行重置，换个肤，变个色什么的。这时，我们可以使用优先级更高的选择器进行覆盖。例如：
1.container . ...
CSS 的 @规则介绍
介绍at 规则以 @ 开始，后跟一个标识符，一直到以分号或右大括号结束。
语法12345/* 常规规则 */@identifier RULE;/* 嵌套规则 */@identifier (RULE) {}
常规规则
@charset 定义样式表使用的字符集。
@import 包含一个外部样式表。
@namespace 所有内容以 XML 命名空间为前缀。
嵌套规则
@media 如果设备满足使用媒体查询定义的条件的标准，将应用其内容的条件组规则。
@supports 如果浏览器满足给定条件的标准，将应用其内容的条件组规则。
@document 如果应用样式表的文档满足给定条件的标准，则将应用其内容的条件组规则。
@page 描述打印文档时将应用的布局。
@font-face 描述要下载的外部字体。
@keyframes 描述 CSS 动画序列中的中间步骤。
@viewport 已弃用，描述小屏幕设备的视口。
@counter-style 定义不属于预定义样式集的特定计数器样式。
@property 描述自定义属性和变量。
@layer 声明一个级联层并定义多个级 ...
CSS 新选择器 :is() :where() :has()
:is()匹配列表中任意一个选择器可以选择的元素。:matches() 重命名之后的写法。兼容写法：:-webkit-any()、:-moz-any()。
语法1234567891011:is( <forgiving-selector-list> )/* 设置 header, main, footer 里的任意一个 p 标签的 hover 状态 */header p:hover, main p:hover, footer p:hover { /* … */}/* 可以使用 :is() 简写为以下 */:is(header, main, footer) p:hover { /* … */}
:is() 伪类函数不能选择伪元素123some-element::before, some-element::after { /* … */}
不能使用 :is() 简写：
123some-element:is(::before, ::after) { /* … */}
forgiving-sel ...
页面滚动顶部指示进度条 JS 和 CSS 实现
介绍页面滚动顶部指示，是在页面上下滚动时，顶部显示一个滚动条，指示页面的滚动距离和页面的滚动高度的比例。效果如下：
JS 实现原理是顶部放一个宽度为 0 的滚动条，然后监听窗口滚动事件，把页面的滚动距离和页面的滚动高度（页面的实际高度 - 页面的视口高度）进行比较，然后更新滚动条的宽度。
1234window.onscroll = function(e) { var height = document.scrollingElement.scrollHeight - document.scrollingElement.clientHeight; progressBar.style.width = (document.scrollingElement.scrollTop / height) * 100 + "%";}
123456789101112.progress-container { position: fixed; top: 0; width: 100%; background: rgba(0, 0, 0, .1); ...
call()、apply()、bind() 的使用场景
介绍每个 JavaScript 函数都是一个 Function 对象：(function () {}).constructor === Function 返回 true。
Function 对象有自己的属性。
1234function f(p1, p2) {}console.log(f.length); // 2console.log(f.name); // "f"
Function 对象也有自己的构造函数。
12const sum = new Function('a', 'b', 'return a + b');console.log(sum(2, 6)); // 8
在 Function.prototype 上面共有四个方法：
Function.prototype.apply()
调用函数并给定 this 值，参数通过数组或类数组对象传递。
Function.prototype.bind()
创建一个新函数，并给定 this 值，参数通过列表传 ...
⚓ URI 的编码和解码
URIURI（统一资源标识符）是一个用于标志某一互联网资源名称的字符串。
与 URL 和 URN 的关系
URL（统一资源定位符）和 URN（统一资源名称）属于 URI 的子集，URI 可以为 URL、URN 两者之一或同时是 URI 和 URN。URN 描述资源的名称，URL 描述资源的地址，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 URN（名称）。
例如，ISBN 0-486-27557-4 标志出了一个 ISBN 系统中的图书《罗密欧与朱丽叶》的某一特定版本。为获得该资源并阅读该书，需要它的位置，也就是一个 URL 地址，例如 file:///home/username/RomeoAndJuliet.pdf，该 URL 标志出了存储于本地硬盘中的电子书文件。因此，URL 和 URN 有着互补的关系。
编码和解码一般来说，URL 只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。这意味着，如果 URL 中有汉字，就必须编码后使用。
escape() 已废弃将字符串（除了 ASCII 字符集（字母、数字、标点符号和 @*_+-./ ...
HTML 字符集和字符编码
Character Set（字符集）字符是可打印符号（字母、数字、标点符号）或非打印符号（例如，回车或软连字符）。字符集是一种编码系统，使计算机识别 Character（字符），包括字母、数字、标点符号和空格。
ASCII 字符集包括英语字母、符号；ISO-8859-6 字符集包括许多基于阿拉伯语言文字的字母、符号；Unicode 字符集涵盖世界上多数语言文字字符。
早期，由于使用不同的语言，各国开发了自己的字符集，例如日语的 Kanji JIS（例如 Shift-JIS、EUC-JP 等），繁体中文的 Big5 和俄语的 KOI8-R。Unicode 因其对通用语言支持而逐渐成为最被接受的字符集。
如果字符集使用不正确（例如，使用 Big5 编码的文章的 Unicode），可能会看到损坏的字符，这些字符称为乱码。
ASCII（American Standard Code for Information Interchange，美国信息交换标准代码）ASCII 是 Internet 上计算机之间使用的第一个字符集（编码标准）。
是计算机和电子设备的标准字符集。
为每个可存储字符定义了 ...
⛪ 深克隆的标准方法 structuredClone 和克隆继承属性
介绍原始类型在内存中存储的是值，改变原始类型的值，不影响引用它的变量。
1234let a = 1;let b = a;a = 2;console.log(b); // 1
对象类型在内存中存储的是引用和值。所以克隆一个对象存在两种方式：一种是只改变引用在内存中的地址，不改变值的存储空间，叫做浅克隆；一种是改变引用在内存中的地址，并在内存中开辟一个新的区域来存放值，叫做深克隆。
对象的浅克隆浅克隆对象的属性与源对象共享相同的引用，当源对象的属性改变时，浅克隆对象的属性也会跟着改变，反之亦然。
12345const o1 = { a: { b: 1 }, c: 1 };const o2 = { ...o1 };o1.a.b = 2;o1.c = 2;console.log(o2.a.b, o2.c, o1.a === o2.a); // 2 1 true
这里我们只克隆了 o1 的原始类型属性：o1.c，而对象属性 o1.a 没有被克隆，所以 o1.a 和 o2.a 指向同一个内存地址。
…（扩展语法）、Array.prot ...
使用 Manifest V3 做一个简单 Chrome 页面右键菜单搜索扩展
介绍如果做一些简单的功能，油猴脚本就可以做到；要做一些复杂的带有界面的功能，就需要 Chrome 扩展来做了。
Chrome 扩展是基于 HTML、JavaScript 和 CSS 等 Web 技术构建的，在单独的沙盒执行环境中运行，并与 Chrome 浏览器交互。
Chrome 浏览器可以自定义地址栏搜索引擎，但是切换比较麻烦，如果有一个方便切换搜索引擎的扩展，就很方便我们搜索我们想要的东西了。下面介绍一下，如何做一个 Chrome 右键菜单搜索扩展。
因为 manifest_version2 会提示过时，所以本例使用的是 manifest_version3 来创建扩展程序。
创建清单每个扩展都要有一个名为 manifest.json 的 JSON 格式的清单文件，第一步要创建这个文件。
12345678910111213141516171819202122232425262728{ "name": "搜索", "description": "百度 必应 360 搜狗 谷歌", " ...