Komentar: Transformasi HTML5 telah memberi kami banyak atribut baru yang sangat berguna, seperti placeholder, unduhan, tersembunyi, dll. Setiap atribut baru membawa kami metode kontrol baru dan efek kontrol pada elemen halaman
Secara khusus, ada atribut baru yang memungkinkan kita untuk mengontrol sifat -sifat beberapa elemen, yaitu: SCOPED. Atribut yang baru muncul pada tag gaya dapat membuat gaya CSS hanya efektif pada elemen lokal. Secara khusus, elemen anak dari elemen yang menyimpan gaya gaya ini berlaku. Satu -satunya perbedaan dari gaya yang biasa adalah bahwa atribut baru ditambahkan:
<Style Scoped>
/ * gaya pergi ke sini */
</tyle>
Gaya dengan atribut scoped hanya diterapkan pada elemen saat ini dan anak -anaknya. Gaya inline masih prioritas lebih tinggi daripada gaya yang dilingkupi, jadi yang terbaik adalah menghindari penggunaan gaya inline. Berikut adalah campuran dari beberapa gaya bersama -sama untuk membandingkan rentang efisiensinya:
<div>
<Style Scoped>
Div {border: 1px solid green; margin-bottom: 20px; Min-tinggi: 40px; }
.democontain {latar belakang: #f8f8f8; }
</tyle>
<div> </div>
<div>
<Style Scoped>
Div {latar belakang: LightBlue; Perbatasan: 1px Solid Blue; }
</tyle>
<div> </div>
</div>
<div> </div>
</div>
Dalam gaya scoped, Anda dapat menggunakan tag gaya CSS legal apa pun, seperti kueri media, seperti ini:
<Style Scoped>
@Media Only Screen dan (Max-Width: 1024px) {
Div {latar belakang: #000; }
}
</tyle>
Properti pelingkaan yang muncul ini sangat berguna, terutama bagi mereka yang membuat templat, atau pengguna CMS, atau beberapa pengembang yang tidak dapat mengoperasikan seluruh file gaya. Tetapi perlu dicatat bahwa beberapa browser lama tidak mendukung properti ini. Dalam hal ini, Anda mungkin perlu menggunakan plugin jQuery (https://github.com/thingsinjars/jquery-scoped-css-plugin) untuk menebus masalah ini.