CSS - Konflik Resolusi pada Deklarasi

Cascading adalah fitur dasar dari CSS. Ini memamg merupakan algoritma yang mendefinisikan cara menggabungkan nilai properti yang berasal dari sumber yang berbeda. Seperti namanya sendiri, cascading style sheet, dengan kata lain algoritma kaskade, adalah inti dari memahami dan menggunakan CSS yang selama ini kita pelajari. Kemudian pada Kaskade menggabungkan pentingnya asal, spesifisitas dan urutan sumber yang mendeklarasikan style untuk menentukan secara tepat deklarasi yang mana yang harus diterapkan ke elemen yang diberikan. Dan jika ada konflik, bagaimana menyelesaikan konflik itu. Dengan kata lain, bagaimana cara mengetahui aturan CSS mana yang menang.

/photo/code-coder-coding-computer-270404/

Sebenarnya begitu banyak terminologi dan konsep yang terjadi pada algoritma cascading. Namun konsep pada CSS yang harus benar-benar anda pahami hanyalah origin atau origin precedence, merge, inheritance dan specificity. Terutama konsep origin dan merge, Ketika dua deklarasi bertentangan, dengan kata lain mereka tentukan properti yang sama untuk target yang sama, aturan origin precedence yang masuk, dan itu aturan yang sangat sederhana.

Dan aturannya adalah, deklarasi terakhir menang, maka ketika kita mencoba untuk mencari tahu apa deklarasi terakhir, harus di ingat bahwa HTML itu diproses secara berurutan. Dan artinya pembacaan dari atas ke bawah sehingga ketika melihat deklarasi terjadi, semakin rendah pada halaman mereka, lebih utama yang mereka miliki. Maka itu yang didahulukan untuk dideklarasikan.

Dan untuk mencari tahu yang mana satu dinyatakan terakhir, bayangkan bahwa seluruh isi file CSS eksternal dipotong dan ditempelkan langsung ke bagian head, di mana CSS eksternal itu dideklarasikan. Ketika deklarasi CSS yang berbeda tidak terjadi konflik, maksudnya, mereka tetap menargetkan elemen yang sama, tapi properti CSS yang menjadi target elemen tersebut berbeda, bahkan ada aturan yang lebih sederhana. Dan itulah deklarasi merge (deklarasi yang digabungkan).

Jadi deklarasi for, misalnya, ukuran font, dan deklarasi untuk warna, karena mereka dua sifat yang berbeda, kapan mereka ditargetkan ke elemen yang sama, meskipun mereka ditargetkan dari dua yang berbeda asal, mereka akan bergabung menjadi satu. Dan elemennya akan mendapatkan keduanya ukuran font dan warnanya. Coba perhatikan contoh berikut:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    p {
        font-size: 130%;
        background-color : yellow;
        color : white;
    }
    p {
        color: lightblue;
    }
</style>
</head>
<body>
<p>aturannya simple, deklarasi terakhir yang diambil</p>
<p style="color: black;">jika tidak terjadi konflik, deklarasi merge terjadi</p>
</div>
</body>
</html>

deklarasi

Pada awal deklarasi, kita sudah membuat deklarasi ukuran font 130% dengan background warna adalah kuning. Yang menjadi konflik nantinya adalah warna tulisan, dimana deklarasi pertama warna fontnya adalah putih, sedangkan deklarasi kedua, warna menjadi, color: bluelight;. Saya pembacaan html, maka aturannya simple, deklaasi terakhir yang diambil yaitu color:bluelight;

Kemudian pada bagian HTML, terdapat deklarasi baru, yaitu

, sehingga deklarasi inilah yang diambil pada atau khusus bagian yang sudah dideklarasikan. Jadi itulah aturan origin precedence dalam tindakan. Tidak seperti properti warna, kita memiliki properti lain yang merupakan warna latar belakang dan ukuran font, yang masih diterapkan ke paragraf dan itulah contoh dari merge. Saya kira paham sampai disini.

Konsep berikutnya yang akan kita praktekan adalah inheritance(warisan), dimaa konsep tersebut sangat sederhana. Ketika Anda menentukan beberapa properti CSS pada beberapa elemen, semua children dan grandchildren dan seterusnya dan sebagainya pada elemen itu juga akan mewarisi properti itu tanpa Anda harus menentukan properti untuk masing-masing dan setiap elemen.

deklarasi2

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body {
       color : green;
       text-align: center;
       font-family:helvetica;
    }
    p {
        color: red;
    }
</style>
</head>
<body>
<h2>Contoh Inheritance</h2>
<p>Berlaku untuk deklarasi kedua dimana color menjadi red</p>
<h2 style="color: blue;">Deklarasi H2 Kedua Berubah khusus untuk ini</h2>
<p>Sedangkan paragraf ini masih tetap mengikuti deklarasi kedua, color:red; tidak ikut pada deklarasi H2 kedua</p>
</div>
</body>
</html>

deklarasi3

Saya kira dari contoh inheritance diatas anda sudah agak paham, terima kasih.