刷到一个帖子问 Firefox 是不支持网页的滚动条样式吗？，说有些网页会呈现自定义的滚动条，Chrome 和 Safari 打开是正常的，但是 Firefox 只会显示默认的样式。

我的映像里也是这样的，FF对于支持滚动条的样式自定义并不是特别好，有一些属性会有问题。
但是为了回复更有价值和佐证，我还是去 MDN 上面检索了一下相关的 CSS 样式属性，但是查询出来的是 FF 是支持的而且是很早期就支持了，反而是 webkit 内核的浏览器早期对于滚动条样式的支持有问题！

这就很奇怪了，难道是我记忆错误了？

去年2月份的时候在思否刷到一个问题 👉 span的display为inline-block 和inline的时候对父级元素高度的影响?
当时就觉得很奇怪，以为是一些其他的CSS属性影响导致的，但是问题后面提到了参考链接里面具体说了原因，只不过OP没有很好的理解，我也没有很好的理解。
因为就算是IFC的问题，inline-block 和 inline 元素的表现应该是差不多的。但是实际情况并不是这样，只有 inline-block 是特殊的情况。

一年多的时光中有几次想捋清楚这个问题，但是又因为各种借口搁置了，今天终于逮起劲来准备解决掉这个疑惑。

以下是当时写的一个复现Demo，只会显示子元素是 inline-block 的 .container 会有高度（显示红色）。而子元素的 inline 和 block 的 .container 并没有高度，所以不会显示（蓝色和绿色）。

很奇怪是不是？

现在CSS写的是越来越少了，以至于刷到这样一个问题 👉 前端文章页的内容获取自后台编辑器，如何让他不受全局样式影响？。
思维惯性下就开始考虑各种样式隔离方案，而完全忽略掉了还有一种使用CSS的样式还原方式（all: revert） 来避免全局样式对于富文本内容的样式污染问题。

相比于各种前端的CSS样式隔离方案的高成本，使用 all: revert 方式来简易实现局部区域的样式还原，仅仅需要配置一条这样的样式规则：

<template>
  <div id="test">
    <div v-html="html"></div>
  </div>
</template>
<style>
#test * {
  all: revert;
}
</style>

但因为CSS样式的权重问题，你看到了我是使用的 ID选择器，而不是 Class选择器。
所以如果说全局样式有使用 #app 来匹配的话，就没办法使用 all: revert 的方式来还原浏览器默认样式了。这也是这个方案的短板，不过大部分情况下的样式都是可以被重置的。

如果 overflow-x 或 overflow-y 中的一个值不是 visible 或者 clip 的话，给 overflow 设置的 visible/clip 值会被自动处理成 auto/hidden。

昨天下班之前看了一眼思否问答，发现思否的导航栏出现BUG了。所以想着在官方修复前自己改CSS样式临时凑合一下。
但看到 #sf-header 元素上面的 overflow-x:hidden 属性时候，我突然就卡壳了。开始困惑如果我给元素设置了 overflow-x: hidden 之后，垂直方向上的内容溢出时展现方式应该是怎么样的？是应该是如当前看到的出现滚动条还是应该超出显示。

因为长者的逝世，最近不断有同学在问：应该怎么做站点置灰(去色)的需求。一般来说我都会转发张鑫旭大佬的 《小tip: 使用CSS将图片转换成黑白(灰色、置灰)》 这篇文章给对方，文章内详细的描述了应该如何处理。
虽然 filter 属性还是草案阶段，但是几乎所有的现代浏览器都有很好支持，所以可以直接使用 html{filter: grayscale(100%)} 来实现这个需求。

但是今天在社区里面看到有人提到了这样的一个问题请教css网站置灰，排除图片的问题？，需求是使用 filter: grayscale(100%) 使全站置灰之后，如何排除网站中的图片的置灰。

一开始我认为这个需求有一些点不合理，随即答复了可以按照区块去实现置灰，如果要实现这样的需求需要通过遍历来实现，并让他去和PM沟通，具体为什么要实现这样的方式。
但是后来有人补充了通过 :not() + :has() 伪类选择器实现的方式，但是还是有一定兼容性问题的。_{（FireFox 还未支持 :has() 伪类选择器_2022年12月）}

今天在逛V站看到一个自推UI组件库的帖子，我觉得很不错，在查看组件样例的时候呢，发现了他的抽屉组件的遮罩可以把整个页面添加毛玻璃效果！我就很惊讶。马上就 F12查看了一下他的实现方式，因为在我映像里还没有一个很简单的的可以直接实现背景元素毛玻璃效果的方式。

其实不光是抽屉组件，其它的一些类 Modal 带有遮罩的组件都有这个毛玻璃的效果，大伙可以点点看看。

好了，不多废话直接开始正题。

本周来了一个新的需求，需要前端生成打印内容，每一项数据占据一张 A4 纸，选择多项就是分多张打印，所以需要打印指定内容区域，并且使用 page-break 来控制打印区域的分页。
以前就只使用 CSS 控制过打印时样式，隐藏一些不需要打印的区域，还尝没有试过打印指定区域内容，并且控制打印内容强制分页，所以记录一下。

前几天写 flex 容器宽度被内容撑开的问题 查文章的时候，看到了一篇 flex:1 到底代表什么?，确实很多时候只是知道 flex:1 的作用，并不清楚他具体代表了什么。
和那篇帖子一样，我原先理解的也是 flex:1 应该是 flex:1 1 auto 的简写。因为设置了 flex:1 之后就可以让容器扩张了。既然 flex 的默认值是 0 1 auto 那么理所当然的就这样认为了。

看完了这个帖子之后发现其实并不是这样。
简写的 flex:1 其实是 flex:1 1 0%，其中的 flex-basis 的值从默认值变成了 0% ，但是文章并没有说明为什么会这样。

确实这个东西不值得深入研究为什么，只需要知道和理解就可以了。
但，正好昨天在翻《CSS新世界》的时候看到了这部分内容！

在弹性布局中，一个 flex 子项的最终尺寸是基础尺寸（或内容尺寸）、弹性增长或收缩、最大最小尺寸共同作用的结果。
最终尺寸计算的优先级是：
最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸

• 基础尺寸由 flex-base 属性或 width 属性，以及 box-sizing 盒模型共同决定；
• 内容尺寸最指最大内容宽度，当没有设置基础尺寸是会顶替基础尺寸的角色；
• 弹性增长指的是 flex-grow 属性，弹性收缩指的是 flex-shrink 属性；
• 最大尺寸主要受 max-width 属性限制；最小尺寸则比较复杂，受最小内容宽度、width 属性和 min-width 属性共同影响。

很早之前就遇到过这个问题但没有整理，当时处理完问题之后就没有管了。昨天又遇到了同样的问题，因为嵌套的层次很深折腾了有2个小时，所以还是需要记录下来以免未来又忘了。

其实很简单，容器使用 width:0;flex:1; 即可解决问题。

但是稍微有点没有理解的是：为什么设置宽度为 0 时，使用 flex-grow:1 可以使容器放大，但是设置宽度为 100% 时，使用 flex-shrink:1 并不会让容器缩小。

早些时候有看到过一个 纯CSS轮播图 的文章，当时有研究过实现，大概是利用了 hash (锚标记) 和 scroll-snap 来实现的，但是具体实现已经回忆不起来了。

正好现在分享群组里边暂时没有主题了，就想着可以当成一个常驻的补位小环节，大家一起浏览 CodePen 之类的社区找一个大家都感兴趣的 Demo 来研究。
在分享前还是需要自己重新研究一遍的，不然在讲述的时候出错可太 “甜蜜的” 尴尬了。