Rumah > Artikel > hujung hadapan web > Beberapa ciri baharu CSS dalam 4

Beberapa ciri baharu CSS dalam 4

DDDasal: 2024-10-30 17:01:02834semak imbas

Dalam artikel ini kita akan meneroka beberapa ciri CSS baharu pada tahun 2024.

Jika anda suka artikel saya, anda boleh belikan saya kopi :)
Some new features CSS in 4

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 :

Some new features CSS in 4

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 :

Some new features CSS in 4

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 :

Some new features CSS in 4

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 :

Some new features CSS in 4

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 :

Some new features CSS in 4

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!

css define if for using class Property this location position

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana Menggayakan Elemen HTML Secara Dinamik dengan Pembolehubah Sass: Termasuk vs Campuran?Artikel seterusnya：Bagaimana Menggayakan Elemen HTML Secara Dinamik dengan Pembolehubah Sass: Termasuk vs Campuran?

Artikel berkaitan

Lihat lagi