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

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

Una Kravets

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

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

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

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

หมายเหตุ: ในบทความนี้ คอมโพเนนต์หมายถึงองค์ประกอบต่างๆ รวมถึงองค์ประกอบที่ประกอบด้วยองค์ประกอบอื่นๆ เช่น การ์ดหรือแถบด้านข้าง ซึ่งคอมโพเนนต์เหล่านั้นประกอบกันเป็นหน้าเว็บ

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

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

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

แหล่งที่มา: Web Design Museum

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

การอัปเดตเหล่านี้รวมถึงฟีเจอร์สื่อตามค่ากำหนดของผู้ใช้, การค้นหาคอนเทนเนอร์ และการค้นหาสื่อสำหรับหน้าจอประเภทใหม่ๆ เช่น หน้าจอแบบพับได้

ตอบสนองต่อผู้ใช้

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

ฟีเจอร์สื่อตามค่ากำหนดของผู้ใช้เหล่านี้ ได้แก่

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• และอื่นๆ

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

prefers-reduced-motion

ผู้ใช้ที่ตั้งค่ากำหนดของระบบปฏิบัติการเป็นลดการเคลื่อนไหวกำลังขอให้ลดภาพเคลื่อนไหวเมื่อใช้คอมพิวเตอร์โดยทั่วไป ดังนั้นจึงเป็นไปได้ว่าผู้ใช้จะไม่ชอบหน้าจอแนะนำที่ฉูดฉาด ภาพเคลื่อนไหวแบบพลิกการ์ด ตัวโหลดที่ซับซ้อน หรือภาพเคลื่อนไหวที่ฉูดฉาดอื่นๆ ขณะใช้เว็บ

prefers-reduced-motion ช่วยให้คุณออกแบบหน้าเว็บโดยคำนึงถึงการลดการเคลื่อนไหว และสร้างประสบการณ์การใช้งานที่ปรับปรุงการเคลื่อนไหวสำหรับผู้ที่ไม่ได้ตั้งค่ากำหนดนี้ไว้

บัตรนี้มีข้อมูลทั้ง 2 ด้าน ประสบการณ์การใช้งานแบบลดการเคลื่อนไหวพื้นฐานคือการใช้ภาพซ้อนเพื่อแสดงข้อมูลนั้น ส่วนประสบการณ์การใช้งานแบบเพิ่มการเคลื่อนไหวคือการพลิกการ์ด

Prefers-reduced-motion ไม่ได้หมายความว่า "ไม่มีการเคลื่อนไหว" เนื่องจากการเคลื่อนไหวมีความสำคัญอย่างยิ่งต่อการสื่อสารข้อมูลทางออนไลน์ แต่ให้มอบประสบการณ์พื้นฐานที่มั่นคงซึ่งจะแนะนำผู้ใช้โดยไม่มีการเคลื่อนไหวที่ไม่จำเป็น และปรับปรุงประสบการณ์ดังกล่าวอย่างต่อเนื่องสำหรับผู้ใช้ที่ไม่มีความต้องการหรือค่ากำหนดด้านการช่วยเหลือพิเศษเหล่านั้น

prefers-color-scheme

ฟีเจอร์สื่อค่ากำหนดอีกอย่างคือ prefers-color-scheme ฟีเจอร์นี้ช่วยให้คุณปรับแต่ง UI ให้เป็นธีมที่ผู้ใช้ต้องการได้ ในระบบปฏิบัติการ ไม่ว่าจะเป็นบนเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ผู้ใช้สามารถตั้งค่ากำหนดสำหรับธีมสว่าง ธีมมืด หรือธีมอัตโนมัติ ซึ่งจะเปลี่ยนไปตามช่วงเวลาของวัน

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

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

การออกแบบสำหรับธีมมืด

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

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

Material Design มีคำแนะนำดีๆ เกี่ยวกับการออกแบบสำหรับธีมมืด

ธีมมืดไม่เพียงมอบประสบการณ์การใช้งานที่ปรับแต่งได้มากขึ้นเท่านั้น แต่ยังช่วยยืดอายุการใช้งานแบตเตอรี่ในหน้าจอ AMOLED ได้อย่างมากด้วย ซึ่งเป็นหน้าจอที่เราเห็นในโทรศัพท์ระดับไฮเอนด์รุ่นใหม่ๆ และกำลังได้รับความนิยมมากขึ้นเรื่อยๆ ในอุปกรณ์เคลื่อนที่

