Saturday, June 15, 2024
HomeProgrammingCSS Container Queries | CSS-Tips

CSS Container Queries | CSS-Tips


Container queries are sometimes thought-about a contemporary method to responsive net design the place conventional media queries have lengthy been the gold normal — the reason is that we will create layouts made with parts that reply to, say, the width of their containers somewhat than the width of the viewport.

.dad or mum {
  container-name: hero-banner;
  container-type: inline-size;

  /* or container: hero-banner / inline-size; */
}

}

.baby {
  show: flex;
  flex-direction: column;
}

/* When the container is larger than 60 characters... */
@container hero-banner (width > 60ch) {
  /* Change the flex course of the .baby ingredient. */
  .baby { 
    flex-direction: row;
  }
}

Why care about CSS Container Queries?

  1. When utilizing a container question, we give parts the flexibility to alter based mostly on their container’s dimension, not the viewport.
  1. They permit us to outline the entire types for a selected ingredient in a extra predictable means.
  1. They’re extra reusable than media queries in that they behave the identical irrespective of the place they’re used. So, in case you have been to create a element that features a container question, you might simply drop it into one other undertaking and it’ll nonetheless behave in the identical predictable style.
  1. They introduce new varieties of CSS size models that can be utilized to dimension parts by their container’s dimension.

Registering Parts as Containers

.playing cards {
  container-name: card-grid;
  container-type: inline-size;

  /* Shorthand */
  container: card-grid / inline-size;
}

This instance registers a brand new container named card-grid that may be queried by its inline-size, which is a flowery means of claiming its “width” once we’re working in a horizontal writing mode. It’s a logical property. In any other case, “inline” would confer with the container’s “peak” in a vertical writing mode.

  • The container-name property is used to register a component as a container that applies types to different parts based mostly on the container’s dimension and types.
  • The container-type property is used to register a component as a container that may apply types to different parts when it meets sure situations.
  • The container property is a shorthand that mixes the container-name and container-type properties right into a single declaration.

Some Potential Gotchas

Querying a Container

@container my-container (width > 60ch) {
  article {
    flex-direction: row;
  }
}
  • The @container at-rule property informs the browser that we’re working with a container question somewhat than, say, a media question (i.e., @media).
  • The my-container half in there refers back to the container’s identify, as declared within the container’s container-name property.
  • The article ingredient represents an merchandise within the container, whether or not it’s a direct baby of the container or an additional ancestor. Both means, the ingredient should be within the container and it’ll get types utilized to it when the queried situation is matched.

Some Potential Gotchas

Container Queries Properties & Values

Container Queries Properties & Values

container-name

container-name: none | <custom-ident>+;
Worth Descriptions
  • none: The ingredient doesn’t have a container identify. That is true by default, so you’ll doubtless by no means use this worth, as its goal is only to set the property’s default habits.
  • <custom-ident>: That is the identify of the container, which will be something, aside from phrases which are reserved for different capabilities, together with defaultnoneatno, and or. Notice that the names usually are not wrapped in quotes.
  • Preliminary worth: none
  • Applies to: All parts
  • Inherited: No
  • Percentages: N/A
  • Computed worth: none or an ordered record of identifiers
  • Canonical order: Per grammar
  • Animation: Not animatable

container-type

container-type: regular | dimension | inline-size;
Worth Descriptions
  • regular: This means that the ingredient is a container that may be queried by its types somewhat than dimension. All parts are technically containers by default, so we don’t even have to explicitly assign a container-type to outline a method container.
  • dimension: That is if we wish to question a container by its dimension, whether or not we’re speaking concerning the inline or block course.
  • inline-size: This enables us to question a container by its inline dimension, which is equal to width in a normal horizontal writing mode. That is maybe essentially the most generally used worth, as we will set up responsive designs based mostly on ingredient dimension somewhat than the scale of the viewport as we’d usually do with media queries.
  • Preliminary worth: regular
  • Applies to: All parts
  • Inherited: No
  • Percentages: N/A
  • Computed worth: As specified by key phrase
  • Canonical order: Per grammar
  • Animation: Not animatable

container

container: <'container-name'> [ / <'container-type'> ]?
Worth Definitons

If <'container-type'> is omitted, it’s reset to its preliminary worth of regularwhich defines a method container as an alternative of a dimension container. In different phrases, all parts are type containers by default, until we explicitly set the container-type property worth to both dimension or inline-size which permits us to question a container’s dimension dimensions.

  • Preliminary worth: none / regular
  • Applies to: All parts
  • Inherited: No
  • Percentages: N/A
  • Computed worth: As specified
  • Canonical order: Per grammar
  • Animation: Not animatable

Container Size Models

Container Width & Top Models

Unit Identify Equal to…
cqw Container question width 1% of the queried container’s width
cqh Container question peak 1% of the queried container’s peak

Container Logical Instructions

Unit Identify Equal to…
cqi Container question inline dimension 1% of the queried container’s inline dimension, which is its width in a horizontal writing mode.
cqb Container question block dimension 1% of the queried container’s inline dimension, which is its peak in a horizontal writing mode.

Container Minimal & Most Lengths

