呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#书摘 #css #前端
《CSS 世界》 font-size 踩过的坑
「桌面 Chrome 浏览器下有个 12px 的字号限制，就是文字的 font-size 计算值不能小于12px，我猜是因为中文，如宋体，要是小于12px，就会挤成成一团，略丑，Chrome看不下去…
实际上，并不是所有小于12px的font-size都会被当作12px处理，有一个值例外，那就是 0，也就是说，如果 font-size:0 的字号表现就是 0，那么文字会直接被隐藏掉，并且只能是 font-size:0，哪怕设置成 font-size:0.0000001px，都还是会被当作12px处理的。」
书摘 css 前端
#书摘 #css #前端
《CSS 世界》
font-size 支持长度值，如1em，也支持百分比值，如100%。这两点想必众所周知，但 font-size 还支持关键字属性值这一点怕是就有不少人不清楚了。

（1）相对尺寸关键字。指相对于当前元素font-size计算，包括：
- larger：大一点，是<big>元素的默认font-size属性值。
- smaller：小一点，是<small>元素的默认font-size属性值。

（2）绝对尺寸关键字。与当前元素 font-size 无关，仅受浏览器设置的字号影响。注意这里的措辞，是“浏览器设置”，而非“根元素”，两者是有区别的。
- xx-large：好大好大，和 <h1> 元素计算值一样。
- x-large：好大，和 <h2> 元素计算值一样。
- large：大，和 <h3> 元素计算值近似（“近似”指计算值偏差在1像素以内，下同）。
- medium：不上不下，是 font-size 的初始值，

其中，相对尺寸关键字larger和smaller由于计算的系数在不同浏览器下差异很大，因此实用价值有限，只有类似文档页、帮助页这类对文字尺寸要求不高的场合才有用；而绝对尺寸关键字的实用性要大一些，而且在某些场合是推荐使用的关键字属性值
书摘 css 前端
#书摘 #css #前端
《CSS 世界》z-index“不犯二”准则

此准则内容如下：对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2。由于z-index不能超过2，因此，我称其为“不犯二”准则。 这是一条经验准则，可以有效降低日后遇到z-index样式问题的风险。 先讲一下为什么需要这个准则。
（1）定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的 z-index 值也无法覆盖其他元素的问题。
（2）避免 z-index“一山比一山高”的样式混乱问题。此问题多发生在多人协作以及后期维护的时候。例如，A小图标定位，习惯性写了个z-index:9；B一看，自己原来的实现被覆盖了，立马写了个z-index:99；结果比弹框组件层级还高，那还得了，立马弹框组件来一个z-index:999999；谁知后来，弹框中又要有出错提示效果……显然，最后项目的 z-index层级管理就是一团糟。

对于 JavaScript 驱动的浮层组件，我会借助“层级计数器”来管理，原因如下：
（1）总会遇到意想不到的高层级元素；
（2）组件的覆盖规则具有动态性。所谓“层级计数器”，实际上就是一段 JavaScript 脚本，会遍历所有 <body> 处于显示状态的子元素，并得到最大z-index值，和默认的z-index做比较。如果超出，则显示的组件的z-index自动加1，这样就不会出现有组件被其他组件覆盖的问题；如果不超出，就使用默认的z-index值，我习惯设成9，因为遵循“不犯二”准则的情况下，9已经是个足够安全的值了，浮层组件根本无须担心会被页面上某个元素层级覆盖
书摘 css 前端
#书摘 #css #前端
《CSS 世界》理解CSS世界的层叠上下文和层叠水平
1. 层叠上下文，英文称作 stacking context，是 HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

2. 层叠水平，英文称作 stacking level，决定了同一个层叠上下文中元素在z轴上的显示顺序。对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。

3. 千万不要把层叠水平和CSS的 z-index 属性混为一谈。尽管某些情况下 z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的孩子元素；而层叠水平所有的元素都存在。

4. 层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。注意，这里跟上面两个不一样，上面的“层叠上下文”和“层叠水平”是概念，而这里的“层叠顺序”是规则。（p2）

5. 下面这两条是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面两条准则：
（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。

6. 层叠上下文元素有如下特性。
- 层叠上下文的层叠水平要比普通元素高
- 层叠上下文可以阻断元素的混合模式（参见http://www.zhangxinxu.com/wordpress/?p=5155 的这篇文章的第二部分说明）。
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
- 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

7. 和块状格式化上下文一样，层叠上下文也基本上是由一些特定的CSS属性创建的。我将其总结为3个流派。
（1）天生派：页面根元素天生具有层叠上下文，称为根层叠上下文
（2）正统派：z-index值为数值的定位元素的传统“层叠上下文”。当其z-index值不是auto的时候，会创建层叠上下文
（3）扩招派：其他CSS3属性（flex等）
书摘 css 前端
#阮一峰的科技周刊 #优质博文 #前端
科技爱好者周刊（第 270 期）："精益开发"的精益是什么？

「"精益开发"指的是创建一个最小的产品原型，交付给客户，观察他们如何使用它，再快速推出小幅改进的下一代产品。这样就能迎合快速变化的需求，不会引入无用功能。
作为比较，福特方法则是详细计划所有功能，全部开发出来，然后一次性交付。」

