สร้างอินเทอร์เฟซที่ปรับให้เข้ากับผู้ใช้ได้ด้วยคำค้นหาสื่อตามค่ากำหนด

1. ก่อนเริ่มต้น

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

ค่ากำหนดของผู้ใช้

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

ตัวอย่างค่ากำหนดของผู้ใช้ที่ CSS ใช้ได้มีดังนี้

• ขนาดวิวพอร์ตของอุปกรณ์
• การวางแนวอุปกรณ์ (แนวตั้ง | แนวนอน)
• ขนาดตัวอักษร
• ออนไลน์ / ออฟไลน์
• คุณภาพเครือข่าย
• รูปแบบสี (light | dark)
• ภาพเคลื่อนไหวของอินเทอร์เฟซ (เปิด | ลด)
• คุณภาพอินพุต (เมาส์ | สัมผัส | สไตลัส)
• ทิศทางของเอกสารและโหมดการเขียน (จากซ้ายไปขวา จากบนลงล่าง และอื่นๆ)
• โหมดการแสดงผล (เต็มหน้าจอ | สแตนด์อโลน | UI แบบมินิมอล | เบราว์เซอร์)

ตัวอย่างค่ากำหนดของผู้ใช้ที่จะพร้อมใช้งานเร็วๆ นี้ใน CSS มีดังนี้

• ลดการใช้ข้อมูล / โหมด Lite
• ช่วงสี
• คอนทราสต์ (น้อยลง | มากขึ้น | ลด)
• สี (บังคับให้ใช้สีของผู้ใช้ในหน้าเว็บ)
• การฟังเสียงภายนอก (เปิด | ลด)

การค้นหาสื่อ

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

ปรับตามผู้ใช้

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

ข้อกำหนดเบื้องต้น

• ความรู้เกี่ยวกับ HTML และ CSS
• ความรู้เกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ เช่น เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้สร้างแบบฟอร์มที่ปรับตามผู้ใช้ซึ่งจะปรับให้เข้ากับสิ่งต่อไปนี้

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

สิ่งที่คุณจะได้เรียนรู้

ใน Codelab นี้ คุณจะได้เรียนรู้เกี่ยวกับฟีเจอร์เว็บสมัยใหม่ที่จะช่วยสร้างแบบฟอร์มที่ปรับให้เหมาะกับผู้ใช้ คุณจะได้เรียนรู้วิธีต่อไปนี้

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

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

สิ่งที่คุณต้องมี

• Google Chrome 89 ขึ้นไป หรือเบราว์เซอร์ที่คุณต้องการ

2. ตั้งค่า

รับรหัส

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

แนะนำ: ใช้ Codepen

1. เปิดแท็บเบราว์เซอร์ใหม่
2. ไปที่ https://codepen.io/argyleink/pen/abBMeeq
3. หากยังไม่มีบัญชี ให้สร้างบัญชีเพื่อบันทึกงาน
4. คลิกแยก

ทางเลือก: ทำงานในพื้นที่

หากต้องการดาวน์โหลดโค้ดและทำงานในเครื่อง คุณจะต้องมี Node.js เวอร์ชัน 12 ขึ้นไป และตั้งค่าตัวแก้ไขโค้ดให้พร้อมใช้งาน

ใช้ Git

1. ไปที่ https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. โคลนที่เก็บไปยังโฟลเดอร์
3. โปรดสังเกตว่ากิ่งเริ่มต้นคือ beginning

ใช้ไฟล์

ดาวน์โหลดซอร์สโค้ด

1. แตกไฟล์ ZIP ที่ดาวน์โหลดไปยังโฟลเดอร์

เรียกใช้โปรเจ็กต์

ใช้ไดเรกทอรีโปรเจ็กต์ที่สร้างขึ้นในขั้นตอนใดขั้นตอนหนึ่งข้างต้น จากนั้นทำดังนี้

1. เรียกใช้ npm install เพื่อติดตั้งทรัพยากร Dependency ที่จำเป็นในการเรียกใช้เซิร์ฟเวอร์
2. เรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์ในพอร์ต 3000
3. เปิดแท็บเบราว์เซอร์ใหม่
4. ไปที่ http://localhost:3000

เกี่ยวกับ HTML

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

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

