You can style alt text like any other text
Posted 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 🤷♂️.
Sponsorluk
Site içinde arama yapın
Kategoriler
- Live Stream
- Causes
- Crafts
- Dance
- Drinks
- Film
- Fitness
- Food
- Oyunlar
- Gardening
- Health
- Home
- Literature
- Music
- Networking
- Other
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
- Art
- Life
- Coding
Read More
How to Get Leads for Interior Design Using Social Media Marketing
In the visually driven world of interior design, your creativity is your biggest asset. But if...
Master the Game: Essential Tips to Win Big in Matka Play
Matka, also known as Satta Matka, is a popular gambling game that has captivated players across...
Luxury Denim Jeans Market Size, Share, Research, and Demand Forecast to 2032
Luxury Denim Jeans Market Overview:
The luxury denim jeans market refers to high-end denim...
Neue offizielle Sonic Racing Crossworlds Werbung greift Mario Kart World an, als wäre es die 1990er Jahre
Sonic Racing, Mario Kart, Videospiele, Gaming-News, Xenoblade, Palworld, Game Pass, MindsEye,...
Future of Drug Discovery: Role of Robots in the Pharmaceutical Market
The newly published study by Polaris Market Research, titled Pharmaceutical Robot Market, delves...
Sponsorluk