Cara Menggunakan Data Type unset pada CSS

Kata kunci CSS atau Data Type unset pada CSS dapat bertindak sebagai initial atau inherit bergantung pada bagaimana perilaku default properti. Jika properti adalah properti yang diwarisi, itu akan diperlakukan sebagai warisan, dengan mengambil nilai yang dihitung dari elemen induknya. Jika tidak, itu akan diperlakukan sebagai inisial, dan nilai awal properti menjadi nilai yang ditentukan.

Karena kata kunci awal dan pewarisan dapat digunakan pada properti CSS apa pun, kata kunci yang tidak disetel dapat diterapkan ke properti CSS apa pun, termasuk semua singkatan CSS.

Data Type unset ini bertindak sebagai reset, dengan menghapus semua nilai yang dideklarasikan pada elemen yang diterapkan sebelumnya cascade, mengembalikannya ke perilaku asli dan pewarisannya, seolah-olah tidak ada gaya yang diterapkan. Ini berlaku untuk gaya agen-pengguna juga. Misalnya, menerapkan all: unset body maka akan menghapus margin 8px default yang ditetapkan oleh hampir semua stylesheet pengguna.

Contoh:

Beberapa properti CSS yang biasa digunakan yang merupakan properti yang diwarisi termasuk font-family dan warna. Properti warna latar belakang, di sisi lain, tidak diwariskan. Katakanlah kita memiliki HTML berikut, dengan beberapa gaya sederhana diterapkan ke elemen.

HTML:

<body>
  <div>Hello, world!</div>
  <div class="unset">Hello, monkey!</div>
  <div>Hello, watermelon!</div>
</body>

<body>

<div>Hello, world!</div>

<div class="unset">Hello, monkey!</div>

<div>Hello, watermelon!</div>

</body>

CSS:

body {
  background-color: #F5F5F5;
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div {
  background-color: #C0C0C0;
  color: #006400;
  font-family: Georgia, Times, Times New Roman, serif;
}

body {

background-color: #F5F5F5;

color: #555;

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

div {

background-color: #C0C0C0;

color: #006400;

font-family: Georgia, Times, Times New Roman, serif;

}

Jika kita menambahkan properti all: unset ke elemen dengan kelas “unset“, lalu periksa hasil nilai properti CSS nya , kita akan melihat bahwa properti pewarisan color dan font-family diwarisi dari body elemen, sedangkan warna background-color akan diatur kembali ke nilai awal yaitu transparan.

Demo:

HTML

<div class="container">
  <div class="el">
    I'm an ordinary div, with standard div styling.
  </div>
  <div class="el unset">
    I have had my CSS properties unset.
  </div>
  <div class="el">
    I'm an ordinary div, with standard div styling.
  </div>
  <div class="el">
    I'm an ordinary div, with standard div styling.
  </div>
</div>

I'm an ordinary div, with standard div styling.

</div>

I have had my CSS properties unset.

</div>

I'm an ordinary div, with standard div styling.

</div>

I'm an ordinary div, with standard div styling.

</div>

CSS

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.el {
  background-color: #C0C0C0;
  color: #006400;
  font-family: Georgia, Times, Times New Roman, serif;
  padding: 1em;
  margin: 1em;
}

.el.unset {
  all: unset;
}

body {

background-color: #F5F5F5;

color: #555;

font-size: 1.1em;

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

.container {

margin: 40px auto;

max-width: 700px;

}

.el {

background-color: #C0C0C0;

color: #006400;

font-family: Georgia, Times, Times New Roman, serif;

padding: 1em;

margin: 1em;

}

.el.unset {

all: unset;

}

Hasilnya:

Facebook DUMET School

Categories