3. การโต้ตอบแบบปรับอัตโนมัติ

สาขา Git: beginning

เมื่อสิ้นสุดส่วนนี้ แบบฟอร์มการตั้งค่าจะปรับให้สอดคล้องกับสิ่งต่อไปนี้

• เกมแพด + แป้นพิมพ์
• เมาส์ + สัมผัส
• โปรแกรมอ่านหน้าจอหรือเทคโนโลยีความช่วยเหลือพิเศษที่คล้ายกัน

แอตทริบิวต์สำหรับ HTML

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

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

การจัดกลุ่มอินพุต

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

การจัดลำดับองค์ประกอบ

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

การโต้ตอบด้วยแป้นพิมพ์

ผู้ใช้อินเทอร์เน็ตคุ้นเคยกับการเลื่อนผ่านแบบฟอร์มด้วยปุ่ม Tab ซึ่งโชคดีที่เบราว์เซอร์จะจัดการให้หากคุณระบุองค์ประกอบ HTML ที่คาดไว้ การใช้องค์ประกอบต่างๆ เช่น <button>, <input>, <h2> และ <label> จะกลายเป็นปลายทางของแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอโดยอัตโนมัติ

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

style.css

input {
  outline-offset: 5px;
}

สิ่งที่ควรลอง

1. ตรวจสอบองค์ประกอบ HTML ที่ใช้ใน index.html
2. คลิกหน้าเดโมในเบราว์เซอร์
3. กดปุ่ม tab และ shift+tab เพื่อย้ายโฟกัสองค์ประกอบผ่านแบบฟอร์ม
4. ใช้แป้นพิมพ์เพื่อเปลี่ยนค่าของแถบเลื่อนและช่องทำเครื่องหมาย
5. เชื่อมต่อตัวควบคุมเกมแพดบลูทูธ แล้วย้ายโฟกัสขององค์ประกอบผ่านแบบฟอร์ม

การโต้ตอบด้วยเมาส์

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

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

ฟีเจอร์แรกคือการมีตัวเลือกให้โต้ตอบด้วย และป้ายกำกับจะกำหนดเป้าหมายสำหรับเมาส์ได้ง่ายกว่าสี่เหลี่ยมจัตุรัสเล็กๆ

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

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

ไม่ได้เชื่อมโยง: ไม่มีแอตทริบิวต์ที่เชื่อมต่อองค์ประกอบ

<input type="checkbox">
<label>...</label>

เชื่อมโยง: แอตทริบิวต์ที่เชื่อมต่อองค์ประกอบ

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

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

สิ่งที่ควรลอง

1. วางเมาส์เหนือป้ายกำกับ แล้วสังเกตว่าช่องทำเครื่องหมายจะไฮไลต์
2. ตรวจสอบองค์ประกอบป้ายกำกับด้วยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เพื่อแสดงภาพพื้นที่ที่คลิกได้ซึ่งเลือกช่องทำเครื่องหมายได้

การโต้ตอบของโปรแกรมอ่านหน้าจอ

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

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

index.html

<picture aria-hidden="true">

ตอนนี้โปรแกรมอ่านหน้าจอจะข้ามองค์ประกอบที่เป็นภาพอย่างเดียว

องค์ประกอบแถบเลื่อน input[type="range"] มีแอตทริบิวต์ ARIA พิเศษ: aria-labelledby="media-volume" ซึ่งจะให้คำสั่งพิเศษแก่โปรแกรมอ่านหน้าจอเพื่อใช้ปรับปรุงประสบการณ์ของผู้ใช้

สิ่งที่ควรลอง

1. ใช้เทคโนโลยีโปรแกรมอ่านหน้าจอของระบบปฏิบัติการเพื่อย้ายโฟกัสผ่านแบบฟอร์ม
2. ดาวน์โหลดและลองใช้ซอฟต์แวร์โปรแกรมอ่านหน้าจอบางตัวในแบบฟอร์ม

4. เลย์เอาต์แบบปรับขนาดได้

กิ่ง Git: layouts

เมื่อสิ้นสุดส่วนนี้ หน้าการตั้งค่าจะ

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

การเว้นวรรค

