ผลสำรวจสถานะของ CSS และ HTML บอกอะไรเราบ้าง

Rachel Andrew

เผยแพร่: 6 ธันวาคม 2024

ผลลัพธ์ของสถานะของ CSS ปี 2024 และสถานะของ HTML ปี 2024 พร้อมให้ใช้งานแล้ว โพสต์นี้จะกล่าวถึงข้อมูลเบื้องต้นเกี่ยวกับผลการสำรวจที่น่าสนใจที่สุดบางส่วน

ความเห็นเชิงบวกเกี่ยวกับแพลตฟอร์มเว็บ

ก่อนดูปัญหาบางอย่างที่ผู้ใช้พบเกี่ยวกับ HTML และ CSS ผลการสำรวจแสดงให้เห็นถึงความเชื่อมั่นในแพลตฟอร์มเป็นอย่างมาก เมื่อถามว่าแพลตฟอร์มเว็บกำลังเดินไปในทิศทางที่ถูกต้องโดยรวมหรือไม่ ผู้ที่เข้าร่วมการสำรวจสถานะของ HTML 58% เห็นด้วยกับข้อความดังกล่าว และ 18% เห็นด้วยอย่างยิ่ง

สำหรับ CSS :has() ครองตำแหน่งฟีเจอร์ใหม่ของ CSS ที่คนชื่นชอบที่สุด โดยมีผู้จัดอันดับให้ฟีเจอร์นี้เป็นฟีเจอร์ใหม่ที่ดีที่สุดถึง 36% รายการโปรดอันดับ 2 คือ @container ที่ 17% เสมอกับการวางซ้อน CSS

คุณใช้อุปกรณ์ใดอยู่

ข้อมูล CSS มีข้อน่าประหลาดใจบางอย่าง ตัวอย่างเช่น ผู้ใช้กว่า 75% ใช้เอฟเฟกต์ฟิลเตอร์ CSS ซึ่งทำให้เป็นฟีเจอร์ยอดนิยม เมื่อพิจารณาจำนวนการร้องเรียนเกี่ยวกับการแสดงโฆษณาสื่อกลางตามลำดับขั้นในช่วงหลายปีที่ผ่านมา เป็นเรื่องน่าสนใจที่มีผู้ใช้เลเยอร์สื่อกลางตามลำดับขั้นเพียง 18.9% อาจมีลิงก์ไปยังการนำเครื่องมืออย่าง Tailwind มาใช้ ซึ่งจะช่วยป้องกันไม่ให้ผู้ใช้ประสบปัญหาที่เกี่ยวข้องกับการแสดงโฆษณาสื่อกลางตามลำดับขั้นบ่อยครั้ง

องค์ประกอบจุดสังเกต เช่น <main> และ <nav> อยู่ในอันดับต้นๆ ของแบบสํารวจ HTML สำหรับสิ่งที่คุณใช้ เราดีใจที่เห็นผู้ใช้จำนวนมากใช้เทคนิคการโหลดแบบ Lazy Loading และรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

ปัญหาการรองรับเบราว์เซอร์ยอดนิยม

ปัญหาเกี่ยวกับการทำงานร่วมกันหรือการสนับสนุนฟีเจอร์ของเบราว์เซอร์มักเกิดขึ้นเมื่อเราพูดคุยกับนักพัฒนาแอป แบบสํารวจจะถามถึงปัญหาที่คุณพบโดยตรง ฟีเจอร์ที่มีปัญหา 10 อันดับแรกมีดังนี้ โดยจัดอันดับตามเปอร์เซ็นต์ของผู้ที่เลือกฟีเจอร์นั้น

  • Popover API
  • ตำแหน่งโฆษณา Anchor
  • คำค้นหาคอนเทนเนอร์
  • :has()
  • มุมมองการฝัง CSS
  • Transition API
  • ตารางกริดย่อย
  • GRid
  • <dialog>
  • Progressive Web App

การจัดตำแหน่งจุดยึดได้คะแนน 11% ในการสํารวจทั้ง 2 รายการ ส่วน View Transition API ได้คะแนน 9% ในสถานะของ CSS และ 8% ในสถานะของ HTML ซึ่งแสดงให้เห็นว่านักพัฒนาแอปเห็นว่าฟีเจอร์เหล่านี้มีประโยชน์เพียงใด

สิ่งที่น่าสนใจคือฟีเจอร์หลายอย่างทำงานร่วมกันได้ การค้นหาคอนเทนเนอร์, :has()การฝัง CSS และตารางย่อยเป็น Baseline ที่พร้อมใช้งานใหม่, Popover API จะพร้อมใช้งาน แต่มีปัญหาเกี่ยวกับการปิดไฟใน iOS องค์ประกอบ <dialog> พร้อมใช้งานในวงกว้างแล้วในตอนนี้ รวมถึงเลย์เอาต์ตารางกริด CSS คุณอาจต้องเจาะลึกผลการค้นหาเหล่านี้เพื่อดูว่าผู้ใช้พบปัญหาอะไร ตัวอย่างเช่น คำตอบสำหรับตารางมักจะระบุว่าใช้งานยาก แทนที่จะพูดถึงปัญหาการทำงานร่วมกันจริง