การศึกษา Android ในปี 2018 เกี่ยวกับธีมมืดแสดงให้เห็นว่าช่วยประหยัดพลังงานได้ถึง 60% โดยขึ้นอยู่กับความสว่างของหน้าจอและอินเทอร์เฟซผู้ใช้โดยรวม สถิติ 60% มาจากการเปรียบเทียบหน้าจอการเล่นของ YouTube ที่มีวิดีโอที่หยุดชั่วคราวที่ความสว่างหน้าจอ 100% โดยใช้ธีมมืดสำหรับ UI ของแอปเทียบกับธีมสว่าง

คุณควรมอบประสบการณ์การใช้งานธีมมืดให้แก่ผู้ใช้เสมอเมื่อเป็นไปได้

ปรับเปลี่ยนตามอุปกรณ์ให้พอดีกับคอนเทนเนอร์

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

ต่อไปนี้เป็นตัวอย่างความสามารถอันทรงพลังที่การค้นหาคอนเทนเนอร์มีให้ คุณสามารถปรับแต่งสไตล์ขององค์ประกอบการ์ดได้ทุกอย่าง รวมถึงรายการลิงก์ ขนาดแบบอักษร และเลย์เอาต์โดยรวมตามคอนเทนเนอร์หลัก ดังนี้

ดูการสาธิตใน Codepen (หลังแฟล็กใน Canary)

ตัวอย่างนี้แสดงคอมโพเนนต์ที่เหมือนกัน 2 รายการซึ่งมีขนาดคอนเทนเนอร์ต่างกัน 2 ขนาด โดยทั้งคู่ใช้พื้นที่ในเลย์เอาต์ที่สร้างขึ้นโดยใช้ CSS Grid แต่ละคอมโพเนนต์จะพอดีกับพื้นที่ที่จัดสรรไว้โดยเฉพาะ และจัดรูปแบบตามนั้น

ความยืดหยุ่นในระดับนี้เป็นสิ่งที่ไม่สามารถทำได้ด้วยการค้นหาสื่อเพียงอย่างเดียว

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

ซึ่งต้องใช้กฎ @ @container โดยจะทำงานในลักษณะเดียวกับ Media Query ที่มี @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

การ์ดการค้นหาคอนเทนเนอร์

ในเว็บไซต์โรงงานสาธิตนี้ การ์ดผลิตภัณฑ์แต่ละรายการ ซึ่งรวมถึงการ์ดใน Hero, แถบด้านข้างของรายการที่ดูล่าสุด และตารางกริดผลิตภัณฑ์ ล้วนเป็นคอมโพเนนต์เดียวกันทุกประการ โดยมีมาร์กอัปเดียวกัน

ดูการสาธิตใน Codepen (หลังแฟล็กใน Canary)

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

ดูการสาธิตใน Codepen (หลังแฟล็กใน Canary)

คอนเทนเนอร์สาธิตนี้จะค้นหาเพื่อเปลี่ยนเลย์เอาต์และสไตล์ของวันที่และวันในสัปดาห์ของปฏิทิน รวมถึงปรับระยะขอบและขนาดแบบอักษรในกิจกรรมที่กำหนดเวลาไว้เพื่อให้พอดีกับพื้นที่มากขึ้น

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

ตอนนี้เราจึงสามารถนึกถึงเลย์เอาต์มาโครและไมโครภายในคอมโพเนนต์ UI เดียวกันได้ เพื่อให้ตัดสินใจเกี่ยวกับการออกแบบที่เหมาะสมยิ่งขึ้น

การใช้การค้นหาคอนเทนเนอร์ในปัจจุบัน

ตอนนี้เดโมเหล่านี้เผยแพร่แล้วให้เล่นได้โดยอยู่เบื้องหลังแฟล็กใน Chrome Canary ไปที่ about://flags ใน Canary แล้วเปิดแฟล็ก #enable-container-queries ซึ่งจะเปิดใช้การรองรับค่า @container, inline-size และ block-size สำหรับพร็อพเพอร์ตี้ contain และการติดตั้งใช้งาน LayoutNG Grid

นอกจากนี้ แฟล็กยังเปิดใช้ฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่เกี่ยวข้องด้วย ดูวิธีตรวจสอบและแก้ไขข้อบกพร่องของการค้นหาคอนเทนเนอร์ในเครื่องมือสำหรับนักพัฒนาเว็บ

รูปแบบที่กำหนดขอบเขต

