Container Queries: Style Queries

My colleague Una gives a great overview of Style Queries and its use cases. Style queries let you query the style of any parent element within a page and apply styles to its children based on the styles of its parent. The cool part is that this matching is done against on the computed value …

My colleague Una gives a great overview of Style Queries and its use cases.

Style queries let you query the style of any parent element within a page and apply styles to its children based on the styles of its parent.

The cool part is that this matching is done against on the computed value of a parent.

@container style(font-style: italic) {
  span,
  i,
  .etc {
    background: lavender;
  }
}

My favorite use case is grouping styles with higher-order variables, where you can set a bunch of CSS property values based on a Custom Property Value – Yep, just like the Higher Level Custom Properties proposal I covered a long time ago.

@container style(--theme: dark) {
  .card {
    background: royalblue;
    border-color: navy;
    color: white;
  }

  .card button {
    border-color: navy;
    background-color: dodgerblue;
    color: white;
  }
}

And oh, here’s the best part of it all: Style Queries based on Custom Properties are already available in Chrome behind the Experimental Web Platform Features feature flag!

See the Pen
Style query test — card themes
by Una Kravets (@una)
on CodePen.

Container Queries: Style Queries →


Print Share Comment Cite Upload Translate
APA
Bramus! | Sciencx (2024-03-28T13:23:24+00:00) » Container Queries: Style Queries. Retrieved from https://www.scien.cx/2022/10/13/container-queries-style-queries/.
MLA
" » Container Queries: Style Queries." Bramus! | Sciencx - Thursday October 13, 2022, https://www.scien.cx/2022/10/13/container-queries-style-queries/
HARVARD
Bramus! | Sciencx Thursday October 13, 2022 » Container Queries: Style Queries., viewed 2024-03-28T13:23:24+00:00,<https://www.scien.cx/2022/10/13/container-queries-style-queries/>
VANCOUVER
Bramus! | Sciencx - » Container Queries: Style Queries. [Internet]. [Accessed 2024-03-28T13:23:24+00:00]. Available from: https://www.scien.cx/2022/10/13/container-queries-style-queries/
CHICAGO
" » Container Queries: Style Queries." Bramus! | Sciencx - Accessed 2024-03-28T13:23:24+00:00. https://www.scien.cx/2022/10/13/container-queries-style-queries/
IEEE
" » Container Queries: Style Queries." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2022/10/13/container-queries-style-queries/. [Accessed: 2024-03-28T13:23:24+00:00]
rf:citation
» Container Queries: Style Queries | Bramus! | Sciencx | https://www.scien.cx/2022/10/13/container-queries-style-queries/ | 2024-03-28T13:23:24+00:00
https://github.com/addpipe/simple-recorderjs-demo