Rumah >hujung hadapan web >tutorial css >Beberapa ciri baharu CSS dalam 4
Beberapa ciri baharu CSS dalam 4
- DDDasal
- 2024-10-30 17:01:02908semak imbas
Dalam artikel ini kita akan meneroka beberapa ciri CSS baharu pada tahun 2024.
Jika anda suka artikel saya, anda boleh belikan saya kopi :)
1. Pertanyaan kontena CSS
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 :
2. Css Nesting
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 :
3. :skop Kelas Pseudo
Pemilih Skop digunakan untuk menentukan skop untuk gaya dalam CSS.
Penggunaan :
- Jika :scope berada pada tahap akar css, ia bersamaan dengan :root
Contoh :
<html></html>
:scope {
background-color: orange;
}
Output :
- Menggunakan :scope dalam blok @scope membolehkan penggayaan yang jelas dan disasarkan berdasarkan konteks yang ditakrifkan oleh nama kelas.
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 :
4. :has() Kelas Pseudo
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 :
5. Fungsi Warna
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>
6. Kedudukan Sauh
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.
Kesimpulan
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!