You can style alt text like any other text
نشر بتاريخ 2025-05-31 20:21:42
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 🤷♂️.
إعلان مُمول
البحث
الأقسام
- البث المباشر
- Causes
- Crafts
- Dance
- Drinks
- Film
- Fitness
- Food
- الألعاب
- Gardening
- Health
- الرئيسية
- Literature
- Music
- Networking
- أخرى
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
- Art
- Life
- Coding
إقرأ المزيد
Wie man Tech Neck verhindert und richtig mit dem Laptop sitzt (2025)
## Einleitung
Wenn du so bist wie ich, dann verbringst du viel zu viel Zeit vor deinem Laptop...
Inoculants Market Outlook, Size, Share, Trends & Research Report, 2033 | UnivDatos
According to UnivDatos analysis, the growing demand for sustainable farming practices and...
48h Sanierung D´dorf Asbestkleber & Bodenbelag-0221-96986861
Von Floorflex, Cushion-Vinyl, asbesthaltigem Vinylboden bis zum Abschliff von asbesthaltigen...
Criando Gaussian Splats no Blender a partir de Imagens de Drones com o Add-On Gratuito SkySplat
## Introdução
Se você é um entusiasta de Blender, já deve estar farto de ferramentas que...
Ksenija Urličić pokazala svoj vrt od 500 m2 koji je proglašen najljepšim u Zagrebu
Ksenija Urličić pokazala svoj vrt od 500 m2 koji je proglašen najljepšim u Zagrebu
KSENIJA...
إعلان مُمول