เคล็ดลับในการจัดเลย์เอาต์ที่สวยงามคือการใช้ตัวเลือกการเว้นวรรคแบบจำกัด ซึ่งจะช่วยให้เนื้อหามีความสอดคล้องและกลมกลืนกันอย่างเป็นธรรมชาติ

พร็อพเพอร์ตี้ที่กำหนดเอง

เวิร์กช็อปนี้สร้างขึ้นจากชุดขนาดคุณสมบัติที่กำหนดเอง 7 ขนาด

• วางรายการต่อไปนี้ไว้ที่ด้านบนของ style.css

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

รูปแบบหน้า

จากนั้นคุณต้องตั้งค่ารูปแบบเอกสารบางอย่าง นำขอบออกจากองค์ประกอบ และตั้งค่าแบบอักษรเป็นแบบอักษร Sans Serif ที่ดูดี

• เพิ่มรายการต่อไปนี้ไปยัง style.css

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

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

การจัดตัวอักษร

แบบอักษรสำหรับเลย์เอาต์นี้เป็นแบบปรับเปลี่ยนได้ system-ui คีย์เวิร์ดจะใช้แบบอักษรของอินเทอร์เฟซที่ระบบปฏิบัติการของผู้ใช้กำหนดให้เป็นแบบอักษรที่เหมาะสมที่สุด

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

รูปแบบสำหรับ h1, h2 และ h3 เป็นรูปแบบเล็กๆ น้อยๆ อย่างไรก็ตาม องค์ประกอบ small ต้องมี line-height เพิ่มเติมเมื่อข้อความมีการตัดคำ มิฉะนั้นจะแน่นเกินไป

พร็อพเพอร์ตี้เชิงตรรกะ

โปรดสังเกตว่า padding ใน body ใช้พร็อพเพอร์ตี้เชิงตรรกะ (block-start, block-end) เพื่อระบุด้าน เราจะใช้พร็อพเพอร์ตี้เชิงตรรกะอย่างกว้างขวางตลอดทั้ง Codelab ที่เหลือ เช่นเดียวกับหน่วย rem อุปกรณ์เหล่านี้ก็ปรับให้เหมาะกับผู้ใช้ เลย์เอาต์นี้สามารถแปลเป็นภาษาอื่น และตั้งค่าให้เป็นรูปแบบการเขียนและทิศทางของเอกสารตามที่ผู้ใช้คุ้นเคยในภาษาแม่ พร็อพเพอร์ตี้เชิงตรรกะจะช่วยให้รองรับการกำหนดพื้นที่ ทิศทาง หรือการจัดแนวได้เพียง 1 รายการ

กริดและ Flexbox เป็น flow-relative อยู่แล้ว ซึ่งหมายความว่ารูปแบบที่เขียนสำหรับภาษาหนึ่งจะขึ้นอยู่กับบริบทและนำไปใช้กับภาษาอื่นๆ ได้อย่างเหมาะสม ทิศทางที่ปรับได้ เนื้อหาจะไหลตามทิศทางของเอกสาร

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

เลย์เอาต์ CSS Grid

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

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

1. ทำตามโดยเพิ่มรูปแบบต่อไปนี้ลงใน style.css

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

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

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

นี่คือเลย์เอาต์ตารางกริดที่ซับซ้อนที่สุดของการออกแบบ แต่ก็เป็นส่วนที่น่าตื่นเต้นที่สุดของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

• max-width คือการระบุค่าสำหรับอัลกอริทึมเลย์เอาต์เพื่อใช้ในการพิจารณาขนาดของเลย์เอาต์
• gap ใช้พร็อพเพอร์ตี้ที่กำหนดเองและส่ง row-gap ที่แตกต่างจาก column-gap
• align-items จะตั้งค่าเป็น flex-start เพื่อไม่ให้ความสูงของรายการยืดออก
• grid-template-columns มีไวยากรณ์ที่ซับซ้อน แต่เป้าหมายคือความกระชับ ให้คอลัมน์มีความกว้าง 35ch และไม่น้อยกว่า 10ch และใส่ข้อมูลลงในคอลัมน์หากมีที่ว่าง หรือจะใช้แถวก็ได้

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

<section>

section {
  display: grid;
  gap: var(--space-md);
}

