xciting kemas kini dari beta chrome untuk pemaju web

Chrome 133 beta dibungkus dengan kemas kini yang menarik untuk pemaju web! Siaran ini menyoroti peningkatan utama yang perlu anda ketahui. Walaupun anda tidak perlu menguasai segala -galanya dengan serta -merta, kebiasaan dengan ciri -ciri ini akan memberi kuasa kepada anda untuk memanfaatkannya apabila diperlukan. Memeriksa nota pelepasan secara kerap adalah kebiasaan yang hebat untuk ditanam.

1. the pseudo-class: :open
kelas pseudo baru ini memudahkan gaya unsur-unsur dalam keadaan terbuka mereka. Ia berfungsi dengan

,

, dan elemen dengan pemetik yang kelihatan (seperti <dialog>). <details> <select>

Contoh kod:

3

<code class="language-css">/* Style open dialogs/details */
:open {
  border: 2px solid blue;
}

/* Style selects with active picker */
select:open {
  background: #f0f0f0;
}</code>

Ciri -ciri ini membolehkan gaya berdasarkan tingkah laku tatal. Negeri
2. menggunakan gaya apabila elemen ditetapkan di tempat, manakala menggunakan gaya apabila elemen terkena kedudukan yang ditetapkan. Sesuai untuk animasi yang didorong oleh tatal. scroll-state: stuck scroll-state: snapped Contoh kod:

stuck snapped

:

<code class="language-css">/* Define a sticky element with scroll-state container */
.sticky-element {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

/* Apply styles when the element is stuck to the top */
@container scroll-state(stuck: top) {
  .sticky-element {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
}</code>

Ciri yang lama ditunggu-tunggu ini membolehkan kawalan tepat ke atas ruang tambahan di sekitar teks dalam kotak teks.

dan
3. menyediakan pilihan untuk pemangkasan. text-box-trim Contoh kod:

x-height cap-height

Nilai atribut Popover:

atribut

<code class="language-css">/* Trim text at x-height */
.text-trim {
  text-box-trim: x-height;
}

/* Trim at cap height */
.heading {
  text-box-trim: cap-height;
}</code>

kini menawarkan

,
4. , dan nilai, meningkatkan tooltip dan kawalan elemen UI yang serupa.

mod pemeliharaan negeri dom: popover auto manual hint primitif

baru membolehkan elemen dom bergerak tanpa menetapkan semula keadaan dalaman mereka.

5. Enhanced
Fungsi:

node.prototype.moveBefore

Fungsi

kini menyokong nilai sandaran, termasuk sifat tersuai.
6. attr() Contoh kod:

Pelepasan beta Chrome 133 ini menawarkan penambahbaikan yang ketara bagi pemaju web. Tetap dikemas kini dengan sumber rasmi untuk maklumat yang lebih mendalam. Pertimbangkan untuk berkongsi maklumat ini dengan rangkaian anda! Berhubung dengan saya di LinkedIn, Sederhana, dan Bluesky untuk perbincangan lanjut. attr()

Atas ialah kandungan terperinci xciting kemas kini dari beta chrome untuk pemaju web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!