คำแนะนำในการพัฒนาเว็บที่ทันสมัย

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

ใช้เอฟเฟกต์ภาพที่กำหนดเองด้วย WebGL Shader กับเนื้อหา HTML

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

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

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

ปรับแต่งสีหรือความหนาของแถบเลื่อน

ใช้การรองรับโหมดมืดในลักษณะที่เคารพค่ากำหนดธีมสว่าง/มืดของผู้ใช้และปรับ UI ของเบราว์เซอร์ (เช่น แถบเลื่อน การควบคุมแบบฟอร์ม ฯลฯ)

ผสานรวมองค์ประกอบ HTML แบบอินเทอร์แอกทีฟลงในฉาก 3 มิติ

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

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

บันทึกและส่งออกเนื้อหา HTML แบบไดนามิกเป็นรูปภาพหรือเฟรมวิดีโอจากภายใน Canvas

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

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

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

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

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

กำหนดธีม UI ที่เบราว์เซอร์สร้างขึ้น เช่น การเลือกข้อความ แถบเลื่อน ตัวควบคุมแบบฟอร์ม และเครื่องมือเลือกด้วย CSS แทนการสร้างใหม่ด้วยองค์ประกอบที่กำหนดเอง

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

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

กำหนดรูปแบบแบบอักษรเพื่อให้ข้อความยังคงอ่านได้และมีความสอดคล้องกันในกรณีที่มีการสลับระหว่างแบบอักษรที่ต้องการกับแบบอักษรสำรอง (หรือในทางกลับกัน)

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

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

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

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

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

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

สร้างฟีเจอร์ "ดึงเพื่อแสดง" ที่ช่วยให้ผู้ใช้ดึงหน้าจอลงเพื่อแสดงเนื้อหาเพิ่มเติม เช่น แถบค้นหา

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

สร้างปุ่มหรือวิดเจ็ตแบบลอย (กลับไปด้านบน เลื่อนไปด้านล่าง ตัวเปิดแชท ฯลฯ) ที่ปรากฏและหายไปตามการเลื่อนของผู้ใช้

สร้างภาพซ้อนทับเงาการเลื่อน การไล่ระดับสี หรือตัวบ่งชี้ลูกศรบอกทิศทางที่จะปรากฏเฉพาะเมื่อมีเนื้อหาเพิ่มเติมให้เลื่อนไปในทิศทางนั้นจริงๆ

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

สร้างส่วนหัวของส่วนหรือแถบนำทางแบบติดหนึบที่เปลี่ยนรูปแบบเมื่อ "ติด" อยู่ที่ด้านบน โดยเปลี่ยนรูปแบบสีหรือเพิ่มเงา

แสดงและจัดการไอคอนที่ตั้งค่าและกำหนดพารามิเตอร์ได้จาก CSS, โหลดได้รวดเร็ว, คมชัดในทุกความละเอียด และแสดงต่อ (หรือซ่อนจาก) เทคโนโลยีความช่วยเหลือพิเศษอย่างเหมาะสม

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

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

สร้างคอมโพเนนต์เมนูที่แสดงรายการตัวเลือกหรือการดำเนินการ โดยรองรับเมนูย่อยที่ฝังอยู่

ไฮไลต์ส่วนที่มองเห็นได้ในปัจจุบันของหน้าในเมนูการนำทาง

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

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

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

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

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

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

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

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

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

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

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

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

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

ซ่อน/แสดงองค์ประกอบอย่างราบรื่นเมื่อมีการเพิ่ม/นำออกจาก DOM หรือเมื่อมีการสลับค่าการแสดงผล

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

รองรับการลากเพื่อย้ายองค์ประกอบแบบลอยไปรอบๆ หน้า

สร้างเอฟเฟกต์ตามการเลื่อน (เช่น พารัลแลกซ์) ซึ่งเลเยอร์พื้นหน้าและพื้นหลังเคลื่อนที่ด้วยอัตราที่ต่างกัน ทำให้เกิดความรู้สึกถึงความลึกเมื่อผู้ใช้เลื่อน

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

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

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

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

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

