css
已收录文章：13篇
-
View Transition API 已经不只服务 SPA。本文用两个同源页面演示跨文档过渡，拆开 @view-transition、view-transition-name、pageswap/pagereveal 与不支持浏览器的降级边界。392 收藏
-
文章 · 前端 | 4天前 | 布局 · css · 前端动画 · 浏览器兼容 · 渐进增强 · CSS 前端动画 浏览器兼容 interpolate-size height auto calc-sizeCSS 的 height:auto 过去很难直接做平滑过渡。本文从 max-height 和 JavaScript 测量的旧方案切入，演示 interpolate-size: allow-keywords 的最小改造，并核对继承范围、浏览器降级与 prefers-reduced-motion 边界。475 收藏
-
原生 dialog 和 popover 关闭时直接消失，通常不是 opacity 写错，而是 display 的离散切换没有参与过渡。本文用一组不依赖框架的 CSS/HTML 示例，解释 @starting-style、display、overlay 与 transition-behavior 的配合方式，并给出旧浏览器的降级边界。444 收藏
-
商品卡片内容长短不一时，底部价格和按钮容易上下漂移。本文从实际错位现象入手，用 CSS Grid 的 subgrid 统一行轨道，并给出不支持 subgrid 浏览器的稳定降级写法。130 收藏
-
文章 · 前端 | 2星期前 | 前端 · javascript · css · 浏览器API · document.startViewTransition CSS View Transitions 页面切换动画用一个无框架商品列表示例，讲清 CSS View Transitions API 的最小接入、元素命名、同文档切换、降级处理和浏览器兼容边界。375 收藏
-
CSS 容器查询让卡片组件根据自身可用宽度改变布局，而不是只看浏览器宽度。本文用商品卡片示例讲清 container-type、@container、断点选择和回归检查。339 收藏
-
CSS 容器查询让卡片组件根据自身可用宽度改变布局，而不是只看浏览器宽度。本文用商品卡片示例讲清 container-type、@container、断点选择和回归检查。491 收藏
-
文章 · 前端 | 1个月前 | 前端 · javascript · css · View Transition API · JavaScript 浏览器兼容 View Transition API document.startViewTransition 前端筛选列表 SPA过渡从商品筛选列表切换时的突兀重绘切入，使用 document.startViewTransition 包住 DOM 更新，给出筛选状态、动效样式、浏览器回退和可访问性检查，避免为了动效破坏点击与焦点。196 收藏
-
文章 · 前端 | 1个月前 | 前端 · 性能优化 · css · Core Web Vitals · 渲染性能 · 前端 渲染性能 CSS性能 CLS content-visibility contain-intrinsic-size Layout从长页面首屏慢、滚动卡和 Layout 时间高的现象入手，讲清 content-visibility:auto 如何跳过离屏区块，为什么要配 contain-intrinsic-size，并给出 DevTools 复查和上线检查清单。430 收藏
-
科技周边 · 业界新闻 | 1个月前 | css · 业界新闻 · Web平台 · Safari · 表单控件 · CSS select 前端表单 Safari 27 beta Customizable Select Web平台解读 Safari 27 beta 中可定制 select 的 Web 平台进展，说明它解决的表单样式问题、当前支持范围、最小 CSS 示例、兼容降级方案以及性能和安全注意点。239 收藏
-
面向 CSS position: sticky 不生效的排查清单，按现象、分层检查、证据判断、修复动作、反向验证和最终清单逐步定位 top、overflow、父级高度与滚动容器问题。179 收藏
-
本文从 position sticky 写了却不吸顶的现场出发，按滚动容器、top 值、父级 overflow、高度限制和表格/弹窗布局逐步排查，并给出修复与复查清单。449 收藏