หากต้องการต่อยอดจากการค้นหาคอนเทนเนอร์ ให้ใช้รูปแบบที่กำหนดขอบเขตด้วย @scope เพื่อจำกัดการเข้าถึงของตัวเลือก

ภาพประกอบออกแบบโดย Miriam Suzanne

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

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

การกำหนดขอบเขตช่วยให้คุณสร้างตัวเลือก "รูปโดนัท" ซึ่งคุณสามารถระบุขีดจำกัดบนและล่างได้ ตัวเลือกที่อยู่ในกฎ @scope จะได้รับการจับคู่ระหว่างขีดจำกัดเหล่านั้น

ตัวอย่างเช่น แผงแท็บที่คุณต้องการให้แท็บได้รับสไตล์ที่กำหนดขอบเขต แต่แผงภายในแท็บเหล่านั้นไม่ได้รับผลกระทบจากสไตล์ที่กำหนดขอบเขตเหล่านั้น

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

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

แผนภาพจากผู้อธิบาย Microsoft Edge

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

Media Query เวอร์ชันทดลองสำหรับการขยายหน้าจอจะช่วยเราได้ในกรณีนี้ ปัจจุบันมีลักษณะการทำงานดังนี้ @media (spanning: <type of fold>) การสาธิตจะตั้งค่าเลย์เอาต์ตารางกริดที่มี 2 คอลัมน์ โดยคอลัมน์หนึ่งมีความกว้าง --sidebar-width ซึ่งมีค่าเริ่มต้นเป็น 5rem และอีกคอลัมน์หนึ่งคือ 1fr เมื่อดูเลย์เอาต์บนหน้าจอคู่ที่มีรอยพับแนวตั้งรอยเดียว ระบบจะอัปเดตค่าของ --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 เพื่อช่วยแก้ไขข้อบกพร่องและสร้างต้นแบบการขยายหน้าจอในเบราว์เซอร์ได้โดยตรง

บทสรุป

การสำรวจการออกแบบ UI นอกเหนือจากหน้าจอแบนเป็นอีกเหตุผลหนึ่งที่ทำให้การค้นหาคอนเทนเนอร์และสไตล์ที่กำหนดขอบเขตมีความสำคัญมาก ซึ่งช่วยให้คุณสามารถแยกรูปแบบคอมโพเนนต์ออกจากเลย์เอาต์หน้าเว็บ รูปแบบส่วนกลาง และรูปแบบของผู้ใช้ได้ ซึ่งจะช่วยให้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มีความยืดหยุ่นมากขึ้น ซึ่งหมายความว่าตอนนี้คุณสามารถออกแบบเลย์เอาต์มาโครโดยใช้การค้นหาสื่อตามหน้าเว็บ รวมถึงความแตกต่างเล็กๆ น้อยๆ ของการขยายหน้าจอได้แล้ว ขณะเดียวกันก็ใช้เลย์เอาต์ขนาดเล็กที่มีการค้นหาคอนเทนเนอร์ในคอมโพเนนต์ และเพิ่ม Media Query ตามค่ากำหนดของผู้ใช้เพื่อปรับแต่งประสบการณ์ของผู้ใช้ตามค่ากำหนดและความต้องการเฉพาะตัว

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

ซึ่งเป็นการรวมเลย์เอาต์มาโครเข้ากับเลย์เอาต์ไมโคร และที่สำคัญที่สุดคือคำนึงถึงการปรับแต่งของผู้ใช้และรูปแบบของอุปกรณ์ด้วย

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

ยุคถัดไปของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มาถึงแล้ว และคุณเริ่มสำรวจด้วยตนเองได้เลย

web.dev/learnCSS

และตอนนี้ หากคุณต้องการยกระดับทักษะ CSS และอาจกลับไปทบทวนพื้นฐานบางอย่าง ทีมของฉันกำลังเปิดตัวหลักสูตร CSS ใหม่ล่าสุดที่ไม่มีค่าใช้จ่ายและข้อมูลอ้างอิงใน web.dev คุณเข้าถึงได้ผ่าน web.dev/learnCSS

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

ซึ่งเปิดโอกาสครั้งใหญ่ให้เราในฐานะชุมชน UI ในการนำสไตล์ที่อิงตามคอมโพเนนต์ รูปแบบของอุปกรณ์ใหม่ๆ มาใช้ และสร้างประสบการณ์ที่ตอบสนองต่อผู้ใช้