Style Queries

The container query specification also allows you to query the style values of a parent container. This is currently partially implemented in Chrome 111, where you can use CSS custom properties to apply container styles.

This is just the beginning for style queries. In the future, we’ll have boolean queries to determine if a custom property value exists and reduce code repetition, and currently in discussion are range queries to apply styles based on a range of values. This would make it possible to apply the styles shown here using a percent value for the chance of rain or cloud cover.

The following example uses weather characteristics stored in custom property values, such as rain, sunny, and cloudy, to style the card’s background and indicator icon.

 

// HTML
<ul class="card-list">
  <li class="card-container" style="--rain: true;">...</li>
  <li class="card-container" style="--cloudy: true;">...</li>
  <li class="card-container" style="--sunny: true;">...</li>
  <li class="card-container" style="--cloudy: true; --sunny: true;">...</li>
 </ul>
 
 
 // CSS
 .card-container {
  container-name: weather;
}

@container style(--rain: true) {...}
@container style(--cloudy: true) {...}
@container style(--sunny: true) {...}
@container style(--sunny: true) and style(--cloudy: true) {...}


// JS with event
const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');

themePicker.addEventListener('input', (e) => {
  btnParent.style.setProperty('--theme', e.target.value);
})

 

 

https://developer.chrome.com/blog/style-queries/