แต่ละส่วนควรเป็นตารางกริดของแถวที่มีช่องว่างขนาดกลางระหว่างองค์ประกอบย่อย

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

ส่วนหัวแต่ละส่วนควรเป็นตารางกริดของแถวที่มีช่องว่างขนาดเล็กมากระหว่างองค์ประกอบย่อย

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

เลย์เอาต์นี้มีหน้าที่สร้างลักษณะที่เหมือนการ์ดและจัดกลุ่มอินพุตเข้าด้วยกัน overflow: hidden และ gap: 1px จะชัดเจนขึ้นเมื่อคุณเพิ่มสีในส่วนถัดไป

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

เลย์เอาต์นี้มีหน้าที่จัดกึ่งกลางไอคอนและช่องทําเครื่องหมายพร้อมป้ายกํากับและการควบคุมที่เกี่ยวข้อง คอลัมน์แรกของเทมเพลตตารางกริด var(--space-lg) จะสร้างคอลัมน์ที่กว้างกว่าไอคอน เพื่อให้องค์ประกอบย่อยมีพื้นที่สำหรับจัดกึ่งกลาง

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

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

เลย์เอาต์นี้มีหน้าที่จัดการการตั้งค่า ขนาดของวงกลมไอคอน การสร้างรูปร่างวงกลม และการจัดกึ่งกลางรูปภาพภายในวงกลม

การจัดแนว <picture> และ [ช่องทำเครื่องหมาย]

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

เลย์เอาต์นี้จะแยกการจัดกึ่งกลางไปยังองค์ประกอบรูปภาพและช่องทําเครื่องหมายโดยใช้:is ตัวเลือกเสมือน

3. แทนที่ตัวเลือก picture > svg ด้วย .fieldset-item svg ดังนี้

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

การดำเนินการนี้จะตั้งค่าขนาดไอคอน SVG เป็นค่าจากระบบการวัดขนาด

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

คลาสยูทิลิตี้นี้มีไว้สำหรับองค์ประกอบป้ายกำกับของช่องทำเครื่องหมายเพื่อเว้นวรรคข้อความช่วยเหลือสำหรับช่องทำเครื่องหมาย

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

สไตล์เหล่านี้จะเพิ่มขนาดของช่องทําเครื่องหมายโดยใช้ค่าจากชุดระยะห่าง

สิ่งที่ควรลอง

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

การค้นหาสื่อ

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

หมายเหตุ: ควรเพิ่ม CSS ของแต่ละส่วนหลังจากตัวเลือกที่กำลังแก้ไขใน style.css

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

Media Query ทั้ง 2 รายการนี้จะให้ระยะห่างจากขอบแก่ main มากขึ้นเมื่อมีพื้นที่วิวพอร์ตมากขึ้น ซึ่งหมายความว่าการเริ่มต้นจะมีการเว้นวรรคในปริมาณเล็กน้อยและกะทัดรัด แต่ตอนนี้จะกว้างขึ้นเรื่อยๆ เมื่อมีพื้นที่ว่างมากขึ้น

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

แบบฟอร์มตอบสนองต่อขนาดวิวพอร์ตอยู่แล้วด้วย auto-fit แต่ขณะทดสอบบนอุปกรณ์เคลื่อนที่ การหมุนอุปกรณ์เป็นแนวนอนไม่ได้ทำให้กลุ่มแบบฟอร์ม 2 กลุ่มอยู่เคียงข้างกัน ปรับให้เข้ากับบริบทของแนวนอนนี้ด้วยorientationคิวรี่สื่อและการตรวจสอบความกว้างของวิวพอร์ต ตอนนี้หากอุปกรณ์เป็นแนวนอนและมีความกว้างอย่างน้อย 640 พิกเซล ให้บังคับ 2 คอลัมน์โดยเปลี่ยน--repeatคุณสมบัติที่กำหนดเองเป็นตัวเลขแทนคีย์เวิร์ด auto-fit

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

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

สิ่งที่ควรลอง

1. ขยายและย่อเบราว์เซอร์ แล้วดูว่าพื้นที่ปรับเปลี่ยนอย่างไร
2. ดูตัวอย่างในอุปกรณ์เคลื่อนที่
3. ดูตัวอย่างบนอุปกรณ์เคลื่อนที่ในแนวนอน

