Day 62: the container shorthand

On day 56 you’ve learned that you have to define a container-type when working with size containers and on day 59 you’ve learned that you can name containers using the container-name property.

The container shorthand allows you to define both properties in a single property, [name] / [type].

section {  
  container: wrapper / inline-size;

  /*
    Same as:
    container-name: wrapper;
    container-type: inline-size;
  */
}

If you only define a single value (the name), the type is normal by default.

section {  
  container: wrapper;

  /*
    Same as:
    container-name: wrapper;
    container-type: normal;
  */
}

<hr>

<p>My blog doesn’t support comments yet, but you can reply via <a href=’mailto:blog@matuzo.at?subject=Comment%20on%20%E2%80%9CDay%2062%3A%20the%20container%20shorthand%E2%80%9D’>e-mail</a>.</p>