: lang () - Trik CSS

Anonim

The :lang()pemilih kelas pseudo dalam CSS perlawanan elemen berdasarkan konteks mereka atribut bahasa diberikan. Bahasa dalam HTML, ditentukan oleh kombinasi lang=""atribut, elemen, dan oleh maklumat dari protokol seperti bidang HTTP Accept-Languagepermintaan-tajuk 1 . Rentetan kod bahasa yang boleh diterima ditentukan dalam spesifikasi HTML 4.0.

:lang(language-code) ( // whatever styling )

:lang(X)sepadan jika elemen itu dalam bahasa X. Sama ada pertandingan hanya berdasarkan pengecam X sama dengan, atau substring tanda hubung yang dipisahkan, nilai bahasa elemen, dengan cara yang sama seolah-olah dilakukan oleh "| =" pengendali. Pencocokan X dengan nilai bahasa elemen dilakukan tanpa huruf besar-besaran untuk watak dalam julat ASCII. Pengecam X tidak semestinya nama bahasa yang sah. Penting untuk diperhatikan bahawa :langpemilih dapat digunakan secara global atau khusus pada elemen tertentu. Jangan ragu untuk menggunakan pemilih keturunan atau :lang(language-code)kelas pseudo sahaja.

Contohnya

Dengan menggunakan langatribut pada elemen akar kita (iaitu ) kita dapat mengganti petikan bergantung pada bahasa yang ditentukan.


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

q:before ( content: open-quote; ) q:after ( content: close-quote; ) :lang(en) q ( quotes: '“' '”'; ) :lang(fr) q ( quotes: '«' '»'; ) :lang(de) q ( quotes: '»' '«'; )
Bahasa Inggeris (en)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Perancis (fr)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Jerman (de)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Atribut bahasa tidak dapat diterapkan pada elemen berikut:

  • applet
  • pangkalan
  • asas asas
  • br
  • kerangka
  • bingkai bingkai
  • iframe
  • param
  • skrip

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Yap Yap Yap Yap Yap Yap Yap

:lang(X) adalah cadangan spesifikasi Revisi 1 CSS Tahap 2 dan disyorkan secara oriental sebagai sebahagian daripada spesifikasi Tahap 2 CSS.

1 Bidang tajuk HTTP adalah komponen dari tajuk permintaan dan respons dalam Hypertext Transfer Protocol (HTTP). Mereka menentukan parameter operasi transaksi HTTP. Bidang Accept-Languagepermintaan-tajuk serupa dengan Terima, tetapi menyekat sekumpulan bahasa semula jadi yang lebih disukai sebagai respons terhadap permintaan tersebut.