3 คุณสมบัติ CSS สมัยใหม่ที่เว็บไซต์ควรมี

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 เพื่อตั้งระยะห่างแบบไดนามิกได้

[amino014]

นี่เป็นเคล็ดลับที่มีประโยชน์มากจริง ๆ ขอบคุณครับ

[arfwene]

แถบเลื่อนดีนะ

[xguru]

แถบเลื่อนสีขาวดูเด่นเกินไปหน่อย เลยเอาไปใช้กับโหมด dark/light ใน GeekNews ได้ทันทีเหมือนกันนี่เอง มีวิธีง่าย ๆ แบบนี้นี่เอง

[kuroneko]

พอเอาไปเทียบกับ Naver แล้ว ความต่างชัดเจนมากเลยนะ แม้แต่สิ่งที่ Naver ยังทำไม่ได้(?) GeekNews ก็ทำสำเร็จแล้ว...!