เราหวังว่า Baseline จะช่วยให้นักพัฒนาแอปเข้าใจสถานะต่างๆ และทราบว่าปัญหาที่พบเกิดจากความเข้ากันได้ของเบราว์เซอร์หรือไม่ หรือเกิดจากสาเหตุอื่น เราดีใจที่แบบสํารวจเหล่านี้ไฮไลต์สถานะพื้นฐานของฟีเจอร์ นอกจากนี้ คุณยังดูสถานะความพร้อมให้บริการของปัญหา CSS ยอดนิยมในเบราว์เซอร์ต่างๆ ได้ที่ webstatus.dev

ไม่มีฟีเจอร์บางอย่าง

แบบสํารวจยังสอบถามด้วยว่าฟีเจอร์และฟังก์ชันการทํางานใดที่แพลตฟอร์มไม่มี ข้อมูลนี้ช่วยให้เราทราบว่ายังมีอะไรบ้างที่ยังคงทําได้ยาก อัตราการตอบกลับคําถามนี้มีระดับต่ำ แต่ในการสํารวจสถานะของ CSS ผู้คนถามถึง mixin, ตรรกะแบบมีเงื่อนไข และเลย์เอาต์แบบ Masonry บ่อยที่สุด สิ่งที่น่าสนใจคือผู้ใช้ยังต้องการตัวเลือกระดับบนสุด (:has() มีฟังก์ชันการทำงานดังกล่าว) และการฝัง ซึ่งก็มีอยู่แล้วและพร้อมใช้งานใน Baseline เวอร์ชันใหม่

คำถามที่เราถามผู้ตอบแบบสํารวจสถานะของ HTML คือ "หากคุณสามารถเพิ่มองค์ประกอบ 3 รายการลงใน HTML คุณจะเพิ่มอะไรบ้าง" 51% ของผู้ใช้ต้องการตารางข้อมูล ส่วนตัวเลือกอื่นๆ ที่ได้รับความนิยม ได้แก่ แท็บและองค์ประกอบเปิด/ปิด

คุณต้องการทราบข้อมูลเพิ่มเติมเรื่องใด

แบบสํารวจมีฟีเจอร์ที่คุณสามารถเพิ่มรายการลงในรายการรออ่านได้ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับรายการเหล่านั้นหลังจากทําแบบสํารวจเสร็จแล้ว ข้อมูลนี้มีประโยชน์อย่างยิ่ง โดยเฉพาะอย่างยิ่งหากคุณประกอบธุรกิจเกี่ยวกับการสร้างเนื้อหาสำหรับนักพัฒนาแอป รายการต่อไปนี้คือฟีเจอร์ 10 อันดับแรกจากแบบสํารวจทั้ง 2 รายการ โดยจัดอันดับตามเปอร์เซ็นต์ของผู้ทำแบบสํารวจที่เพิ่มฟีเจอร์ดังกล่าวลงในรายการ

  • CSS hanging-punctuation
  • CSS offset-path
  • @scope
  • ตำแหน่งโฆษณา Anchor
  • รายการตัวเลือกที่กำหนดเองได้
  • view-timeline
  • scroll-timeline
  • แอตทริบิวต์ focusgroup รายการ
  • ภาพเคลื่อนไหวของพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง
  • image()

ดูผลลัพธ์ทั้งหมดด้วยรายการการอ่าน CSS และรายการการอ่าน HTML

สัญญาณเดียวจากชุมชนเว็บ

Chrome รองรับแบบสำรวจเหล่านี้เนื่องจากเป็นวิธีหนึ่งที่เราจะได้ข้อมูลเกี่ยวกับปัญหาหลักๆ ของคุณและสิ่งที่คุณสนใจมากที่สุดในแพลตฟอร์มเว็บ ความคิดเห็นไม่ใช่สัญญาณเดียวที่เราใช้ แต่ความคิดเห็นเป็นช่องทางที่คุณบอกให้เราทราบถึงความคิดเห็นของคุณได้โดยตรง ขอขอบคุณหากคุณตอบแบบสำรวจข้อใดข้อหนึ่งหรือทั้ง 2 ข้อนี้ คุณกำลังช่วยเราปรับปรุงเว็บให้ดีขึ้นในแบบที่คุณต้องการ หากต้องการช่วยเหลือ คุณยังมีเวลาเข้าร่วมThe State of JS