#CSS
共 20 篇相关文章
让CSS自己算布局：:has()实现自适应网格
利用CSS的:has()与:nth-child()让网格组件根据子元素数量自动调整列数，无需JavaScript或修改器类，从2列到4列平滑适配，写出更健壮的响应式布局。
纯CSS复刻经典游戏Lemmings：无JS动画的极致探索
Hacker News热门项目Lemmings CSS Animation用纯CSS复刻经典游戏动画，无JavaScript实现状态切换，引发社区对CSS能力边界与实用性的讨论。
新CSS特性安全落地：Baseline、降级与特性查询实战
从Baseline状态的真实含义出发，结合Kevin Powell的实战经验，讲解新CSS特性安全上线的策略：渐进增强、双写降级、@supports特性查询、polyfill取舍，以及对AI辅助编程的启示。
告别clamp魔法数字：CSS progress()函数实现流畅排版
CSS progress()函数已进入Baseline，用归一化进度值替代clamp()的魔法数字，实现可读、可维护的流体排版。本文解析其原理、自定义属性封装技巧及tan(atan2())兼容方案。
CSS 的未来：互操作性与新特性如何重塑前端开发
解读 Josh W. Comeau 关于 CSS 未来的分析：Interop 项目如何推动浏览器兼容性协同，容器查询、:has()、层叠层和原生嵌套等特性对前端开发的实际影响，以及 Hacker News 社区的不同观点。
Invoker Commands：用HTML声明式替代JavaScript的新方案
深入解析Invoker Commands新特性：用纯HTML声明式打开对话框和popover，告别JavaScript。涵盖Interest Invokers悬停预览、自定义命令、浏览器支持与polyfill使用指南。
纯CSS复刻GTA6官网滚动特效：场景切换与渐变文字详解
用纯CSS复刻GTA6官网的滚动特效：通过view-timeline、animation-range、@property等技术实现场景交叉淡变、微缩放与渐变流动文字，完整拆解前端实现思路与调试经验。
View Transitions 重大更新：跨浏览器支持与四大新特性详解
Google CSS Podcast 详解 View Transitions 视图过渡最新更新：Chrome/Safari/Firefox 跨浏览器支持进展、view transition types、match-element、嵌套视图过渡组与作用域视图过渡五大新特性全面解析。
CSS开发者偏好实录：Adam Argyle谈最爱的颜色、单位与属性
CSS专家Adam Argyle在前端快问快答中分享最爱的颜色、格式、属性和单位，对比社区投票揭示OKLCH普及、display与rem称王、grid渐变常需查文档等前端生态信号。
纯CSS实现卡片展开动画：details与现代CSS技巧详解
纯CSS实现卡片展开动画教程：用details/summary元素配合::details-content、interpolate-size、transition-behavior和@starting-style，无需JavaScript打造平滑交错的入场动画，附兼容性与渐进增强建议。
别再用JavaScript了：6个被低估的现代CSS特性
前端讲师Kevin Powell梳理6个可替代JavaScript的现代CSS特性，包括scroll-margin锚点定位、scroll-snap滚动吸附、:user-valid表单验证、focus-visible焦点环、lh单位和field-sizing文本框控制，均已获浏览器广泛支持。
两个CSS新特性：告别文本域样式的魔法数字
本文介绍两个让文本域样式更简单的 CSS 特性：用 lh 单位精确控制行数高度，摆脱魔法数字；用 field-sizing:content 实现文本域随内容自动扩展，一行 CSS 替代大量 JavaScript。
Shadow DOM 入门：用交互示例理解 CSS Shadow Roots
Simon Willison 分享了一个用交互示例解释 CSS Shadow Roots 的工具，仅用一句提示词由 AI 模型 Fable 5.1 生成。本文解读 Shadow DOM 的封装机制、样式隔离原理，以及 AI 辅助生成教学工具带来的启示。
修复流式排版难题：容器查询与@property的组合技
流式排版在容器达到最大宽度后字号仍持续增长、多容器下字号不一致，是 CSS Fluid Typography 的常见痛点。本文讲解如何用容器查询单位配合 @property 注册自定义属性，锁定统一字号，兼顾响应式布局与设计一致性。
生产环境网站最常用的CSS单位排名揭晓
生产环境网站最常用的CSS单位排名出炉：px居首，em以91.3%覆盖率超越rem，而degrees和seconds竟排进前四。本文解析这份榜单背后的前端现实。
CSS Zen Garden的理想终成现实？聊聊内容与样式分离
Hacker News 热帖「The CSS Zen Garden dream shipped」引发讨论。本文回顾 CSS Zen Garden 内容与样式分离的设计理想，分析现代 CSS 如何让这一梦想落地，以及组件化时代理想与现实之间的张力。
教程攻略告别Tailwind后，这些CSS调色板工具值得收藏
从Tailwind CSS回归原生CSS后，如何选择合适的颜色系统？本文汇集社区推荐的CSS调色板方案，包括Reasonable Colours、Flexoki、uchū等预设配色，以及tints.dev等生成器工具和OKLCH颜色空间技术。
教程攻略CSS text-shadow平滑渲染优化：告别锯齿，释放文字特效潜力
主流浏览器对CSS text-shadow渲染引擎进行了重大优化，实现亚像素级平滑渲染和GPU加速。本文详解改进内容、霓虹灯等实际效果实现，以及性能最佳实践建议。
