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

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#书摘 #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 前端
#书摘 #css #前端
《CSS 世界》深入内联元素 —— vertical-align 书接上回

1. 「vertical-align 上标下标类属性值指的就是 sub 和super 两个值，分别表示下标和上标。在HTML代码中，有两个标签语义就是下标和上标，分别是上标 <sup> 和下标` <sub>`，因为这两个HTML标签长得很类似，所以很多人经常记不清到底哪个是上标哪个是下标。我告诉大家一个记忆方法，就是看p和b两个字母的圈圈位置，如果圈圈在上面，就是“上标”，如果圈圈在下面，就是“下标”」确实好记
2. 「最后，HTML标签 <sup> 和 <sup> 的vertical-align属性也和super和sub有着非同一般的关系，那就是 <sup> 标签默认的vertical-align属性值就是super，`<sub>` 标签默认的vertical-align属性值就是sub。上标常用作标注，下标在数学公式、化学表达式中用得比较多，基本上，vertical-align 上标下标类属性值的实际应用价值也就上面这点儿了，设计本意之外的使用价值几乎就是零。」
3. 基于vertical-align属性的纯css定位的水平垂直居中弹框（p3-p5）可了解，现在自己应该是不会用这种方法的：https://demo.cssworld.cn/5/3-10.php
书摘 css 前端
Before
After
Back to Top