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

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

Una Kravets

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

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

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

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

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

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

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

ไทม์ไลน์ของสไตล์ CSS — แหล่งที่มา: 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 เพื่อการจำลองแทนการเปิดค่ากําหนดของระบบทุกครั้ง

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

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

อย่าใช้สีสดใสและอิ่มตัวกับธีมมืด

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

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

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

ภาพหน้าจอจากการพูดที่แสดงกราฟิกนี้เป็นครั้งแรก

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

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

ปรับตามคอนเทนเนอร์

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

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

ดูการสาธิตใน Codepen (อยู่หลังค่าสถานะใน Canary)

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

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

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

ซึ่งต้องใช้กฎ @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

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

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

ดูการสาธิตใน 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 ซึ่งมี flex-direction เริ่มต้นเป็น "row"

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

การผสมการค้นหาคอนเทนเนอร์กับการค้นหาสื่อ

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

ดูการสาธิตใน Codepen (อยู่หลังค่าสถานะใน Canary)

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

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

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

การใช้ Container Query ในปัจจุบัน

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

โดย Flag นี้จะเปิดใช้ฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บใน 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 จะได้รับการจับคู่ ภายในขีดจำกัดเหล่านั้น

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

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

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

แผนภาพการขยาย — ไดอะแกรมจาก Microsoft Edge Explainers

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

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

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

นี่คือโฆษณาที่ปรับตามพื้นที่โฆษณาใหม่

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

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

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

web.dev/learnCSS

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

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

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