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 🤷♂️.
Sponsor
Zoeken
Categorieën
- Live Stream
- Causes
- Crafts
- Dance
- Drinks
- Film
- Fitness
- Food
- Spellen
- Gardening
- Health
- Home
- Literature
- Music
- Networking
- Other
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
- Art
- Life
- Coding
Read More
Trade Finance Market Size to Reach USD 82.18 Billion by 2032
According to a new report published by Introspective Market Research, Trade Finance Market...
Le SIGGRAPH Asia 2025 Opens Its Doors, 3DVF Is On Site!
SIGGRAPH Asia 2025, Hong Kong, digital art, conference, technology, gaming, animation, posters,...
IAs and Personas: Towards a New Extreme Persona?
AI, Personas, User Experience, Design Methodologies, Accessibility, Inclusion, Artificial...
Selecta Cut Flowers Presents Innovative Chrysanthemum Assortment And Trials In A Digital Exhibition During Chrysanthemum Week 2020
Selecta Cut Flowers Presents Innovative Chrysanthemum Assortment And Trials In A Digital...
Web Design & Development | Ecommerce and business websites
WordPress web design and development. We create fast, mobile-friendly, SEO-optimized, ecommerce...
Sponsor
© 2026 Virtuala FansOnly
Dutch