Hari -hari awal pertanyaan gaya kontena

Pertanyaan kontena masih di peringkat awal mereka, tidak mempunyai sokongan penyemak imbas yang meluas. Walaupun Chromium sudah menyokong mereka, sokongan Safari bermula dengan versi 16, dan pelaksanaan Firefox dijangka tidak lama lagi.

Perbincangan awal sering menarik persamaan antara pertanyaan kontena dan sintaks pertanyaan media. Pertimbangkan contoh -contoh ini:

<code>/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}</code>

<code>/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}</code>

Kedua -dua contoh sasaran

. Walau bagaimanapun, pertanyaan media bertindak balas terhadap lebar viewport, sedangkan pertanyaan kontena bertindak balas terhadap lebar yang dikira dari elemen min-width: 600px. .posts

Membina ini, CSS Module Level 3 Spec memperkenalkan

Pertanyaan Gaya Kontena , yang membolehkan pertanyaan dari gaya yang dikira kontena. Spect menggambarkan mereka sebagai kombinasi Boolean ciri -ciri gaya individu, masing -masing menanyakan harta tertentu. Sintaks, mencerminkan pengisytiharan CSS, menilai benar jika nilai harta yang dikira sepadan dengan nilai yang ditentukan (juga dikira relatif kepada bekas), tidak diketahui jika tidak sah atau tidak disokong, dan palsu sebaliknya. Logik Boolean adalah serupa dengan pertanyaan ciri CSS (). @supports

Contoh hipotetikal:

<code>.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}</code>

Perhatikan bahawa

(atau ketiadaannya) tersirat; Semua pertanyaan kontena menjadi pertanyaan gaya secara lalai (pada masa ini). Kerja Miriam Suzanne menyoroti cabaran yang berpotensi dengan pendekatan ini. container-type: style

Aplikasi praktikal untuk menanyakan gaya kontena masih muncul, tetapi penggunaan yang berpotensi termasuk:

• Nilai Harta Tersuai: Bereaksi terhadap perubahan sifat tersuai yang digunakan sebagai penunjuk keadaan.
• Pelaksanaan Mod Gelap: Palet warna beralih berdasarkan perubahan latar belakang badan.
• Keadaan pertanyaan kompleks: menggabungkan saiz dan keadaan gaya.

Pertanyaan Gaya Kontena juga boleh menangani kerumitan gaya, seperti mengatasi teks italiced ​​dalam blockquote yang disusun semula:

Atas ialah kandungan terperinci Hari -hari awal pertanyaan gaya kontena. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!