You can style alt text like any other text
Posté 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 🤷♂️.
Commandité
Rechercher
Catégories
- Diffusion en direct
- Causes
- Crafts
- Dance
- Drinks
- Film
- Fitness
- Food
- Jeux
- Gardening
- Health
- Domicile
- Literature
- Music
- Networking
- Autre
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
- Art
- Life
- Coding
Lire la suite
Global Laboratory Freezers Market Analysis and Insights
Market OverviewAccording To The Research Report Published By Polaris Market Research, The Global...
Companies adopt stacker cranes to optimize warehouse space and minimize operational costs
Polaris Market Research has introduced the latest market research report titled Stacker Crane...
Should Regenerative Farmers Pin Hopes on RFK Jr.’s MAHA?
## Ein neuer Hoffnungsschimmer für regenerative Landwirte
In der heutigen Zeit, in der die...
Inflammatory Bowel Disease Market, Size, Share, Growth, Trends and Forecast (2024-2032)
According to the UnivDatos, the surge in the incidence of IBD cases and the rise in demand for...
Le SIGGRAPH Asia 2025 Opens Its Doors, 3DVF Is On Site!
SIGGRAPH Asia 2025, Hong Kong, digital art, conference, technology, gaming, animation, posters,...
Commandité