Unit Identify Equal to…
cqmin Container question minimal dimension The worth of cqi or cqb, whichever is smaller.
cqmax Container question most dimension The worth of cqi or cqb, whichever is bigger.

Container Type Queries

Container Type Queries is one other piece of the CSS Container Queries puzzle. As a substitute of querying a container by its dimension or inline-size, we will question a container’s CSS types. And when the container’s types meet the queried situation, we will apply types to different parts. That is the form of “conditional” styling we’ve needed on the internet for a very long time: If these types match over right here, then apply these different types over there.

CSS Container Type Queries are solely accessible as an experimental function in fashionable net browsers on the time of this writing, and even then, type queries are solely able to evaluating CSS {custom} properties (i.e., variables).

Browser Help

The function remains to be thought-about experimental on the time of this writing and isn’t supported by any browser, until enabled by means of function flags.

Desktop

Chrome Firefox IE Edge Safari
128 No No 125 TP

Cell / Pill

Android Chrome Android Firefox Android iOS Safari
125 No 125 No

Registering a Type Container

article {
  container-name: card;
}

That’s actually it! Truly, we don’t even want the container-name property until we have to goal it particularly. In any other case, we will skip registering a container altogether.

And in case you’re questioning why there’s no container-type declaration, that’s as a result of all parts are already thought-about containers. It’s so much like how all parts are place: relative by default; there’s no have to declare it. The one purpose we’d declare a container-type is that if we would like a CSS Container Measurement Question as an alternative of a CSS Container Type Question.

So, actually, there isn’t any have to register a container type question as a result of all parts are already type containers proper out of the field! The one purpose we’d declare container-name, then, is just to assist choose a selected container by identify when writing a method question.

Utilizing a Type Container Question

@container type(--bg-color: #000) {
  p { colour: #fff; }
}

On this instance, we’re querying any matching container (as a result of all parts are type containers by default).

Discover how the syntax it’s so much like a conventional media question? The most important distinction is that we’re writing @container as an alternative of @media. The opposite distinction is that we’re calling a type() operate that holds the matching type situation. This manner, a method question is differentiated from a dimension question, though there isn’t any corresponding dimension() operate.

On this occasion, we’re checking if a sure {custom} property named --bg-color is about to black (#000). If the variable’s worth matches that situation, then we’re setting paragraph (p) textual content colour to white (#fff).

Customized Properties & Variables

.card-wrapper {
  --bg-color: #000;
}
.card {
  @container type(--bg-color: #000) {
    /* Customized CSS */
  }
}

Nesting Type Queries

@container type(--featured: true) {
  article {
    grid-column: 1 / -1;
  }
  @container type(--theme: darkish) {
    article {
      --bg-color: #000;
      --text: #fff;
    }
  }
}

Specification

CSS Container Queries are outlined within the CSS Containment Module Degree 3 specification, which is at the moment in Editor’s Draft standing on the time of this writing.

Browser Help

Browser help for CSS Container Measurement Queries is nice. It’s simply type queries which are missing help on the time of this writing.

  • Chrome 105 shipped on August 30, 2022, with help.
  • Safari 16 shipped on September 12, 2022, with help.
  • Firefox 110 shipped on February 14, 2023, with help.

Desktop

Chrome Firefox IE Edge Safari
106 110 No 106 16.0

Cell / Pill

Android Chrome Android Firefox Android iOS Safari
125 126 125 16.0

Demos!

Card Element

On this instance, a “card” element modifications its format based mostly on the quantity of obtainable area in its container.

Name to Motion Panel

This instance is so much like these little panels for signing up for an electronic mail publication. Discover how the format modifications thrice in line with how a lot accessible area is within the container. That is what makes CSS Container Queries so highly effective: you’ll be able to fairly actually drop this panel into any undertaking and the format will reply because it ought to, because it’s based mostly on the area it’s in somewhat than the scale of the browser’s viewport.

Stepper Element

This element shows a sequence of “steps” very similar to a timeline. In wider containers, the stepper shows steps horizontally. But when the container turns into sufficiently small, the stepper shifts issues round in order that the steps are vertically stacked.

Icon Button

Generally we like to embellish buttons with an icon to intensify the button’s label with a little bit extra which means and context. And typically we don’t know simply how extensive that button shall be in any given context, which makes it powerful to know when precisely to cover the icon or re-arrange the button’s types when area turns into restricted. On this instance, an icon is exhibited to the fitting fringe of the button so long as there’s room to suit it beside the button label. If room runs out, the button turns into a sq. tile that stacks the icons above the label. Discover how the border-radius is about in container question models, 4cqi, which is the same as 4% of the container’s inline-size (i.e. width) and leads to rounder edges because the button grows in dimension.

Pagination

Pagination is a good instance of a element that advantages from CSS Container Queries as a result of, relying on the quantity of area we’ve got, we will select to show hyperlinks to particular person pages, or cover them in favor of solely two buttons, one to paginate to older content material and one to paginate to newer content material.

Articles & Tutorials

Common Info
Container Measurement Question Tutorials
Container Type Queries
Almanac References
Associated Guides
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments