: lang () - Trik CSS

Anonim

The :lang()pemilih kelas semu di CSS pertandingan elemen berdasarkan konteks atribut bahasa tertentu mereka. Bahasa dalam HTML, ditentukan oleh kombinasi lang=""atribut, elemen, dan informasi dari protokol seperti kolom HTTP Accept-Languagerequest-header 1 . String kode bahasa yang dapat diterima ditentukan dalam spesifikasi HTML 4.0.

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

:lang(X)cocok jika elemen dalam bahasa X. Apakah kecocokan hanya didasarkan pada pengidentifikasi X yang sama dengan, atau substring yang dipisahkan tanda hubung dari, nilai bahasa elemen, dengan cara yang sama seperti jika dilakukan oleh "| =" operator. Pencocokan X terhadap nilai bahasa elemen dilakukan secara case-insensitively untuk karakter dalam rentang ASCII. Pengenal X tidak harus nama bahasa yang valid. Penting untuk diperhatikan bahwa :langselektor dapat digunakan secara global atau secara khusus pada elemen tertentu. Jangan ragu untuk menggunakan selektor turunan atau :lang(language-code)kelas semu saja.

Contoh

Dengan menggunakan langatribut pada elemen root kita (yaitu ), kita dapat mengganti tanda kutip tergantung 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: '»' '«'; )
Inggris (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 sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Prancis (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 sempre. 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 sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Atribut bahasa tidak dapat diterapkan ke elemen berikut:

  • applet
  • mendasarkan
  • basefont
  • br
  • bingkai
  • frameset
  • iframe
  • param
  • naskah

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Ya Ya Ya Ya Ya Ya Ya

:lang(X) adalah rekomendasi dari spesifikasi CSS Level 2 Revisi 1 dan secara langsung direkomendasikan sebagai bagian dari spesifikasi CSS Level 2.

1 kolom header HTTP adalah komponen header pesan dari permintaan dan tanggapan di Hypertext Transfer Protocol (HTTP). Mereka menentukan parameter operasi dari transaksi HTTP. The Accept-Languagelapangan request-header mirip dengan Menerima, tetapi membatasi set bahasa alami yang disukai sebagai respon terhadap permintaan.