Menggali lebih mendalam ke dalam pertanyaan gaya kontena

Saya menulis beberapa pemikiran awal mengenai pertanyaan gaya kontena sebentar lagi. Ia masih hari -hari awal. Mereka sudah ditakrifkan dalam spesifikasi Modul Tahap 3 CSS (kini dalam status draf editor) tetapi masih terdapat beberapa perbincangan yang luar biasa.

Idea asas ialah kita boleh menentukan bekas dan kemudian memohon gaya yang bersesuaian dengan keturunannya berdasarkan gaya yang dikira.

@container <name>? <conditions> {
  /* conditional styles */
}

Contoh terbaik yang saya lihat setakat ini adalah mengeluarkan huruf miring dari sesuatu seperti & lt; em & gt;, & lt; i & gt;, dan & lt; q & gt; Apabila ia digunakan dalam konteks di mana kandungan sudah berisik:

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

Itulah idea umum. Tetapi jika anda tidak tahu, Miriam Suzanne, yang merupakan editor spec, menyimpan satu set nota peribadi yang berterusan dan menyeluruh mengenai pertanyaan gaya kontena yang tersedia secara terbuka. Ia telah dikemas kini pada hari yang lain dan saya menghabiskan beberapa waktu di sana cuba membungkus kepala saya di sekitar aspek -aspek yang lebih bernuansa dari pertanyaan gaya. Ia tidak rasmi, tetapi saya fikir saya akan menulis beberapa perkara yang menonjol kepada saya. Siapa tahu? Mungkin ia adalah perkara yang akhirnya kita dapat menantikan!

setiap elemen adalah bekas gaya

Kami tidak perlu secara jelas menetapkan nama kontena atau kontena untuk menentukan bekas gaya kerana semuanya adalah bekas gaya secara lalai.

Jadi, anda melihat contoh di atas yang menghilangkan huruf miring? Perhatikan ia tidak mengenal pasti bekas. Ia melompat ke pertanyaan menggunakan fungsi gaya (). Jadi, apa bekas yang ditanya? Ia akan menjadi ibu bapa langsung dari unsur -unsur

menerima gaya yang digunakan. Dan jika tidak itu, maka itu bekas relatif terdekat yang terdekat yang perlu diutamakan. Saya suka itu. Ia sangat CSS-y untuk pertanyaan untuk mencari perlawanan, kemudian terus gelembung sehingga ia mendapati keadaan yang sepadan.

Sukar untuk otak kecil saya untuk memahami mengapa kita boleh lari dengan bekas tersirat berdasarkan gaya tetapi tidak begitu banyak apabila kita berurusan dengan pertanyaan dimensi, seperti saiz dan saiz inline. Miriam menerangkannya dengan baik:

Pertanyaan dimensi memerlukan CSS

pembendungan

pada saiz, susun atur, dan gaya bekas untuk mengelakkan gelung susun atur. Pembendungan adalah perkara invasif untuk memohon secara meluas, jadi penting bahawa penulis mempunyai kawalan yang teliti terhadap unsur -unsur yang (atau tidak) saiz bekas.

Pertanyaan berasaskan gaya tidak mempunyai batasan yang sama. Tidak ada cara dalam CSS untuk gaya keturunan untuk memberi impak kepada gaya yang dikira sebagai nenek moyang. (penekanan lombong)

Semuanya datang kepada akibat - yang mana tidak ada sejauh mana semua yang menjadi bekas pertanyaan gaya keluar dari kotak.

Jika bekas dijumpai: syarat diselesaikan terhadap bekas itu.

Jika beberapa bekas yang sesuai: bekas relatif terdekat yang terdahulu.

• jika tiada perlawanan dijumpai: tidak diketahui kembali.
itu semangat "memaafkan" yang sama seperti CSS yang lain.
bekas boleh menyokong kedua -dua pertanyaan dimensi dan gaya

Katakan kita mahu menentukan pertanyaan gaya tanpa nama kontena yang jelas:

ini berfungsi kerana

semua elemen adalah bekas gaya

, tidak kira jenis kontena. Itulah yang membolehkan kita untuk membuat gaya secara tersirat dan bergantung pada perlawanan terdekat. Dan ini benar -benar baik kerana, sekali lagi, tidak ada kesan sampingan yang buruk apabila menubuhkan bekas gaya.

@container <name>? <conditions> {
  /* conditional styles */
}

kita perlu menggunakan jenis kontena yang jelas untuk pertanyaan dimensi, tetapi tidak banyak untuk pertanyaan gaya kerana setiap elemen adalah pertanyaan gaya. Itu juga bermakna bekas ini adalah kedua -dua gaya dan pertanyaan dimensi:

tidak termasuk bekas daripada ditanya

Mungkin kita tidak mahu bekas untuk mengambil bahagian dalam proses yang sepadan. Di sinilah ia mungkin untuk menetapkan jenis kontena: tidak ada pada elemen.

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

