Apa yang !penting #6: :heading, bentuk batas, pemotongan teks di tengah, dll. – Beragampengetahuan

Meskipun beberapa minggu ini merupakan minggu yang membosankan dengan hadirnya fitur Platform Web baru, kita masih dihadapkan pada pertanyaan: Apa yang penting? Penuh sesak. Tampaknya komunitas online mempunyai banyak hal untuk dibicarakan, jadi bersiaplah!

@keyframes Animasi bisa berupa string

Peter Kröner membagikan fakta menarik @keyframes Animasi – dapat berupa string:

@keyframes "@animation" {
  /* ... */
}

#animate-this {
  animation: "@animation";
}

Ya ampun, ini waktunya mempelajari fakta #CSS yang menyenangkan: nama keyframe bisa berupa string. Mengapa? Nah, jika Anda ingin keyframe Anda diberi nama “@keyframes”, tentu saja! #webdev

[image or embed]

— Peter Kröner (@sirpepe.bsky.social) 18 Februari 2026 10:33

Saya tidak tahu mengapa Anda melakukan ini, tapi ini tentu saja merupakan hal yang menarik untuk dipelajari @keyframes Setelah 11 tahun dukungan lintas browser!

: Dan = dalam kueri gaya

Trik tersembunyi lainnya dari Temani Afif mengungkapkan bahwa kita dapat mengganti titik dua dalam kueri gaya dengan tanda sama dengan. Temani berhasil menjelaskan perbedaannya dengan baik, namun berikut cuplikan kode singkat untuk meringkasnya:

.Jay-Z {
  --Problems: calc(98 + 1);

  /* Evaluates as calc(98 + 1), color is blueivy */
  color: if(style(--Problems: 99): red; else: blueivy);

  /* Evaluates as 99, color is red */
  color: if(style(--Problems = 99): red; else: blueivy);
}

pendeknya, = Mengevaluasi --Problems berbeda dari :meskipun Jay-Z pasti memiliki 99 (dia sendiri yang mengatakannya).

deklaratif <dialog>s (dan yang lebih baru .visually-hidden)

David Bushell mendemonstrasikan cara berkreasi <dialog>Secara deklaratif menggunakan perintah invoker, ini adalah fitur berguna yang memungkinkan kita melewatkan beberapa J’Script demi HTML dan berfungsi di semua browser web terbaru.

Selain itu, karena pertanyaan aneh dari Ana Tudor, artikel ini melahirkan artikel spin-off tentang jumlah minimum gaya yang diperlukan untuk menyembunyikan kelas utilitas secara visual. Masih tujuh?

Mungkin tidak…

Cara memotong teks dari tengah

Wes Bos membagikan trik jitu untuk memotong teks di tengah hanya dengan menggunakan CSS:

Seseorang di Reddit memposting demo di mana CSS memotong teks di tengah. Mereka tidak merilis kodenya, jadi inilah upaya saya menggunakan Flexbox

[image or embed]

— Wes Bos (@wesbos.com) 9 Februari 2026 17:31

Donnie D’Amato mencoba solusi yang lebih asli, menggunakan ::highlight()Tetapi ::highlight() Sayangnya, ada beberapa keterbatasan. Seperti yang disebutkan Henry Wilkinson, seruan Hazel Bachrach untuk solusi asli pada tahun 2019 masih terus berlanjut, jadi semoga saja!

Cara mengelola variabel warna menggunakan sintaks warna relatif

Theo Soti mendemonstrasikan cara mengelola variabel warna menggunakan sintaks warna relatif. Meskipun ini bukan fitur atau konsep baru, sejujurnya ini adalah panduan terbaik dan terlengkap yang pernah saya baca yang membahas kompleksitas ini.

Cara menyesuaikan daftar (cara modern)

