You can style alt text like any other text

0
365

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
Κατηγορίες
Διαβάζω περισσότερα
άλλο
Exploring the Guitar Speaker Market: Size, Share, and Strategic Insights (2024–2032)
Guitar Speaker Market Overview: Guitar speakers are specialized loudspeakers used in guitar...
από Cassie Tyler 2024-11-27 12:02:36 0 646
Art
# Lancio ufficiale di GPT-5: Un'era nuova per l'intelligenza artificiale
GPT-5, intelligenza artificiale, tecnologia, innovazione, futuro, evoluzione, Arab Hardware,...
από Elena Irene 2025-08-07 19:05:21 1 519
Health
Creating a Reliable Operational Backbone for Therapy Clinics with Remote Role Clarity
  The Reality: Clinical Excellence Needs Administrative Support Running a successful...
από Yotohik995 Yotohik995 2025-07-07 06:02:29 0 375
Art
Easy Grass Generator 1.9: Verbesserte Werkzeuge und Frustrationen, die nicht enden wollen
Easy Grass Generator, Blender, 3D-Modellierung, Archviz, Grasgenerator, digitale Kunst,...
από Leonie Johanna 2025-09-10 10:05:26 1 733
άλλο
Southeast Asia Plant-Based Dairy Products Market Size, Growth, Analysis & Forecast Report, 2033 | UnivDatos
According to a new report by UnivDatos the Southeast Asia Plant-Based Dairy Products...
από Ahasan Ali 2025-12-03 09:51:23 0 233
Προωθημένο
Virtuala FansOnly https://virtuala.site