Anda dapat menata teks alt seperti teks lainnya – Beragampengetahuan

Cerdas, pintar Andy Bell itu. Dia berbagi teknik untuk menampilkan gambar alt Teks Saat gambar gagal memuat. Oke, lebih tepatnya, ini cara untuk menerapkan gaya alt Ketika gambar tidak dimuat, fallback UI yang bagus disediakan untuk kesalahan penampilan.

resep? Pertama, pastikan Anda menggunakan alt Di html. Kemudian, cuplikan kode JavaScript kecil mendeteksi ketika gambar tidak dapat dimuat:

const images = document.querySelectorAll("img");

if (images) {
  images.forEach((image) => {
    image.onerror = () => {
      image.setAttribute("data-img-loading-error", "");
    };
  });
}

Ini mengambil properti pada gambar – data-img-loading-error – Pilih di 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;
}

Dan apa yang Anda dapatkan adalah pengantar kecil yang lucu alt Ini terlihat seperti modul, hanya ditampilkan saat dibutuhkan.

Andy memang menunjukkan bahwa safari tidak diterjemahkan alt Teks Jika melebihi satu baris, maka 🤷‍♂ogrers.

Anda dapat menata teks alt seperti teks lain yang awalnya diposting di beragampengetahuan, yang merupakan bagian dari keluarga Digitalocean. Anda harus menerima buletin.