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