You can style alt text like any other text

0
318

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

Gesponsert
Gesponsert
Gesponsert
Gesponsert
Gesponsert
Suche
Gesponsert
Virtuala FansOnly
CDN FREE
Cloud Convert
Kategorien
Mehr lesen
Andere
Take My Class Online: Navigating the Path to Academic Success in Virtual Learning Environments
In today’s rapidly evolving educational landscape, virtual learning environments have...
Von Lil Yyy 2025-01-26 12:04:27 0 645
Andere
Prije novog dvoboja, neki se kaju zbog svojih odluka: 'Sigurno bih ga vratila'
Prije novog dvoboja, neki se kaju zbog svojih odluka: 'Sigurno bih ga vratila'...
Von Vedrana Kašić 2025-06-26 12:56:14 0 291
Art
इस सरल सेटअप ने मुझे आखिरकार अपने आदर्श कला स्टूडियो को सजाने के लिए सब कुछ दिया
कला स्टूडियो, फॉरेस्ट इमेल, पालतू जानवर, कला में निवास, रचनात्मकता, कलाकार का जीवन, कला का स्थान...
Von Anil Ajay 2025-09-14 07:05:16 1 569
Crafts
Dodgers Likely To Select Justin Dean
The Dodgers are likely to promote outfielder before tomorrows series opener with the Blue Jays,...
Von Verna Skiles 2025-10-27 03:47:36 0 166
Art
Tencent Revoluciona a Criação de Jogos com a VISVISE: Da Arte à Agonia em Minutos
tencent, ai, criação de jogos, VISVISE, produção de arte, ferramentas de jogo, tecnologia de...
Von Diego Bruno 2025-08-23 05:05:23 1 340
Gesponsert
Virtuala FansOnly https://virtuala.site