css
已收录文章：13篇
-
white-space-collapse 把空白折叠从 white-space 中拆出来，适合处理用户输入、代码片段和多行说明。本文用最小示例解释 collapse、preserve、preserve-breaks、preserve-spaces、break-spaces 的差异，并给出旧浏览器降级与验收方法。430 收藏
-
文章 · 前端 | 3星期前 | html · 前端 · javascript · css · 表单校验 Web Components ElementInternals form-associated custom elements setValidity把日期选择器、验证码框等自定义元素接入原生 form，不必再在提交事件里重复拼装校验。本文用 ElementInternals、setFormValue 和 setValidity 做一个可提交、可校验的 custom element，并说明浏览器能力不足时如何降级。134 收藏
-
Popover API 的弹层如果只给 :popover-open 写过渡，首次打开和关闭时常会出现闪现或瞬间消失。本文从最小示例出发，说明 @starting-style、transition-behavior、overlay 与 reduced motion 的配合边界。307 收藏
-
文章 · 前端 | 3星期前 | 前端 · 浏览器 · javascript · css · 交互体验 · CSS过渡 dialog popover CSS @starting-style 首次显示动画元素第一次进入页面或从 display:none 变为可见时，普通 transition 没有起始帧，popover 和 dialog 尤其容易出现硬切。CSS @starting-style 可以补上首次显示状态，但仍要处理 overlay、关闭动画、浏览器降级和 prefers-reduced-motion。171 收藏
-
跨文档 View Transitions 不是给单页应用换皮：当前页和目标页要同源并同时用 @view-transition 选择加入，元素命名还要避免冲突。本文从多页站点导航现场出发，给出最小接入、滚动位置处理、浏览器降级和上线验收清单。412 收藏
-
View Transition API 能让页面切换从硬切变成连续过渡，但快照时机、伪元素样式和不支持浏览器的降级处理，都会造成白闪、旧页面残留或动画不生效。本文从可复现的闪烁现场出发，逐项定位并给出可回退的实现方式。394 收藏
-
页面使用 position: sticky 或 fixed 固定导航后，跳转到标题的锚点常常被导航栏盖住。本文用 scroll-margin-top 与 scroll-padding-top 区分元素级和容器级修复，补上动态导航高度、移动端安全区和浏览器降级检查。336 收藏
-
用浏览器原生 Popover API 做一个键盘可用的操作菜单，覆盖 popovertarget、自动关闭、焦点回收、toggle 事件和不支持浏览器的降级方案。340 收藏
-
CSS if() 可以在单个属性值中根据 style()、media() 或 supports() 条件选择结果，适合收拢主题和响应式分支，但它仍是实验性能力。本文用自定义属性示例说明条件顺序、else 回退、@media 与 @supports 的边界，并给出上线前的兼容检查。216 收藏
-
横向卡片滑动不应只停在 scroll-snap-type：用 scroll-snap-align、scroll-padding 和 scroll-snap-stop 组合出可控的触摸体验，再用键盘焦点、窄屏和快速甩动验收边界。404 收藏
-
CSS color-mix() 可以从基础主题色派生 hover、浅底和边框状态，但混合空间与透明度会改变最终观感。本文用 token、对比度和 fallback 验收一套可落地的主题色方案。465 收藏
-
当 hover 位移、入场缩放和循环旋转同时写进一个元素时，animation-composition 可以明确 transform 的叠加方式。本文用 add、accumulate 和 replace 拆开关键帧冲突，并给出兼容降级与验收方法。210 收藏