Semua - Trik CSS

Anonim

The allproperti di CSS reset semua sifat elemen yang dipilih, kecuali directiondan unicode-bidiproperti yang mengendalikan arah teks.

.module ( all: unset; )

Intinya adalah memungkinkan penyetelan ulang gaya tingkat komponen. Terkadang jauh lebih mudah untuk memulai dari awal dengan gaya daripada melawan semua yang sudah ada.

Nilai

  • initial: menyetel ulang semua properti elemen yang dipilih ke nilai awalnya seperti yang ditentukan dalam spesifikasi CSS.
  • inherit: elemen yang dipilih mewarisi semua gaya elemen induknya, termasuk gaya yang biasanya tidak dapat diwariskan.
  • unset: elemen yang dipilih mewarisi nilai yang diwariskan yang diturunkan dari elemen induk. Jika tidak ada nilai yang diwariskan tersedia, nilai awal dari spesifikasi CSS digunakan untuk setiap properti.

Beberapa properti tidak memiliki nilai awal yang didefinisikan secara eksplisit dalam spesifikasi dan sebagai gantinya memungkinkan agen pengguna untuk menyetel nilai awal - colordan font-familymerupakan dua contoh. Jika all: initial;atau all: unset;diterapkan, nilai default agen pengguna digunakan sebagai initialnilai untuk properti ini.

alldianggap sebagai properti "singkatan" karena memungkinkan kita mengontrol nilai setiap properti CSS sekaligus dengan satu deklarasi. Namun, tidak seperti kebanyakan properti singkatan, tidak ada versi praktis "longhand" dan tidak memiliki sub-properti.

Demo

Lihat tab CSS untuk komentar yang menunjukkan properti mana yang dapat diwariskan. Perhatikan bahwa ketika inheritnilai digunakan, divmewarisi setiap properti dari induknya, termasuk itu width, padding, dan border, yang biasanya tidak diwariskan.

Lihat demo properti Pena semua dengan CSS-Tricks (@ css-trick) di CodePen.

Informasi Lebih Lanjut

  • all di Draf Editor Cascading dan Warisan Level 4 W3C CSS
  • CSS2 Full Property Table: menunjukkan pewarisan semua properti CSS2. Spesifikasi CSS3 dibagi menjadi beberapa bagian dan diindeks pada Tabel Spesifikasi.
  • Getting Acquainted with Initial: lebih detail tentang initialnilainya.
  • Mengatur ulang gaya menggunakan 'all: unset' di Firefox 27 (2013) oleh Cameron McCormack

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
37 27 Tidak 79 9.1

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4.3-4.4.4 9.3