CSS-Tricks เผยอนาคต CSS Navigation Matching
เจาะลึกแนวคิด CSS Navigation Matching จาก Bramus และมุมมองจากชุมชน CSS-Tricks เกี่ยวกับทิศทางและกฎใหม่ๆ ในอนาคต
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Bramus เสนอตัวอย่างการใช้ @navigation เพื่อกำหนดการเปลี่ยนผ่านระหว่างหน้า
- พรีวิวการใช้กฎระหว่างจุดพิกัด เช่น --contact และ --contact-confirmation
- ข้อเสนอแนะเรื่องการรวม at-rule สำหรับโครงสร้างข้อมูลเพื่อลดความซับซ้อน
- ความท้าทายในการเรียนรู้กฎใหม่ๆ ที่เพิ่มขึ้นอย่างรวดเร็วในปัจจุบัน
ในยุคที่เทคโนโลยีเว็บกำลังพัฒนาอย่างต่อเนื่อง CSS-Tricks ได้หยิบยกแนวคิดที่น่าสนใจเกี่ยวกับฟีเจอร์ใหม่ในอนาคตอย่าง CSS Navigation Matching มาพูดถึง โดย Bramus ได้นำเสนอตัวอย่างสมมติในการใช้งานฟีเจอร์นี้เพื่อให้เห็นภาพความสามารถที่กำลังถูกพัฒนาขึ้น
แนวคิดดังกล่าวช่วยให้สามารถตรวจสอบการนำทางระหว่างตำแหน่งต่างๆ ได้ผ่าน custom idents ที่ลงทะเบียนไว้ใน @location โดยหากการนำทางตรงกับจุดที่กำหนดไว้ ระบบก็จะทำงานตามที่ตั้งค่าไว้ทันที
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
นอกจากนี้ยังมีรูปแบบการเขียนโค้ดที่สะอาดตาและเข้าใจง่ายยิ่งขึ้น เช่นการกำหนดให้เกิด transition เมื่อมีการนำทางระหว่างสองหน้า ดังตัวอย่างโค้ดด้านล่างนี้
- ใช้งาน `@navigation (between: --contact and --contact-confirmation)` เพื่อระบุขอบเขตการทำงาน
- สามารถประยุกต์ใช้งานในกรณีที่ไม่เกิดการแมตช์ได้เช่นกัน
- สเปกยังได้กล่าวถึง pseudo-class อย่าง `:link-to()` สำหรับการจัดสไตล์องค์ประกอบที่เชื่อมโยงไปยังตำแหน่งเฉพาะ
การนำเสนอกฎใหม่ๆ เช่น @location หรือ @navigation สะท้อนถึงความพยายามของวงการเว็บเดเวลอปเมนต์ในการนำฟังก์ชันการทำงานระดับแอปพลิเคชันมาสู่ระดับ CSS โดยตรง ซึ่งช่วยลดภาระของ JavaScript แต่ในขณะเดียวกันก็สร้างความท้าทายด้านความซับซ้อนและเส้นโค้งการเรียนรู้ (Learning Curve) ที่นักพัฒนาต้องปรับตัวตามให้ทัน
ในฝั่งของคอมมูนิตี้ Lee Meyer เพื่อนร่วมวงการ ได้เสนอความคิดเห็นว่าการเพิ่มพารามิเตอร์เช่น ?blog บน URL อาจช่วยเพิ่มพลังในการจับคู่แพตเทิร์น URL ได้อีกทางหนึ่ง ขณะที่ Preethi จากช่อง Slack ของ CSS-Tricks ได้แสดงความเห็นที่น่าสนใจเกี่ยวกับการรวม at-rule สำหรับโครงสร้างข้อมูลทั้งหมด
Preethi ระบุว่าการมี at-rule แบบรวมศูนย์คล้ายกับ @property สำหรับคู่ค่าคุณสมบัติ น่าจะช่วยลดความยุ่งยากในการเรียนรู้กฎใหม่ๆ ที่มีจำนวนมากในปัจจุบัน ไม่ว่าจะเป็น @color-profile, @position-try หรือ @location
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น