web 新特性

CSS attr函数相信大家都用过了吧，通常会配合伪元素content动态生成内容，不过，之前仅仅支持字符串形式，对于数字、颜色等都无法识别。现在，`CSS attr`迎来了全面进化

在页面加载过程中，进度条的存在可以很好的缓解用户的等待焦虑。 但是你可能不知道，90%以上的进度条只是模拟的，是假的进度条。没办法，大部分情况下都无法真实的算出资源的加载情况。既然无法避免，那我们就需

众所周知，有些属性是不支持过渡动画的，比如高度auto 效果如下 要实现过渡效果，之前提供过一个grid布局方式，原理是利用grid的尺寸单位1fr支持过渡的特性，有兴趣可以回顾这篇文章： 不过到了现

现代 CSS 强大的令人难以置信。 这次我们来用 CSS 实现一个全功能的滑动输入器，也就是各大组件库都有的slider，效果如下 还可以改变一下样式，像这样 特别是在拖动时，tooltip还能跟随拖

我们经常会在博客、文档中看到类似这样的侧边导航目录，例如 这种导航也被称为“电梯导航”（当然可能还有其他叫法，知道是这个交互就行）。它会随着内容的滚动而自动切换当前选中态，点击任意目录也会自动滚动到对

很多 CSS 特性更新是非常隐晦的，导致很容易被忽视。最近，Chrome 123 就新增了paint-order对普通文本的支持，这就让文字描边实现更加容易了。 这并不是一个新属性，SVG中已经支持很

几乎每个前端开发都应该用过这个滑动组件库吧？这就是大名鼎鼎的swiper.js 当然我也不例外，确实非常全面，也非常强大。 不过很多时候，我们可能只用到了它的10%不到的功能，显然是不划算的，也会有性

介绍一个和主题密切相关的CSS特性：light-dark，有了它，可以更灵活的适配各种主题模式。 一、prefers-color-scheme 一般来讲，网站会有三种主题模式，白天、黑夜、自动跟随系统

盼了好久，最近 Chrome 125终于迎来了CSS 锚点定位的正式支持。这是一个和 CSS 滚动驱动动画一样，足以颠覆整个 Web 开发领域的新特性。有了这个特性，很多以前强依赖 JS 的方式，都可

最近，Chrome 123又悄悄推出了一个CSS新特性，那就是align-content支持普通的block容器了！那么，这个特性有什么用呢？一起来了解一下吧 一、过去只对 flex 和 grid 生

分享一个 CSS 小技巧 在平时开发中，经常会遇到这样一种问题：当打开一个弹窗时，后面的页面是可以滚动的，演示如下 那么，该如何锁定页面的滚动呢？ 一、传统的实现方式 传统的方式其实也不复杂，就是在打

大家有使用过offset-path吗？没用过不要紧，相信大家都见过这种酷炫的路径动画，这种就可以用offset-path来实现 随着 CSS的不断发展，最近在Chrome 116中，offset-pa

最近Chrome 123又推出了一个新的 CSS 属性：field-sizing。有了它，可以轻松实现输入框尺寸自动跟随输入内容的效果，花一分钟了解一下吧~

「庆余年2」 马上就要开播了~最近起点读书APP内上架了庆余年典藏书，最大的特色是里面新加入了全新的阅读皮肤，一个拟物化的卷轴滚动效果，效果如下 就是在拖动页面时，卷轴会随着页面的滚动而展开或卷起，就

最近，Chrome 119 终于正式对:user-valid和:user-invalid这两个验证伪类进行了支持 至此，现代浏览器总算是全面支持了。 看名称，似乎和:valid和:invalid有点相

前不久看到这样一个很有趣的效果，它的滚动条是沿着圆角边缘滚动的，效果如下 你可以查看原链接来体验一下 这是如何实现的呢？ 原效果中由于为了兼容不支持CSS滚动驱动的浏览器，特意用 JS做了兼容，所以看

最近details元素新增了一个name属性，如下 别看这只是一个普普通通的属性，这可是带来了一个全新的模式，一起了解一下吧 一、快速了解 details 有些同学可能从来没有用过details这个标

之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，非常巧妙，有兴趣的可以回顾一下。 不过展开收起按钮的隐藏和显示采用了“障眼法”，也就是通过一

今天就来介绍一下Chrome 113+全新推出的linear 缓冲函数。 一、目前CSS缓冲函数的局限性 提到 CSS 运动缓冲函数，你可能会想到以下几种 linear：线性 steps：阶段 eas

提到颜色，大家都能想到 rgb 颜色表示法，比如 rgb(255,0,0)就表示红色，如果希望有透明度，可以用rgba来表示，比如rgba(255,0,0,.5)就表示透明度为50%的红色。 除了这些