You can style alt text like any other text
Posted 2025-05-31 20:21:42
0
318
You can style alt text like any other text | CSS-Tricks
Clever, clever that Andy Bell. He shares a technique for displaying image alt text when the image fails to load. Well, more precisely, it’s a technique to apply styles to the alt when the image doesn’t load, offering a nice UI fallback for what would otherwise be a busted-looking error.
The recipe? First, make sure you’re using alt in the HTML. Then, a little JavaScript snippet that detects when an image fails to load:
const images = document.querySelectorAll("img");
if (images) {
images.forEach((image) => {
image.onerror = () => {
image.setAttribute("data-img-loading-error", "");
};
});
}
That slaps an attribute on the image — data-img-loading-error — that is selected in CSS:
img[data-img-loading-error] {
--img-border-style: 0.25em solid
color-mix(in srgb, currentColor, transparent 75%);
--img-border-space: 1em;
border-inline-start: var(--img-border-style);
border-block-end: var(--img-border-style);
padding-inline-start: var(--img-border-space);
padding-block: var(--img-border-space);
max-width: 42ch;
margin-inline: auto;
}
And what you get is a lovely little presentation of the alt that looks a bit like a blockquote and is is only displayed when needed.
Andy does note, however, that Safari does not render alt text if it goes beyond a single line, which 🤷♂️.
Sponsorizzato
Cerca
Categorie
- Live Stream
- Causes
- Crafts
- Dance
- Drinks
- Film
- Fitness
- Food
- Giochi
- Gardening
- Health
- Home
- Literature
- Music
- Networking
- Altre informazioni
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
- Art
- Life
- Coding
Leggi tutto
Destiny 2: Der Zorn über die Unreal Engine Demos
Destiny 2, Unreal Engine, Sava Zivkovic, AAA-Spiele, Axis Studios, Animation, VFX, GameDay
##...
How to Watch Nationals vs. Reds TV Channel Live Stream - July 21
and the Washington Nationals will take the field against the Cincinnati Reds and on Sunday at...
Come Pulire il Tuo Materasso (2025)
## Introduzione
Se pensi che il tuo materasso sia un semplice oggetto su cui dormire, ti sbagli...
Nevjerojatni prizori, Kim snimljen na bazenu: Pazite tek što se nalazi na stoliću pored
Nevjerojatni prizori, Kim snimljen na bazenu: Pazite tek što se nalazi na stoliću pored...
NURS FPX 4055 Assessment 4: Health Promotion Plan
As healthcare continues to evolve, nurses are taking on increasingly complex...
Sponsorizzato