bekas pertanyaan gaya eksplisit menawarkan lebih banyak kawalan terhadap apa yang mendapat pertanyaan

Jika, katakan, kami menulis pertanyaan gaya untuk padding, tidak ada cara yang boleh dipercayai untuk menentukan bekas yang sesuai, tanpa mengira sama ada kami bekerja dengan bekas yang dinamakan secara jelas atau ibu bapa langsung terdekat. Itu kerana padding bukan harta yang diwarisi.

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

Jadi, dalam keadaan itu, kita harus menggunakan nama kontena untuk memaklumkan dengan jelas bahawa bekas yang mereka dapat tarik dari. Kami juga boleh memberikan beberapa nama yang jelas untuk menjadikannya lebih banyak syarat:

oh, dan nama kontena menerima bilangan pilihan dan

nama yang boleh diguna semula untuk bekas! Itu lebih fleksibel ketika membantu penyemak imbas membuat pilihan ketika mencari pertandingan.

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

Saya hairan jika itu juga dianggap sebagai "sandaran" sekiranya satu bekas diluluskan. pertanyaan gaya boleh digabungkan

.some-element {
  container-type: none;
}

atau dan pengendali membolehkan kami menggabungkan wueries untuk menjaga keadaan kering:

@container <name>? <conditions> {
  /* conditional styles */
}

Toggling Styles

Terdapat sedikit pertindihan antara pertanyaan gaya kontena dan kerja yang dilakukan untuk menentukan fungsi togol (). Sebagai contoh, kita boleh menembusi dua nilai gaya font, katakan italik dan normal:

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

sejuk. Tetapi cadangan untuk togol CSS menunjukkan bahawa fungsi togol () akan menjadi pendekatan yang lebih mudah:

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

Tetapi apa -apa di luar kes penggunaan binari seperti ini adalah di mana togol () kurang sesuai. Pertanyaan gaya, bagaimanapun, adalah baik untuk pergi. Miriam mengenal pasti tiga contoh di mana pertanyaan gaya lebih sesuai daripada togol ():

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

pertanyaan gaya menyelesaikan "hack toggle harta benda tersuai"

Perhatikan bahawa pertanyaan gaya adalah penyelesaian rasmi untuk "CSS Custom Property Toggle Trick". Di sana, kami menetapkan harta tersuai kosong (--foo:;) dan gunakan kaedah sandaran yang dipisahkan koma untuk "togol" sifat dan dimatikan apabila harta tersuai ditetapkan kepada nilai sebenar.

.some-element {
  container-type: none;
}

itu sangat sejuk, juga banyak kerja yang membuat pertanyaan kontena gaya menjadikan remeh.

pertanyaan gaya dan kandungan CSS yang dihasilkan

Untuk kandungan yang dihasilkan yang dihasilkan oleh harta kandungan :: sebelum dan :: Selepas elemen pseudo, bekas yang sepadan adalah elemen di mana kandungan dihasilkan.

.card {
  container-name: card layout theme;
}

pertanyaan gaya dan komponen web

kita boleh menentukan komponen web sebagai bekas dan menanyakannya dengan gaya. Pertama, kita mempunyai & lt; template & gt; daripada komponen:

.theme {
  container-name: theme;
}
.grid {
  container-name: layout;
}
.card {
  container-name: card layout theme;
}

Kemudian kami menggunakan: Pseudo-Element Host sebagai bekas untuk menetapkan nama kontena, jenis kontena, dan beberapa atribut peringkat tinggi di atasnya:

@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) {
  .bubble::after {
    border-block-end-color: inherit;
    inset-block-end: 100%;
  }
}

/* is the same as... */
@container bubble style(--arrow-position: start start) {
  /* etc. */
}
@container bubble style(--arrow-position: end start) {
  /* etc. */
}

unsur-unsur di dalam & lt; media-host & gt; boleh menanyakan parameter & lt; media-host & gt; elemen:

em, i, q {
  font-style: italic;
}

@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

Apa yang akan datang?

Sekali lagi, semua perkara yang saya telah jotted di sini adalah berdasarkan nota Miriam, dan nota -nota itu bukan pengganti spec rasmi. Tetapi mereka adalah petunjuk tentang apa yang sedang dibincangkan dan di mana perkara boleh mendarat di masa depan. Saya menghargai Miriam menghubungkan beberapa perbincangan yang luar biasa yang masih berlaku yang boleh kita ikuti untuk kekal di atas perkara:

sifat tersuai tahap yang lebih tinggi yang mengawal pelbagai deklarasi#5624
harus gaya () pertanyaan membenarkan! Bendera penting? #7413
• Queries Gaya Move of Standard Properties ke Tahap 4#7185
• tambah keupayaan untuk menguji preludes at-rule#6966

Atas ialah kandungan terperinci Menggali lebih mendalam ke dalam pertanyaan gaya kontena. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!