CSS สมัยใหม่ประกาศรองรับการอนิเมท display: none แล้ว
สิ้นสุดทศวรรษแห่งข้อจำกัด CSS ยยุคใหม่เปิดตัว @starting-style และ allow-discrete รองรับการอนิเมท display: none อย่างเป็นทางการในปี 2024
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- CSS ยุคใหม่รองรับการอนิเมทจาก display: none ได้แล้วโดยไม่ต้องพึ่ง JavaScript
- ใช้คุณสมบัติ @starting-style เพื่อจัดการสถานะเริ่มต้นก่อนองค์ประกอบปรากฏ
- ใช้ transition-behavior: allow-discrete ร่วมด้วยเพื่อควบคุมพฤติกรรมการสลับค่าแบบไม่อ่อนตัว
- ฟีเจอร์นี้รองรับข้ามเบราว์เซอร์หลักอย่างเป็นทางการตั้งแต่ปี 2024 เป็นต้นมา
ตลอดช่วงเวลากว่า 10 ปีที่ผ่านมา การทำอนิเมทองค์ประกอบที่มีการเปลี่ยนสถานะจาก display: none ถือเป็นเรื่องที่เป็นไปไม่ได้ในเพียว CSS โดยปราศจากการใช้ทริกฝั่ง JavaScript เช่น requestAnimationFrame หรือการเรียกใช้ void element.offsetWidth เพื่อบังคับให้เบราว์เซอร์คำนวณเลย์เอาต์ใหม่
ยุคสมัยเหล่านั้นได้ปิดฉากลงอย่างเป็นทางการแล้ว เนื่องจาก CSS สมัยใหม่ได้แนะนำสองฟีเจอร์พลิกโฉมวงการซึ่งกลายเป็นมาตรฐาน Baseline 2024 ครอบคลุมทั้งเบราว์เซอร์ Chrome, Safari และ Firefox เป็นที่เรียบร้อย
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
เพื่อให้เห็นภาพความจำเป็นของฟีเจอร์นี้ ให้ลองจินตนาการถึงเอนจิ้นการเรนเดอร์ของเบราว์เซอร์ราวกับโรงละครบรอดเวย์ ซึ่งก่อนหน้านี้ตัวละครที่อยู่หลังฉาก (display: none) จะไม่ถูกสร้างหรือนำมาพิจารณาในระบบเลย์เอาต์เลย ทำให้ไม่สามารถคำนวณการเคลื่อนไหวเฟรมแรกได้ทันทีที่ม่านถูกเปิดขึ้น
การมาถึงของ @starting-style และ allow-discrete นับเป็นการแก้ปัญหาทางสถาปัตยกรรมครั้งใหญ่ของ CSS เนื่องจากปกติแล้วเบราว์เซอร์จะละเลยการคำนวณสไตล์เริ่มต้นขององค์ประกอบที่ถูกซ่อนด้วย display: none การเพิ่มฟีเจอร์เหล่านี้จึงช่วยให้เบราว์เซอร์สามารถเตรียมสถานะเริ่มต้น (starting state) และยืดเวลาการลบออกจาก DOM tree (discrete property transitions) ได้อย่างราบรื่นโดยไม่ต้องพึ่งไลบรารีภายนอกอีกต่อไป
สำหรับนักพัฒนาที่ยังจำเป็นต้องรองรับเบราว์เซอร์รุ่นเก่า สามารถใช้งานกฎ @supports เพื่อตรวจสอบการรองรับฟีเจอร์นี้ล่วงหน้าได้ดังนี้:
- ตรวจสอบการรองรับ transition-behavior: allow-discrete
- กำหนดค่าอนิเมทเสริมเฉพาะเบราว์เซอร์ที่รองรับมาตรฐานใหม่
- ป้องกันข้อผิดพลาดในเบราว์เซอร์รุ่นเก่าที่ไม่รู้จักคำสั่งดังกล่าว
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น