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

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

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

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

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

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

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

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

prefers-color-scheme

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

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

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

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

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

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

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

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

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

ตอบสนองต่อคอนเทนเนอร์

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

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

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

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

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

ซึ่งต้องใช้แอตทริบิวต์ @container ซึ่งทํางานคล้ายกับการค้นหาสื่อด้วย @media แต่ @container จะค้นหาข้อมูลในคอนเทนเนอร์หลักแทนที่จะเป็นวิวพอร์ตและ User Agent

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

ก่อนอื่น ให้ตั้งค่าการบรรจุในองค์ประกอบหลัก จากนั้นเขียน@container query เพื่อจัดรูปแบบองค์ประกอบภายในคอนเทนเนอร์ตามขนาดของคอนเทนเนอร์โดยใช้ 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 ซึ่งมี flex-direction เริ่มต้นเป็น "row"

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

การผสมคิวรีคอนเทนเนอร์กับคิวรีสื่อ

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

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

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

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

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

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

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

รูปแบบที่มีขอบเขต

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

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

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

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

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

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

ปรับตามรูปแบบของอุปกรณ์

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

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

คําค้นหาสื่อเวอร์ชันทดลองสําหรับการขยายหน้าจออาจช่วยเราได้ในเรื่องนี้ ขณะนี้ลักษณะการทำงานคือ @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 DevTools เพื่อช่วยแก้ไขข้อบกพร่องและสร้างต้นแบบหน้าจอที่ขยายในเบราว์เซอร์โดยตรง

บทสรุป

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

ข้อความนี้คือข้อความที่ปรับเปลี่ยนใหม่

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

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

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

web.dev/learnCSS

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

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

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