CSS Stuff I ' m teruja selepas mesyuarat CSSWG yang terakhir

Dari 11 hingga 13 Jun 2024, Kumpulan Kerja CSS (CSSWG) mengadakan pertemuan tatap muka kedua tahun ini di Cruña, Sepanyol, dengan agenda yang meliputi banyak ciri dan penambahbaikan baru kepada bahasa CSS. Berikutan kemajuan yang luar biasa seperti bersarang, pertanyaan kontena dan pertanyaan gaya dan

pemilih pada tahun 2023, lebih banyak kemas kini terobosan akan diterima pada tahun 2024. Sama ada ciri-ciri baru seperti penyataan bersyarat dalam talian baru sahaja bermula atau projek jangka panjang akan berakhir, 2024 sudah penuh dengan perkembangan yang menarik-dan kami hanya memasuki bulan Julai! has:

Artikel ini akan berkongsi beberapa ciri baru CSS yang paling menarik dan penting yang saya fikir dibincangkan pada persidangan ini. Harus diingat bahawa ini bukan rekod yang tepat mengenai perbincangan persidangan itu, tetapi gambaran keseluruhan topik CSS utama yang difokuskan pada persidangan itu. Malah, ciri -ciri ini telah dibancuh selama bertahun -tahun, dan perbincangan memberi tumpuan kepada kes -kes tertentu dan peningkatan baru dan bukannya menentukan spesifikasi lengkap;

anda boleh melihat isu -isu tertentu yang dibincangkan mengenai agenda mesyuarat CSSWG.

Ciri 1:

Prospek fungsi if()

Sejak CSS Custom Properties mendapat sokongan pepejal sekitar 2016, banyak cara telah cuba menggunakan gaya tertentu berdasarkan nilai harta tersuai tanpa bergantung pada JavaScript. Salah satu penyelesaian gaya bersyarat terawal telah dicadangkan oleh Roman Komarov pada "Keadaan untuk Pembolehubah CSS" 2016. Sejak itu, banyak "kemahiran" yang lain telah didokumenkan untuk pengisytiharan bersyarat dalam CSS (termasuk pendekatan yang sangat bijak yang dicadangkan oleh Ana Tudor pada trik CSS). Malah, ahli CSSWG, Lea Verou, dalam artikelnya yang baru -baru ini, "Kenyataan bersyarat dalam CSS, sekarang?", Menyediakan senarai lengkap perbincangan dan perbandingan penyelesaian ini.

Pasti, komuniti sentiasa merindukan cara bersyarat untuk menggunakan gaya menggunakan sifat tersuai. Pada masa kini, kami mempunyai spesifikasi pertanyaan gaya yang dapat mencapai tugas ini, tetapi ia mempunyai beberapa batasan yang tidak berkaitan dengan sokongan penyemak imbas. Apakah batasan terbesar?

kita tidak boleh gaya bekas pertanyaan secara langsung , jadi kita perlu menambah beberapa jenis elemen pembalut di sekitar bekas di HTML.

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

... dan pertanyaan gaya:

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

if() fungsi apa yang kelihatan seperti

Dari segi CSSWG, penambahan fungsi if() dibincangkan pada tahun 2018. Pada 13 Jun tahun ini - ya, enam tahun kemudian - CSSWG memutuskan untuk mula membangunkan fungsi if() untuk CSS. Walaupun ia kelihatan baik, jangan mengharapkan untuk melihat dalam penyemak imbas anda selama sekurang -kurangnya dua tahun if()! (Ini adalah anggaran tidak rasmi Lea.) Kita mungkin perlu menunggu lebih lama untuk mendapatkan sokongan penyemak imbas yang mencukupi untuk menggunakannya dengan pasti dalam pengeluaran. Spesifikasi draf baru sahaja bermula dan banyak perkara mesti diuji terlebih dahulu. Untuk rujukan, Draf Kerja Pembolehubah CSS bermula pada tahun 2012 dan tidak menerima sokongan penyemak imbas yang luas sehingga 2016.

dari segi sintaks, if() boleh meminjam pengendali ternary dari JavaScript dan bahasa pengaturcaraan lain, dan strukturnya adalah seperti berikut:

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

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

... di mana A adalah atribut tersuai yang kita periksa, dan B dan C adalah kemungkinan nilai pulangan bersyarat. Untuk memeriksa gaya, gaya inline style(--my-property: value) akan digunakan.

<code>if(a ? b : c)</code>

Walaupun ? tidak digunakan dalam CSS, dan : mempunyai makna yang berbeza di tempat lain, saya fikir sintaks ini paling biasa kepada kebanyakan orang, belum lagi ia juga membolehkan pautan bersyarat yang lancar.

<code>.forecast {
  background-color: if(style(--weather: clouds) ? var(--clouds-color): var(--default-color));
}</code>

