Kandungan - Trik CSS

Anonim

The contentharta di CSS digunakan bersama dengan pseudo-unsur ::beforedan ::after. Ia digunakan untuk memasukkan kandungan secara harfiah. Terdapat empat jenis nilai yang boleh dimiliki.

Tali

.name::before ( content: "Name: "; )

Kemudian elemen seperti ini:

 Chris

Akan membuat seperti ini:

Name: Chris

Ini juga boleh menjadi tali kosong, yang biasanya dilihat dalam hal-hal seperti perbaikan jelas.

Kaunter

div::before ( content: counter(my-counter); )

Lebih banyak maklumat mengenai perkara itu.

Imej

div::before ( content: url(image.jpg.webp); )

Ini secara harfiah adalah gambar di halaman seperti yang akan berlaku. Ia juga boleh menjadi kecerunan. Perhatikan bahawa anda tidak dapat mengubah dimensi gambar ketika dimasukkan dengan cara ini. Anda juga dapat memasukkan gambar dengan menggunakan rentetan kosong untuk konten, membuatnya display: blockdalam beberapa cara, ukurannya, dan menggunakan background-image. Dengan cara itu anda boleh menyukatnya semula background-size.

Atribut

Anda boleh menggunakan nilai (string, anyway) yang diambil langsung dari atribut dalam HTML.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

Yang attr()fungsi tidak mempunyai "jenis" sahaja lagi, supaya anda tidak boleh lulus nilai seperti 20px(hanya tali), tetapi suatu hari nanti!

Teks Alternatif

Spesifikasi mengatakan bahawa anda boleh menggunakan /sintaks untuk menyenaraikan teks alternatif. Sebagai contoh…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Mungkin anda boleh menggunakannya seperti ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

Maklumat lanjut

Kandungan yang dimasukkan dengan cara ini sebenarnya tidak ada di DOM, jadi ia mempunyai beberapa batasan. Sebagai contoh, anda tidak dapat melampirkan acara secara langsung (hanya) ke elemen semu. Ini juga tidak konsisten sama ada teks yang dimasukkan dengan cara ini dibaca oleh pembaca skrin (biasanya pada masa ini) atau jika anda boleh memilihnya (biasanya bukan hari ini).

  • Perkara-perkara menarik yang boleh dilakukan oleh elemen pseuedo
  • Pembentangan mengenai unsur-unsur semu
  • Dokumen MDN

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
4 2 9 12 3.1

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 2.1 3.2

Untuk Opera, url()hanya disokong dalam versi 7+.