ทีม 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 เรายินดีที่จะแจ้งให้ทราบว่าฟีเจอร์นี้จะพร้อมใช้งานบนแพลตฟอร์มเว็บด้วยพร็อพเพอร์ตี้ CSS interpolate-size และฟังก์ชัน calc-size()
ฟีเจอร์เหล่านี้จะพร้อมใช้งานใน Chrome 129
โปรดรอติดตามโพสต์ในอนาคตที่มีข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เหล่านี้
ประเภทอินพุตเพิ่มเติม
HTML5 มีประเภทต่างๆ มากมายสำหรับองค์ประกอบ <input> เช่น type="email" สำหรับอีเมลหรือ type="range" สำหรับแถบเลื่อนช่วง
ในวัน CSS เราได้รับการโหวต 10 ครั้งสำหรับประเภทเหล่านี้เพิ่มเติม เช่น ช่วงคู่
หรือการเติมข้อความอัตโนมัติพร้อม datalist ที่กำหนดเอง
ตัวเลขสุ่มจริงใน CSS
คำขออีกรายการที่มีคะแนนโหวต 10 คะแนนคือการขอให้ใช้ตัวเลขสุ่มจริงใน CSS เราเคยได้รับคำขอและแก้ไขปัญหานี้ในอดีตสำหรับanimation-duration แบบสุ่ม
คลาสสไตล์ Mixin
CSS ได้เพิ่มฟีเจอร์หลายอย่างที่เคยเห็นในตัวประมวลผล CSS ก่อนหน้า ซึ่งก็คือตัวแปรที่มีพร็อพเพอร์ตี้ที่กำหนดเอง และตอนนี้ก็คือ CSS Nesting อย่างไรก็ตาม มิกซ์อินที่นำกลับมาใช้ใหม่ได้ยังไม่ได้เป็นส่วนหนึ่งของภาษา แต่ผู้เข้าร่วม CSS Day 7 คนก็อยากเห็นมิกซ์อินเหล่านี้
มีมติของกลุ่มงาน CSS ที่จะเริ่มทำงานกับข้อกำหนดสำหรับฟีเจอร์นี้ และคุณสามารถแสดงความคิดเห็นและกรณีการใช้งานของคุณในการสนทนาในปัญหานั้น
รูปแบบส่วนกลางใน Shadow DOM
อีกปัญหาหนึ่งที่มีเธรดการสนทนาขนาดใหญ่เกี่ยวกับกรณีการใช้งานคือคำขอให้ อนุญาตให้ใช้สไตล์ CSS ทั่วโลกภายใน Shadow DOM โดยมีผู้ขอให้ดำเนินการนี้ 6 คนในงาน CSS Day ความสามารถนี้จะช่วยให้สไตล์การรีเซ็ตส่วนกลางมีผลใน Web Component ด้วย และไฟล์ CSS เดียวจะทำงานได้ในทุกคอมโพเนนต์ของเว็บไซต์ โปรดดูสรุปกรณีการใช้งานนี้ และแจ้งให้เราทราบหากคุณต้องการใช้ฟีเจอร์นี้ด้วย
การหารหน่วยผสม
มีข้อเสนอสำหรับ Interop 2024
ที่ขอ
ความสามารถในการหารด้วยหน่วยผสม เช่น calc(100vw / 1px) แต่เราเห็นว่าฟีเจอร์นี้มีขอบเขตกว้างเกินไปสำหรับ Interop 2024 อย่างไรก็ตาม นักพัฒนาแอปจำนวนมาก รวมถึงผู้เข้าร่วม CSS
Day 6 คนต้องการให้เรานำฟีเจอร์นี้มาใช้งาน
nth-letter
CSS มีองค์ประกอบเสมือนหลายรายการที่ทำงานราวกับว่าคุณได้ห่อหุ้มองค์ประกอบ span รอบ
ส่วนหนึ่งของเนื้อหา เช่น псевдоэлемент
::first-letter
จะกำหนดเป้าหมายตัวอักษรแรกของบรรทัดแรกของคอนเทนเนอร์ระดับบล็อก
ที่ใช้กับคอนเทนเนอร์นั้น
::nth-letterยังไม่มีในรายการดังกล่าว และคุณได้ขอ::nth-letterมาประมาณ 20 ปีแล้ว ดังนั้น
เราจึงทราบว่านี่เป็นคำขอที่นักพัฒนาเว็บต้องการมานาน ใน CSS Day มีผู้โหวตให้ฟีเจอร์นี้ 6 คน
ทำให้ฟีเจอร์นี้เป็นฟีเจอร์สุดท้ายใน 10 อันดับแรกที่เราต้องการ
คุณเห็นด้วยกับ 10 อันดับแรกของ CSS Day ไหม
เราอยากทราบความคิดเห็นจากผู้ชมในวงกว้างเกี่ยวกับปัญหาเหล่านี้ คุณคิดว่าปัญหาใดที่สำคัญที่สุด หากไม่ คุณอยากเห็นอะไรอีก ใน CSS และ HTML โปรดแจ้งให้เราทราบโดยกรอกแบบฟอร์มสั้นๆ นี้ และเราจะสรุปคำตอบในโพสต์อื่น