A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound. By Geoff Graham.
Many CSS properties accept numbers as values. Sometimes those are whole numbers. Sometimes they’re decimals and fractions. Other times, they’re percentages. Whatever they are, the unit that follows a number determines the number’s computed length. And by “length” we mean any sort of distance that can be described as a number, such as the physical dimensions of an element, a measure of time, geometric angles… all kinds of things!
The article then explains:
- Types of numbers
- Absolute units
- Relative units
- What about unit-less numbers?
- We can create our own custom units!
- When to use one unit over another
- Use container units for responsive design, where possible
In some cases, we may want to work with a numeric value, but CSS doesn’t exactly recognize it as one. In these cases, the number is recognized as a “string” value instead, regardless of whether or not it contains alphabetical characters. That’s where we can use @property to create what’s called a “custom property” that evaluates a numeric value in a certain way.
Container queries in general are so gosh-darn great for responsive layouts because they look at the size of the container and let us apply styles to its descendants when the container is a certain size. Super interesting read!
[Read More]