color-scheme
- แม้ว่าเว็บไซต์จะรองรับโหมดมืด แต่ก็มักมีปัญหาที่แถบเลื่อนยังคงเป็นสีขาวสว่างอยู่
- หากตั้งค่าคุณสมบัติ
color-scheme เป็น dark light จะเป็นการบอกเบราว์เซอร์ว่าหน้าเว็บนี้รองรับทั้งโหมดมืดและโหมดสว่าง และแถบเลื่อนก็จะเปลี่ยนเป็นสีเข้มด้วย
- สามารถใช้เมตาแท็กเพื่อใช้
color-scheme กับเอกสารได้ ซึ่งช่วยให้เบราว์เซอร์ทราบค่าที่ผู้ใช้ต้องการก่อนที่ CSS จะถูกโหลด
- หากใช้ร่วมกับฟีเจอร์มีเดีย
prefers-color-scheme ก็จะควบคุมส่วนที่ต้องเปลี่ยนตามความต้องการของผู้ใช้ได้อย่างสมบูรณ์
- สามารถใช้ตัวเลือก
:has() เพื่อใช้คุณสมบัติ color-scheme กับองค์ประกอบรูทเมื่อ body มีคลาส dark
text-wrap
- บางครั้งการตัดบรรทัดของหัวข้อหรือคำบรรยายดูแปลก จนเหลือคำเพียงคำเดียวอยู่ในบรรทัดสุดท้าย
- หากใช้ค่า
balance กับคุณสมบัติ text-wrap จะช่วยให้หัวข้อบนเว็บไซต์ดูสมดุลมากขึ้น
- ฟีเจอร์นี้ไม่ยึดติดกับเบราว์เซอร์ใดเบราว์เซอร์หนึ่ง ทำงานได้ดีในสภาพแวดล้อมสมัยใหม่ และยังลดระดับการทำงานลงอย่างเหมาะสมในสภาพแวดล้อมเก่า
Scroll-margin
- เมื่อใช้ลิงก์แองเคอร์บนหน้าเว็บ มักเกิดปัญหาที่องค์ประกอบเป้าหมายถูกบังด้วยเฮดเดอร์แบบตรึงอยู่กับที่
- สามารถแก้ปัญหานี้ได้ด้วยคุณสมบัติ CSS
scroll-margin โดยตั้งค่า scroll-margin-top ให้เท่ากับความสูงของเฮดเดอร์แบบตรึง
- สามารถใช้ตัวเลือก
:is เพื่อให้การตั้งค่าเดียวกันกับหลายองค์ประกอบ เช่น h2, h3, h4 และยังใช้หน่วยอย่าง ex หรือ lh เพื่อตั้งระยะห่างแบบไดนามิกได้
4 ความคิดเห็น
นี่เป็นเคล็ดลับที่มีประโยชน์มากจริง ๆ ขอบคุณครับ
แถบเลื่อนดีนะ
แถบเลื่อนสีขาวดูเด่นเกินไปหน่อย เลยเอาไปใช้กับโหมด dark/light ใน GeekNews ได้ทันทีเหมือนกันนี่เอง มีวิธีง่าย ๆ แบบนี้นี่เอง
พอเอาไปเทียบกับ Naver แล้ว ความต่างชัดเจนมากเลยนะ แม้แต่สิ่งที่ Naver ยังทำไม่ได้(?) GeekNews ก็ทำสำเร็จแล้ว...!