CSS-Tricks สรุปฟีเจอร์เว็บเด่น: Tooltips, Grid และอื่นๆ
CSS-Tricks ฉบับที่ 18 พาเจาะลึกเทคนิคเว็บเด่น ทั้งเครื่องมือสร้าง tooltip ทันใจ, MicroLighter ไฮไลต์โค้ด, การดึงค่า CSS Grid เข้าตัวแปร และอัปเดตเบราว์เซอร์ใหม่
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Abhishek Jakhar และ Chris Coyier เสนอวิธีทำ tooltip โดยใช้ interest invokers บน Chrome
- Temani Afif สาธิตวิธีดึงข้อมูลแถวและคอลัมน์ของ CSS Grid มาเก็บไว้ในตัวแปร CSS custom properties
- Bramus เสนอตัวเลือก class prefix selector และฟังก์ชัน @supports named-feature()
- การอัปเดตฟีเจอร์ใหม่บน Firefox 154 และ Chrome 152 เช่น sibling-count(), autocorrect และ flex-wrap: balance
วงการพัฒนาเว็บกลับมาอัปเดตประเด็นน่าสนใจอีกครั้งผ่านสรุปบทความชุด What’s !important ฉบับที่ 18 โดยเริ่มต้นด้วยแนวคิดการสร้างทูลทิปแบบหน่วงเวลาแต่แสดงผลทันทีเมื่อผู้ใช้งานเลื่อนเมาส์ออก ซึ่ง Abhishek Jakhar ได้อธิบายเหตุผลว่าการทำเช่นนี้ช่วยป้องกันไม่ให้ทูลทิปแสดงขึ้นมาโดยบังเอิญ และเมื่อผู้ใช้ไม่ต้องการดูก็จะหายไปในทันที พร้อมทั้งแนะนำวิธีนำไปใช้งานจริง ขณะที่ Chris Coyier ได้ต่อยอดด้วยการนำเสนอโค้ดสมัยใหม่ที่ใช้ความสามารถของ interest invokers ซึ่งมาพร้อมกับพรอพเพอตี้ interest-delay-start และ interest-delay-end แม้ว่าในปัจจุบันจะมีเพียงเบราว์เซอร์ Chrome เท่านั้นที่รองรับฟีเจอร์นี้
ในส่วนของการจัดการโค้ด Dave Rupert ได้พัฒนาเครื่องมือขนาดเล็กที่ชื่อว่า MicroLighter ซึ่งอาศัยความสามารถของ Custom Highlight API แบบใหม่ในรูปแบบของ ::highlight() สำหรับทำ syntax highlighter พร้อมทั้งอธิบายวิธีการใช้งานร่วมกับ Geoff ส่วนประเด็นเรื่องเลย์เอาต์ Temani Afif ได้สาธิตวิธีดึงข้อมูลโครงสร้าง CSS grid เข้าไปเก็บไว้ใน CSS custom properties โดยสามารถดึงจำนวนแถว คอลัมน์ รวมถึงพิกัด x และ y ของแต่ละเซลล์ได้ภายใต้เงื่อนไขว่าคอลัมน์ต้องมีความกว้างเท่ากัน ซึ่งช่วยให้นักพัฒนาสามารถนำไปประยุกต์ใช้เพื่อตรวจสอบระยะความใกล้ของเมาส์หรือ hover proximity ได้อย่างน่าสนใจ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ประเด็นเรื่องโหมดการแสดงผลยังคงเป็นที่ถกเถียงกันเมื่อ Lea Verou สนับสนุนการใช้งานแบบสองสถานะ ขณะที่ Bramus เลือกแบบสามสถานะ นอกจากนี้ Bramus ยังได้แนะนำตัวเลือกใหม่อย่าง class prefix selector แม้ว่าในขณะนี้จะยังไม่มีเบราว์เซอร์ใดรองรับ แต่ด้วยความเรียบง่ายและมีประสิทธิภาพสูงกว่า attribute selectors ทั่วไป ทำให้คาดว่าจะได้รับการผลักดันอย่างรวดเร็ว โดยมีรูปแบบการใช้งานเช่น .something-* นอกจากนี้ Bramus ยังได้แนะนำฟังก์ชัน @supports named-feature() ซึ่งรองรับใน Chrome แล้ว ช่วยให้สามารถตรวจสอบเงื่อนไขเฉพาะเจาะจงของเบราว์เซอร์ที่ปกติไม่สามารถตรวจสอบได้ เช่น การรองรับการแปลงพิกัดเมื่อใช้งานองค์ประกอบแบบ anchor positioning
การติดตามฟีเจอร์ใหม่ๆ เช่น Custom Highlight API และ interest invokers สะท้อนให้เห็นว่าวงการ CSS กำลังเคลื่อนตัวไปสู่การจัดการตรรกะที่ซับซ้อนได้โดยตรงในสไตล์ชีท ลดการพึ่งพา JavaScript ในหลายๆ ส่วน นักพัฒนาจึงควรทำความเข้าใจรูปแบบการทำงานแบบ Progressive Enhancement เพื่อให้เว็บไซต์ยังคงใช้งานได้ดีบนเบราว์เซอร์รุ่นเก่าในขณะที่พร้อมมอบประสบการณ์ที่ดีที่สุดบนเบราว์เซอร์รุ่นใหม่
ทางด้านฟีเจอร์ใหม่ที่เพิ่มเข้ามาใน Chrome อย่าง flex-wrap: balance ก็ช่วยแก้ปัญหาการจัดเรียงข้อความหรือไอเทมใน flex container ให้มีความสมดุลคล้ายกับฟีเจอร์ text-wrap: balance โดย Ahmad Shadeed ได้อธิบายถึงวิธีการนำไปใช้งาน นอกจากนี้ในส่วนของการอัปเดตแพลตฟอร์มเว็บประจำเบราว์เซอร์เวอร์ชันล่าสุดยังระบุว่า Firefox 154 ได้เพิ่มการรองรับ sibling-count(), sibling-index() รวมถึงชุดพรอพเพอตี้ text-box-trim, text-box-edge และ text-box ซึ่งตอนนี้อยู่ในสถานะ Baseline เรียบร้อยแล้ว ส่วน Chrome 152 ได้เพิ่มฟีเจอร์ autocorrect และ alpha() เข้ามาเช่นกัน
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น