Puan
28,728
Çözümler
0
- Konum
- Freanchey
- Mesajlar
- 3,047
- Katılım
- 2 Eki 2026
- Tepkime puanı
- 3,565
- Puan
- 28,728
- Web sitesi
- glomaxgpt.com
Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot of really cool (CSS) stuff.
How to use the CSS Custom Highlight API
Sunkanmi Fafowora demonstrated how to use the CSS Custom Highlight API, which is now supported by all major web browsers. Despite “CSS” being in the name (the styling is handled by the ::highlight() pseudo-element function), it’s actually JavaScript that makes the wheels go round for this one.
Both syntaxes are quite fun to work with, though.
If you’re curious as to how ::highlight() works alongside other highlight pseudo-elements (there are actually quite a few of them), I wrote something up not too long ago.
How images can overflow themselves
Temani Afif explained how images can sort of overflow themselves, because the <img> element is like a container that the ‘replaced content’ (the image resource) can overflow.
I suppose that explains why we can swap the src using CSS, like this:
<img src="image.avif" alt="Alt text">
content: url(new-image.avif) / "New alt text";
}
Temani also showed us what we can do with this information:
Tyler Sticka reminded us (well, I’m learning about it for the first time…) how to fix text-stroke with paint-order. For those who don’t know, text-strokes are center-aligned, so half of the stroke appears on the outside while the other half appears on the inside, and the inside half often looks terrible.
How to use the CSS Custom Highlight API
Sunkanmi Fafowora demonstrated how to use the CSS Custom Highlight API, which is now supported by all major web browsers. Despite “CSS” being in the name (the styling is handled by the ::highlight() pseudo-element function), it’s actually JavaScript that makes the wheels go round for this one.
Both syntaxes are quite fun to work with, though.
If you’re curious as to how ::highlight() works alongside other highlight pseudo-elements (there are actually quite a few of them), I wrote something up not too long ago.
How images can overflow themselves
Temani Afif explained how images can sort of overflow themselves, because the <img> element is like a container that the ‘replaced content’ (the image resource) can overflow.
I suppose that explains why we can swap the src using CSS, like this:
<img src="image.avif" alt="Alt text">
content: url(new-image.avif) / "New alt text";
}
Temani also showed us what we can do with this information:
Tyler Sticka reminded us (well, I’m learning about it for the first time…) how to fix text-stroke with paint-order. For those who don’t know, text-strokes are center-aligned, so half of the stroke appears on the outside while the other half appears on the inside, and the inside half often looks terrible.