Berita Platform: Menggunakan: Fokus-Visible, BBC ' s Typeface Baru, Deklaratif Shadow Doms, A11Y dan Placeholders

Terdapat banyak kebolehcapaian dalam berita minggu ini, dari nuansa menggunakan: fokus yang kelihatan dan ruang letak masuk, kepada typefaces yang boleh diakses dan bug safari dengan: paparan: kandungan. Plus, coretan untuk komponen web tulang-tulang yang menyokong enkapsulasi gaya.

Sekarang mungkin masa yang tepat untuk mula menggunakan: fokus-kelihatan

CSS: Pseudo-Class Focus-Visible menggantikan: Fokus sebagai cara baru untuk membuat petunjuk fokus tersuai untuk pengguna papan kekunci. Chrome baru-baru ini beralih dari: Fokus ke: Fokus-kelihatan dalam Stylesheet Agen Pengguna dan, sebagai hasil daripada perubahan itu, cincin fokus lalai tidak lagi ditunjukkan apabila pengguna mengklik atau mengetuk butang.

Apabila beralih dari: Fokus ke: Fokus-kelihatan, pertimbangkan keserasian ke belakang. Petunjuk fokus papan kekunci anda harus kelihatan jelas dalam semua pelayar, bukan hanya yang menyokong: fokus-kelihatan. Jika anda hanya gaya: Fokus-kelihatan, penyemak imbas yang tidak disokong akan menunjukkan cincin fokus lalai yang, bergantung kepada reka bentuk anda, "mungkin tidak cukup jelas atau kelihatan sama sekali."

 butang {
  Latar Belakang: Putih;
}

butang: fokus-kelihatan {
  Garis besar: Tiada;
  Latar Belakang: #FFDD00; / * emas */
}

Cara yang baik untuk mula menggunakan: Fokus-kelihatan hari ini adalah untuk menentukan gaya fokus dalam A: Fokus Peraturan dan kemudian segera membatalkan gaya yang sama dalam A: Fokus: Tidak (: Fokus-Visible) Rule. Ini diakui bukan corak yang paling elegan dan intuitif, tetapi ia berfungsi dengan baik dalam semua pelayar:

• Pelayar yang tidak menyokong: Fokus-kelihatan Gunakan gaya fokus yang ditakrifkan dalam: peraturan fokus dan mengabaikan peraturan gaya kedua sepenuhnya (kerana: fokus-kelihatan tidak diketahui oleh mereka).
• Dalam penyemak imbas yang menyokong : Fokus-kelihatan, peraturan gaya kedua membalikkan gaya fokus yang ditakrifkan dalam: peraturan fokus jika: keadaan fokus yang kelihatan tidak aktif juga. Dalam erti kata lain, gaya fokus yang ditakrifkan dalam: peraturan fokus hanya berkuatkuasa apabila: Fokus-kelihatan juga aktif.

 butang: fokus {
  Garis besar: Tiada;
  Latar Belakang: #FFDD00; / * emas */
}

butang: fokus: tidak (: fokus-kelihatan) {
  Latar Belakang: Putih; / * membatalkan emas */
}

BBC mencipta jenis huruf yang lebih mudah diakses

BBC mencipta jenis huruf tersuai mereka sendiri yang dipanggil Reith (dinamakan selepas pengasas BBC Sir John Reith). Matlamat mereka adalah untuk mewujudkan fon yang menyokong pelbagai bahasa dan lebih mudah dibaca, terutamanya pada peranti kecil. Fon ini diuji dengan kumpulan pengguna bercampur-campur (disleksia dan gangguan penglihatan) dan merentasi saiz skrin yang berbeza.

Kami [BBC] menggunakan Helvetica atau Arial. Kami juga mempunyai Gill Sans sebagai jenis huruf korporat. Typefaces ini direka seratus tahun yang lalu untuk halaman bercetak [dan] tidak berfungsi dengan baik pada skrin digital moden hari ini.

Nota: Jika anda ingin memeriksa Reith Sans dan Reith Serif di Wakamai Fondue, anda dapat dengan cepat mengakses URL fail Woff2 di bahagian "Semua Fon pada halaman" dari panel Fon di Inspektor DOM Firefox di laman web BBC.

Paparan: Kandungan masih tidak dapat diakses di safari

Paparan CSS: Nilai kandungan telah disokong dalam pelayar sejak 2018. Unsur dengan nilai ini "tidak menjana sebarang kotak" dan digantikan dengan berkesan oleh anak -anaknya. Ini amat berguna dalam susun atur flex dan grid, di mana nilai kandungan boleh digunakan untuk "mempromosikan" unsur -unsur yang lebih bersarang untuk item flex/grid sambil mengekalkan struktur dokumen semantik.

