CSS
用于描述HTML文档呈现样式的语言,也可通过伪类选择器、表单状态等机制实现复杂交互逻辑
Core Facts
Timeline (last 90 days)
CSS的linear()函数在2023年各主流浏览器陆续获得支持
对于难以用文字精确描述、手写又繁琐的CSS效果,使用专用可视化生成器往往比反复与ChatGPT调试提示词更快更精准
CSS目前并不原生支持网格渐变(mesh gradient),其实现方式是叠加多个径向渐变(radial gradient)
渐变本身不能直接动画,但通过@property注册的自定义属性里的具体数值可以被过渡
z-index: sibling-index()是CSS新提案中的函数,能让每个兄弟元素自动获得依序递增的z-index值
微缩放应从scale(1.1)过渡到scale(1)(放大再收),因为全屏元素缩小会露出边缘破坏满屏效果
应将进场、退场、缩放拆成多个独立动画并用animation-range分别控制触发区间,而非用单个关键帧动画管理所有变化
滚动驱动动画是CSS在2023年引入的原生能力,能将滚动进度映射为动画播放进度而无需JavaScript事件监听
实现场景叠加的技巧是在每个场景内部放一个layer图层对其做固定定位,而非把场景本身设为position: fixed
GTA6官网的滚动交互视觉效果核心可以完全用纯CSS实现
40 more timeline events
All Facts (20)
CSS动画中的cubic-bezier()函数、Adobe Illustrator的钢笔工具、字体渲染中的TrueType轮廓都是贝塞尔曲线的典型应用
65%UnverifiedCSS的设计原则是遇到不认识的属性或值时静默忽略并继续解析,而非像编程语言那样报错
95%Unverifiedoutline相比border不占据任何布局空间,不会影响元素的盒模型计算
95%Unverified在Flexbox和Grid出现之前,开发者主要依赖float属性进行布局,该属性原本设计用于文字环绕图片
90%UnverifiedCSS诞生于1996年,最初是为了给学术文档添加样式,而非构建复杂的应用界面
90%Unverifiedbackground-position中写top等单个关键字时,浏览器会自动补全另一个方向为center
90%Unverifiedoutline支持outline-offset属性,可以设置负值让轮廓向内收缩
90%Unverifiedrebeccapurple是CSS历史上唯一一个以真实人物命名的颜色关键字
90%UnverifiedCSS颜色函数中,颜色值超出范围时会自动裁剪(gamut mapping):大于1的值认为是1,小于0的值认为是0
85%Unverified早期浏览器在transparent颜色过渡时会产生灰色阴影,原因是transparent被解析为rgba(0,0,0,0),插值时黑色通道参与了计算
85%UnverifiedCSS Zen Garden demonstrated in the early 2000s that the same HTML could achieve completely different visual effects by switching stylesheets
80%Unverifiedbackground-clip: text是目前实现CSS文字渐变效果的唯一方式
80%UnverifiedCSS正在从纯粹的样式描述语言进化为具备逻辑判断能力的样式编程语言
70%UnverifiedCSS 的 field-sizing: content 设置后,用户输入更多文字时文本域会自动变高,而不是出现内部滚动条
60%UnverifiedCSS的ease缓动函数对应三次贝塞尔曲线cubic-bezier(0.25, 0.1, 0.25, 1.0)
60%UnverifiedCSS中角度渐变对应的属性是conic-gradient(),于2020年前后获得主流浏览器的广泛支持
60%Unverified将CSS和JavaScript内联到单个HTML文件中,虽然牺牲了代码可维护性,但实现了一个文件即整个网站的零障碍部署
60%Unverified前端的核心三件套是HTML(定义页面结构)、CSS(控制视觉样式)和JavaScript(实现交互逻辑)
60%UnverifiedCSS目前并不原生支持网格渐变(mesh gradient),其实现方式是叠加多个径向渐变(radial gradient)
50%UnverifiedCSS的linear()函数在2023年各主流浏览器陆续获得支持
50%