Beberapa ciri baharu CSS dalam 4-tutorial css-php.cn

Beberapa ciri baharu CSS dalam 4

DDD

Lepaskan： 2024-10-30 17:01:02

asal

857 orang telah melayarinya

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>

Salin selepas log masuk

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

Salin selepas log masuk

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>

Salin selepas log masuk

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

Salin selepas log masuk

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>

Salin selepas log masuk

:scope {
  background-color: orange;
}

Salin selepas log masuk

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>

Salin selepas log masuk

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

Salin selepas log masuk

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>

Salin selepas log masuk

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

Salin selepas log masuk

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>

Salin selepas log masuk

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.