Rumah > Artikel > hujung hadapan web > Beberapa ciri baharu CSS dalam 4
Dalam artikel ini kita akan meneroka beberapa ciri CSS baharu pada tahun 2024.
Jika anda suka artikel saya, anda boleh belikan saya kopi :)
Pertanyaan bekas membenarkan anda menggunakan gaya pada item bergantung pada saiz bekas item. Pertanyaan bekas berfungsi seperti pertanyaan media.
Menggunakan pertanyaan kontena
Menggunakan pertanyaan bekas, anda boleh melaraskan gaya elemen anak secara dinamik dalam elemen induk mengikut saiznya.
Untuk melakukan ini, anda mesti mentakrifkan konteks bekas untuk elemen induk dahulu. Anda nyatakan ini dengan sifat jenis bekas.
jenis bekas: saiz; Apabila ditetapkan kepada , anda boleh membuat pertanyaan mengikut kedua-dua nilai lebar dan tinggi.
jenis bekas: saiz sebaris; Apabila ditetapkan kepada , pertanyaan dibuat hanya pada lebar (dimensi mendatar).
Terima kasih kepada ciri ini, sifat gaya elemen anak boleh diubah bergantung pada saiz elemen induk.
Contoh :
<div class="post"> <div class="card"> <h2>Card title</h2> <p>Card content</p> </div> </div>
.post { container-type: size; } .card h2 { font-size: 1em; color: blue; } @container (min-width: 700px) { .card h2 { font-size: 5em; color: purple; } }
Output :
Dengan CSS nesting, anda boleh meletakkan satu peraturan di dalam peraturan yang lain. Ini amat berguna untuk mengurus gaya yang bergantung kepada konteks. Contohnya, jika anda mempunyai kelas .container dan ingin menggayakan elemen .itemnya, anda boleh menulis peraturan .item terus di dalam peraturan .container. CSS Nesting dihuraikan terus oleh penyemak imbas. Ini bermakna anda tidak memerlukan prapemproses untuk menyusun peraturan bersarang; ia berfungsi secara asli dalam penyemak imbas.
Contoh :
<form> <label for="name">Name: <input type="text" id="name" /> </label> <label for="surname">Surname:</label> <input type="text" id="surname" /> </form>
input { border: red 2px solid; } label { font-family: system-ui; font-size: 1.25rem; & input { border: purple 2px solid; } }
Output :
Pemilih Skop digunakan untuk menentukan skop untuk gaya dalam CSS.
Penggunaan :
Contoh :
<html></html>
:scope { background-color: orange; }
Output :
Contoh :
<div class="post"> <div class="card"> <h2>Card title</h2> <p>Card content</p> </div> </div>
.post { container-type: size; } .card h2 { font-size: 1em; color: blue; } @container (min-width: 700px) { .card h2 { font-size: 5em; color: purple; } }
Output :
Pemilih :has() dalam CSS membolehkan anda menggayakan elemen induk jika ia mengandungi elemen anak tertentu.
Contoh :
<form> <label for="name">Name: <input type="text" id="name" /> </label> <label for="surname">Surname:</label> <input type="text" id="surname" /> </form>
input { border: red 2px solid; } label { font-family: system-ui; font-size: 1.25rem; & input { border: purple 2px solid; } }
Output :
Anda boleh mempunyai lebih banyak kawalan ke atas ton dan kontras warna dengan fungsi warna baharu seperti campuran warna() dan kontras warna()
Contoh :
<html></html>
Modul penentududukan sauh CSS mentakrifkan ciri yang membolehkan anda menambat elemen bersama-sama. Elemen tertentu ditakrifkan sebagai elemen penambat; elemen kedudukan sauh kemudiannya boleh menetapkan saiz dan kedudukannya berdasarkan saiz dan lokasi unsur sauh yang ia terikat.
Dalam artikel ini, kami meneroka beberapa ciri baharu CSS pada tahun 2024. Anda boleh menggunakan ciri ini untuk apl.
Atas ialah kandungan terperinci Beberapa ciri baharu CSS dalam 4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!