A CSS Unit Deep Dive - Learn CSS Units & When To Use Them

Summary

The video script delves into the intricacies of CSS units, highlighting the use and misunderstandings surrounding the pixel unit. It explains that the pixel's size varies based on the device's expected viewing distance, making it a relative unit. The script contrasts this with relative units like 'em' and 'rem', which are tied to font size, and 'vw'/'vh', which relate to the viewport. It also touches on the 'ch' unit for setting max-width based on character width, emphasizing best practices for web design and accessibility.

Takeaways

• 📏 There are over 40 units in CSS, but only a few are commonly used in web design.
• 🔗 CSS linked units are categorized into absolute (e.g., cm, mm, in) and relative (e.g., em, rem, vw) units.
• 📱 The pixel unit is often misunderstood; it's an absolute unit but its size varies based on the device's screen resolution and expected viewing distance.
• 🎯 The reference pixel is the basis for the CSS pixel unit, defined as the visual angle of one pixel at a certain device pixel density and viewing distance.
• 📏 Absolute CSS units like inches are not consistent with their real-world counterparts due to the anchor unit concept.
• 🔄 The 'm' unit is relative to the font size of the element or its parent, making it flexible for sizing but potentially complex in nested structures.
• 🔄 The 'rem' unit is relative to the root element's font size, simplifying the cascading effect of font sizes in nested elements.
• 📐 Percentages are always relative to their parent element's dimension, making them useful for responsive design within a container.
• 🌐 Viewport units (vw and vh) are relative to the viewport's width and height, respectively, allowing elements to scale with the size of the viewport.
• 🔢 The 'ch' unit measures the width of the character '0', useful for setting max-width based on character count for readability.
• 🚫 Using pixels for font sizes can override user accessibility settings, so relative units like 'rem' or 'em' are preferred for better accessibility.

Q & A

How many different units are mentioned in the CSS specification?

There are at least 40 different units mentioned in the CSS specification.

What are the two types of linked units in CSS?

The two types of linked units in CSS are absolute and relative units.

Which unit among the absolute CSS link units should be used in web design and development?

The pixel unit should be used in web design and development among the absolute CSS link units.

What is the main difference between absolute and relative CSS length units?

Absolute CSS length units provide a precise and fixed size, while relative CSS length units are relative to either a font size or the size of the viewport.

What are some of the misunderstandings about the pixel unit in CSS?

Some misunderstandings about the pixel unit include thinking it's a non-linear angular measurement, relative to the pixel density of the device, or relative to the expected viewing distance of the device.

What is the anchor unit in CSS, and how does it affect the output of measurements?

The anchor unit in CSS is either a physical unit for print or a pixel for screen media. It affects the output of measurements by making them dependent on the expected viewing distance of the device or the resolution of print.

What is the problem with using pixel values for font size and how does it affect accessibility?

Using pixel values for font size can override the default browser settings and ignore the accessibility preferences of users who have modified the settings, potentially affecting a large user base.

How do the 'm' and 'rem' units solve the accessibility issue with pixel units?

The 'm' and 'rem' units are relative to a font size, which allows them to adjust according to the user's preferences and the parent element's font size, thus improving accessibility.

What is the main advantage of using the 'rem' unit over the 'm' unit for font sizes?

The main advantage of using the 'rem' unit over the 'm' unit for font sizes is that it solves the cascading problem of font sizes being dependent on a chain of parents, making it easier to manage and track the size of elements.

How do viewport units like 'vw' and 'vh' differ from percentages?

Viewport units like 'vw' (viewport width) and 'vh' (viewport height) are relative to the size of the viewport, whereas percentages are relative to the size of their parent element.

What is the CH unit in CSS and when is it useful?

The CH unit in CSS measures the width of the character '0' in the font. It is useful for setting a max-width on a paragraph to ensure readability and to adhere to the web design rule of thumb for line length.