呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#书摘 #css #前端
《CSS 选择器世界》3.2 CSS选择器命名的合法性
本节主要讲解类选择器和ID选择器的命名合法性问题，旨在纠正大家长久以来的错误认识。最常见的错误认识就是类选择器和ID选择器不能以数字开头，如下：
对，上面这种写法确实无效，但这并不是因为不能以数字开头，而是不能直接写数字，需要将其转义，如下：
为什么转义表示为
其实
字符0的Unicode值是30，字符9的Unicode值是39，0～9这10个数字对应的Unicode值正好是30～39。
我们也可以用以下这种方法进行表示：
31前面用4个0进行补全，这样
类名或者ID甚至可以是纯数字，然而，CSS压缩工具会乱压空格，所以在实际开发时，如果想使用数字，建议使用非空格完整表示法。
《CSS 选择器世界》3.2 CSS选择器命名的合法性
本节主要讲解类选择器和ID选择器的命名合法性问题，旨在纠正大家长久以来的错误认识。最常见的错误认识就是类选择器和ID选择器不能以数字开头，如下：
.1-foo { border: 10px dashed; padding: 10px; } /* 无效 */
对，上面这种写法确实无效，但这并不是因为不能以数字开头，而是不能直接写数字，需要将其转义，如下：
.\31 -foo { border: 10px dashed; padding: 10px; }
为什么转义表示为
\31 且后面还有一个空格呢？其实
\31 外加空格是CSS中字符 1 的十六进制转义表示。其中 31 就是字符 1 的 Unicode 值，如下：
console.log('1'.charCodeAt().toString(16)); // 结果是31
字符0的Unicode值是30，字符9的Unicode值是39，0～9这10个数字对应的Unicode值正好是30～39。
我们也可以用以下这种方法进行表示：
.\000031-foo { border: 10px dashed; padding: 10px; }
31前面用4个0进行补全，这样
\31 后面就不用加空格了。类名或者ID甚至可以是纯数字，然而，CSS压缩工具会乱压空格，所以在实际开发时，如果想使用数字，建议使用非空格完整表示法。
#阮一峰的科技周刊 #前端
科技爱好者周刊（第 271 期）：非线性的世界，线性的你
#言
1. "重要的不在于你的努力程度，而在于仔细选择工作、人员和项目。"
2. "真正有效的工作方式，不是铁人三项或马拉松，比拼谁坚持的时间长，而是短跑，当机会来临的时候冲刺，平时注意健康和休息。"
3. "你要像狮子一样，看到猎物一跃而起，而不要牛一样，从早到晚劳作。"
#优质博文 #资源推荐 #设计 #tools
1. 腾讯 13 年，我所总结的Code Review终极大法 📓 腾讯云官方公号的文章，腾讯的技术 Leader 谈他们怎么做 Code Review。
大厂做 review，小厂赶需求...
2. DocuSign 🧰 创建、填写、签名数字文档的在线工具，代码开源。
3. Github Old Feed 🧰 一个油猴脚本，恢复 GitHub 首页的旧版 feed，查看自己关注的人的动态。
3. LoremGenie 🧰 Figma 插件，快速生成用来占位的数据文字，插入设计稿。
4. NoteAI 🧰 用户在该网站输入问题，它会用 AI 从搜索引擎返回的网页结果里面，总结出答案。
5. Idify 🧰 一个开源软件，将用户上传的人像照，转成证件照，全部使用前端代码，数据不会上传。（长的跟 Squoosh 蛮像的哈）
6. Plane 🧰 一个基于 Web 的开源项目管理工具，JIRA 的替代品。
7. Octos 🧰 一个开源的 Windows 桌面软件，用来创建和管理 HTML、CSS 和 JS 做的实时交互式壁纸。
8. 现代 CSS 解决方案（Modern CSS Solutions） 📓 CSS 高级教程，讲解新的 CSS 语法如何解决一些传统问题，一共有30多课。
9. EarTrainX 🧰 该网站提供音乐初学者的各种听音练习，训练辨识旋律的能力。
科技爱好者周刊（第 271 期）：非线性的世界，线性的你
#言
1. "重要的不在于你的努力程度，而在于仔细选择工作、人员和项目。"
2. "真正有效的工作方式，不是铁人三项或马拉松，比拼谁坚持的时间长，而是短跑，当机会来临的时候冲刺，平时注意健康和休息。"
3. "你要像狮子一样，看到猎物一跃而起，而不要牛一样，从早到晚劳作。"
#优质博文 #资源推荐 #设计 #tools
1. 腾讯 13 年，我所总结的Code Review终极大法 📓 腾讯云官方公号的文章，腾讯的技术 Leader 谈他们怎么做 Code Review。
大厂做 review，小厂赶需求...
2. DocuSign 🧰 创建、填写、签名数字文档的在线工具，代码开源。
3. Github Old Feed 🧰 一个油猴脚本，恢复 GitHub 首页的旧版 feed，查看自己关注的人的动态。
3. LoremGenie 🧰 Figma 插件，快速生成用来占位的数据文字，插入设计稿。
4. NoteAI 🧰 用户在该网站输入问题，它会用 AI 从搜索引擎返回的网页结果里面，总结出答案。
5. Idify 🧰 一个开源软件，将用户上传的人像照，转成证件照，全部使用前端代码，数据不会上传。（长的跟 Squoosh 蛮像的哈）
6. Plane 🧰 一个基于 Web 的开源项目管理工具，JIRA 的替代品。
7. Octos 🧰 一个开源的 Windows 桌面软件，用来创建和管理 HTML、CSS 和 JS 做的实时交互式壁纸。
8. 现代 CSS 解决方案（Modern CSS Solutions） 📓 CSS 高级教程，讲解新的 CSS 语法如何解决一些传统问题，一共有30多课。
9. EarTrainX 🧰 该网站提供音乐初学者的各种听音练习，训练辨识旋律的能力。
#书摘 #css #前端
《CSS 选择器世界》3.1 CSS选择器是否区分大小写
CSS选择器有些区分大小写，有些不区分大小写，还有些可以设置为不区分大小写。
在HTML中，标签和属性都是不区分大小写的，而属性值是区分大小写的。
相对应地，在CSS中，标签选择器不区分大小写，属性选择器中的属性也不区分大小写，而类选择器和ID选择器本质上是属性值，因此要区分大小写。
然而，随着各大浏览器支持属性选择器中的属性值时也不区分大小写（在
《CSS 选择器世界》3.1 CSS选择器是否区分大小写
CSS选择器有些区分大小写，有些不区分大小写，还有些可以设置为不区分大小写。
在HTML中，标签和属性都是不区分大小写的，而属性值是区分大小写的。
相对应地，在CSS中，标签选择器不区分大小写，属性选择器中的属性也不区分大小写，而类选择器和ID选择器本质上是属性值，因此要区分大小写。
然而，随着各大浏览器支持属性选择器中的属性值时也不区分大小写（在
] 前面加一个 i ），已经没有严格意义上的对大小写敏感的选择器了，因为类选择器和ID选择器本质上也是属性选择器。因此，如果希望HTML中的类名对大小写不敏感，可以这样:
[class~="val" i] {}《CSS 选择器世界》2.4.2 CSS选择器优先级的计算规则
对于CSS选择器优先级的计算，业界流传甚广的是数值计算法。具体如下：每一段CSS语句的选择器都可以对应一个具体的优先级数值，数值越大优先级越高，其中的CSS语句将被优先渲染。
其中，出现一个0级选择器，优先级数值+0；
出现一个1级选择器，优先级数值+1；
出现一个2级选择器，优先级数值+10；
出现一个3级选择器，优先级数值+100。
当CSS选择器的优先级数值相等的时候，后渲染的选择器的优先级更高。（后来居上）
后渲染的选择器优先级更高的规则是对整个页面文档而言的，而不仅仅是在一个单独的CSS文件中适用
2.对数值计算法的点评
上面提到的CSS选择器优先级数值计算法实际上是一个不严谨的方法，例如由于1和10之间的差距过小导致连续10个标签选择器的优先级和1个类选择器的优先级相当。然而事实并非如此，不同选择器优先级等级的差距是无法跨越的。但由于在实际开发中不会连续出现多达10个选择器，因此不会影响我们在实际开发过程中计算选择器优先级数值。
而且对于使用CSS选择器，书写习惯远比知识重要，就算理论知识再扎实，如果平时书写习惯糟糕，也无法避免CSS样式覆盖问题、样式冲突等问题的出现。我们将在第3章中深入探讨这个问题。
因此，对于数值计算法，我的态度是学一遍即可，没有必要深究，只要你书写习惯足够好，就不会遇到各种优先级问题。（正确的，合理的）
#书摘 #css #前端
《CSS 选择器世界》2.4 CSS选择器的优先级
本节介绍每一个级联层中的CSS属性的优先级，这主要是由CSS选择器的优先级决定的。
2.4.1 同等级CSS优先级规则概览
每一个级联层中的CSS优先级也有明显的不可跨越的等级，我们将其划分为0～4共5个等级，其中前4个等级由CSS选择器决定，最后一个等级由书写形式决定。下面对这5个等级分别进行讲解。
（1）0级：通配选择器、选择符和逻辑组合伪类。其中，通配选择器写作星号(*)。示例如下：
- 选择符指空格、>、+、~和||。关于选择符的更多知识参见第5章。
- 逻辑组合伪类有:not()、:is()和:where()等，这些伪类本身并不影响CSS优先级，影响优先级的是括号内的选择器（:where()比较特殊，括号内参数的优先级永远是0）。示例如下：
为0～4共5个等级，其中前4个等级由CSS
需要注意的是，只有逻辑组合伪类的优先级是0级，其他伪类的优先级并非如此。
（2） 1级：标签选择器。示例如下：
（3） 2级：类选择器、属性选择器和伪类。示例如下：
（4） 3级：ID选择器。示例如下：
（5） 4级：style属性内联。示例如下：
其中，style属性内联具有高优先级很好理解，而前面0～3级的选择器部分相对复杂得多，也重要得多，因为前端通常所说的CSS优先级其实指的就是CSS选择器的优先级。甚至可以说，掌握了CSS选择器的优先级等同于掌握了完整的CSS优先级规则。
《CSS 选择器世界》2.4 CSS选择器的优先级
本节介绍每一个级联层中的CSS属性的优先级，这主要是由CSS选择器的优先级决定的。
2.4.1 同等级CSS优先级规则概览
每一个级联层中的CSS优先级也有明显的不可跨越的等级，我们将其划分为0～4共5个等级，其中前4个等级由CSS选择器决定，最后一个等级由书写形式决定。下面对这5个等级分别进行讲解。
（1）0级：通配选择器、选择符和逻辑组合伪类。其中，通配选择器写作星号(*)。示例如下：
* { color: #000; }
- 选择符指空格、>、+、~和||。关于选择符的更多知识参见第5章。
- 逻辑组合伪类有:not()、:is()和:where()等，这些伪类本身并不影响CSS优先级，影响优先级的是括号内的选择器（:where()比较特殊，括号内参数的优先级永远是0）。示例如下：
为0～4共5个等级，其中前4个等级由CSS
需要注意的是，只有逻辑组合伪类的优先级是0级，其他伪类的优先级并非如此。
（2） 1级：标签选择器。示例如下：
body { color: #333; }
（3） 2级：类选择器、属性选择器和伪类。示例如下：
.foo { color: #666; }
[foo] { color: #666; }
:hover { color: #333; }
（4） 3级：ID选择器。示例如下：
#foo { color: #999; }
（5） 4级：style属性内联。示例如下：
<span style="color: #ccc;">优先级</span>
其中，style属性内联具有高优先级很好理解，而前面0～3级的选择器部分相对复杂得多，也重要得多，因为前端通常所说的CSS优先级其实指的就是CSS选择器的优先级。甚至可以说，掌握了CSS选择器的优先级等同于掌握了完整的CSS优先级规则。
#书摘 #css #前端
《CSS选择器世界（第2版）》 我是懒狗嘤嘤嘤
微信读书 23个笔记
◆ 第1章 概述
>> CSS选择器可以分为4种，即选择器、选择符、伪类和伪元素。
>> 这里的body就是一种选择器，属于类型选择器，也可以称为标签选择器。
>> 这里的.container也是选择器，属于属性选择器，我们平时称其为类选择器。
>> 目前我所知道的CSS选择器世界中的选择符有5种，即表示后代关系的空格（ ）、表示父子关系的箭头(>)、表示相邻兄弟关系的加号(+)、表示兄弟关系的波浪线(~)，以及表示列关系的双管道(||)。
>> 如今CSS选择器是有局部作用域的概念的。伪类:scope的设计初衷就是匹配局部作用域内的元素。
>> 实际上此特性曾被浏览器支持过，但只是昙花一现，现在已经被舍弃。目前虽然伪类:scope也能解析，但只能当作全局作用域。但是，这并不表示:scope一无是处，它在JavaScript中还是有效的
>> 上面的CSS选择器的局部作用域示例都配有演示页面，读者可以手动输入https://demo.cssworld.cn/selector2/1/2-1.php
>> CSS选择器中还有一个命名空间(namespace)的概念，这里简单介绍一下。命名空间可以让来自多个XML词汇表的元素的属性或样式彼此之间不产生冲突，它的使用非常常见，例如XHTML文档：<html xmlns="http://www.w3.org/1999/xhtml">又如SVG文件的命名空间：<svg xmlns="http://www.w3.org/2000/svg">上述代码中的xmlns属性值对应的URL地址就是一个简单的命名空间名称，并不指向实际的在线地址，浏览器不会使用或处理这个URL。
>> svg|a中有一个管道符|，管道符前面的字符表示命名空间的代称，管道符后面的内容则是选择器。
>> CSS选择器命名空间的兼容性很好，至少10年前浏览器就已支持，但是，很少见人在项目中使用它，这是为什么呢？原因有二。其一，在HTML中直接内联SVG的应用场景并不多，它更多的是作为独立的SVG资源使用，即使内联，也很少有需要对特性SVG标签进行样式控制的需求；其二，有其他更简单的替代方案
>> 当这些无效的CSS选择器和浏览器支持的CSS选择器在代码中一起出现的时候，会导致整个选择器无效。
>> :hover和:active是浏览器很早就支持的两个伪类，按道理讲，所有浏览器都能识别这两个伪类，但是，由于IE浏览器并不支持:focus-within伪类，导致IE浏览器无法识别整个语句，这就是无效CSS选择器特性。
◆ 第2章 CSS声明的优先级
>> 被继承的CSS声明的优先级一定位于整个CSS世界的底层。
>> 日常开发代码>@layer开发代码>插件注入代码>浏览器内置代码。
>> 先讲解一下设计@layer的初衷。
>> 这就会使我们的CSS代码变得很臃肿，维护成本上升，同时过于复杂的选择器也使CSS渲染的性能不是很好。
>> 而有了@layer规则，上面这些问题就迎刃而解了。我们只要将希望获得低优先级的CSS代码放在@layer规则中，就无须再担心选择器优先级过高的问题，因为@layer规则的级联层级比常规的CSS代码的级联层级低。
>> 其优先级低于.container和.some-button这两个类名，但是由于代码所在的级联层级更高，因此，还是重置了30px。
>> 这就是@layer规则的作用，可以让CSS代码的级联层级降低，从而确保主业务的CSS代码不受第三方组件的CSS代码的影响。
>> @layer {rules}语法在前文出现过，没有任何层级名，称为匿名级联层
>> 下面3种语法均需要自定义级联层的名称，称为命名级联层
>> 命名带规则语法
>> 此时，我们可以使用下面的单命名语法或者多命名语法来灵活调整不同级联层的优先级顺序。如果我们没有这样的需求，则可以直接使用匿名级联层语法。
《CSS选择器世界（第2版）》 我是懒狗嘤嘤嘤
微信读书 23个笔记
◆ 第1章 概述
>> CSS选择器可以分为4种，即选择器、选择符、伪类和伪元素。
>> 这里的body就是一种选择器，属于类型选择器，也可以称为标签选择器。
>> 这里的.container也是选择器，属于属性选择器，我们平时称其为类选择器。
>> 目前我所知道的CSS选择器世界中的选择符有5种，即表示后代关系的空格（ ）、表示父子关系的箭头(>)、表示相邻兄弟关系的加号(+)、表示兄弟关系的波浪线(~)，以及表示列关系的双管道(||)。
>> 如今CSS选择器是有局部作用域的概念的。伪类:scope的设计初衷就是匹配局部作用域内的元素。
>> 实际上此特性曾被浏览器支持过，但只是昙花一现，现在已经被舍弃。目前虽然伪类:scope也能解析，但只能当作全局作用域。但是，这并不表示:scope一无是处，它在JavaScript中还是有效的
>> 上面的CSS选择器的局部作用域示例都配有演示页面，读者可以手动输入https://demo.cssworld.cn/selector2/1/2-1.php
>> CSS选择器中还有一个命名空间(namespace)的概念，这里简单介绍一下。命名空间可以让来自多个XML词汇表的元素的属性或样式彼此之间不产生冲突，它的使用非常常见，例如XHTML文档：<html xmlns="http://www.w3.org/1999/xhtml">又如SVG文件的命名空间：<svg xmlns="http://www.w3.org/2000/svg">上述代码中的xmlns属性值对应的URL地址就是一个简单的命名空间名称，并不指向实际的在线地址，浏览器不会使用或处理这个URL。
>> svg|a中有一个管道符|，管道符前面的字符表示命名空间的代称，管道符后面的内容则是选择器。
>> CSS选择器命名空间的兼容性很好，至少10年前浏览器就已支持，但是，很少见人在项目中使用它，这是为什么呢？原因有二。其一，在HTML中直接内联SVG的应用场景并不多，它更多的是作为独立的SVG资源使用，即使内联，也很少有需要对特性SVG标签进行样式控制的需求；其二，有其他更简单的替代方案
>> 当这些无效的CSS选择器和浏览器支持的CSS选择器在代码中一起出现的时候，会导致整个选择器无效。
>> :hover和:active是浏览器很早就支持的两个伪类，按道理讲，所有浏览器都能识别这两个伪类，但是，由于IE浏览器并不支持:focus-within伪类，导致IE浏览器无法识别整个语句，这就是无效CSS选择器特性。
◆ 第2章 CSS声明的优先级
>> 被继承的CSS声明的优先级一定位于整个CSS世界的底层。
>> 日常开发代码>@layer开发代码>插件注入代码>浏览器内置代码。
>> 先讲解一下设计@layer的初衷。
>> 这就会使我们的CSS代码变得很臃肿，维护成本上升，同时过于复杂的选择器也使CSS渲染的性能不是很好。
>> 而有了@layer规则，上面这些问题就迎刃而解了。我们只要将希望获得低优先级的CSS代码放在@layer规则中，就无须再担心选择器优先级过高的问题，因为@layer规则的级联层级比常规的CSS代码的级联层级低。
>> 其优先级低于.container和.some-button这两个类名，但是由于代码所在的级联层级更高，因此，还是重置了30px。
>> 这就是@layer规则的作用，可以让CSS代码的级联层级降低，从而确保主业务的CSS代码不受第三方组件的CSS代码的影响。
>> @layer {rules}语法在前文出现过，没有任何层级名，称为匿名级联层
>> 下面3种语法均需要自定义级联层的名称，称为命名级联层
>> 命名带规则语法
>> 此时，我们可以使用下面的单命名语法或者多命名语法来灵活调整不同级联层的优先级顺序。如果我们没有这样的需求，则可以直接使用匿名级联层语法。
