Lebih banyak mengenai penglihatan kandungan

Atribut content-visibility CSS: Peningkatan Prestasi dan Cabaran Kebolehcapaian

Pada bulan Ogos 2020, atribut content-visibility CSS mula digunakan dalam pelayar Chrome, dan Una Kravets dan Vladimir Levin menulis artikel mengenainya. Untuk menggunakan sepenuhnya kelebihan prestasinya, ia perlu digunakan bersempena dengan harta contain-intrinsic-size , yang memerlukan anggaran ketinggian ketulan besar kandungan dalam halaman. Bahagian paling aneh ini ialah anda perlu membuat anggaran anggaran tentang ketinggian ketulan besar ini.

Saya telah mengemukakan soalan sebelum ini: hanya meneka ketinggian? Apa yang berlaku jika tekaan itu salah? Adakah ia akan mempengaruhi prestasi? Sekiranya terdapat perbezaan besar antara skrin besar dan skrin kecil, adakah nilai ini (atau harus) diubah dalam viewport yang berbeza?

Jake Archibald dan Das Surma baru -baru ini membuat video untuk menjelaskan isu -isu ini. Pada kira -kira 7 minit dan 30 saat video, anda dapat melihat bagaimana mengelirukan ini. Jake menggunakan halaman spesifikasi HTML yang besar sebagai demonstrasi dan menambah pembalut untuk potongan besar kandungan HTML, dan menggunakan kod berikut:

 Bahagian {
  Kandungan-VISIBILITI: Auto; /* Lukisan kelewatan*/
  Mengandungi saiz-saiz: 1px 5000px; /* Tebak saiz kandungan, lebar tidak penting*/
}

Jelas sekali, 5000px bukan ketinggian elemen, tetapi saiz kandungan elemen itu. Ini penting kerana ia meningkatkan ketinggian elemen induk kepada nilai ini melainkan elemen induk mengatasinya dengan atribut ketinggiannya sendiri. Keajaiban ini adalah bahawa penyemak imbas hanya akan menarik bahagian pertama (ketinggian viewport mungkin kurang dari 5000px) dan melambatkan lukisan yang lain. Ia agak seperti pemuatan malas, tetapi ia berfungsi pada segala -galanya, bukan hanya media. Ia menganggap bahagian seterusnya mempunyai ketinggian 5000px, tetapi apabila bahagian atasnya dapat dilihat, ia sebenarnya ditarik dan ketinggian yang betul ditentukan. Jadi jika halaman anda hanya blok besar kandungan yang disusun bersama -sama, menggunakan nombor yang sangat besar harus berfungsi dengan baik. Jika laman web anda lebih rumit daripada ini, maka gembira.

Ini adalah video hebat yang harus anda periksa: pautan video

Ini adalah satu lagi contoh yang memerlukan anda menyediakan penyemak imbas anda dengan maklumat laman web supaya ia dapat meningkatkan prestasi. Penyemak imbas itu sendiri dapat mencari maklumat ini, tetapi ia hanya boleh dilakukan setelah melakukan operasi dengan kos prestasi. Oleh itu, anda perlu menceritakannya terlebih dahulu, dengan itu mengelakkan beberapa jenis kerja tambahan. Untuk imej yang responsif, jika kita menggunakan atribut srcset untuk memberikan imej dan memberitahu penyemak imbas terlebih dahulu saiz mereka, termasuk atribut sizes yang mengandungi maklumat tingkah laku CSS, ia boleh dikira terlebih dahulu dan hanya imej terbaik yang dimuat turun. Begitu juga, untuk harta will-change di CSS, kita boleh memberitahu penyemak imbas terlebih dahulu bahawa kita akan melakukan langkah itu supaya ia dapat dioptimumkan, jika tidak, ia tidak dapat melakukan ini. Ini difahami, tetapi sedikit membosankan. Ia seperti kita memerlukan stuff-you-need-to-know.manifest

Isu kebolehcapaian juga penting. Steve Faulkner diuji Memohon content-visibility: auto ke Imej dan Perenggan:

Kandungan tersembunyi secara visual, tetapi di Jaws dan NVDA, imej tersembunyi diumumkan, tetapi kandungan elemen tidak diumumkan. Ini berkaitan dengan bagaimana kandungan elemen imej dan perenggan diwakili dalam Pokok Kebolehaksesan Pelayar: Imej dipaparkan dalam Pokok Kebolehaksesan dengan Teks ALT sebagai nama kebolehaksesan. Kandungan elemen perenggan tidak berada di dalam pokok aksesibiliti.

Beliau menyatakan bahawa oleh spesifikasi, kandungan yang tersembunyi dengan cara ini tidak boleh diberikan kepada pembaca skrin. Saya dapat memahami kedua -dua kes, seperti menyembunyikan segala -galanya seperti display: none , yang bermaksud tidak ada di dalam pokok aksesibiliti. Atau, simpan segala -galanya dalam pokok aksesibiliti. Kini ia berada dalam keadaan pertengahan, anda mungkin melihat sekumpulan imej terpencil dalam pokok akses tanpa konteks lain kecuali teks alt mereka. Ini adalah contoh yang menarik dari teknologi baru yang diperkenalkan mungkin lebih kasar daripada yang anda ingin lihat.

Bercakap tentang teks alt, kita semua tahu bahawa mereka tidak boleh kosong apabila mereka mewakili perkara -perkara penting yang perlu diterangkan kepada orang yang tidak dapat melihatnya. Dave mengatakan bahawa mereka sepatutnya seperti perenggan :

Saya akhirnya membuat sambungan yang paling mudah: teks alt adalah seperti perenggan. Gambar teks. Saya tahu ini asas, tetapi ia membantu saya memahami cara menulis teks alt yang baik dan urutan sumber kod saya.

Saya tidak mahu terlalu negatif di sini! Keuntungan prestasi untuk menubuhkan halaman menatal yang panjang dengan atribut content-visibility adalah besar, yang hebat. Adalah baik untuk dapat menggunakan dua baris kod untuk memberitahu penyemak imbas apa yang tidak boleh ditarik.

1. Saya terus berkata "menarik" tetapi saya tidak tahu sama ada ini sebenarnya istilah yang betul atau jika ia bermakna lebih spesifik. Spesifikasi ini menyebutkan perkara -perkara seperti "membolehkan ejen pengguna berpotensi menghilangkan banyak susun atur dan membuat kerja sebelum mereka memerlukannya" (menekankan saya).

Atas ialah kandungan terperinci Lebih banyak mengenai penglihatan kandungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!