สลับระดับการเข้าถึงของกล่องโต้ตอบหรือป๊อปโอเวอร์จากปุ่มโดยไม่ต้องเขียน JavaScript

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

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

ไฮไลต์ช่วงข้อความที่กำหนดเองในหน้าเว็บ เช่น ผลการค้นหา ข้อผิดพลาดในการสะกด หรือเคอร์เซอร์การแก้ไขร่วมกัน

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

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

สร้างกล่องโต้ตอบโมดัลที่ปิดได้ผ่านการปิดแบบเบา (เช่น การคลิกหรือแตะนอกกล่องโต้ตอบ)

สร้างภาพเคลื่อนไหว UI ด้วยการเปลี่ยน CSS, ภาพเคลื่อนไหว, ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน และการเปลี่ยนมุมมอง ขณะเดียวกันก็คงการเคลื่อนไหวไว้ใน Compositor และเคารพค่ากำหนดการเคลื่อนไหวที่ลดลง

ย้ายหรือเปลี่ยนระดับชั้นขององค์ประกอบ DOM โดยไม่สูญเสียสถานะองค์ประกอบที่สำคัญ เช่น สถานะการโต้ตอบ (:focus/:active), สถานะการโหลด <iframe>, สถานะภาพเคลื่อนไหว/การเปลี่ยนสถานะ ฯลฯ

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

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

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

ป้องกันไม่ให้หน้าเว็บที่อยู่ด้านล่างเลื่อนขณะที่กล่องโต้ตอบโมดัลเปิดอยู่

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

ทำให้การเปลี่ยนแปลงสถานะภายในคอมโพเนนต์เดียว (การ์ด รายการ แผง หรือซับทรีอื่นๆ) เคลื่อนไหวขณะที่ส่วนที่เหลือของหน้ายังคงโต้ตอบได้ และการเปลี่ยนผ่านอื่นๆ ทำงานพร้อมกัน

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

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

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

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

สร้างรายการองค์ประกอบที่เลื่อนได้ (เช่น ภาพสไลด์หรือชุดข้อความแชท) ซึ่งแสดงพร้อมกับองค์ประกอบที่เลื่อนเข้ามาในมุมมองในการแสดงผลครั้งแรกได้

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

ใช้การนําทางเชิงพื้นที่ที่เข้าถึงได้โดยใช้ปุ่มลูกศรที่ทํางานได้อย่างถูกต้องในโหมดเลย์เอาต์ต่างๆ (ตารางกริด ฯลฯ)

อนุญาตให้ผู้ใช้ดำเนินการกับรายการในลิสต์ (นำออก เก็บ ทำเครื่องหมายว่าอ่านแล้ว ฯลฯ) ด้วยท่าทางการปัดในแนวนอน เพื่อให้ผู้ใช้ประมวลผลรายการได้อย่างรวดเร็วโดยไม่ต้องแตะตัวควบคุมแยกต่างหาก

อนุญาตให้ผู้ใช้ปัดในแนวนอนบนรายการหรือแผงเนื้อหาเพื่อแสดงปุ่มการดำเนินการตามบริบทหรือเมนูด้านข้างโดยไม่เรียกให้ดำเนินการโดยอัตโนมัติ

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

อนุญาตให้ผู้ใช้เลื่อนหรือเลื่อนดูพื้นผิว 2 มิติได้อย่างอิสระ เช่น แผนที่ รูปภาพที่ซูม ผืนผ้าใบที่ไม่มีที่สิ้นสุด หรือตารางกริดข้อมูลขนาดใหญ่ ในทั้ง 2 ทิศทาง (ไม่ว่าจะเป็นแนวทแยงหรือเปลี่ยนทิศทางระหว่างท่าทางสัมผัส) โดยที่ท่าทางสัมผัสไม่ล็อกกับแกนแนวนอนหรือแนวตั้งแกนเดียว

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

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

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

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

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

