Day 62: the container shorthand

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

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;
  */
}

See on CodePen.

Further reading