เผยแพร่: 31 มีนาคม 2025
เดือนหนึ่งผ่านไปแล้ว และตั้งแต่สรุปรายเดือนของ Baseline ฉบับล่าสุด ก็มีเรื่องเกิดขึ้นมากมาย ในฉบับนี้ เราจะสรุปโพสต์บางส่วนที่เราเผยแพร่ที่นี่ใน web.dev, ฟีเจอร์ Baseline ที่พร้อมใช้งานใหม่บางรายการ และข้อมูลอัปเดตเกี่ยวกับเครื่องมือในชุมชน
ESLint 0.6.0 พร้อมให้ใช้งานแล้ว
เมื่อเร็วๆ นี้ เราได้โพสต์เกี่ยวกับ ESLint ที่เริ่มรองรับการตรวจสอบ CSS การเปิดตัวครั้งนี้ยังรวมถึงกฎ ESLint ใหม่ require-baseline สำหรับการตรวจหาข้อบกพร่องของฟีเจอร์ CSS ที่คุณใช้ในโปรเจ็กต์ และดูว่าฟีเจอร์เหล่านั้นถึงเกณฑ์พื้นฐานที่เฉพาะเจาะจงหรือไม่
เมื่อเร็วๆ นี้ ESLint ได้เปิดตัวแพ็กเกจ @eslint/css เวอร์ชัน 0.6.0 ซึ่งมีการอัปเดตใหม่ที่สำคัญที่เปลี่ยนชื่อกฎ require-baseline เป็น use-baseline แม้ว่าการอัปเดตนี้ดูเหมือนจะเล็กน้อย แต่ก็ช่วยปรับปรุงความอ่านง่ายของกฎ นอกจากนี้ ยังมีฟีเจอร์สำคัญอื่นๆ และการแก้ไขข้อบกพร่องในรุ่นนี้ด้วย เช่น การเพิ่มความสามารถของกฎ use-baseline เพื่อตรวจหาข้อบกพร่องในบล็อก CSS ที่ฝังอยู่ หากคุณใช้ @eslint/css เวอร์ชันเก่าอยู่ โปรดดูการอัปเดตนี้
วิธีค้นหาแดชบอร์ดแพลตฟอร์มเว็บ
เมื่อต้นเดือนที่ผ่านมา เราได้เผยแพร่โพสต์เกี่ยวกับการค้นหาแดชบอร์ดแพลตฟอร์มเว็บ คุณสามารถค้นหาแดชบอร์ดนี้ได้ในส่วนหน้า รวมถึงผ่าน HTTP API ซึ่งอาจมีประโยชน์สําหรับเครื่องมือพื้นฐาน เนื่องจากคุณสามารถค้นหา API เพื่อหาฟีเจอร์ที่ถึงเกณฑ์พื้นฐานที่เฉพาะเจาะจงได้
API นี้มีประโยชน์สําหรับเครื่องมือที่คุณต้องรับข้อมูลเกี่ยวกับฟีเจอร์ที่เฉพาะเจาะจงอย่างรวดเร็ว ตัวอย่างเช่น คุณอาจใช้เครื่องมือประเภทนี้เพื่อเขียนสคริปต์ที่จะบอกคุณเป็นระยะๆ ว่าฟีเจอร์ใดเพิ่งกลายเป็น "ฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่" หรือ "ฟีเจอร์ที่พร้อมใช้งานในวงกว้าง" หากคิดว่าข้อมูลนี้มีประโยชน์ โปรดอ่านโพสต์
วิธีคิดเกี่ยวกับ Baseline และ polyfill
ภารกิจของ Baseline คือทำให้คุณทราบอย่างชัดเจนว่าฟีเจอร์ใดที่คุณใช้ได้อย่างปลอดภัย แต่แม้จะมีความชัดเจนมากขึ้นแล้ว คุณก็ยังต้องพิจารณาวิธีใช้ฟีเจอร์ในลักษณะที่เหมาะสมกับเว็บแอปพลิเคชันของคุณ ไฟล์ทดแทนเป็นส่วนสําคัญของกระบวนการดังกล่าว ข้อมูลพื้นฐานจะไม่พิจารณา polyfill ว่าฟีเจอร์ใหม่หรือมีให้บริการอย่างแพร่หลาย และจะไม่บอกให้คุณทราบว่าควรใช้หรือไม่ การตัดสินใจดังกล่าวขึ้นอยู่กับแอปพลิเคชันของคุณโดยเฉพาะ แต่ถือเป็นข้อควรพิจารณาที่สำคัญ
เมื่อเร็วๆ นี้ เราได้เผยแพร่โพสต์เกี่ยวกับวิธีคิดเกี่ยวกับ Baseline และ polyfill และเราคิดว่าโพสต์นี้ให้กรอบความคิดที่เป็นประโยชน์เกี่ยวกับวิธีใช้ฟีเจอร์ดังกล่าว เราหวังว่าฟีเจอร์ที่กลายเป็นฟีเจอร์พื้นฐานใหม่หรือพร้อมใช้งานอย่างกว้างขวางจะทำให้การใช้ polyfill ลดลง เป็นที่แน่ชัดว่า polyfill เป็นเครื่องมือที่มีประโยชน์ในกล่องเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ แต่ก็มีข้อเสียเช่นกัน เนื่องจากอาจส่งผลเสียต่อประสิทธิภาพของเว็บไซต์ และในบางกรณีอาจทำให้เกิดข้อกังวลด้านการช่วยเหลือพิเศษ เราหวังว่าคำแนะนำนี้จะช่วยคุณตอบคำถามที่ยุ่งยากนี้
contenteditable="plaintext-only" พร้อมใช้งานเป็นฐานข้อมูลใหม่แล้ว
แอตทริบิวต์ contenteditable ในองค์ประกอบ HTML ช่วยให้ผู้ใช้เปลี่ยนเนื้อหาได้ราวกับเป็นช่องข้อความ ซึ่งหมายความว่าคุณอาจวางแอตทริบิวต์ในองค์ประกอบ <p> และผู้ใช้สามารถโต้ตอบกับแอตทริบิวต์ดังกล่าวได้เช่นเดียวกับ <textarea> ในบางกรณี การใช้ contenteditable มีข้อดีเหนือกว่าองค์ประกอบแบบฟอร์มทั่วไป
อย่างไรก็ตาม ผู้ใช้วางข้อมูลลงในองค์ประกอบที่แก้ไขได้ และข้อมูลที่วางอาจมีการจัดรูปแบบ Rich Text ซึ่งอาจทำให้ผู้ใช้ที่เพียงต้องการวางข้อความที่ไม่มีการจัดรูปแบบลงในช่องต้องพบกับประสบการณ์การใช้งานที่ไม่น่าพอใจ ชุดค่าผสมแอตทริบิวต์/ค่า contenteditable="plaintext-only" จะช่วยป้องกันไม่ให้เกิดกรณีเช่นนี้ และเพิ่งเปิดตัวเป็น "ฐานใหม่" เมื่อเร็วๆ นี้ ดูข้อมูลเพิ่มเติมได้ที่โพสต์ประกาศ และดูวิธีมอบประสบการณ์การแก้ไขที่ดีขึ้นให้แก่ผู้ใช้ที่ต้องการวางข้อความในตำแหน่งต่างๆ โดยไม่ต้องมีองค์ประกอบอื่นๆ เพิ่มเติม
Intl.DurationFormat พร้อมใช้งานเป็นฐานข้อมูลใหม่แล้ว
คุณอาจเคยเข้าชมเว็บไซต์และเห็นข้อความสั้นๆ ที่บอกระยะเวลาจนถึงหรือหลังจากเหตุการณ์บางอย่าง ซึ่งมักอยู่ในรูปแบบสตริง เช่น "2 วัน 6 ชั่วโมง 3 นาที" ข้อมูลนี้มีประโยชน์สำหรับการแจ้งข้อมูลต่างๆ ที่เกิดขึ้นตามเวลา แต่มักมาจากไลบรารี นอกจากนี้ คุณอาจต้องการแสดงข้อมูลนี้ในหลายภาษา
ป้อน Intl.DurationFormat ซึ่งเป็นฟีเจอร์การปรับให้เหมาะกับผู้ใช้หลายภาษาที่เพิ่งเปลี่ยนเป็น "Baseline ใหม่" เมื่อใช้คลาส Intl.DurationFormat คุณสามารถส่งออบเจ็กต์ไปยังคอนสตรัคเตอร์ที่มีหน่วยเวลาที่ต้องการจัดรูปแบบเป็นสตริง และเกือบทุกภาษาที่นึกออก
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
สิ่งที่น่าตื่นเต้นคือหากแอปพลิเคชันของคุณใช้ไลบรารีเพื่อจัดรูปแบบสตริงเช่นนี้ ในเร็วๆ นี้คุณจะทำสิ่งนั้นได้โดยไม่ต้องใช้ไลบรารี ซึ่งจะช่วยประหยัดพื้นที่เก็บข้อมูลให้กับผู้ใช้ อ่านข้อมูลเพิ่มเติมได้ในโพสต์ประกาศเกี่ยวกับ Intl.DurationFormat และดูวิธีใช้ประโยชน์จากฟีเจอร์ใหม่ที่มีประโยชน์นี้
เกณฑ์พื้นฐานที่ W3C Breakouts Day ปี 2025
เมื่อเร็วๆ นี้ W3C ได้จัดวัน Breakouts ฉบับปี 2025 ซึ่งสมาชิกได้นำเสนอหัวข้อต่างๆ และมีการจัดเซสชันที่เป็นประโยชน์เกี่ยวกับ Baseline ในวันที่ 26 มีนาคม
หากคุณเพิ่งเริ่มใช้ Baseline เซสชันนี้จะให้ภาพรวมคร่าวๆ ที่ดีเยี่ยม เอกสารนี้ครอบคลุมข้อมูลเบื้องต้นเกี่ยวกับพื้นฐาน เช่น แนวคิดที่พร้อมใช้งานใหม่และพร้อมใช้งานอย่างแพร่หลาย และยังอธิบายถึงวิธีที่ข้อมูลเป็นตัวกำหนดคำจำกัดความเหล่านั้น โดยเริ่มจาก browser-compat-data ไปจนถึงข้อมูล web-features ที่ช่วยให้เราทราบว่าฟีเจอร์ใดอยู่ในเกณฑ์พื้นฐานใด
หากพลาดเซสชันนี้ไป ไม่ต้องกังวล สไลด์จากเซสชันพร้อมให้รับชมแล้ว ไปดูกันเลยหากอยากรู้
ข้อมูลโดยสรุปมีเท่านี้
ฉบับนี้ไม่เพียงแต่เป็นสรุปประจำเดือนเท่านั้น แต่ยังเป็นสรุปประจำไตรมาสด้วย หากพลาดฉบับก่อนหน้า โปรดดูฉบับเดือนมกราคมและเดือนกุมภาพันธ์เพื่อทบทวนข้อมูลทั้งหมดที่เกิดขึ้นกับ Baseline ในไตรมาสแรกของปีนี้ โปรดแจ้งให้เราทราบหากเราพลาดข้อมูลใดๆ ที่เกี่ยวข้องกับ Baseline และเราจะบันทึกข้อมูลดังกล่าวไว้ในฉบับต่อๆ ไป แล้วพบกันใหม่ในอีก 1 เดือน