Notes

Page 2

  • Just like a word document can be displayed in a word processing application, a web page is simply an HTML document that can be displayed in a web browser. The only difference is that a web page can embed a variety of different types of resources such as styles, fonts, images, scripts, and so on.

  • Ana Tudor wrote on Mastodon:

    Stupid #CSS question because I’m losing my mind here: why isn’t calc(.5*a) working? What am I missing? It doesn’t seem to be working in any browser.

    Ana is trying to use calc(.5 * a) as a part of the relative color syntax, presumably to create semi transparent outlines. But it is not working because calc(.5 * a) is an invalid property value. As Valtteri Laitinen replied, it should actually be alpha in there instead of a.

    .class {
	outline-color: rgb(from currentcolor r g b / calc(0.5 * a)); /* ❌ invalid */
	outline-color: rgb(
		from currentcolor r g b / calc(0.5 * alpha)
	); /* ✅ valid */
}

  • Today I learned, grid-auto-columns and grid-auto-rows size implicit tracks as well as any explicit tracks that are not explicitly sized by by grid-template-rows or grid-template-columns.

    Until now, I was under the impression that grid-auto-rows and grid-auto-columns size only implicit grid tracks.

  • Thanks to Kevin Powell, today I learned that the text-underline-offset property is named so because it only applies to underlines and not other text-decoration-line values like overline and line-through.

    <a href="https://example.com">Example</a>
    a {
	text-decoration-line: underline overline; /* We can set multiple line-decoration properties at once */
	text-underline-offset: 16px; /* Only impacts underline */
}