CSS
用于描述HTML文档呈现样式的语言,也可通过伪类选择器、表单状态等机制实现复杂交互逻辑
核心事实
时间轴 (近 90 天)
CSS 中 height: auto 是关键字而非具体数值,浏览器无法在 0 与 auto 之间插值,直接过渡会瞬间跳变
在浏览器环境中,开发者可用 CSS 的 z-index、transform 以及 Pointer Events API 来模拟窗口的层级、拖拽与缩放行为
CSS的scroll-behavior: smooth可以实现锚点跳转的平滑滚动,无需JavaScript
lh单位代表行高,设置height: 3lh后文本框无论字号变化都精确保持三行高度
CSS验证应作为第一道防线提供即时用户反馈,服务端验证在用户提交时不可省略
给目标元素设置scroll-margin可以在锚点跳转时预留边距,避免标题被固定导航栏遮挡
使用逻辑属性能更好地适配不同书写模式(如从右到左、垂直排版等)的布局需求
CSS 的 field-sizing: content 设置后,用户输入更多文字时文本域会自动变高,而不是出现内部滚动条
CSS 的 lh 单位代表当前元素的行高(line-height),将文本域高度设置为 3lh 时,无论字号如何变化,高度都会自动匹配三行文字所需的空间
设计系统中一个底层 Token 的修改会通过 CSS 自定义属性或预处理器变量的层层继承影响所有引用它的组件
还有 40 条时间轴事件
全部知识事实 (20)
CSS动画中的cubic-bezier()函数、Adobe Illustrator的钢笔工具、字体渲染中的TrueType轮廓都是贝塞尔曲线的典型应用
65%待验证CSS的设计原则是遇到不认识的属性或值时静默忽略并继续解析,而非像编程语言那样报错
95%待验证outline相比border不占据任何布局空间,不会影响元素的盒模型计算
95%待验证在Flexbox和Grid出现之前,开发者主要依赖float属性进行布局,该属性原本设计用于文字环绕图片
90%待验证CSS诞生于1996年,最初是为了给学术文档添加样式,而非构建复杂的应用界面
90%待验证background-position中写top等单个关键字时,浏览器会自动补全另一个方向为center
90%待验证outline支持outline-offset属性,可以设置负值让轮廓向内收缩
90%待验证rebeccapurple是CSS历史上唯一一个以真实人物命名的颜色关键字
90%待验证CSS颜色函数中,颜色值超出范围时会自动裁剪(gamut mapping):大于1的值认为是1,小于0的值认为是0
85%待验证早期浏览器在transparent颜色过渡时会产生灰色阴影,原因是transparent被解析为rgba(0,0,0,0),插值时黑色通道参与了计算
85%待验证CSS Zen Garden demonstrated in the early 2000s that the same HTML could achieve completely different visual effects by switching stylesheets
80%待验证background-clip: text是目前实现CSS文字渐变效果的唯一方式
80%待验证CSS正在从纯粹的样式描述语言进化为具备逻辑判断能力的样式编程语言
70%待验证CSS 的 field-sizing: content 设置后,用户输入更多文字时文本域会自动变高,而不是出现内部滚动条
60%待验证CSS的ease缓动函数对应三次贝塞尔曲线cubic-bezier(0.25, 0.1, 0.25, 1.0)
60%待验证CSS中角度渐变对应的属性是conic-gradient(),于2020年前后获得主流浏览器的广泛支持
60%待验证将CSS和JavaScript内联到单个HTML文件中,虽然牺牲了代码可维护性,但实现了一个文件即整个网站的零障碍部署
60%待验证前端的核心三件套是HTML(定义页面结构)、CSS(控制视觉样式)和JavaScript(实现交互逻辑)
60%待验证CSS 中 height: auto 是关键字而非具体数值,浏览器无法在 0 与 auto 之间插值,直接过渡会瞬间跳变
50%待验证在浏览器环境中,开发者可用 CSS 的 z-index、transform 以及 Pointer Events API 来模拟窗口的层级、拖拽与缩放行为
50%