สร้างแบบฟอร์มลงชื่อเข้าใช้ที่มีค่าการเติมข้อความอัตโนมัติที่ถูกต้องและการรองรับการป้อนข้อความอัตโนมัติ

สร้างแบบฟอร์มลงชื่อสมัครใช้ที่มีค่าการเติมข้อความอัตโนมัติที่ถูกต้องและการรองรับการป้อนข้อความอัตโนมัติ

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

สร้างแบบฟอร์มที่อยู่ซึ่งมีแอตทริบิวต์การเติมข้อความอัตโนมัติที่ถูกต้องและการรองรับการป้อนข้อความอัตโนมัติ

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

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

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

ใช้ CSS เพื่อไฮไลต์ช่องแบบฟอร์มที่เบราว์เซอร์ป้อนข้อความอัตโนมัติและผู้ใช้ไม่ได้แก้ไข

ใช้การกด Enter เพื่อส่งในพื้นที่ข้อความและการป้อนข้อมูลบรรทัดเดียว (แชท, ค้นหา, เปลี่ยนชื่อในบรรทัด) อย่างปลอดภัยสำหรับผู้ใช้ IME (ตัวแก้ไขวิธีการป้อนข้อมูล) เพื่อป้องกันการส่งข้อความที่ไม่สมบูรณ์

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

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

ตรวจสอบว่าได้เลือกตัวเลือกที่ไม่ใช่ค่าเริ่มต้นในเมนูแบบเลือกหลังจากที่ผู้ใช้โต้ตอบกับการควบคุมเท่านั้น

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

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

ทำให้องค์ประกอบที่กำหนดเองเข้าถึงได้โดยค่าเริ่มต้น โดยตั้งค่าบทบาทและสถานะ ARIA ผ่านมิกซ์อิน ARIA ของ ElementInternals, จัดการโฟกัสด้วย delegatesFocus และรักษาความสัมพันธ์ ARIA ภายใน Shadow Root เดียว

กำหนด ลงทะเบียน และจัดการวงจรขององค์ประกอบที่กำหนดเองแบบอิสระ ซึ่งครอบคลุมกฎคอนสตรัคเตอร์, Lifecycle Callback, เวลาอัปเกรด, การสะท้อนแอตทริบิวต์/พร็อพเพอร์ตี้ และรูปแบบการตั้งชื่อ

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

หลักเกณฑ์ที่เน้นการดำเนินการสำหรับสถาปัตยกรรม HTML สมัยใหม่ ความหมาย API แบบอินเทอร์แอกทีฟในตัว (กล่องโต้ตอบ, ป๊อปโอเวอร์, รายละเอียด) การจัดการโฟกัส และการจัดลำดับความสำคัญของทรัพยากร ใช้คู่มือนี้เมื่อจัดโครงสร้างเอกสารบนเว็บ ใช้การวางซ้อนแบบเนทีฟ หรือเพิ่มประสิทธิภาพลำดับการโหลดทรัพยากร

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

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

จัดสไตล์ข้ามขอบเขต Shadow ด้วยตัวเลือก :host, พร็อพเพอร์ตี้ที่รับค่ามาและพร็อพเพอร์ตี้ที่กำหนดเองสำหรับการกำหนดธีม, ::slotted และ ::part รวมถึงเลเยอร์ Cascade และการค้นหาคอนเทนเนอร์ภายในคอมโพเนนต์

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

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

คำนวณขนาดขององค์ประกอบตามขนาดที่แท้จริง พร้อมทั้งตรวจสอบว่าองค์ประกอบนั้นพอดีกับข้อจำกัดด้านการออกแบบที่กำหนดไว้

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

ใช้กฎหรือการประกาศ CSS บางอย่างแบบมีเงื่อนไขเฉพาะในกรณีที่เบราว์เซอร์รองรับ At-rule บางอย่าง

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

เลย์เอาต์ CSS สมัยใหม่ เช่น Flexbox, Grid, Subgrid, คิวรี่คอนเทนเนอร์, การกำหนดตำแหน่ง Anchor และการกำหนดขนาดภายใน ใช้ทักษะนี้เมื่อออกแบบคอมโพเนนต์ UI หรือเลย์เอาต์หน้าเว็บที่ปรับเปลี่ยนตามอุปกรณ์

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

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