Masa Depan if() Penambahbaikan fungsi

Walaupun ini mungkin tidak muncul dalam versi awal, masih menarik untuk mengetahui perubahan yang mungkin berlaku pada satu ketika di masa depan: if()

• Menyokong pernyataan bersyarat sebaris yang lain. Kami harus menggunakan pertanyaan untuk memeriksa sifat tersuai, tetapi kami juga boleh menggunakan pertanyaan style() inline untuk memeriksa sifat media, atau menggunakan inline media() untuk memeriksa sama ada ejen pengguna menyokong sifat tertentu. support()

<code>.forecast {
  background-color: if(
    style(--weather: clouds) ? var(--clouds-color): 
    style(--weather: sunny) ? var(--sunny-color);
    style( --weather: rain) ? var(--rain-color): var(--default-color)
  );
}</code>

• Gunakan pernyataan bersyarat dalam fungsi CSS yang lain. Dalam draf masa depan, kita boleh menggunakan pengendali ternary dalam fungsi lain tanpa membungkusnya dalam , sebagai contoh, jika kita berada dalam fungsi if() atau clamp(), kita boleh melakukan pengiraan tanpa round(). calc()

Ciri 2: Peralihan di Paparan Dokumen

Tahun lepas, API Peralihan Lihat membolehkan kami membuat peralihan lancar antara laman web dan negeri yang menavigasi. Tiada komponen atau kerangka, tiada perpustakaan animasi yang diperlukan - hanya gunakan sedikit JavaScript dan HTML dan CSS biasa. Pelaksanaan pertama Peralihan View telah diintegrasikan ke dalam penyemak imbas dahulu, tetapi ia berdasarkan fungsi eksperimen yang ditakrifkan oleh Chrome dan terhad kepada peralihan antara dua negeri (peralihan pandangan tunggal) tanpa menyokong peralihan antara halaman yang berlainan (iaitu, peralihan pandangan pelbagai halaman), yang mana kebanyakan pemaju kita inginkan. Kemungkinan meniru tingkah laku aplikasi asli adalah menarik!

Ini sebabnya CSS View Modul Peralihan Tahap 2 sangat hebat dan mengapa ia adalah yang paling popular dari semua ciri baru CSS yang diterangkan dalam artikel ini. Ya, ciri ini membawa peralihan lancar di luar halaman, tetapi yang benar-benar penting ialah ia menghapuskan kebergantungan pada rangka kerja yang melaksanakan ciri ini. Kita boleh kembali ke CSS tulen dan JavaScript dan bukannya menggunakan perpustakaan - seperti React beberapa perpustakaan penghalaan.

Sudah tentu, API Peralihan Lihat mungkin tidak dapat dicapai untuk beberapa kerumitan, tetapi ia sangat baik untuk pelbagai situasi di mana kita hanya mahu membuat peralihan halaman tanpa perlu menanggung kos prestasi untuk memperkenalkan rangka kerja.

pendapat untuk melihat peralihan

Apabila kita menavigasi dari sumber yang sama ke antara dua muka surat, peralihan pandangan dicetuskan. Dalam kes ini, navigasi mungkin untuk mengklik pautan, menyerahkan borang, atau menggunakan butang penyemak imbas untuk bergerak ke belakang dan sebagainya. Sebaliknya, menggunakan bar carian di antara halaman sumber yang sama tidak mencetuskan peralihan halaman.

Kedua-dua halaman-halaman yang ingin kami tinggalkan dan halaman yang kami ingin navigasi ke-baik perlu menggunakan @view-transition at-peraturan dan tetapkan harta navigation untuk auto untuk memilih ke dalam peralihan:

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

Apabila kedua -dua halaman memilih untuk menyertai peralihan, penyemak imbas akan "snapshot" dua halaman dan lancar memudar halaman "sebelum" ke dalam halaman "After".

peralihan antara "snapshots"

Dalam video ini, anda dapat melihat bagaimana halaman lama memudar ke halaman baru, terima kasih kepada satu set lengkap unsur-unsur pseudo baru yang berterusan semasa peralihan dan menggunakan animasi CSS untuk menghasilkan kesan. Penyemak imbas akan mengumpulkan gambar elemen menggunakan harta yang unik view-transition-name yang menetapkan pengecam unik pada peralihan yang boleh kita rujuk, dan pengenal itu ditangkap dalam elemen pseudo ::view-transition yang mengandungi semua peralihan pada halaman.

Anda boleh memikirkan ::view-transition sebagai elemen :root semua peralihan halaman, yang menggabungkan semua bahagian peralihan halaman pada animasi lalai yang sama.

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

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

