HTML และ CSS ขาดอะไรไป

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

ไวท์บอร์ดที่มีโน้ตติดหนึบเต็มไปหมด
กระดานไอเดียในงาน CSS Day

คำขอ 10 อันดับแรก

ผู้เข้าร่วมต้องเขียนไอเดียลงในโน้ตติดหนึบและติดไว้บนกระดาน นอกจากนี้ ผู้ใช้ยังลงคะแนนให้กับไอเดียได้โดยการเพิ่มสติกเกอร์ ฟีเจอร์ 10 อันดับแรกมีดังนี้

การรองรับการจัดรูปแบบอินพุต

ซึ่งเป็นคำขอฟีเจอร์ที่เราได้รับมากที่สุดด้วยคะแนน 21 คะแนน คุณอยากมีวิธีจัดสไตล์องค์ประกอบ UI ทั่วไปเหล่านี้ให้สอดคล้องกัน

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

ซ่อนอยู่

ตัวเลือกนี้ได้รับคะแนนโหวต 19 คะแนนในงาน CSS Day จึงถือเป็นคําขอที่ได้รับความนิยมเป็นอันดับ 2 คำขอนี้ขอวิธีเพิ่มเนื้อหาที่โปรแกรมอ่านหน้าจอเท่านั้นที่จะใช้ องค์ประกอบนี้อาจเป็นองค์ประกอบ HTML ที่เนื้อหาไม่แสดงและโปรแกรมอ่านหน้าจออ่านออกเสียงเท่านั้น

โดยทั่วไปแล้ว ผู้ใช้จะดำเนินการนี้โดยการสร้างคลาส .visually-hidden เพื่อซ่อนเนื้อหา แต่ยังคงทำให้โปรแกรมอ่านหน้าจอเข้าถึงเนื้อหาได้

แม้ว่าจะเป็นคำขอที่ได้รับความนิยม แต่ก็มีผู้คนที่คิดว่าไม่ควรนำฟีเจอร์นี้มาใช้ อ่านรายละเอียดได้ที่หัวข้อเนื้อหาที่ซ่อนอยู่แต่มองเห็นได้คือแฮ็กที่ต้องแก้ไข ไม่ใช่สิ่งที่ควรยอมรับและการสนทนานี้ในหัวข้อCSS WG ปัญหา 560

position: sticky inside overflow:hidden

คำขอนี้ได้รับ 16 โหวต ปัจจุบัน position: sticky จะใช้งานได้ก็ต่อเมื่อพ่อแม่ทุกคนเป็น overflow: visible

มีปัญหาที่รอดำเนินการตั้งแต่ปี 2017 ที่ขอการดำเนินการนี้ แม้ว่ากรณีการใช้งานเบื้องต้นของการเปิดใช้ overflow: hidden สำหรับการล้างเศษทศนิยมอาจไม่จำเป็นมากนักในปัจจุบัน แต่ก็มีกรณีอื่นๆ อีกมากมายที่ระบุไว้อย่างละเอียดในชุดข้อความ

เคลื่อนไหวไปยัง height: auto

เมื่อคะแนนโหวตอยู่ที่ 12 คะแนน ผู้เข้าร่วมหลายคนต้องการเปลี่ยนเป็น height: auto เรายินดีที่จะแจ้งให้ทราบว่าฟีเจอร์นี้จะพร้อมใช้งานในแพลตฟอร์มเว็บด้วยพร็อพเพอร์ตี้ interpolate-size และฟังก์ชัน calc-size() ของ CSS ซึ่งจะพร้อมใช้งานใน Chrome 129 โปรดคอยติดตามโพสต์ในอนาคตที่มีข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เหล่านี้

ประเภทอินพุตเพิ่มเติม