ปรับขนาดรายการต่างๆ เช่น ขนาดแบบอักษร ระยะห่าง และขนาดสื่อให้สอดคล้องกับขนาดของคอนเทนเนอร์หลักอย่างราบรื่น แทนที่จะใช้เบรกพอยต์แบบคงที่

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

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

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

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

กำหนดเป้าหมายองค์ประกอบตามจุดตัดหรือการรวมกันของตัวเลือกและ @-rule แบบมีเงื่อนไข พร้อมทั้งลดการทำซ้ำให้เหลือน้อยที่สุด

สร้างคอมโพเนนต์ที่ปรับตรรกะภาพตามบริบทเชิงความหมายโดยใช้การค้นหาสไตล์คอนเทนเนอร์ CSS

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

จัดรูปแบบองค์ประกอบหลักของช่องในแบบฟอร์ม (เช่น ป้ายกำกับหรือชุดช่อง) เมื่อช่องไม่ถูกต้อง

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

คำนวณเวลาที่ผ่านไปหรือเวลาที่เหลือระหว่างวันที่และเวลา ปรับสมดุลหน่วยระยะเวลา และจัดรูปแบบระยะเวลาที่แปลแล้วซึ่งมนุษย์อ่านได้โดยใช้ Temporal.Duration และ Intl.DurationFormat

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

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

แยกวิเคราะห์ จัดเรียง และวัดช่วงเวลาระหว่างการประทับเวลา ISO 8601 ระดับต่ำกว่ามิลลิวินาทีหรือนาโนวินาทีโดยไม่มีการชนกันของการตัดวันที่โดยใช้ Temporal.Instant

แสดงและคำนวณวันที่ในระบบปฏิทินที่ไม่ใช่เกรกอเรียน (เช่น อิสลาม ฮีบรู หรือจีน) อย่างถูกต้องสำหรับผู้ใช้ต่างประเทศ

คอมไพล์ C/C++ เป็น WebAssembly โดยใช้ Emscripten

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

คำนวณเวลาทั้งหมดที่ผู้ใช้ใช้ดูหน้าเว็บจริงๆ โดยไม่รวมระยะเวลาที่แท็บอยู่ในเบื้องหลัง

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

Debounce และรวมเหตุการณ์การวิเคราะห์, การตรวจวัดระยะไกล และ Core Web Vitals หลายรายการไว้ด้วยกันในบีคอนเดียวเพื่อลดการแย่งชิงเครือข่ายและลดภาระของเซิร์ฟเวอร์ ขณะที่ยังคงส่งการอัปเดตแบบเรียลไทม์

ลดเวลาในการแสดงผลในหน้าเว็บที่มีเนื้อหาจำนวนมาก (เช่น หน้าเว็บที่มีฟีดยาว บทความจำนวนมาก หรือแดชบอร์ดที่ซับซ้อน) โดยเลื่อนการแสดงผลเนื้อหาที่ผู้ใช้มองไม่เห็นในทันทีออกไป

เลื่อนการดำเนินการที่ใช้ทรัพยากรมาก เช่น การอัปเดต DOM, การดึงข้อมูล, การติดตามข้อมูลวิเคราะห์ หรือการคำนวณเลย์เอาต์ใหม่ จนกว่าการเลื่อนจะเสร็จสมบูรณ์เพื่อรักษาประสิทธิภาพการเลื่อนอย่างราบรื่น

แสดงรูปภาพตกแต่งที่เพิ่มประสิทธิภาพแล้ว (เช่น พื้นหลัง ไอคอน UI หรือมาสก์ที่ซับซ้อน) โดยการระบุรูปแบบรูปภาพรุ่นถัดไป (เช่น AVIF หรือ WebP) พร้อมกับความหนาแน่นพิกเซลหลายแบบ (เช่น 1x และ 2x) เพื่อให้เบราว์เซอร์สามารถเจรจาต่อรองแบบไดนามิกเกี่ยวกับชุดค่าผสมที่ดีที่สุดของขนาดไฟล์และคุณภาพของภาพสำหรับความสามารถของอุปกรณ์ของผู้ใช้