Perhatikan bahawa setiap peralihan berada dalam ::view-transition-group, kumpulan mengandungi ::view-transition-image-pair, dan pasangan itu mengandungi snapshot halaman "lama" dan "baru". Kita boleh menambah seberapa banyak kumpulan yang kita mahu, dan mereka semua mengandungi pasangan imej dengan dua gambar.

Contoh cepat: Mari kita gunakan ::view-transition "root" sebagai parameter untuk memilih semua peralihan pada halaman dan buat animasi gelongsor antara gambar lama dan baru.

<code>if(a ? b : c)</code>

Jika kita menavigasi di antara halaman, seluruh halaman lama akan meluncur ke kiri dan keseluruhan halaman baru akan meluncur dari kanan. Tetapi kita mungkin mahu menghalang unsur -unsur tertentu di halaman daripada mengambil bahagian dalam peralihan kerana mereka berterusan di antara halaman, sementara segala -galanya bergerak dari snapshot "lama" ke snapshot "baru".

Ini adalah kunci kepada atribut view-transition-name, kerana kita boleh memasukkan unsur -unsur tertentu dan meletakkannya di ::view-transition-group berasingan dari segala yang lain untuk mengendalikannya secara berasingan.

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

anda boleh mencari demo langsung di GitHub. Sila ambil perhatian bahawa pada masa penulisan, sokongan penyemak imbas terhad kepada pelayar kromium (iaitu Chrome, Edge, Opera).

Kami mempunyai banyak yang menantikan ketika datang untuk beralih ke seluruh pandangan dokumen. Sebagai contoh, jika kita mempunyai beberapa elemen dengan view-transition-name yang berbeza, kita dapat menyediakan mereka dengan berkongsi view-transition-class untuk gaya mereka di satu tempat -dan juga menggunakan JavaScript untuk menyesuaikan lagi peralihan paparan untuk memeriksa url mana yang beralih dari dan menghidupkan dengan sewajarnya.

Ciri 3: Posisi Anchor

Ia kelihatan seperti angin untuk mencari unsur -unsur berbanding dengan elemen lain dalam CSS, tetapi sebenarnya memerlukan atribut margin pencampuran (atas, bawah, kiri, kanan) berdasarkan siri nombor sihir untuk mendapatkan hasil yang betul. Sebagai contoh, widget yang muncul di sebelah kiri elemen semasa hover mungkin kelihatan seperti ini dalam html:

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

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

... dan CSS menggunakan kaedah semasa:

<code>if(a ? b : c)</code>

harus mengubah nilai kedudukan dan margin unsur -unsur bukanlah akhir dunia, tetapi ia merasa seperti harus ada cara yang lebih mudah. Di samping itu, tooltips dalam contoh terakhir sangat rapuh;

CSS Anchor Positioning adalah satu lagi ciri baru yang dibincangkan di mesyuarat CSSWG dan ia berharap dapat membuat perkara -perkara seperti itu lebih mudah.

Buat titik utama

Idea asas ialah kita membina dua elemen:

• satu bertindak sebagai sauh,
• "sasaran" berlabuh ke elemen.

Dengan cara ini, kita mempunyai cara yang lebih deklaratif untuk mengaitkan elemen dan meletakkannya berbanding dengan elemen utama.

3

anchor-name Tukar tanda kami sedikit:

kami menentukan lekukan bertitik unik untuknya sebagai nilainya (sama seperti harta tersuai):

<code>.forecast {
  background-color: if(style(--weather: clouds) ? var(--clouds-color): var(--default-color));
}</code>

maka kita menggunakan atribut

dan

atau

<code>.forecast {
  background-color: if(
    style(--weather: clouds) ? var(--clouds-color): 
    style(--weather: sunny) ? var(--sunny-color);
    style( --weather: rain) ? var(--rain-color): var(--default-color)
  );
}</code>

kedudukan untuk mengaitkan

. position-anchor fixed absolute .tooltip kini berada di atas .anchor, tetapi kita harus memindahkannya ke lokasi lain untuk mengelakkannya. Cara paling mudah untuk bergerak

adalah menggunakan atribut

<code>.my-element {
  width: if(media(width > 1200px) ? var(--size-l): var(--size-m));
}</code>

baru. Mari kita anggap

berada di tengah -tengah grid 3 × 3, dan kita boleh mencari petua di dalam grid dengan memberikan baris dan lajur kepadanya. .tooltip

inset-area harta itu .tooltip mengambil dua nilai dalam kedudukan dalam baris dan lajur tertentu. Ia dikira menggunakan nilai fizikal (seperti kiri, kanan, atas, dan bawah) serta nilai logik (seperti permulaan dan akhir) corak penulisan pengguna dan nilai pusat bersama. Ia juga menerima nilai-nilai yang rujukan x dan y koordinat, seperti X-start dan Y-end. Semua jenis nilai ini adalah kaedah yang mewakili ruang pada grid 3 × 3.

