CSS-Tricks อัปเดตฟีเจอร์เด่น: Custom Highlight API
สรุปฟีเจอร์ CSS ล่าสุดจาก CSS-Tricks รวมวิธีใช้ Custom Highlight API, การแก้ปัญหา text-stroke ด้วย paint-order และ scroll-axis-lock
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การใช้งาน CSS Custom Highlight API ร่วมกับ JavaScript
- เทคนิคการแก้ไขปัญหาขอบตัวอักษรทับซ้อนด้วย paint-order
- การใช้ property scroll-axis-lock สำหรับการเลื่อนหน้าจอแนวทแยง
เว็บไซต์ CSS-Tricks กลับมาอีกครั้งกับบทความรวบรวมเทคนิคการเขียนเว็บและการพัฒนาฝั่งหน้าบ้านที่น่าสนใจ โดยในฉบับนี้ Sunkanmi Fafowora ได้นำเสนอการใช้งาน CSS Custom Highlight API ซึ่งปัจจุบันได้รับการสนับสนุนจากเว็บเบราว์เซอร์หลักทุกตัวแล้ว แม้ว่าชื่อจะขึ้นต้นด้วย CSS และควบคุมการแสดงผลผ่าน pseudo-element อย่าง ::highlight() แต่เบื้องหลังการทำงานหลักต้องอาศัย JavaScript เป็นตัวขับเคลื่อน
ในส่วนของปัญหาการแสดงผลตัวอักษร Tyler Sticka ได้แชร์วิธีแก้ปัญหา text-stroke ที่มักจะแสดงผลไม่สวยงามตรงขอบด้านใน เนื่องจากคุณสมบัตินี้ถูกจัดวางไว้ตรงกลาง ทำให้ครึ่งหนึ่งล้นออกนอกตัวอักษรและอีกครึ่งหนึ่งกินเข้าไปด้านใน แม้ว่า property อย่าง paint-order จะไม่ได้ช่วยเปลี่ยนตำแหน่งการจัดวาง แต่ก็ช่วยให้การเติมสีข้อความถูกทับลงบนขอบด้านในที่ดูไม่เรียบร้อยได้ นอกจากนี้ prefix แบบเดิมอย่าง -webkit-text-stroke ยังคงมีความจำเป็นสำหรับการใช้งานร่วมกับเบราว์เซอร์ต่างๆ ในปัจจุบัน
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ขณะเดียวกัน Lea Verou ได้นำเสนอแนวทางการสร้างโครงร่าง UI หรือ skeleton UIs โดยใช้ CSS ล้วน ซึ่งมีสมาชิกในคอมมูนิตี้มาร่วมแชร์ไอเดียเพิ่มเติม รวมถึงการใช้ box-decoration-break: clone และการผสมผสานระหว่าง text-decoration ความหนาพิเศษ สีโปร่งใส และการใช้ masks ร่วมด้วย เพื่อให้การออกแบบมีความยืดหยุ่นและน่าสนใจยิ่งขึ้น
การอัปเดตเทคนิค CSS เหล่านี้สะท้อนให้เห็นว่ามาตรฐานเว็บสมัยใหม่พยายามลดการพึ่งพาโค้ด JavaScript ที่ซับซ้อนสำหรับการตกแต่งหน้าตา UI โดยเปิดให้ใช้ความสามารถของเบราว์เซอร์โดยตรง เช่น การจัดการไฮไลต์ข้อความหรือการล็อกแกนการเลื่อนหน้าจอ ซึ่งช่วยเพิ่มประสิทธิภาพการทำงานของเว็บไซต์โดยรวม
ทางด้าน Ahmad Shadeed ได้สาธิตการใช้งานหน่วยวัด lh ซึ่งมีค่าเท่ากับค่า line-height ที่ถูกคำนวณแล้ว เพื่อนำไปประยุกต์ใช้กับการออกแบบเลย์เอาต์ที่ยืดหยุ่นตามขนาดบรรทัด นอกจากนี้ Bramus ยังได้เผยแพร่ฟีเจอร์ใหม่อย่าง scroll-axis-lock ที่ช่วยให้การเลื่อนหน้าจอแบบทแยงมุมทำได้จริง รวมถึง CSS navigation matching ที่ช่วยให้เราสามารถกำหนดสไตล์ของธาตุตามทิศทางการนำทางของผู้ใช้งานได้อีกด้วย
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น