CSS Style Queries

https://una.im/style-queries/

Style Queries 允许查询同页面的父元素的样式。

作者写这篇文章的目的:

I want to investigate why and when style queries really make sense to use, and provide a capability previously unavailable to us.

Container Queries

Container queries 能够通过查询父选择器,得到它的大小和样式信息。让子元素有自己的内在响应逻辑,这种逻辑与其外在环境没有联系。

demo: https://codepen.io/tianheg/pen/zYWZQQw

Style Queries

  1. 查询直接父级以将样式应用于子级
  2. 给不可继承的属性添加样式
  3. 选中特定父元素,为其子元素设置唯一样式(链式样式)
  4. 通过更高优先级的变量,为样式分组
  5. CSS 中的交互
  6. 结合大小和样式查询

Layout of comment panels