Malangnya, ciri ini pada asalnya dihantar dengan pepijat pelaksanaan yang mengeluarkan elemen dari pokok kebolehaksesan penyemak imbas. Sebagai contoh, memohon paparan: Kandungan ke elemen

mengakibatkan elemen itu tidak lagi disebut oleh pembaca skrin. Sejak itu, pepijat ini telah ditetapkan dalam Firefox dan Chrome (dalam versi terkini).

Dalam Chrome dan Firefox, pembaca skrin memberitahu pengguna bahawa "utama, navigasi" mengandungi "senarai, 2 item." Di Safari, bahagian terakhir hilang kerana unsur -unsur

dan
• tidak terdapat di dalam pokok aksesibiliti. Sehingga Apple membetulkan pepijat ini di Safari, berhati -hati apabila menggunakan nilai kandungan pada unsur -unsur semantik dan ujian dalam pembaca skrin untuk mengesahkan bahawa halaman anda boleh diakses di Safari juga.

  Tetapkan kelegapan apabila mengatasi warna teks letak

  Pakar kebolehcapaian mengesyorkan mengelakkan ruang letak jika mungkin kerana mereka boleh dikelirukan untuk teks pra-penduduk dan hilang apabila pengguna mula memasuki nilai. Walau bagaimanapun, banyak laman web (termasuk wikipedia dan gov.uk) menggunakan tempat letak dalam bentuk web mudah yang mengandungi hanya satu medan input, seperti medan carian.

  Pemegang letak boleh digayakan melalui Pseudo-Element yang disokong secara meluas :: Pseudo-Element. Jika reka bentuk anda memerlukan warna tersuai untuk teks pemegang tempat, pastikan untuk menentukan kedua -dua warna dan kelegapan. Yang terakhir diperlukan untuk Firefox, yang menggunakan kelegapan: 0.54 hingga :: Pemegang Saham secara lalai. Jika anda tidak mengatasi nilai ini, teks tempat letak anda mungkin tidak mencukupi dalam Firefox.

   .Search-field :: Placeholder {
    Warna: #727272;
    Kelegapan: 1; / * diperlukan untuk firefox */
  }

  Declarative Shadow Dom dapat membantu mempopularkan enkapsulasi gaya

  Salah satu ciri utama Shadow Dom adalah enkapsulasi gaya, di mana peraturan gaya halaman luar tidak sepadan dengan unsur -unsur di dalam pokok bayangan, dan sebaliknya. Untuk menggunakan ciri ini, anda perlu melampirkan pokok dom bayangan ke elemen (biasanya elemen tersuai, seperti ) dan menyalin template elemen (biasanya dari elemen dalam DOM) ke dom bayangan yang baru dibuat elemen.

  Langkah -langkah ini hanya boleh dilakukan di JavaScript. Jika anda hanya berminat dengan enkapsulasi gaya dan tidak memerlukan sebarang fungsi dinamik untuk elemen anda, berikut adalah jumlah minimum JavaScript yang diperlukan untuk membuat elemen tersuai dengan Shadow Dom:

   customElements.define (
    "my-element",
    Kelas memanjangkan htmlelement {
      pembina () {
        super ();
  
        // cari <pemat> di dom
        biarkan template = document.getElementById ("my-template");
  
        // Buat salinan kandungan templat ...
        biarkan kandungan = template.content.clonenode (benar);
  
        // ... dan suntikannya ke dalam Shadow Dom <sy-element>
        this.attachshadow ({mod: "buka"}). appendChild (kandungan);
      }
    }
  );</sy-element></pemat>

  Sebagai contoh enkapsulasi gaya, lihat elemen Miriam Suzanne pada Codepen. Gaya scoped terletak di elemen dalam anak tetingkap HTML. Perhatikan bagaimana kod CSS ini boleh menggunakan pemilih mudah, seperti artikel, yang hanya sepadan dengan unsur-unsur di dalam Shadow Dom .

  JavaScript tidak lama lagi tidak lagi diperlukan untuk membuat enkapsulasi gaya jenis ini dalam pelayar moden. Awal minggu ini, Chrome menjadi pelayar pertama untuk menghantar cadangan Dom Dom Declarative Google. Jika ia menjadi standard, ciri ini juga akan memungkinkan untuk menggunakan Shadow Dom dalam kombinasi dengan penyerahan sisi pelayan.

Atas ialah kandungan terperinci Berita Platform: Menggunakan: Fokus-Visible, BBC ' s Typeface Baru, Deklaratif Shadow Doms, A11Y dan Placeholders. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!