Apa yang dapat kita pelajari dari survei Status CSS dan HTML?

Rachel Andrew

Dipublikasikan: 6 Desember 2024

Hasil untuk Status CSS 2024 dan Status HTML 2024 kini telah ditayangkan. Postingan ini membahas temuan awal dari beberapa temuan paling menarik dalam survei tersebut.

Optimisme tentang platform web

Sebelum melihat beberapa masalah yang dialami orang-orang dengan HTML dan CSS, survei ini menyampaikan banyak optimisme tentang platform tersebut. Saat ditanya apakah platform web bergerak ke arah yang benar secara keseluruhan, 58% orang yang mengikuti State of HTML setuju dengan pernyataan tersebut, dengan 18% sangat setuju.

Untuk CSS, :has() menjadi fitur CSS baru favorit dengan 36% orang mendudukkannya sebagai fitur baru terbaik. Favorit kedua adalah @container dengan 17% yang terikat dengan CSS nesting.

Apa yang Anda gunakan?

Ada beberapa kejutan dalam data CSS. Misalnya, lebih dari 75% orang telah menggunakan efek filter CSS sehingga menjadi fitur yang paling banyak digunakan. Mengingat jumlah keluhan tentang cascade selama bertahun-tahun, menarik bahwa lapisan cascade hanya digunakan oleh 18,9% orang. Mungkin ada kaitan di sini dengan adopsi alat seperti Tailwind yang mencegah orang sering mengalami masalah terkait cascade.

Elemen penanda seperti <main> dan <nav> muncul di bagian atas survei HTML untuk hal-hal yang Anda gunakan. Senang rasanya melihat begitu banyak orang menggunakan pemuatan lambat dan teknik gambar responsif.

Masalah dukungan browser teratas

Masalah terkait interoperabilitas, atau dukungan browser untuk fitur, selalu muncul saat kami berbicara dengan developer. Survei tersebut langsung menanyakan masalah yang Anda alami. 10 fitur bermasalah teratas adalah sebagai berikut, yang diberi peringkat berdasarkan persentase orang yang memilih fitur tersebut.

  • Popover API
  • Penempatan anchor
  • Kueri Penampung
  • :has()
  • Tampilan bertingkat CSS
  • Transition API
  • Sub-petak
  • Petak
  • <dialog>
  • Progressive Web App

Penentuan posisi anchor memperoleh skor 11% dalam kedua survei, View Transition API 9% di Status CSS dan 8% di Status HTML yang menunjukkan betapa berharganya fitur ini dilihat oleh developer.

Menariknya, beberapa fitur tersebut dapat dioperasikan secara bersama-sama. Kueri penampung, :has(), CSS nesting, dan subgrid adalah Dasar Pengukuran yang Baru tersedia, Popover API akan tersedia, tetapi untuk masalah dengan penutupan ringan di iOS. Elemen <dialog> kini tersedia secara luas, seperti tata letak petak CSS. Sebaiknya pelajari hasil ini untuk mengetahui masalah yang dialami orang. Respons untuk grid, misalnya, sering kali merujuk pada sulitnya mempelajarinya, bukan mengutip masalah interoperabilitas yang sebenarnya.

Kami harap Baseline akan membantu developer memahami status berbagai hal, dan mengetahui apakah masalah yang mereka lihat disebabkan oleh kurangnya kompatibilitas browser, atau hal lainnya. Kami senang melihat bahwa survei ini menyoroti status Dasar Pengukuran fitur. Anda juga dapat melihat status ketersediaan di seluruh browser untuk masalah CSS teratas di webstatus.dev.

Ada fitur hilang

Survei juga menanyakan fitur dan fungsi yang tidak ada di platform. Hal ini membantu kami melihat hal-hal yang masih sulit dilakukan. Rasio respons terhadap pertanyaan ini lebih rendah, tetapi dalam survei Status CSS, orang-orang paling sering menanyakan mixin, logika kondisional, dan tata letak masonry. Menariknya, pengguna juga meminta pemilih induk (:has() menyediakan fungsi tersebut) dan tingkatan—yang sudah ada dan tersedia di Dasar Pengukuran Baru.

Pertanyaan yang diajukan kepada responden State of HTML adalah, "Jika Anda dapat menambahkan 3 elemen ke HTML, apa saja elemen tersebut?" 51% orang meminta tabel data, pilihan populer lainnya mencakup tab dan elemen tombol.

Apa yang ingin Anda ketahui lebih lanjut?

Survei memiliki fitur yang memungkinkan Anda menambahkan item ke daftar bacaan, jika Anda ingin mengetahui lebih lanjut item tersebut setelah menyelesaikan survei. Ini adalah data yang berharga—terutama jika Anda terlibat dalam bisnis pembuatan konten developer. Daftar berikut adalah sepuluh fitur teratas di kedua survei, yang diberi peringkat berdasarkan persentase responden yang menambahkannya ke daftar mereka.

  • CSS hanging-punctuation
  • CSS offset-path
  • @scope
  • Penempatan anchor
  • Pilihan yang dapat disesuaikan
  • view-timeline
  • scroll-timeline
  • focusgroup atribut
  • Animasi properti diskret
  • image()

Lihat hasil lengkapnya dengan daftarbacaan CSS dan daftarbacaan HTML.

Satu sinyal dari komunitas web

Chrome mendukung survei ini karena merupakan salah satu cara kami mendapatkan informasi tentang poin masalah utama Anda, dan hal-hal yang paling Anda minati di seluruh platform web. Ini bukan satu-satunya sinyal yang kami gunakan, tetapi merupakan tempat bagi Anda untuk langsung menyampaikan pendapat Anda kepada kami. Jika Anda mengisi salah satu atau kedua survei ini, terima kasih. Anda membantu kami membuat web menjadi lebih baik sesuai dengan keinginan Anda. Jika Anda ingin membantu, masih ada waktu untuk berpartisipasi dalam The State of JS.