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
Hotel Bedding & Mattress Industry Forecast
Polaris Market Research has introduced the latest market research report titled Hospitality...
orphanage near me to donate food
orphanage near me to donate food
Hunger remains one of the most pressing social challenges...
Mamme Insegnano Sesso: un tabù che intriga tutte le generazioni
mamme, sesso, tabù, insegnamento, generazioni, curiosità, cultura, genitorialità, relazioni
##...
Self-sealing ziplock bag Market Growth and Development: Regional Demand, Segment by Types and End-User By 2035
This report presents a structured and objective analysis of the global Self-Sealing Ziplock...
Dialysis Explained: Types, Procedure, and What Patients Should Expect
Kidneys play a vital role in filtering waste, balancing electrolytes, and regulating blood...
Commandité