Chrome 133 barang

Kerja pasukan Chrome mesti menarik! Mendapatkan tangan pertama pada versi penyemak imbas terkini dan membuat demo sejuk untuk memamerkan ciri-ciri baru mesti terasa hebat. Sudah tentu, saya tidak iri sama sekali! (Anda bertanya mengapa?)

kembali ke titik, adakah anda melihat nota pelepasan Chrome 133? Ia kini dalam beta, tetapi pasukan Chrome telah mengeluarkan satu siri artikel baru yang hebat dan demo yang mengagumkan yang sukar diabaikan. Saya memutuskan untuk menyatukannya.

Fungsi yang digunakan secara meluas! attr()

Kami telah dapat menggunakan atribut HTML dalam CSS untuk seketika, tetapi ia terhad kepada atribut

dan hanya rentetan. content

<h1 id="Some-text">Some text</h1>

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

Bramus menunjukkan cara menggunakannya dalam Chrome 133 untuk sebarang atribut CSS, termasuk atribut tersuai. Sebagai contoh, kita boleh mendapatkan nilai atribut dan menggunakannya untuk atribut

unsur: color

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

Sudah tentu, ini adalah contoh mudah. Tetapi ia menunjukkan bahawa terdapat tiga komponen di sini:

sifat (warna data)
type (type (
2. ))
Nilai arbitrage (https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff)
ditakrifkan oleh diri kita sendiri. Ia sangat mudah untuk dapat memasukkan kad liar ke dalam tag dan menggunakannya untuk tetapan gaya.

adalah ciri baru yang membantu CSS mengenal pasti jenis nilai yang diproses. Jika kita menggunakan nilai angka, kita boleh menggunakan kaedah penulisan yang lebih ringkas. Sebagai contoh, katakan kita menggunakan atribut untuk menetapkan saiz fon elemen:

type()

sekarang kita boleh menetapkan atribut

<div data-size="20">Some text</div>

(unit dalam px):

font-size

Nilai arbitraj adalah pilihan dan mungkin tidak diperlukan bergantung pada kes penggunaan anda.

h1 {
  font-size: attr(data-size px, 16);
}

status menatal dalam pertanyaan kontena!

Ini menakjubkan! Sekiranya anda menginginkan cara untuk gaya elemen melekit apabila ia berada dalam keadaan "melekit", anda akan tahu betapa sejuknya mempunyai ciri sedemikian. Adam Argyle menggunakan corak klasik senarai abjad dan menggunakan gaya ke tajuk huruf apabila ia disisipkan ke bahagian atas viewport. Begitu juga untuk menatal elemen snap dan elemen kontena menatal.

dengan kata lain, apabila unsur -unsur "melekat", "snap", dan "scrollable", kita boleh gaya mereka.

Contoh kecil yang perlu anda buka dalam penyemak imbas kromium:

Idea keseluruhan (saya hanya tahu begitu banyak sekarang) ialah kita mendaftarkan bekas ... bekas yang boleh kita pertanyaan. Kami menetapkan

untuk bekas, yang merupakan jenis tatal yang kami gunakan. Dalam kes ini, kami menggunakan kedudukan melekit di mana elemen itu "tampal" ke bahagian atas halaman.

<h1 id="Some-text">Some text</h1>

bekas tidak dapat menanyakannya sendiri, jadi pada dasarnya ia harus menjadi pembungkus untuk unsur -unsur yang kita mahu tampal. Menu ini sedikit istimewa kerana kami mempunyai elemen <nav></nav>, yang biasanya dihuni dengan senarai pautan yang tidak teratur. Oleh itu, kami boleh digunakan sebagai bekas untuk pertanyaan kami, kerana kami sebenarnya menampal senarai yang tidak teratur ke bahagian atas halaman. <nav></nav>

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

kita boleh meletakkan logik melekit secara langsung pada

kerana ia sebenarnya mengandungi kandungan yang disisipkan: <nav></nav>

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

Jika kita menggunakan footer melekit dan bukan menu, kita boleh menggunakan

. Tetapi maksudnya ialah apabila elemen stuck: bottom disisipkan ke bahagian atas, kita boleh memohon gaya di dalam blok <nav></nav> seperti berikut: @container

<div data-size="20">Some text</div>

bersarang pemilih lain di dalamnya seolah -olah berfungsi juga. Sebagai contoh, apabila navigasi melekit, kita boleh menukar pautan dalam menu:

h1 {
  font-size: attr(data-size px, 16);
}

Jadi, ya. Seperti yang saya katakan, sebagai sebahagian daripada pasukan pembangunan Chrome, ia mesti menjadi sejuk untuk memulakan dengan ciri -ciri ini. Terima kasih banyak kepada Bramus dan Adam kerana terus memperkenalkan kami kepada ciri -ciri baru dan usaha hebat untuk membuat demo yang hebat.

Atas ialah kandungan terperinci Chrome 133 barang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!