首页 > 其他分享 >CSS新特性

CSS新特性

时间:2024-11-10 22:15:33浏览次数:3  
标签:container color 网格 特性 样式 background CSS

目录

1. CSS 2023 新特性

2. CSS 2024 新特性


前言:这些新特性通常兼容性较差,在生产环境中谨慎使用!!!

1. CSS 2023 新特性

  • 容器查询(Container Queries):允许在容器尺寸而非视口尺寸的基础上应用不同的样式,提升了响应式设计的灵活性。
    /* 定义一个容器查询 会根据 .container 的宽度是否超过 500px 来切换 .item 的背景色。*/
    .container {
      container-type: inline-size;
    }
    
    .container > .item {
      background-color: lightblue;
    }
    
    @container (min-width: 500px) {
      .container > .item {
        background-color: lightcoral;
      }
    }
    

  • 子网格(Subgrid):进一步增强了网格布局,使嵌套网格继承父级网格的轨道,从而解决了复杂布局中的对齐问题。
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
    }
    
    .subgrid-container {
      display: grid;
      grid-template-columns: subgrid; /* 子网格继承父网格 */
    }
    /* .subgrid-container 会继承 .container 的列定义,使布局更加一致。 */

  • @scope 规则:通过限制样式影响范围,避免样式意外污染其他区域,增强组件的可维护性。
    @scope (.card) {
      .title {
        color: blue;
      }
    }
    /* .title 样式仅在 .card 内生效,其他地方不会被影响 */

  • 样式查询(Style Queries):结合容器查询,允许基于样式属性(如字体、颜色)进行查询,丰富了响应式设计的条件。
    @container style(color-scheme: dark) {
      .container {
        background-color: black;
        color: white;
      }
    }
    
    /* 根据父容器的 color-scheme 是否为 dark 模式来调整 .container 的背景色和字体颜色。 */

2. CSS 2024 新特性

  • () 伪类支持:使 CSS 能选中包含特定内容的父元素,进一步扩展了选择器的能力,比如为包含错误输入的表单高亮其父元素。
    /* 当 `.form-group` 内有 `.input-error` 时,应用红色边框 */
    .form-group:has(.input-error) {
      border: 2px solid red;
    }
    
    /* 当 `.container` 中包含选中的复选框时,将背景色变为绿色 */
    .container:has(input[type="checkbox"]:checked) {
      background-color: lightgreen;
    }
    

  • 颜色级联(CSS Color Level 5):支持更多颜色空间(如 Lab、LCH),并引入相对颜色功能,让颜色计算更自然,尤其适用于暗模式。
    /* 使用 Lab 颜色空间来调整颜色的亮度和色调 */
    body {
      background-color: lab(80% -20 20);
      color: lch(70% 30 50);
    }
    
    /* 使用相对颜色调整:将暗模式下背景色变暗 */
    body {
      background-color: color-mix(in lch, #fff, #000 30%);
    }
    

  • CSS Nesting:简化样式编写,类似于预处理器,支持嵌套规则,以便管理层级和组件结构。
    /* CSS 原生嵌套 */
    .card {
      padding: 20px;
      background-color: #fff;
    
      & .title {
        font-size: 24px;
        color: #333;
      }
    
      & .content {
        font-size: 16px;
        color: #666;
      }
    
      &:hover {
        background-color: #f5f5f5;
      }
    }
    

  • 优先级调节:通过引入特定属性控制样式优先级,避免了 !important 滥用,使样式覆盖和继承更合理。
    @layer defaults {
      .button {
        background-color: lightgray;
        color: black;
      }
    }
    
    @layer overrides {
      .button {
        color: white;
        background-color: blue;
      }
    }
    

标签:container,color,网格,特性,样式,background,CSS
From: https://blog.csdn.net/lingxiaolujun/article/details/143667023

相关文章