logo

Sign in

hahaxo

@hahaxo

每日Insight

  • 8个CSS技巧让你页面瞬间高级
    写了这么多年CSS,这几个技巧是我觉得性价比最高的,改一行代码效果直接拉满。

    1⃣ scroll-behavior: smooth
    给html加一行,全站滚动变丝滑,不用再写JS了。

    2⃣ text-wrap: balance
    标题文字自动均匀换行,再也不会出现最后一行只剩一个字的尴尬。

    3⃣ accent-color
    一行代码统一所有表单控件(checkbox、radio、range)的主题色,不用再一个个覆盖样式。

    4⃣ container query
    组件根据自己容器的宽度响应式布局,不再依赖整个视口宽度。比media query灵活10倍。

    5⃣ :has() 选择器
    CSS终于有了父选择器。比如 div:has(img) 可以选中包含图片的div,以前只能用JS实现。

    6⃣ view-transition-name
    页面切换加过渡动画,几行CSS搞定,不用装framer-motion这种重依赖。

    7⃣ subgrid
    子元素继承父grid的轨道定义,嵌套布局对齐问题一行解决。

    8⃣ color-mix()
    CSS原生颜色混合函数,动态生成hover色、disabled色,不用再手动算色值。

    这些都是现代浏览器已经支持的,不是实验性功能,今天就能用。

    收藏起来慢慢试👇