#tools
1. Figma.Pub： 为 figma 设计稿生成可自动更新的图片链接，支持 jpg 、png 、svg 格式和 scale 参数
2. Whisper Web： 不必登录，将英语音频转成文本的在线工具。

好像没别的感兴趣的了´_>`
阮一峰的科技周刊 优质博文 前端 tools
#优质博文 #前端 #css
1. 【上篇】你的图片加载，一点都不酷炫！不信You Look Look...
2. 【下篇】你的图片加载，一点都不酷炫！不信You Look Look...

就喜欢这种花里胡哨，suki（x
juejin.cn
【上篇】你的图片加载，一点都不酷炫！不信You Look Look... - 掘金
对于图片加载，咱们可以更酷炫一点！ 比如这样！ 这样！ 这样！ 还有这样的！ 前言 现代网站中的图片使用量是很大的，在一些门户网站中，还会有一些大尺寸的图片展示，这个时候图片如果加载不顺畅，是很影响用
优质博文 前端 css
Expanding Input

❗️ Source Code

Save and Share 🚀

👉 @frontend_trend
Sparkly Circle Loader

❗️ Source Code

Save and Share 🚀

👉 @frontend_trend
#书摘 #css #前端
《CSS 世界》关于 clip
1. 可访问性隐藏： clip 剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是，它具有更强的普遍适应性，任何元素、任何场景都可以无障碍使用。（p1）
2. clip 隐藏仅仅是决定了哪部分是可见的，非可见部分无法响应点击事件等；然后，虽然视觉上隐藏，但是元素的尺寸依然是原本的尺寸，在 IE 浏览器和 Firefox 浏览器下抹掉了不可见区域尺寸对布局的影响，Chrome浏览器却保留了。 Chrome 浏览器的这种特性表现实际上让 clip 隐藏有了瑕疵，好在通常使用场景是看不到这个差异的，故影响甚微。（p2-3）
书摘 css 前端
#书摘 #css #前端
《CSS 世界》流的破坏与保护——关于overflow
「此时，有人可能会惊呼：什么？设置 height:0 同时 overflow:hidden？那岂不是里面所有元素都被剪裁看不见啦？如果是普通元素确实会如此，但是对于 absolute 绝对定位以及 fixed 固定定位元素，规则要更复杂！」


1. overflow 对absolute 元素的剪裁规则用一句话表述就是：绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。
上面这句话是官方文档的直译，似乎还是有些拗口，我们再换一种方法表述就是：如果overflow 不是定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素，则overflow无法对absolute元素进行剪裁

最后，非常有必要补充一点，那就是由于 position:fixed 固定定位元素的包含块是根元素，因此，除非是窗体滚动，否则上面讨论的所有overflow剪裁规则对固定定位都不适用。这一点后面还会提及。

2. 在CSS 世界中，上面说的这些几乎都是完美无瑕的，但是，随着 CSS3 新世界到来的冲击，规则在不经意间发生了一些变化，其中最明显的就是transform属性对overflow剪裁规则的影响，CSS3新世界中transform属性似乎扮演了原本“定位元素”的角色，但是这种角色扮演并不完全。

可以看到 overflow 元素自身 transform 的时候，Chrome 和 Opera 浏览器下的overflow剪裁是无效的，这是唯一和有定位属性时的overflow剪裁不一样的地方，因此才有“角色扮演并不完全”的说法。

transform除了改变overflow属性原有规则，对层叠上下文以及position:fixed的渲染都有影响。

因此，当大家遇到 absolute 元素被剪裁或者 fixed 固定定位失效时，可以看看是不是transform属性在作祟。
书摘 css 前端
#书摘 #css #前端
《CSS 世界》流的破坏与保护

1. absolute的包含块
包含块（containing block）这个概念实际上大家一直都有接触，就是元素用来计算和定位的一个框。比方说，width:50%，也就是宽度一半，那到底是哪个“元素”宽度的一半呢？实际上就是指的“包含块”。
普通元素的百分比宽度是相对于父元素的 content box 宽度计算的，而绝对定位元素的宽度是相对于第一个position不为static的祖先元素计算的。
实际上，大家已经和“包含块”打过交道了，对于这些计算规则，规范是有明确定义的，具体如下（剔除了不常用的部分内容）。
（1）根元素（很多场景下可以看成是 <html> ）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
（2）对于其他元素，如果该元素的 position 是 relative 或者 static，则“包含块”由其最近的块容器祖先盒的 content box 边界形成。
（3）如果元素 position:fixed，则“包含块”是“初始包含块”。
（4）如果元素 position:absolute，则“包含块”由最近的 position 不为 static 的祖先元素建立，具体方式如下。
如果该祖先元素是纯 inline 元素，则规则略复杂：
- 假设给内联元素的前后各生成一个宽度为0的内联盒子（inline box），则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”
- 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是 CSS2.1 规范并没有明确定义，浏览器自行发挥。否则，“包含块”由该祖先的 padding box 边界形成。
（5）如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。

2. 可以看到，和常规元素相比，absolute 绝对定位元素的“包含块”有以下3个明显差异：
（1）内联元素也可以作为“包含块”所在的元素
（2）“包含块”所在的元素不是父块级元素，而是最近的 position 不为 static 的祖先元素或根元素
（3）边界是 padding box 而不是 content box
书摘 css 前端
Before
After
Back to Top