iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
在早年间（其实也不是很早），写过几篇关于 CSS Reset 的文章 - [reset.css 知多少](https://github.com/chokcoco/iCSS/issues/5)。 详细描述了当时业界比较常用的，两个 CSS reset 方案：reset.css 与 Normalize.css。 以更为推荐的 Normalize.css 为例，它的核心思想是： 1. 统一了一些元素在所有浏览器下的表现，保护有用的浏览器默认样式而不是完全清零它们，让它们在各个浏览器下表现一致； 2. 为大部分元素提供一般化的表现； 3. 修复了一些浏览器的 Bug ，并且让它们在所有浏览器下保持一致性； 4. 通过一些巧妙的细节提升了 CSS 的可用性； 5. 提供了详尽的文档让开发者知道，不同元素在不同浏览器下的渲染规则；...
本文未完成 ----- ## CSS 中的 min()、max()、minmax()、clamp() 为何？ ## 在 clamp() 与 calc() 混合使用 ## 参考文献 + [CSS Clamp(): The Responsive Combination We’ve All Been Waiting For](https://blog.bitsrc.io/css-clamp-the-responsive-combination-weve-all-been-waiting-for-f1ce1981ea6e) + [min(), max(), and...
本文未完成 ----- [Github -- Reseter.CSS](https://github.com/krishdevdb/reseter.css) [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/)
步入 2022，CSS 的新特性层出不穷，而最近在 CSS 圈最受瞩目的新特性，非 CSS @layer 莫属。 本文，将用最简洁的语言，快速让读者们搞懂，到底什么是 CSS @layer 新规范。 ## 过往 CSS 优先级中存在的问题 如果我们的页面上存在非常多的样式，譬如有我们开发页面的时候的自定义样式，也有引入的组件库样式。**这时候样式将会非常混乱难以管理**。 当我们想覆盖一些本身非我们书写的样式时候，往往不得不通过使用优先级权重更高的样式名，去覆盖那些样式。 同时，当样式优先级感到难以控制时，开发者习惯滥用 `!important` 去解决，这又循环导致了后续更混乱的样式结构。 基于让 CSS 得到更好的控制和管理的背景，CSS @layer 应运而生。 ## 何为 CSS @layer？...
最近没事瞄了一眼 CSS Grid 的 CaniUse：  不得不说，兼容性已经达到了一个可以开始大规模使用的地步了。除去一些最近新出的关于 CSS Grid 的新特性，譬如间距 `gap`、支持瀑布流布局的 `grid-template-column: masonry`，已经可以放心的在业务中开始使用 Grid 布局了。 ## 如何从入门到熟练使用 Grid？-- Grid-Attack 但是，CSS Grid 的一大坨语法总是容易让人望而生畏，心生退意。 最近我就在寻找有没有可以比较好锻炼 CSS Grid 布局的方式，好好复习一下 Grid 语法。 无意间，找到了这个网站，一个通过游戏闯关的模式，实现 Grid...
依稀记得，某年广东语文高考作文的相关描述 -- “有时，常识虽易知而难行，有时，常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。 CSS 更新之快，只能不断鞭策自己持续学习，一直呆在舒适区中，很容易就跟不上节奏。当然，不仅仅是 CSS，对于任何技术任何行业也可以套用这句话。 回归本文的主题 -- 新时代布局。运用现有的 CSS 技术，我们是否可以大胆的跳出常规思维，不再局限于矩形框框一块一块，试着更加艺术一些？ 像是下面这几个这样。 不拘一格的线条：  文字随图片的边缘排列：  不再是横平竖直：  又或者造型怪异的网格：  是不是很有意思？不拘一格的布局能够给页面吸引更多的目光和流量，当然这也需要我对 CSS 掌握的足够好，才能在有限的属性中创造更多不同的可能性。 ## grid 布局 说到新时代布局和创意布局，就不得不提到 Grid 的布局。 CSS...
FizzBuzz 是一道很有意思的题目。我们来看看题目： **如果遇见了 3 的倍数要说 Fizz，5 的倍数就说 Buzz，如果既是 3 的倍数又是 5 的倍数就说 FizzBuzz**。 如果是在一些编程语言中，这是一道比较初级的题目，当然，稍微转换一下，我们就可以把它转换成一道有关 CSS 选择器的题目。 假设我们有如下结构： ```HTML // ... 很多个 li ``` 通过 CSS 选择器，实现当 li 的序号为 3 的倍数时，li...
> 标题中的 Cascading 亦可以理解为级联。 > 更新于 2021/02/01，本文的一些内容，在最新的 chrome 中，一些规则又已经重新修改，建议阅读过程可以自己实际操作一遍，以免被一些旧的规范误导~ 进入正文，这是一个很有意思的现象。可以直接跳到 **总结一下** 部分，看完再回过头来阅读本文。 ## 引子 假设我们有如下结构： ```HTML 123456789 ``` 上面的 `p` 标签只有一个内联 CSS，很明显，在没有其他样式的干预下，文本 `.txt` 的颜色肯定就是红色的。  如果此时，我们希望改变 `.txt` p 标签元素的内容文字的颜色，但是不能去修改内联 CSS，只能通过样式文件去实现，像是这样：...
循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 ## 画个电池 当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：  欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 方法很多，代码也很简单，直接看效果：  有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总感觉少了点什么。 ### 增加阴影及颜色的变化 如果要继续优化的话，需要添加点细节。 我们知道，低电量时，电量通常表示为红色，高电量时表示为绿色。再给整个色块添加点阴影的变化，呼吸的感觉，让充电的效果看起来确实是在动。  ### 知识点 到这里，其实只有一个知识点： + 使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画 我们无法对一个渐变色直接进行 animation ，这里通过滤镜对色相进行调整，从而实现了渐变色的变换动画。 上述例子完整的...
一个很有意思的题目。**如何不使用 `overflow: hidden` 实现 `overflow: hidden`**？ CSS 中 `overflow` 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 `overflow: hidden` 则会将超出容器范围内的内容剪裁。 ## 控制 `overflow: hidden` 的方向 这源自一个实际的需求，在某个需求当中，要求容器内的内容，**在竖直方向上超出容器会被裁剪，而在水平方向上超出容器，则不会被裁剪**。类似这样：  有意思，第一个想到的解法当然是在上述黄色背景元素本身之外再套用一层父元素，然后父元素才是实际设置 `overflow: hidden` 的元素，父元素的范围就是实际才是控制是否裁剪的范围。类似这样：  实际的父元素才是设置了 `overflow: hidden` 的元素。 当然，如果实际情况就是这么简单，也没什么问题。...