Entertainment at it's peak. The news is by your side.

Container Queries are coming to Chromium


Lawful launched on the Chromium mailing record is an “Intent to Prototype” Container Queries, which is terribly bright news 🎉

🤔 Container Queries?

Container Queries enable authors to style aspects in accordance to the scale of a container. This is an analogous to a @media query, apart from that it evaluates against a container in preference to the viewport.

The experimental implementation will apply Miriam Suzanne’s proposal, which appears esteem this:

apart {
  dangle: dimension; /(1) Make an implicit "container root" or "containment context" */

.media-object {
  indicate: grid;
  gap: 1em;

@container (max-width: 45em) { /(2) When the closest `dangle: dimension` ancestor has a max-width of 45em … */
  .media-object { /… apply these rules onto .media-object */
    grid-template: 'img allege material' auto / auto 1fr;

The usage of dangle: dimension (1) will assemble an implicit “container root” or “containment context” on that ingredient. Aspects contained internal it might likely maybe well then dangle container queries applied onto them, by utilize of a new at-rule @container () (2). The aim selector and CSS rules to apply if that’s the case are nested internal the @container at-rule, ethical esteem we already elevate out with different at-rules.

In the instance above additional rules will be applied to .media-object every time its nearest ancestor with dimension containment position — equivalent to


Printed by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the 2d he discovered glance-source on the age of 14 (come serve in 1997), he fell in care for with the web and has been tinkering with it ever since (extra …)

Read More

Leave A Reply

Your email address will not be published.