You can style alt text like any other text

0
637

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 🤷‍♂️.

Προωθημένο
Προωθημένο
Προωθημένο
Προωθημένο
Προωθημένο
Αναζήτηση
Προωθημένο
Virtuala FansOnly
CDN FREE
Cloud Convert
Κατηγορίες
Διαβάζω περισσότερα
Art
إطار SwitchBot يغيّر ديكور منزلك بالذكاء الاصطناعي
إطار, SwitchBot, ديكور منزلك, الذكاء الاصطناعي, التكنولوجيا, تصميم داخلي, innovation, المنزل...
από Fernando Manuel 2025-09-07 02:05:45 1 1χλμ.
άλλο
Queue Management System Market, Size, Share, Growth and forecast (2024-2032)
According to the UnivDatos, the surge in demand for queue management systems can be attributed to...
από Praveen Gupta 2025-12-22 05:16:51 0 769
Art
Keeper: Erste Eindrücke nach der Gamescom 2025
## Einleitung Die Gamescom 2025 hat ihre Türen geöffnet und mit ihr die Rückkehr von Tim...
από Laura Dina 2025-08-25 12:05:18 1 945
Music
IAs and Personas: Towards a New Extreme Persona?
AI, Personas, User Experience, Design Methodologies, Accessibility, Inclusion, Artificial...
από João Vitor 2026-01-08 16:05:26 0 195
άλλο
Global Renewable Membranes Market Poised for Strong Growth Driven by Sustainable Energy Initiatives
The Renewable Membranes Market is gaining momentum as industries focus on sustainable energy...
από Riya Sharma 2025-10-08 13:32:51 0 507
Προωθημένο
Virtuala FansOnly https://virtuala.site