Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

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

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

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

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

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

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

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

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

ปรับเปลี่ยนตามผู้ใช้

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

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

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

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

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

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

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

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

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

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

สิ่งที่ต้องมี

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

2. ตั้งค่า

รับโค้ด

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

แนะนำ: ใช้ Codepen

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

ทางเลือก: ทำงานในเครื่อง

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

ใช้ Git

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

ใช้ไฟล์

แตกไฟล์ ZIP ที่ดาวน์โหลดลงในโฟลเดอร์

ดำเนินโปรเจ็กต์

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

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

เกี่ยวกับ HTML

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

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

3. การโต้ตอบแบบปรับเปลี่ยนได้

Git branch: beginning

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

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

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

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

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

ข้อมูลการจัดกลุ่ม

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

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

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

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

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

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

style.css

input {
  outline-offset: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

index.html

<picture aria-hidden="true">

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

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

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

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

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

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

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

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

เลย์เอาต์ตารางกริด CSS

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

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

ทำตามโดยเพิ่มสไตล์ต่อไปนี้แต่ละรายการลงใน style.css

<main>

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

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

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

<section>

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

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

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> และการจัดแนว [checkbox]

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

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

แทนที่ตัวเลือก 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);
}

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

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

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

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

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 Media Query และการตรวจสอบความกว้างของวิวพอร์ต ตอนนี้ หากอุปกรณ์อยู่ในแนวนอนและมีความกว้างอย่างน้อย 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;
  }
}

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

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

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

5. สีแบบปรับอัตโนมัติ

Git branch: colors

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

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

HSL

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

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

คุณสมบัติที่กำหนดเอง

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

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

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

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

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

ระบบได้ดึงข้อมูลช่อง HSL ทั้ง 3 ช่องและวางไว้ในคุณสมบัติที่กำหนดเองของตนเอง

ใช้พร็อพเพอร์ตี้ทั้ง 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 สีมีความอิ่มตัวน้อยมาก

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

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

ธีมสว่าง

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

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

แบรนด์

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

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

ข้อความ

@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 สี

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

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

Git branch: complete

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

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

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

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

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

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

ปรับเปลี่ยนตามผู้ใช้

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

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

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

สิ่งที่ต้องมี

2. ตั้งค่า

รับโค้ด

แนะนำ: ใช้ Codepen

ทางเลือก: ทำงานในเครื่อง

เกี่ยวกับ HTML

3. การโต้ตอบแบบปรับเปลี่ยนได้

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

ข้อมูลการจัดกลุ่ม

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

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

style.css

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

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

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

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

index.html

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

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

ระยะห่าง

คุณสมบัติที่กำหนดเอง

style.css

รูปแบบหน้าเว็บ

style.css

การพิมพ์

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

เลย์เอาต์ตารางกริด CSS

<main>

<form>

<section>

<header>

<fieldset>

.fieldset-item

.fieldset-item <picture>

<picture> และการจัดแนว [checkbox]

.fieldset-item <svg>

.sm-stack

input[type="checkbox"]

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

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

<main>

<form>

.fieldset-item

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

5. สีแบบปรับอัตโนมัติ

HSL

คุณสมบัติที่กำหนดเอง

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

แบรนด์

ข้อความ

แพลตฟอร์ม

ธีมสว่าง

แบรนด์

ข้อความ

Surface

ใช้ระบบสี

<body>

<fieldset>

.fieldset-item

.fieldset-item > picture

.fieldset-item svg

.fieldset-item:focus-within svg

<small>

การควบคุมแบบฟอร์มมืด

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

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

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

<fieldset>

.fieldset-item

.fieldset-item > picture

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