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. 结合大小和样式查询



如希望撰写评论,请发邮件至 me@tianhegao.com (直接点击邮箱可自动跳转至默认邮箱App,并填写收信人和邮件主题)或者点击这里在线留言,我会挑选对读者有价值的评论附加到文章末尾。



可通过以下渠道赞赏此文