ลดลำดับความสำคัญของการดึงข้อมูลเบื้องหลังที่ทำด้วย Fetch API เพื่อป้องกันการแย่งชิงเครือข่ายกับคำขอที่ผู้ใช้เริ่มต้น

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

ประหยัดทรัพยากรระบบและอายุการใช้งานแบตเตอรี่โดยหยุดการเรียกใช้ JavaScript ในเบื้องหลังชั่วคราว (เช่น ภาพเคลื่อนไหว <canvas>, การแสดงผล WebGL หรือการสำรวจข้อมูล WebSocket ความถี่สูง) เมื่อคอมโพเนนต์อยู่นอกหน้าจอ แล้วกลับมาทำงานอีกครั้งเมื่อผู้ใช้เลื่อนกลับมาดู

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

แสดงและแสดงผลการทดสอบ A/B, การทดสอบหลายตัวแปร หรือการทดสอบอื่นๆ โดยใช้ JavaScript ฝั่งไคลเอ็นต์เพื่อแก้ไขหรือแทรก HTML, CSS และ JavaScript โดยไม่แสดงเนื้อหาต้นฉบับก่อนที่จะกะพริบหรือแสดงเนื้อหาการทดสอบ

ระบุ JavaScript ที่ทำงานช้าและสาเหตุอื่นๆ ที่ทำให้การตอบสนองของ Interaction to Next Paint (INP) ไม่ดี

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

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

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

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

เพิ่มประสิทธิภาพลำดับความสำคัญในการโหลดรูปภาพที่เป็นไปได้สำหรับ Largest Contentful Paint (LCP) และลดลำดับความสำคัญของรูปภาพที่ไม่สำคัญเพื่อลดความล่าช้าในการโหลดทรัพยากรที่สำคัญ

เพิ่มประสิทธิภาพลำดับความสำคัญที่เกี่ยวข้องของเนื้อหาที่โหลดไว้ล่วงหน้าเพื่อลดความล่าช้าในการโหลดทรัพยากรที่สำคัญ

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

ทำให้การโต้ตอบรวดเร็วและตอบสนองได้ดียิ่งขึ้น (ลดคะแนน Interaction to Next Paint (INP)) โดยหลีกเลี่ยงการคำนวณเลย์เอาต์ซ้ำในเลย์เอาต์ที่ซับซ้อน เช่น แดชบอร์ดที่มีข้อมูลจำนวนมากหรือตารางกริดสไตล์สเปรดชีต

อัปเดตหน้าเว็บแบบประกาศด้วยเนื้อหาที่สตรีมในภายหลังลงในเอกสาร HTML เดียวกันหรือผ่าน JavaScript API ที่จำเป็น

หลักเกณฑ์ที่นำไปใช้ได้จริงสำหรับการเพิ่มประสิทธิภาพเว็บแอปพลิเคชันสมัยใหม่ ใช้คู่มือนี้เมื่อตรวจสอบประสิทธิภาพ เพิ่มประสิทธิภาพเมตริกการโหลด แก้ไขการโต้ตอบที่ช้า และเพิ่มประสิทธิภาพ Core Web Vitals (LCP, INP, CLS)

ติดตามข้อมูลวิเคราะห์, Core Web Vitals, ข้อผิดพลาด และข้อมูลการตรวจวัดระยะไกลได้อย่างน่าเชื่อถือตลอดการเข้าชมหน้าเว็บของผู้ใช้ และเลื่อนการส่งข้อมูลออกไปจนกว่าผู้ใช้จะออกจากหน้าเว็บ

ใช้รูปภาพที่เพิ่มประสิทธิภาพความละเอียดในองค์ประกอบจำลอง CSS (เช่น ::before และ ::after) เพื่อลดจำนวนโหนด DOM

