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;
*/
}Further reading
- Use the Right Container Query Syntax
- CSS Containment Module Level 3
- Day 56: container queries
- Day 59: naming containers
- Day 65: using the em unit in container queries
- Day 69: width in container queries
- Day 73: size container features
- Day 78: container query units
- Day 90: scoped styles in container queries
Do you want to learn even more awesome CSS?
I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.