รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์: การออกแบบเว็บในโลกที่ขับเคลื่อนด้วยคอมโพเนนต์

การควบคุมเลย์เอาต์แบบมาโครและไมโครในยุคใหม่ของการออกแบบเว็บที่ตอบสนองตามอุปกรณ์

การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ในปัจจุบัน

ทุกวันนี้ เมื่อใช้คำว่า "การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์" คุณอาจกำลังนึกถึงการใช้คำค้นหาสื่อเพื่อเปลี่ยนเลย์เอาต์เมื่อปรับขนาดการออกแบบจากขนาดอุปกรณ์เคลื่อนที่ ขนาดแท็บเล็ต ไปจนถึงขนาดเดสก์ท็อป

แต่อีกไม่นาน มุมมองเกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์นี้อาจถือว่าล้าสมัยพอๆ กับการใช้ตารางสำหรับเลย์เอาต์หน้าเว็บ

คำค้นหาสื่อตามวิวพอร์ตจะให้เครื่องมือที่มีประสิทธิภาพบางอย่างแก่คุณ แต่กลับมีข้อมูลไม่มากพอ ทำให้ไม่สามารถตอบสนองความต้องการของผู้ใช้ และไม่สามารถแทรกสไตล์ที่ตอบสนองตามอุปกรณ์ลงในคอมโพเนนต์ด้วยตนเองได้

คุณสามารถใช้ข้อมูลวิวพอร์ตส่วนกลางเพื่อจัดรูปแบบคอมโพเนนต์ได้ แต่คอมโพเนนต์ก็ไม่ได้เป็นเจ้าของสไตล์ และจะทำงานไม่ได้เมื่อระบบออกแบบของเราเป็นแบบใช้คอมโพเนนต์และไม่ได้อิงตามหน้าเว็บ

ข่าวดีคือระบบนิเวศกำลังเปลี่ยนแปลง และมีการเปลี่ยนแปลงอย่างรวดเร็ว CSS กำลังพัฒนาและยุคใหม่ของการออกแบบที่ตอบสนองตามอุปกรณ์ก็กำลังจะเริ่มต้นขึ้น

เราเห็นสิ่งที่เกิดขึ้นทุกๆ 10 ปีโดยประมาณ เมื่อ 10 ปีที่แล้ว ช่วงปี 2010-2012 เราได้เห็นการเปลี่ยนแปลง ครั้งใหญ่จากการออกแบบที่ตอบสนองตามอุปกรณ์และอุปกรณ์เคลื่อนที่ ตลอดจนการเกิดขึ้นของ CSS3

ผลลัพธ์ก็คือระบบนิเวศพร้อมสำหรับการเปลี่ยนแปลงครั้งใหญ่กับ 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 จะร่วมพูดคุยเรื่องสไตล์ที่มีขอบเขตอย่างขะมักเขม้นเพื่อช่วยในการตั้งชื่อที่เหมาะสมและใช้การหลีกเลี่ยงการชนกันของคอมโพเนนต์

สไตล์ที่กำหนดขอบเขตรองรับการจัดรูปแบบส่งผ่านและการจัดรูปแบบเฉพาะคอมโพเนนต์เพื่อหลีกเลี่ยงการขัดแย้งกันในการตั้งชื่อ ซึ่งเป็นสิ่งที่เฟรมเวิร์กและปลั๊กอินหลายรายการ เช่น โมดูล 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 ยอมรับรูปแบบที่อิงตามคอมโพเนนต์ รูปแบบของอุปกรณ์ใหม่ๆ และสร้างประสบการณ์ที่ตอบสนองผู้ใช้