5. สีที่ปรับตาม

กิ่ง Git: colors

เมื่อสิ้นสุดส่วนนี้ แบบฟอร์มการตั้งค่าจะ

• ปรับให้เข้ากับค่ากำหนดสีเข้มและสีอ่อน
• มีรูปแบบสีที่ได้จากรหัสสีแบบเลขฐาน 16 ของแบรนด์
• ใช้สีที่เข้าถึงได้

HSL

ในส่วนถัดไป คุณจะสร้างระบบสีด้วย HSL เพื่อช่วยสร้างธีมสว่างและธีมมืด โดยสร้างขึ้นจากแนวคิดหลักนี้ใน CSS ซึ่งก็คือ calc()

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

พร็อพเพอร์ตี้ที่กำหนดเอง

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

สมมติว่าสีของแบรนด์สำหรับแอปคือ #0af งานแรกของคุณคือการแปลงค่าสีแบบเลขฐานสิบหกนี้เป็นค่าสี HSL: hsl(200 100% 50%) Conversion นี้จะแสดงแชแนลสีของแบรนด์ใน HSL ซึ่งคุณสามารถใช้ calc() เพื่อคำนวณสีของแบรนด์ที่รองรับต่างๆ ได้

หมายเหตุ: แอปนี้ชอบรูปแบบสีเข้ม จากนั้นจะปรับให้เข้ากับธีมสว่าง ซึ่งเป็นสิ่งสำคัญเมื่อคุณสร้างรูปแบบสีแรก เนื่องจากจะเป็นธีมสีเข้ม

คุณควรเพิ่มบล็อกโค้ดแต่ละบล็อกต่อไปนี้ในส่วนนี้ลงในตัวเลือก :root เดียวกัน

ช่องของแบรนด์

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

เราได้ดึงช่อง HSL ทั้ง 3 ช่องออกมาและวางไว้ในพร็อพเพอร์ตี้ที่กำหนดเองของช่องนั้นๆ

1. ใช้ทั้ง 3 พร็อพเพอร์ตี้ตามที่เป็นอยู่และสร้างสีของแบรนด์ใหม่

แบรนด์

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

เนื่องจากรูปแบบสีเป็นสีเข้มโดยค่าเริ่มต้น แนวทางปฏิบัติแนะนำคือการลดความอิ่มตัวของสีเพื่อใช้บนพื้นผิวสีเข้ม (มิฉะนั้นสีอาจสั่นไหวในสายตาหรือเข้าถึงไม่ได้) หากต้องการลดความอิ่มตัวของสีแบรนด์ ให้ใช้โทนสีและความสว่างตามเดิม แต่ลดความอิ่มตัวลงครึ่งหนึ่งด้วยการหาร calc(var(--saturation) / 2) ตอนนี้สีแบรนด์ของคุณอยู่ในธีมอย่างเหมาะสม แต่จะมีการลดความอิ่มตัวเพื่อนำไปใช้

ข้อความ

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

สำหรับข้อความที่อ่านในธีมมืด คุณใช้เฉดสีของแบรนด์เป็นฐาน แต่สร้างสีที่เกือบจะเป็นสีขาวจากเฉดสีนั้น ผู้ใช้หลายคนจะคิดว่าข้อความเป็นสีขาว แต่จริงๆ แล้วเป็นสีฟ้าอ่อนมาก การใช้สีในเฉดเดียวกันเป็นวิธีที่ยอดเยี่ยมในการสร้างความกลมกลืนในการออกแบบ --text1 เป็นสีขาว 85% และ --text2 เป็นสีขาว 65% และทั้ง 2 สีมีความอิ่มตัวน้อยมาก

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

แพลตฟอร์ม

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

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

3. สังเกตว่าสีเริ่มต้นที่สีเทาเข้มที่สุดที่มีความสว่าง 10% และความอิ่มตัว 10% จากนั้นจะลดความอิ่มตัวลงเมื่อสีอ่อนลง โดยแต่ละพื้นผิวใหม่จะเบากว่าพื้นผิวเดิม 5% นอกจากนี้ยังลดความอิ่มตัวลงเล็กน้อยในพื้นผิวที่สว่างกว่า ลองตั้งค่าความอิ่มตัวของพื้นผิวทั้งหมดเป็น 10% คุณชอบหรือไม่ชอบ

