You can style alt text like any other text
Сообщение 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 🤷♂️.
Спонсоры
Поиск
Категории
- Cекретный ключ Live
- Causes
- Crafts
- Dance
- Drinks
- Film
- Fitness
- Food
- Игры
- Gardening
- Health
- Главная
- Literature
- Music
- Networking
- Другое
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
- Art
- Life
- Coding
Больше
Automated Analyzers Market Size to Reach USD 6.76 Billion by 2032
According to a new report published by Introspective Market Research, Automated Analyzers...
Eco-Friendly Pathways: Future Outlook of the Glucaric Acid Market
According to the recent analysis by Polaris Market Research, the Glucaric Acid Market is poised...
Aonic приобретает исследовательскую технологическую компанию Prime Insights за 250 миллионов долларов
Aonic, nDreams, Prime Insights, приобретение, технологии, глобальный игрок, исследовательская...
Veterinary Imaging Market Size to Reach USD 3.13 Billion by 2032
According to a new report published by Introspective Market Research, Veterinary Imaging...
Спонсоры