กำหนดเวลางานที่มีลำดับความสำคัญต่างกันเพื่อให้แน่ใจว่างานสำคัญจะทำงานก่อนในขณะที่งานเบื้องหลังถูกเลื่อนออกไป

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

ซิงค์สถานะการช่วยเหลือพิเศษแบบเป็นโปรแกรม (เช่น aria-invalid) กับสถานะ :user-invalid แบบภาพเพื่อให้ผู้ใช้โปรแกรมอ่านหน้าจอได้รับความคิดเห็นเกี่ยวกับข้อผิดพลาดหลังจากการโต้ตอบเท่านั้น ซึ่งจะสะท้อนประสบการณ์การใช้งานแบบภาพ

ใช้เนื้อหาที่สร้างโดย CSS (::before/::after) ในลักษณะที่ยังคงเข้าถึงได้ รวมถึงข้อความสำรองสำหรับเนื้อหาตกแต่ง

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

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

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

เข้าถึงทรัพยากรในเครือข่ายภายในของผู้ใช้หรืออินเทอร์เฟซ Loopback จากเว็บแอปพลิเคชันสาธารณะ

ตรวจสอบสิทธิ์ผู้ใช้ที่กลับมาด้วยพาสคีย์สำหรับการลงชื่อเข้าใช้หลัก

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

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

ยืนยันตัวตนของผู้ใช้ที่ลงชื่อเข้าใช้โดยใช้พาสคีย์ที่มีอยู่ก่อนดำเนินการที่มีความละเอียดอ่อน

ลงทะเบียนพาสคีย์สำหรับบัญชีผู้ใช้ที่มีอยู่

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

ป้องกันการโจมตี XSS ที่อิงตาม DOM โดยกำหนดนโยบาย Trusted Types เพื่อล้างข้อมูล HTML ที่ไม่น่าเชื่อถือ โดยใช้นโยบายเมื่อเขียนไปยัง DOM Sink เช่น innerHTML และบังคับใช้ Trusted Types ผ่านนโยบายรักษาความปลอดภัยเนื้อหา

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

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

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

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

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

ยืนยันว่าผู้ใช้เป็นเจ้าของอีเมลในระหว่างการสร้างบัญชี การลงชื่อเข้าใช้ หรือการกู้คืนโดยไม่ต้องส่งรหัสผ่านแบบใช้งานครั้งเดียวหรืออีเมล Magic Link

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

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

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

ตรวจหาภาษาของเนื้อหาที่ผู้ใช้สร้างขึ้นหรือเนื้อหาเว็บไซต์ที่มีอยู่แล้ว

เรียกใช้การอนุมานภาษาธรรมชาติในอุปกรณ์ในเบราว์เซอร์โดยใช้ Prompt API พร้อมเอาต์พุตสตรีมมิง การตอบกลับ JSON ที่มีโครงสร้าง และการจัดการเซสชันแบบหลายเทิร์น

สรุปเนื้อหาข้อความโดยใช้ Summarizer API ในอุปกรณ์

แปลข้อความระหว่างภาษาต่างๆ โดยใช้ Translator API ในอุปกรณ์

แสดงฟังก์ชันการทำงานฝั่งไคลเอ็นต์เป็นเครื่องมือสำหรับ AI Agent โดยใส่คำอธิบายประกอบแบบฟอร์ม HTML มาตรฐานด้วยแอตทริบิวต์ WebMCP

ลงทะเบียนฟังก์ชัน JavaScript ฝั่งไคลเอ็นต์เป็นเครื่องมือสำหรับ AI Agent แบบเป็นโปรแกรมโดยใช้ WebMCP Imperative API

ใช้คู่มือนี้เพื่อติดตั้งใช้งาน WebMCP (Web Model Context Protocol) ในแอปพลิเคชันเบราว์เซอร์ โดยแสดงฟังก์ชันการทำงานฝั่งไคลเอ็นต์เป็นเครื่องมือสำหรับ AI Agent ผ่าน API แบบประกาศหรือแบบบังคับ