You can style alt text like any other text
Posted 2025-05-31 20:21:42
0
638
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 🤷♂️.
Sponsored
Search
Categories
- Live Stream
- Causes
- Crafts
- Dance
- Drinks
- Film
- Fitness
- Food
- Games
- Gardening
- Health
- Home
- Literature
- Music
- Networking
- Other
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
- Art
- Life
- Coding
Read More
Timeless Leather Bags for Men and Women: Style, Durability, and Functionality
Leather bags have always been a symbol of elegance, durability, and versatility. Whether...
Elevator Maintenance Market Size, Share, Trends & Research Report, 2033 | UnivDatos
According to UnivDatos analysis, increasing installation of elevators and expansion of high-rise...
Tequila Market by Type and Application: Blanco, Reposado, and Añejo Segment Growth and Forecast 2025–2035
The Tequila Market Size was estimated at 25.1 USD Billion in 2024. The Tequila industry is...
Design Scanimations Im Handumdrehen Mit Der Richtigen Mathematik
## Einleitung
In einer Welt voller Bewegung und visueller Reize gibt es etwas tief Trauriges an...
Sponsored