Material You บนเว็บ
ดีไซน์ของ Google ดูดีมากบน Android ให้ความรู้สึกที่ลื่นไหล มีการใช้สีแบบไดนามิก (dynamic colors) และรูปทรงที่มีความโค้งมน
แต่นักพัฒนาเว็บต้องเผชิญกับความจริงที่ต่างออกไป การนำธีมเหล่านี้มาใช้บนเบราว์เซอร์นั้นสร้างอุปสรรคทางเทคนิคหลายอย่าง
ผมได้เขียนบทความใหม่เกี่ยวกับการนำ Material Design 3 มาใช้บนเว็บ โดยจะดูว่ามันทำงานร่วมกับ React และ Angular อย่างไร
นี่คือสิ่งที่คุณจะได้เรียนรู้:
- Dynamic colors และ SSR: การคำนวณพาเลตต์สี (color palettes) ในขณะ runtime ก่อให้เกิดปัญหา ซึ่งมักจะทำให้เกิดอาการ flash of unstyled content
- Layout geometry: การจัดการค่าความโค้งของมุม (corner radiuses) ขนาดใหญ่และ shape tokens โดยไม่ทำให้ระบบกริด (grid) ของคุณพัง
- Design token encapsulation: การส่งผ่าน custom tokens ผ่านไลบรารีอย่าง MUI หรือ Angular Material
ใช้บทความนี้หากคุณทำงานกับ CSS variables หรือ theme providers
อ่านบทความฉบับเต็มได้ที่นี่: https://dev.to/matin676/the-web-wasnt-built-for-material-you-but-we-build-it-anyway-2gdc