Dalam artikel serupa dari Piccalilli, Richard Rutter menunjukkan kepada kita secara menyeluruh cara menyesuaikan daftar, meskipun artikel tersebut memiliki beberapa elemen yang saya hanya dapat berasumsi sebagai CSS modern. apa symbols()? apa @counter-style Dan extends? Richard akan membawamu melewatinya semuanya.

Tidak puas dengan yang dijual bebas? Juan Diego telah menyusun panduan komprehensif di beragampengetahuan.

Cara membuat proporsi font menggunakan :heading

Pratinjau Teknologi Safari 237 baru-baru ini memulai uji coba :heading/:heading()Seperti yang dijelaskan Stuart Robson. Namun tindak lanjutnya bahkan lebih baik karena menunjukkan caranya pow() dapat digunakan untuk menulis logika tipe yang lebih bersih, meskipun saya akhirnya memilih yang kuno <h1>–<h6> Elemen dengan implementasi yang lebih sederhana :heading TIDAK sibling-index():

:root {
  --font-size-base: 16px;
  --font-size-scale: 1.5;
}

:heading {
  /* Other heading styles */
}

/* Assuming only base/h3/h2/h1 */

body {
  font-size: var(--font-size-base);
}

h3 {
  font-size: calc(var(--font-size-base) * var(--font-size-scale));
}

h2 {
  font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2));
}

h1 {
  font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3));
}

Pengantar Oona Kravitz border-shape

Berbicara tentang fitur baru, border-shape Mengingat kita punya – atau akan memiliki – corner-shape. Namun, border-shape Seperti yang dijelaskan Una, segalanya berbeda. Ini memecahkan masalah batas (karena itu Ya perbatasan), memungkinkan lebih banyak bentuk dan rata shape() Fungsionalitasnya, secara keseluruhan, cara kerjanya di belakang layar berbeda.

Modern.css ingin Anda berhenti menulis CSS seperti tahun 2015

Saatnya untuk mulai menggunakan semua hal tentang CSS modern, dan itulah yang Modern.css ingin bantu Anda lakukan. Pernahkah Anda lupa bahwa semua fitur hebat ini tidak didukung saat pertama kali Anda membacanya? Atau yang Anda lewatkan atau lewati seluruhnya? Modern.css memiliki 75 cuplikan kode dan terus bertambah, dan yang perlu Anda lakukan hanyalah menyalinnya.

Kevin Powell juga memiliki beberapa cuplikan CSS untuk Anda

Bagaimana dengan pemberi komentar? Mereka juga punya beberapa!

Sejujurnya, Kevin adalah satu-satunya pembicara pengembang web yang saya ikuti di YouTube dan dia adalah dia Jadi Kini pengikutnya hampir mencapai 1 juta, jadi pastikan untuk menekan tombol “Berlangganan” K-Po.

jika kamu melewatkannya

Faktanya, Anda tidak melewatkan banyak hal! Firefox 148 dirilis shape() fungsi, yang dulunya terikat pada bendera, namun sekarang menjadi fitur dasar. Pratinjau Teknologi Safari 237 Jadilah orang pertama yang mencobanya :heading. Hanya itu yang kami lihat dari browser favorit kami selama beberapa minggu terakhir (tentu saja tanpa pembaruan kecil yang biasa).

Meskipun demikian, Chrome, Safari, dan Firefox mengumumkan tujuan mereka untuk Interop 2026, mengungkapkan fitur platform web yang ingin mereka pertahankan konsisten di semua browser web tahun ini, di antaranya lebih dari Mengganti kekurangan fitur-fitur cemerlang minggu ini.

Juga segera hadir (tetapi sekarang tersedia untuk pengujian di Chrome Canary, misalnya border-shape)Ya scrolled Kata kunci untuk kueri kontainer status gulir. pembicaraan brahms scrolled Gulir kueri status di sini.

Ingat, jika Anda tidak ingin ketinggalan apa pun, Anda dapat melihat klik cepat berita ini di beragampengetahuan beragampengetahuan.com.

Sampai jumpa dalam dua minggu!