HTML5 มีองค์ประกอบ <input> หลายประเภท เช่น type="email" สำหรับอีเมล หรือ type="range" สำหรับแถบเลื่อนช่วง ในงาน CSS Day เราได้รับคะแนน 10 คะแนนสำหรับประเภทเหล่านี้เพิ่มเติม เช่น ช่วงแบบคู่ หรือการป้อนข้อความอัตโนมัติด้วยรายการข้อมูลที่กําหนดเอง

ตัวเลขสุ่มจริงใน CSS

คําขออีกรายการที่มี 10 คะแนนคือตัวเลขสุ่มจริงใน CSS เราได้ดำเนินการตามคำขอนี้และแก้ปัญหาanimation-duration แบบสุ่มในอดีตแล้ว

คลาสสไตล์ Mixin

CSS ได้เพิ่มฟีเจอร์หลายอย่างที่เคยเห็นใน CSS preprocessors ซึ่งก็คือตัวแปรที่มีพร็อพเพอร์ตี้ที่กำหนดเอง และตอนนี้ก็มี CSS Nesting ด้วย อย่างไรก็ตาม Mixin ที่นํามาใช้ซ้ำได้ยังไม่เป็นส่วนหนึ่งของภาษา แต่ผู้เข้าร่วม CSS Day 7 คนต้องการเห็น mixin ดังกล่าว

กลุ่มทำงาน CSS ได้ออกมติเพื่อเริ่มดำเนินการเกี่ยวกับข้อกำหนดของฟีเจอร์นี้ และคุณสามารถเพิ่มความคิดเห็นและกรณีการใช้งานในการสนทนาในปัญหานั้นได้

สไตล์ส่วนกลางใน Shadow DOM

อีกปัญหาหนึ่งที่มีชุดข้อความสนทนาเกี่ยวกับกรณีการใช้งานจำนวนมากคือคําขออนุญาตให้ใช้สไตล์ CSS ระดับส่วนกลางภายใน Shadow DOM ซึ่งมีผู้ขอเรื่องนี้ 6 คนในงาน CSS Day ความสามารถนี้จะช่วยให้ใช้รูปแบบการรีเซ็ตแบบทั่วโลกในคอมโพเนนต์ของเว็บได้ และไฟล์ CSS ไฟล์เดียวจะทำงานกับคอมโพเนนต์ทั้งหมดของเว็บไซต์ได้ โปรดดูสรุปกรณีการใช้งานนี้และแจ้งให้เราทราบว่าคุณอยากใช้ฟีเจอร์นี้ด้วยหรือไม่

การหารหน่วยแบบผสม

มีข้อเสนอสำหรับ Interop 2024 ที่ขอความสามารถในการหารด้วยหน่วยผสม เช่น calc(100vw / 1px) มีการตัดสินว่าข้อเสนอนี้กว้างเกินไปสำหรับ Interop 2024 แต่นักพัฒนาแอปจำนวนมาก รวมถึง 6 คนที่ CSS Day ต้องการเห็นการใช้งานข้อเสนอนี้

nth-letter

CSS มีองค์ประกอบจำลองหลายรายการที่ทํางานราวกับว่าคุณได้ตัดเนื้อหาบางส่วนออก เช่น องค์ประกอบเสมือน ::first-letter จะกำหนดเป้าหมายไปยังตัวอักษรแรกของบรรทัดแรกของคอนเทนเนอร์บล็อกที่ใช้

รายการดังกล่าวไม่มี ::nth-letter และคุณขอ ::nth-letter มาประมาณ 20 ปีแล้ว เราจึงทราบดีว่านี่เป็นคำขอที่นักพัฒนาเว็บต้องการมาอย่างยาวนาน ในงาน CSS Day มีผู้ลงคะแนนให้ฟีเจอร์นี้ 6 คน ทำให้ฟีเจอร์นี้กลายเป็นฟีเจอร์สุดท้ายใน 10 อันดับแรกที่เราอยากได้

คุณเห็นด้วยกับ 10 อันดับแรกของ CSS Day ไหม

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