css
已收录文章：25篇
-
文章 · 前端 | 2个月前 | 前端 · javascript · css · 浏览器API · document.startViewTransition CSS View Transitions 页面切换动画用一个无框架商品列表示例，讲清 CSS View Transitions API 的最小接入、元素命名、同文档切换、降级处理和浏览器兼容边界。375 收藏
-
CSS :has() 让父元素可以根据子元素状态切换样式，适合表单错误提示、选中卡片和条件高亮。文章用 :user-invalid、:checked 与 @supports 说明最小写法、边界和旧浏览器降级。340 收藏
-
用浏览器原生 Popover API 做一个键盘可用的操作菜单，覆盖 popovertarget、自动关闭、焦点回收、toggle 事件和不支持浏览器的降级方案。340 收藏
-
CSS 容器查询让卡片组件根据自身可用宽度改变布局，而不是只看浏览器宽度。本文用商品卡片示例讲清 container-type、@container、断点选择和回归检查。339 收藏
-
页面使用 position: sticky 或 fixed 固定导航后，跳转到标题的锚点常常被导航栏盖住。本文用 scroll-margin-top 与 scroll-padding-top 区分元素级和容器级修复，补上动态导航高度、移动端安全区和浏览器降级检查。336 收藏
-
Popover API 的弹层如果只给 :popover-open 写过渡，首次打开和关闭时常会出现闪现或瞬间消失。本文从最小示例出发，说明 @starting-style、transition-behavior、overlay 与 reduced motion 的配合边界。307 收藏
-
CSS if() 可以在单个属性值中根据 style()、media() 或 supports() 条件选择结果，适合收拢主题和响应式分支，但它仍是实验性能力。本文用自定义属性示例说明条件顺序、else 回退、@media 与 @supports 的边界，并给出上线前的兼容检查。216 收藏
-
当 hover 位移、入场缩放和循环旋转同时写进一个元素时，animation-composition 可以明确 transform 的叠加方式。本文用 add、accumulate 和 replace 拆开关键帧冲突，并给出兼容降级与验收方法。210 收藏
-
围绕主题按钮的 hover、浅色背景和边框状态，用 CSS color-mix() 派生 token，再按对比度阈值验收并保留旧浏览器 fallback。173 收藏
-
文章 · 前端 | 1个月前 | 前端 · 浏览器 · javascript · css · 交互体验 · CSS过渡 dialog popover CSS @starting-style 首次显示动画元素第一次进入页面或从 display:none 变为可见时，普通 transition 没有起始帧，popover 和 dialog 尤其容易出现硬切。CSS @starting-style 可以补上首次显示状态，但仍要处理 overlay、关闭动画、浏览器降级和 prefers-reduced-motion。171 收藏
-
文章 · 前端 | 1个月前 | html · 前端 · javascript · css · 表单校验 Web Components ElementInternals form-associated custom elements setValidity把日期选择器、验证码框等自定义元素接入原生 form，不必再在提交事件里重复拼装校验。本文用 ElementInternals、setFormValue 和 setValidity 做一个可提交、可校验的 custom element，并说明浏览器能力不足时如何降级。134 收藏
-
商品卡片内容长短不一时，底部价格和按钮容易上下漂移。本文从实际错位现象入手，用 CSS Grid 的 subgrid 统一行轨道，并给出不支持 subgrid 浏览器的稳定降级写法。130 收藏