การควบคุมเลย์เอาต์แบบมาโครและไมโครในยุคใหม่ของการออกแบบเว็บที่ตอบสนองตามอุปกรณ์
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ในปัจจุบัน
ทุกวันนี้ เมื่อใช้คำว่า "การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์" คุณอาจกำลังนึกถึงการใช้คำค้นหาสื่อเพื่อเปลี่ยนเลย์เอาต์เมื่อปรับขนาดการออกแบบจากขนาดอุปกรณ์เคลื่อนที่ ขนาดแท็บเล็ต ไปจนถึงขนาดเดสก์ท็อป
แต่อีกไม่นาน มุมมองเกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์นี้อาจถือว่าล้าสมัยพอๆ กับการใช้ตารางสำหรับเลย์เอาต์หน้าเว็บ
คำค้นหาสื่อตามวิวพอร์ตจะให้เครื่องมือที่มีประสิทธิภาพบางอย่างแก่คุณ แต่กลับมีข้อมูลไม่มากพอ ทำให้ไม่สามารถตอบสนองความต้องการของผู้ใช้ และไม่สามารถแทรกสไตล์ที่ตอบสนองตามอุปกรณ์ลงในคอมโพเนนต์ด้วยตนเองได้
คุณสามารถใช้ข้อมูลวิวพอร์ตส่วนกลางเพื่อจัดรูปแบบคอมโพเนนต์ได้ แต่คอมโพเนนต์ก็ไม่ได้เป็นเจ้าของสไตล์ และจะทำงานไม่ได้เมื่อระบบออกแบบของเราเป็นแบบใช้คอมโพเนนต์และไม่ได้อิงตามหน้าเว็บ
ข่าวดีคือระบบนิเวศกำลังเปลี่ยนแปลง และมีการเปลี่ยนแปลงอย่างรวดเร็ว CSS กำลังพัฒนาและยุคใหม่ของการออกแบบที่ตอบสนองตามอุปกรณ์ก็กำลังจะเริ่มต้นขึ้น
เราเห็นสิ่งที่เกิดขึ้นทุกๆ 10 ปีโดยประมาณ เมื่อ 10 ปีที่แล้ว ช่วงปี 2010-2012 เราได้เห็นการเปลี่ยนแปลง ครั้งใหญ่จากการออกแบบที่ตอบสนองตามอุปกรณ์และอุปกรณ์เคลื่อนที่ ตลอดจนการเกิดขึ้นของ CSS3
![ไทม์ไลน์ของรูปแบบ CSS](https://web.dev/static/articles/new-responsive/image/css-styles-timeline-8a3c7f8900dd5.png?authuser=6&hl=th)
ผลลัพธ์ก็คือระบบนิเวศพร้อมสำหรับการเปลี่ยนแปลงครั้งใหญ่กับ CSS วิศวกรของ Chrome และทั่วทั้งแพลตฟอร์มเว็บกำลังสร้างต้นแบบ ระบุ และเริ่มนำไปใช้สำหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ยุคใหม่
การอัปเดตเหล่านี้รวมถึงฟีเจอร์สื่อที่อิงตามค่ากำหนดของผู้ใช้ คำค้นหาคอนเทนเนอร์ และคำค้นหาสื่อสำหรับหน้าจอประเภทใหม่ๆ เช่น หน้าจอแบบพับได้
ปรับเปลี่ยนตามผู้ใช้
ฟีเจอร์สื่อค่ากำหนดของผู้ใช้แบบใหม่จะช่วยให้คุณสามารถจัดรูปแบบประสบการณ์เว็บ ที่สอดคล้องกับความต้องการและความต้องการเฉพาะของผู้ใช้ ซึ่งหมายความว่าฟีเจอร์สื่อที่ชอบจะช่วยให้คุณปรับประสบการณ์ของผู้ใช้ให้เข้ากับประสบการณ์ของผู้ใช้ได้
ฟีเจอร์สื่อค่ากำหนดของผู้ใช้เหล่านี้รวมถึง
prefers-reduced-motion
prefers-contrast
prefers-reduced-transparency
prefers-color-scheme
inverted-colors
- และอื่นๆ
ฟีเจอร์ค่ากำหนดจะทำงานตามค่ากำหนดที่ผู้ใช้กำหนดไว้ในระบบปฏิบัติการ และจะช่วยสร้างประสบการณ์การใช้งานเว็บที่มีประสิทธิภาพและปรับเปลี่ยนในแบบของผู้ใช้มากขึ้น โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ต้องการการช่วยเหลือพิเศษ
prefers-reduced-motion
ผู้ใช้ที่ตั้งค่ากำหนดระบบปฏิบัติการสำหรับการเคลื่อนไหวที่ลดลงจะขอภาพเคลื่อนไหวน้อยลงเมื่อใช้คอมพิวเตอร์โดยทั่วไป ดังนั้น จึงมีแนวโน้มว่าพวกเขาจะไม่ชื่นชอบหน้าจอเกริ่นนำที่ฉูดฉาด ภาพเคลื่อนไหวการพลิกการ์ด ตัวโหลดที่ซับซ้อน หรือภาพเคลื่อนไหวกะพริบอื่นๆ ขณะใช้เว็บ
คุณสามารถใช้ prefers-reduced-motion
เพื่อออกแบบหน้าเว็บที่ลดการเคลื่อนไหวได้ และสร้างประสบการณ์การใช้งานที่เพิ่มประสิทธิภาพให้กับการเคลื่อนไหวสำหรับผู้ที่ไม่ได้ตั้งค่าค่ากำหนดนี้
การ์ดใบนี้มีข้อมูลทั้ง 2 ด้าน ประสบการณ์การปรับลดการเคลื่อนไหวพื้นฐานคือการครอสเฟดเพื่อแสดงข้อมูลนั้น ส่วนประสบการณ์ที่เพิ่มประสิทธิภาพให้การเคลื่อนไหวจะเป็นแค่การพลิกการ์ด
"การลดการเคลื่อนไหว" ไม่ควรหมายถึง "ไม่มีการเคลื่อนไหว" เพราะการเคลื่อนไหวเป็นสิ่งสำคัญ ในการถ่ายทอดข้อมูลบนโลกออนไลน์ แต่ให้มอบประสบการณ์พื้นฐานที่แข็งแกร่งซึ่งช่วยนำทางผู้ใช้โดยไม่ต้องมีการเคลื่อนไหวที่ไม่จำเป็น และปรับปรุงประสบการณ์ในการใช้งานให้ดียิ่งขึ้นสำหรับผู้ใช้โดยไม่ต้องมีความต้องการหรือการช่วยเหลือพิเศษเหล่านั้น
prefers-color-scheme
ฟีเจอร์สื่อค่ากำหนดอีกอย่างคือ
prefers-color-scheme
ฟีเจอร์นี้ช่วยให้คุณปรับแต่ง UI ตามธีมที่ผู้ใช้ต้องการ ในระบบปฏิบัติการ ไม่ว่าจะเป็นเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ผู้ใช้จะตั้งค่าธีมสว่าง มืด หรืออัตโนมัติได้ ซึ่งจะเปลี่ยนตามช่วงเวลาของวัน
หากคุณตั้งค่าหน้าเว็บโดยใช้พร็อพเพอร์ตี้ที่กำหนดเองของ CSS การสลับค่าสีก็จะไม่ยุ่งยาก คุณอัปเดตค่าธีมสีได้อย่างรวดเร็ว เช่น backgroundColor
และ textOnPrimary
เพื่อปรับให้สอดคล้องกับธีมใหม่ภายในการค้นหาสื่อแบบไดนามิก
คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บในการจำลองแทนการเปิดค่ากำหนดของระบบทุกครั้ง เพื่อให้ทดสอบการค้นหาค่ากำหนดเหล่านี้ได้ง่ายขึ้น
การออกแบบสำหรับธีมมืด
เมื่อออกแบบธีมมืด ไม่ใช่แค่การกลับพื้นหลังและสีข้อความหรือแถบเลื่อนสีเข้ม มีเรื่องพิจารณาบางอย่าง ที่คุณอาจคาดไม่ถึง ตัวอย่างเช่น คุณอาจต้องทำให้สีบนพื้นหลังสีเข้มจางลงเพื่อลดการสั่นของภาพ
แทนที่จะใช้เงาเพื่อสร้างความลึกและวาดองค์ประกอบไปข้างหน้า คุณอาจต้องการใช้แสงในสีพื้นหลังขององค์ประกอบเพื่อวาดองค์ประกอบนั้นไปข้างหน้า เพราะเงาจะไม่มีประสิทธิภาพเท่าบนพื้นหลังสีเข้ม
ธีมมืดไม่เพียงมอบประสบการณ์การใช้งานที่เหมาะกับผู้ใช้มากขึ้น แต่ยังช่วยปรับปรุงอายุการใช้งานแบตเตอรี่ได้อย่างมากในหน้าจอ AMOLED ซึ่งก็คือหน้าจอที่เราเห็นในโทรศัพท์ระดับไฮเอนด์รุ่นใหม่ๆ และกำลังได้รับความนิยมมากขึ้นเรื่อยๆ ในอุปกรณ์เคลื่อนที่
การศึกษาของ Android ในปี 2018 เกี่ยวกับธีมมืดแสดงให้เห็นว่าช่วยประหยัดพลังงานได้ถึง 60% โดยขึ้นอยู่กับความสว่างของหน้าจอและอินเทอร์เฟซผู้ใช้โดยรวม สถิติ 60% มาจากการเปรียบเทียบ หน้าจอเล่น YouTube กับวิดีโอที่หยุดชั่วคราวที่ความสว่างหน้าจอ 100% โดยใช้ ธีมมืดสำหรับ UI ของแอปกับธีมสว่าง
คุณควรมอบประสบการณ์การใช้งานธีมมืดให้ผู้ใช้ทุกครั้งที่เป็นไปได้
ปรับเปลี่ยนตามคอนเทนเนอร์
สิ่งที่น่าตื่นเต้นที่สุดอย่างหนึ่งใน CSS คือการค้นหาคอนเทนเนอร์ หรือที่มักเรียกว่าการค้นหาองค์ประกอบ เป็นเรื่องยากที่จะบอกว่าการเปลี่ยนจากการออกแบบที่ตอบสนองตามหน้าเว็บไปเป็นการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ตามคอนเทนเนอร์จะทำอย่างไรเพื่อที่จะพัฒนาระบบนิเวศการออกแบบ
ต่อไปนี้เป็นตัวอย่างความสามารถที่มีประสิทธิภาพของการค้นหาคอนเทนเนอร์ คุณสามารถแก้ไขรูปแบบขององค์ประกอบการ์ดได้ ซึ่งรวมถึงรายการลิงก์ ขนาดแบบอักษร และเลย์เอาต์โดยรวมตามคอนเทนเนอร์ระดับบนสุด
ตัวอย่างนี้แสดงคอมโพเนนต์ที่เหมือนกัน 2 รายการซึ่งมีขนาดคอนเทนเนอร์ต่างกัน 2 ขนาด โดยทั้งคู่กินพื้นที่ในเลย์เอาต์ที่สร้างโดยใช้ตารางกริด CSS องค์ประกอบแต่ละอย่างจะพอดีกับการจัดสรรพื้นที่ ที่ไม่ซ้ำกัน แล้วปรับแต่งเอง
ความยืดหยุ่นในระดับนี้เป็นสิ่งที่ทำไม่ได้หากใช้คำค้นหาตามสื่อเพียงอย่างเดียว
คำค้นหาคอนเทนเนอร์ให้แนวทางการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ได้หลากหลายกว่า ซึ่งหมายความว่าหากคุณวางคอมโพเนนต์การ์ดนี้ในแถบด้านข้างหรือส่วนหลัก หรือภายในตารางกริดภายในส่วนเนื้อหาหลักของหน้าเว็บ คอมโพเนนต์จะเป็นเจ้าของข้อมูลที่ปรับเปลี่ยนตามอุปกรณ์และขนาดตามคอนเทนเนอร์ ไม่ใช่วิวพอร์ต
การดำเนินการนี้ต้องใช้กฎที่ควบคุมโดย @container
ฟีเจอร์นี้ทำงานในลักษณะเดียวกับคำค้นหาสื่อที่มี @media
แต่ @container
จะสืบค้นข้อมูลในคอนเทนเนอร์ระดับบนแทนวิวพอร์ตและ User Agent
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
ขั้นแรก ให้ตั้งค่าการควบคุมในองค์ประกอบระดับบน จากนั้นเขียนคำค้นหา @container
เพื่อจัดรูปแบบองค์ประกอบภายในคอนเทนเนอร์ตามขนาดโดยใช้ min-width
หรือ max-width
โค้ดด้านบนใช้ max-width
และตั้งค่าลิงก์เป็น display:none
รวมถึงลดขนาดแบบอักษรของเวลาเมื่อคอนเทนเนอร์มีความกว้างน้อยกว่า 850px
การ์ดการค้นหาคอนเทนเนอร์
ในเว็บไซต์ต้นไม้สาธิตนี้ การ์ดผลิตภัณฑ์แต่ละใบ ซึ่งรวมถึงการ์ดในส่วนหลัก แถบด้านข้างของสินค้าที่ดูล่าสุด และตารางกริดของผลิตภัณฑ์ เป็นองค์ประกอบเดียวกันทั้งหมดและมีมาร์กอัปเดียวกัน
ไม่มีคำค้นหาสื่อในการสร้างเลย์เอาต์ทั้งหมด แต่ใช้เพียงคำค้นหาคอนเทนเนอร์เท่านั้น ซึ่งจะช่วยให้การ์ดผลิตภัณฑ์แต่ละรายการย้ายไปยังเลย์เอาต์ที่เหมาะสมเพื่อเพิ่มพื้นที่ว่างได้ ตัวอย่างเช่น ตารางกริดใช้เลย์เอาต์คอลัมน์ minmax เพื่อให้องค์ประกอบ เข้าสู่พื้นที่ของตน และจัดเลย์เอาต์ตารางกริดใหม่เมื่อพื้นที่นั้นถูกบีบอัดมากเกินไป (ซึ่งหมายความว่าองค์ประกอบถึงขนาดขั้นต่ำ)
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
เมื่อมีพื้นที่ว่างอย่างน้อย 350px
ในตารางกริด เลย์เอาต์ของการ์ดจะแสดงในแนวนอนโดยตั้งค่าเป็น display: flex
ซึ่งมีทิศทางยืดหยุ่นเริ่มต้นของ "แถว"
ด้วยพื้นที่น้อย การ์ดผลิตภัณฑ์จะเรียงซ้อนกัน การ์ดผลิตภัณฑ์แต่ละใบมีรูปแบบของตัวเอง ซึ่งเป็นไปไม่ได้หากใช้รูปแบบส่วนกลางเพียงอย่างเดียว
การรวมคำค้นหาคอนเทนเนอร์กับคำค้นหาสื่อ
การค้นหาคอนเทนเนอร์มี Use Case มากมายหลายกรณี โดยมีข้อหนึ่งเป็นคอมโพเนนต์ปฏิทิน คุณสามารถใช้การค้นหาคอนเทนเนอร์เพื่อจัดเรียงกิจกรรมในปฏิทินและส่วนอื่นๆ ใหม่ตามความกว้างของกิจกรรมหลัก
คอนเทนเนอร์สาธิตการค้นหานี้จะเปลี่ยนเลย์เอาต์และรูปแบบสำหรับวันที่และวันในสัปดาห์ รวมถึงปรับระยะขอบและขนาดแบบอักษรในกิจกรรมที่กำหนดเวลาไว้เพื่อให้เข้ากับพื้นที่มากยิ่งขึ้น
จากนั้นใช้คิวรี่สื่อเพื่อเปลี่ยนเลย์เอาต์ทั้งหมดสำหรับหน้าจอขนาดเล็ก ตัวอย่างนี้แสดงให้เห็นว่าการcombineคำค้นหาสื่อ (การปรับสไตล์ส่วนกลางหรือสไตล์มาโคร) กับคำค้นหาคอนเทนเนอร์ (การปรับรายการย่อยของคอนเทนเนอร์และสไตล์ไมโคร) นั้นมีประสิทธิภาพเพียงใด
ตอนนี้เราสามารถนึกถึงเลย์เอาต์แบบมาโครและไมโครภายในคอมโพเนนต์ UI เดียวกัน เพื่อให้สามารถตัดสินใจเกี่ยวกับการออกแบบที่ต่างกันเล็กน้อย
การใช้การค้นหาคอนเทนเนอร์ในปัจจุบัน
เดโมเหล่านี้พร้อมให้เล่นแล้วหลังจาก Flag ใน Chrome Canary ไปที่ about://flags
ใน Canary แล้วเปิดธง #enable-container-queries
การดำเนินการนี้จะเปิดใช้การรองรับค่า @container
, inline-size
และ block-size
สำหรับพร็อพเพอร์ตี้ contain
และการติดตั้งใช้งานตารางกริด LayoutNG
แฟล็กนี้ยังเปิดใช้ฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่เกี่ยวข้องได้ด้วย ดูวิธีตรวจสอบและแก้ไขข้อบกพร่องของคำค้นหาคอนเทนเนอร์ในเครื่องมือสำหรับนักพัฒนาเว็บ
รูปแบบที่กำหนดขอบเขต
เพื่อต่อยอดการค้นหาคอนเทนเนอร์ คณะทำงานของ CSS จะร่วมพูดคุยเรื่องสไตล์ที่มีขอบเขตอย่างขะมักเขม้นเพื่อช่วยในการตั้งชื่อที่เหมาะสมและใช้การหลีกเลี่ยงการชนกันของคอมโพเนนต์
![แผนภาพรูปแบบที่กำหนดขอบเขต](https://web.dev/static/articles/new-responsive/image/scoped-styles-diagram-a9c242713a78.png?authuser=6&hl=th)
สไตล์ที่กำหนดขอบเขตรองรับการจัดรูปแบบส่งผ่านและการจัดรูปแบบเฉพาะคอมโพเนนต์เพื่อหลีกเลี่ยงการขัดแย้งกันในการตั้งชื่อ ซึ่งเป็นสิ่งที่เฟรมเวิร์กและปลั๊กอินหลายรายการ เช่น โมดูล CSS ช่วยให้เราทำได้ภายในเฟรมเวิร์กอยู่แล้ว ตอนนี้ข้อกำหนดนี้จะทำให้เราสามารถเขียนสไตล์ที่ห่อหุ้มไว้ตั้งแต่ต้นสำหรับคอมโพเนนต์ของเราเองด้วย CSS ที่อ่านได้โดยไม่จำเป็นต้องปรับมาร์กอัป
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
การกำหนดขอบเขตจะทำให้เราสามารถสร้างตัวเลือก "ทรงโดนัท" ซึ่งเราสามารถระบุตำแหน่งที่จะห่อหุ้มรูปแบบ และจุดที่จะแยกสไตล์ที่กำหนดขอบเขตไว้ เพื่ออ้างอิงสไตล์ที่เป็นสากลมากขึ้น
ตัวอย่างเช่น แผงแท็บที่ต้องการให้แท็บได้รับรูปแบบที่มีขอบเขต และแผงภายในแท็บเพื่อรับสไตล์หลัก
ปรับเปลี่ยนตามรูปแบบของอุปกรณ์
หัวข้อถัดไปในการสนทนาของเราเกี่ยวกับยุคใหม่ของการออกแบบที่ตอบสนองตามอุปกรณ์คือการเปลี่ยนรูปแบบของอุปกรณ์และความเป็นไปได้ที่เพิ่มขึ้นสำหรับสิ่งที่เราต้องออกแบบสำหรับชุมชนเว็บ (เช่น หน้าจอที่เปลี่ยนรูปร่างหรือ Virtual Reality)
หน้าจอพับได้หรือยืดหยุ่นได้ และการออกแบบเพื่อการขยายหน้าจอเป็นตัวอย่างหนึ่งที่เราจะเห็นการเปลี่ยนแปลงรูปแบบของอุปกรณ์ในปัจจุบัน และการขยายขอบเขตหน้าจอเป็นอีกข้อกำหนดหนึ่งที่มีการพัฒนาเพื่อให้ครอบคลุมรูปแบบและความต้องการใหม่ๆ เหล่านี้
คำค้นหาสื่อแบบทดลองสำหรับการขยายหน้าจออาจช่วยเราได้ในส่วนนี้ ขณะนี้มีการทำงานเช่นนี้: @media
(spanning: <type of fold>)
เดโมตั้งค่าเลย์เอาต์แบบตารางกริดที่มี 2 คอลัมน์ โดยคอลัมน์หนึ่งมีความกว้าง --sidebar-width ซึ่งเท่ากับ 5rem โดยค่าเริ่มต้น และอีกคอลัมน์คือ 1fr
เมื่อมีการดูเลย์เอาต์บน Dual Screen ที่มีเส้นแบ่งแนวตั้งด้านเดียว ระบบจะอัปเดตค่า --sidebar-width
ด้วยค่าสภาพแวดล้อมของเส้นแบ่งครึ่งหน้าบน/ล่าง
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
ซึ่งจะเป็นการเปิดใช้เลย์เอาต์ที่แถบด้านข้างหรือการนำทางในกรณีนี้ จะเติมเต็มพื้นที่ของครึ่งหน้าบน ซึ่ง UI ของแอปจะเติมเต็มอีกด้าน ซึ่งจะช่วยป้องกัน "รอยพับ" ใน UI
คุณสามารถทดสอบหน้าจอแบบพับได้ในโปรแกรมจำลอง Chrome DevTools เพื่อช่วยแก้ไขข้อบกพร่อง และสร้างต้นแบบหน้าจอที่ครอบคลุมในเบราว์เซอร์ได้โดยตรง
บทสรุป
การสำรวจการออกแบบ UI ที่นอกเหนือจากจอแบนเป็นอีกเหตุผลหนึ่งว่าทำไมการค้นหาคอนเทนเนอร์และรูปแบบที่กำหนดขอบเขตจึงมีความสำคัญมาก เครื่องมือเหล่านี้ช่วยให้คุณมีโอกาสแยกรูปแบบคอมโพเนนต์จากเลย์เอาต์หน้าเว็บและสไตล์ส่วนกลาง รวมถึงสไตล์ผู้ใช้ ซึ่งทำให้มีการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ที่ยืดหยุ่นมากขึ้น ซึ่งหมายความว่าตอนนี้คุณสามารถออกแบบเค้าโครงมาโคร โดยใช้คำค้นหาสื่อตามหน้าเว็บ รวมถึงความแตกต่างเล็กๆ น้อยๆ ที่ขยายหน้าจอ ขณะเดียวกันก็ใช้เลย์เอาต์ขนาดเล็กที่มีการค้นหาคอนเทนเนอร์ในคอมโพเนนต์ และเพิ่มคำค้นหาสื่อตามค่ากำหนดของผู้ใช้เพื่อปรับแต่งประสบการณ์ของผู้ใช้ตามความชอบและความต้องการที่ไม่ซ้ำกัน
นี่คือโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณาแบบใหม่
เป็นการผสมผสานเลย์เอาต์ระดับมาโครเข้ากับเลย์เอาต์ขนาดเล็ก และยิ่งไปกว่านั้น ยังทำให้การปรับแต่งของผู้ใช้และรูปแบบของอุปกรณ์อีกด้วย
การเปลี่ยนแปลงเหล่านี้เพียงอย่างเดียวจะทำให้เกิดการเปลี่ยนแปลงอย่างมากในการออกแบบเว็บไซต์สำหรับเว็บ แต่เมื่อรวมกันแล้ว ก็แสดงถึงการเปลี่ยนแปลงครั้งใหญ่สำหรับวิธีที่เราใช้ แนวคิดของการออกแบบที่ตอบสนองตามอุปกรณ์ ถึงเวลาคำนึงถึงการออกแบบที่ตอบสนองตามอุปกรณ์นอกเหนือจากขนาดวิวพอร์ต และเริ่มพิจารณาแกนใหม่ๆ ทั้งหมดนี้เพื่อประสบการณ์การใช้งานที่อิงตามองค์ประกอบและปรับแต่งได้ดียิ่งขึ้น
ยุคถัดไปของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มาถึงแล้ว และคุณสามารถเริ่มสำรวจได้ด้วยตนเอง
web.dev/learnCSS
และสำหรับตอนนี้ หากคุณต้องการยกระดับเกม CSS และกลับไปดูข้อมูลเบื้องต้นบางส่วนอีกครั้ง ทีมของเรากำลังจะเปิดตัวหลักสูตร CSS และข้อมูลอ้างอิงแบบใหม่ที่ไม่มีค่าใช้จ่ายใดๆ ใน web.dev คุณเข้าถึงผ่าน web.dev/learnCSS ได้
เราหวังว่าคุณจะชอบภาพรวมนี้ในยุคต่อไปของการออกแบบที่ตอบสนองตามอุปกรณ์และพื้นฐานต่างๆ ที่จะพร้อมใช้งาน และหวังว่าคุณจะรู้สึกตื่นเต้นเช่นเดียวกับเราเกี่ยวกับความสำคัญของการออกแบบเว็บในอนาคต
นี่เป็นโอกาสครั้งใหญ่ที่เราในฐานะชุมชน UI ยอมรับรูปแบบที่อิงตามคอมโพเนนต์ รูปแบบของอุปกรณ์ใหม่ๆ และสร้างประสบการณ์ที่ตอบสนองผู้ใช้