ธีมสว่าง

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

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

แบรนด์

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

เริ่มจากสีของแบรนด์ โดยต้องคืนค่าความอิ่มตัวให้กลับมาเต็มกำลัง

Text

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

ในธีมสว่าง สีข้อความจะเป็นสีน้ำเงินเข้มมาก ซึ่งคล้ายกับที่ธีมมืดมีสีข้อความเป็นสีฟ้าอ่อนมาก การเห็นค่าความสว่าง 10% และ 30% สำหรับสี HSL ควรเป็นสัญญาณว่าสีเหล่านี้เป็นสีเข้ม

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

ใช้ระบบสี

เมื่อกำหนดสีแล้ว ก็ถึงเวลาใช้สีเหล่านั้น คุณมีสีแบรนด์ที่โดดเด่น สีข้อความ 2 สี และสีพื้นผิว 4 สี

• สำหรับส่วนโค้ดต่อไปนี้ ให้ค้นหา Selector ที่ตรงกันและเพิ่ม CSS สีลงในโค้ดบล็อกที่มีอยู่

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

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

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

นี่คือองค์ประกอบคล้ายการ์ดของการออกแบบ เส้นขอบ 1 พิกเซลและช่องว่าง 1 พิกเซลมีสีเดียวกันและแสดงถึงพื้นผิวที่อยู่ด้านหลังของแต่ละ .fieldset-item วิธีนี้จะช่วยให้ภาพมีความสอดคล้องกันและดูแลรักษาง่าย

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

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

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

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

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

ไอคอนในแบบฟอร์มได้รับการตั้งค่าให้ใช้ข้อความแสดงแทน --text2 การออกแบบที่ไอคอนแบบทึบมีสีอ่อนกว่าข้อความเล็กน้อยจะช่วยให้ไอคอนไม่ดูหนักจนเกินไป

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

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

<small>

small {
  color: var(--text2);
}

เป็นข้อความขนาดเล็ก ควรมีความโดดเด่นน้อยกว่าเมื่อเทียบกับส่วนหัวและย่อหน้า (เนื้อหาหลัก)

การควบคุมแบบฟอร์มสีเข้ม

:root {
  color-scheme: dark light;
}

การเพิ่มบรรทัดนี้เป็นการบอกเบราว์เซอร์ว่าหน้านี้รองรับทั้งธีมมืดและธีมสว่าง เบราว์เซอร์ให้รางวัลเราด้วยตัวควบคุมแบบฟอร์มสีเข้ม

6. ภาพเคลื่อนไหวแบบปรับอัตโนมัติ

กิ่ง Git: animations

เมื่อสิ้นสุดส่วนนี้ หน้าการตั้งค่าจะ

• ปรับตามค่ากำหนดการเคลื่อนไหวของผู้ใช้
• ตอบกลับการโต้ตอบของผู้ใช้

การเคลื่อนไหวลดลงเทียบกับการไม่มีการเคลื่อนไหว

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

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

รูปแบบการโต้ตอบ

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

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

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

นี่คือclip-pathภาพเคลื่อนไหวที่คุณใช้ได้เฉพาะในกรณีที่ผู้ใช้ไม่มีค่ากำหนดเมื่อพูดถึงการเคลื่อนไหวที่ลดลง Selector แรกและสไตล์จะจำกัดเส้นทางการตัดวงกลมลง 10% และตั้งค่าพารามิเตอร์การเปลี่ยนภาพบางอย่าง ตัวเลือกและสไตล์ที่ 2 จะรอให้ผู้ใช้โต้ตอบกับอินพุต จากนั้นจะขยายวงกลมของไอคอน เอฟเฟกต์ที่ดูเรียบง่ายแต่สวยงามเมื่อใช้งานได้

7. ขอแสดงความยินดี

กิ่ง Git: complete

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

ตอนนี้คุณทราบขั้นตอนสำคัญที่จำเป็นในการสร้างอินเทอร์เฟซที่ปรับให้เข้ากับสถานการณ์และการตั้งค่าของผู้ใช้ต่างๆ แล้ว