Contohnya, jika kita mahu

diposisikan relatif kepada sudut kanan atas titik utama, kita boleh menetapkan harta .tooltip seperti ini: inset-area

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

Akhirnya, jika kita mahu tooltip kita merangkumi dua kawasan grid, kita boleh menggunakan awalan

. Sebagai contoh, span- tempat span-top di bahagian atas dan pusat grid. Jika kita mahu merangkumi seluruh arah, kita boleh menggunakan nilai .tooltip. span-all

Salah satu isu contoh yang kita tidak mempunyai titik utama ialah petua boleh melimpah skrin. Kita boleh menyelesaikan masalah ini menggunakan harta baru yang lain (dipanggil

kali ini) digabungkan dengan fungsi position-try-options baru. inset-area()

(ya, ada

harta dan fungsi inset-area. Ini adalah satu yang perlu kita ingat!) inset-area() Hartanah

menerima senarai kedudukan balik yang dipisahkan koma untuk apabila position-try-options melimpah skrin. Kami boleh menyediakan satu siri fungsi .tooltip, masing -masing mengandungi nilai atribut yang sama seperti atribut inset-area(). Sekarang, setiap kali alat tool keluar dari skrin, lokasi yang diisytiharkan seterusnya adalah "dicuba" dan jika lokasi itu menyebabkan limpahan, lokasi yang diisytiharkan seterusnya dicuba, dan sebagainya. inset-area

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

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

Ini adalah konsep yang sangat baru dan memerlukan sedikit masa untuk difahami. Ahli CSSWG Miriam Suzanne duduk bersama James Stuckey Weber untuk membincangkan dan mencuba kedudukan utama dalam video yang sangat berbaloi.

Jika anda mencari TL; DW, Geoff Graham mengambil nota pada video.

Untuk kesederhanaan, banyak aspek kedudukan sauh tidak diperkenalkan di sini, terutamanya fungsi

baru dan anchor() at-peraturan. Fungsi @try-position mengembalikan kedudukan yang dikira kelebihan utama, yang memberikan lebih banyak kawalan ke atas sifat margin tooltip. anchor() at-rule digunakan untuk menentukan kedudukan tersuai untuk menetapkan harta @try-position. position-try-options

intuisi saya ialah untuk kebanyakan kes penggunaan, menggunakan

akan cukup kuat. inset-area

CSSWG adalah usaha kolektif

Saya telah berkata sebelum ini bahawa artikel ini tidak akan memberikan rekod yang tepat mengenai perbincangan yang dijalankan di mesyuarat CSSWG, tetapi hanya akan menjadi pengenalan yang luas kepada spesifikasi baru CSS, yang pasti akan muncul di mesyuarat ini kerana kebaruan mereka. Terdapat juga beberapa ciri yang kita tidak mempunyai masa untuk mengkaji semula dalam kajian ini, yang masih dibincangkan (

batuk , batu).

Salah satu perkara yang pasti ialah spesifikasi tidak dirumuskan dalam satu atau dua dalam persekitaran vakum;

Saya juga berpeluang bercakap dengan beberapa pemaju hebat di CSSWG dan saya mendapati yang paling banyak yang mereka dapat dari mesyuarat yang menarik. Anda mungkin mengharapkan if() berada di bahagian atas senarai mereka kerana ini adalah apa yang dibincangkan di media sosial. Tetapi ahli CSSWG Emilio Cobos memberitahu saya bahawa sebagai contoh, atribut letter-spacing secara semulajadi cacat, dan tidak ada penyelesaian mudah untuk menyelesaikan masalah yang konsisten dengan definisi semasa letter-spacing dan bagaimana ia digunakan dalam penyemak imbas. Ini termasuk hakikat bahawa menukar sifat normal kepada sifat disingkat boleh berbahaya kepada asas kod.

kita mungkin berfikir bahawa setiap perincian tidak penting akan dianalisis dengan teliti untuk memberi manfaat kepada Internet dan tidak suka Internet. Dan, seperti yang saya nyatakan sebelum ini, perkara -perkara ini tidak berlaku dalam persekitaran vakum tertutup. Sekiranya anda mempunyai minat pada masa depan CSS - sama ada ia menjaga CSS atau secara aktif mengambil bahagian - pertimbangkan mana -mana sumber berikut.

• halaman rumah CSSWG
• CSSWG Blog
• CSSWG Draf (GitHub)
• CSSWG News RSS Feed (Atom)
• Jadual Spesifikasi CSS
• senarai pengumuman umum senarai dan arkib pengumuman (dan suapan RSS)

Atas ialah kandungan terperinci CSS Stuff I ' m teruja selepas mesyuarat CSSWG yang terakhir. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!