Chapter 1 of 9 · 4 practices · 3 min · 3-question quiz
Foundations: support, units and a sane base
Before writing component styles, decide which features you can rely on, how you size things, and what every element starts from.
Start: Check Baseline status before you rely on a feature4 practices in this chapter
- 1Check Baseline status before you rely on a feature"Can I use this?" used to mean digging through compatibility tables. web.dev's Baseline gives a simpler answer, based on the core browser set: Chrome and Edge, Firefox, and Safari, on desktop and…
- 2Size text with rem and let layouts flex, instead of fixing pixel sizesUsers change their browser's default font size for good reasons, usually readability. Text sized in
pxignores that setting. Text sized inremscales with it. - 3Start from a small, modern base stylesheetEvery browser applies its own default styles. A short base stylesheet removes the differences that cause real bugs, without stripping out useful defaults like focus outlines.
- 4Use logical properties so layouts work in every writing direction
margin-leftmeans left in every language. In a right to left language such as Arabic or Urdu, the space you meant to put at the start of the line ends up at the end. Logical properties describe…
Check yourself on this chapter
3 questions, right here once you are signed in. Your progress is saved as you read.