Page 2
Today I learned, :root (0-1-0) has a higher specificity than html (0-0-1).
In hindsight, it’s obvious. :root is a CSS pseudo-class selector and, like most pseudo-class selectors, it has the same specificity as a class selector or an attribute selector.
Hot take: Padel is to tennis what bowling with bumpers on is to bowling. Its design choices lead to fewer mistakes and a lower barrier to entry.
I keep forgetting, but the alt attribute of the <img> element is not just useful for users who are visually impaired. It is also useful when the image is not displayed in the browser for whatever reason. For example: the src attribute does not contain a valid path to an image.
John Mayer on how trying and not doing it well enough is a wonderful technique for being yourself:
Failing to sound exactly like the person you want to sound like is a wonderful way to sound like yourself. So I’m not necessarily thinking this thing from scratch, going, Okay, I’m gonna, like, do Jerry-esque things, but I’m still gonna sound like me. No, it’s more like, I want to sound just like Jerry, and then the way I naturally, obviously don’t — that’s your personality. Music doesn’t let you lie. […] You try to sound like who you want to sound like, and you just will always end up sounding like you.
I like this advice. It is an interesting take on the learning by copying method.
I just purchased Josh Comeau’s new course, Whimsical Animations. The course page itself has some delightful animations.
PS: I also discovered Gochi Hand, a cute handwritten font, on the course page.
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.
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 */
}I re-read Heydon Pickering’s post on the HTML article element in the middle of writing the markup for a new website.
Heydon’s writing is so sharp and funny. Unmistakably theirs. No one else writes quite like them, and I’m here for it.
I was reading Manuel Matuzovic’s article on meta theme color and came across this snippet:
<style>
:root {
--theme: blue;
}
</style>
<meta name="theme-color" content="var(--theme)" />I wish it was possible to access custom properties outside the <style> tag in the <head>. It would keep things DRY.
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.
I got the opportunity to proofread Ahmad Shadeed’s latest article on CSS Grid Areas before its release. It inspired me to refactor the code on my site to use grid-template-areas.
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 */
}