大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是“2023年前端必知的CSS 和 UI 15+全新功能”，文章知识点大部分来自于Google官网，但是内容做了不少总结和补充。希望本文能从总体上让大家对2023年的浏览器新功能有一个大而全的了解。

话不多说，直接进入正题！

容器查询（Container Queries）

在创建移动网页时，通常依靠媒体查询来根据屏幕尺寸调整布局。 但是，如果想根据内容块的大小应用修改该怎么办？ 这就是容器查询的用途。

容器查询允许根据父级大小修改元素的样式，这与媒体查询根据视口的大小应用更改不同。

比如下面的例子：

.post {
  container-type: inline-size;
    // size, inline-size或者 normal
    // 为.post元素声明一个containment context
}

  

    
Card title
    
Card content
  

container-type 支持不同类型，不同类型有不同含义：

• size：查询将基于容器的内联尺寸和块尺寸。将布局、样式和大小限制应用于容器。
• inline-size：查询将基于容器的内联尺寸。将布局、样式和内联大小包含应用于元素。
• normal：该元素不是任何容器大小查询的查询容器（query container），但仍然是容器样式查询的查询容器。

接下来，使用 @container 规则定义容器查询。 以下示例中的查询将根据包含上下文的最近祖先（nearest ancestor ）的大小将样式应用于元素。 具体来说，如果容器宽度超过 700 像素，此查询将为卡片标题应用更大的字体大小：

/* 容器小于700px样式 */
.card h2 {
  font-size: 1em;
}
/* 容器大于 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Style Queries

容器查询规范还允许开发者查询父容器的样式值。 目前，已在 Chrome 111 中部分实现，开发者可以在其中使用 CSS 自定义属性来应用容器样式。

以下示例使用存储在自定义属性值中的天气特征（例如下雨、晴天和阴天）来设置卡片背景和指示器图标的样式。

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }
 .weather-card:after {
   content: url();
   background: gold;
 }
}

下面是 HTML 的内容值：

   {/*使用--sunny: true*/}
   

    

      
Saturday
      
February 12
      

        
High: 55
/
        
Low: 47
      
      

        Clear skies, sun
      
    
  

以上示例只是样式查询的开始，后续甚至可以使用布尔查询来确定自定义属性值是否存在并减少代码重复，目前正在讨论的是范围查询（range queries）以根据一系列值应用样式。

has()

使用 :has() 选择器，可以通过检查父元素是否包含特定子元素，或者这些子元素是否处于特定状态来应用样式。 它本质上是一个“父”选择器。

对该选择器有不同的语法：

• h1:has(p)：选择具有

  子级标记的

  ，无论其级别如何。

• h1:has(> p)：选择具有

  子级标记的

• h1:has(+ p)：选择后面直接跟着

  元素的

假如有以下 HTML：

  
Morning Times
  
Delivering you news every morning
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.