ภาพรวมพื้นฐานของวิธีสร้างแถบโหลดที่ปรับเปลี่ยนได้และเข้าถึงง่ายด้วยองค์ประกอบ <progress>
ในโพสต์นี้ ผมจะมาแชร์แนวคิดเกี่ยวกับวิธีสร้างแถบการโหลดที่ปรับแต่งได้และ
เข้าถึงได้ง่ายโดยใช้องค์ประกอบ <progress>
ลองดูการสาธิตและดูแหล่งที่มา
หากชอบวิดีโอ นี่คือโพสต์นี้เวอร์ชัน YouTube
ภาพรวม
องค์ประกอบ <progress>
จะแสดงฟีดแบ็กที่เป็นภาพและเสียงแก่ผู้ใช้เกี่ยวกับความสำเร็จ ความคิดเห็นที่เป็นภาพนี้มีประโยชน์ต่อสถานการณ์ต่างๆ เช่น ความคืบหน้าผ่านแบบฟอร์ม การแสดงการดาวน์โหลดหรืออัปโหลดข้อมูล หรือแม้กระทั่งการแสดงว่าไม่ทราบปริมาณความคืบหน้าแต่ยังดำเนินการอยู่
ภารกิจ GUI นี้ทำงานร่วมกับองค์ประกอบ HTML <progress>
ที่มีอยู่เพื่อช่วยลดภาระในเรื่องการเข้าถึง สีและเลย์เอาต์ผลักดันขีดจำกัดของการปรับแต่งองค์ประกอบในตัวเพื่อทำให้คอมโพเนนต์ทันสมัยและเหมาะกับระบบการออกแบบมากกว่า
Markup
ฉันเลือกรวมองค์ประกอบ <progress>
ใน <label>
เพื่อจะได้ข้ามแอตทริบิวต์ความสัมพันธ์อย่างชัดแจ้ง
และยังติดป้ายกำกับองค์ประกอบระดับบนสุดที่ได้รับผลกระทบจากสถานะการโหลดเอาไว้ด้วย ดังนั้นเทคโนโลยีโปรแกรมอ่านหน้าจอจึงส่งต่อข้อมูลดังกล่าวกลับไปยังผู้ใช้ได้
<progress></progress>
หากไม่มี value
ความคืบหน้าขององค์ประกอบจะไม่ชัดเจน
แอตทริบิวต์ max
มีค่าเริ่มต้นเป็น 1 ความคืบหน้าจึงอยู่ระหว่าง 0 ถึง 1 ตัวอย่างเช่น การตั้งค่า max
เป็น 100 จะตั้งค่าช่วงเป็น 0-100 ผมเลือกที่จะอยู่ในขีดจำกัด 0 และ 1
โดยแปลค่าความคืบหน้าเป็น 0.5 หรือ 50%
ความคืบหน้าที่รวมป้ายกำกับ
ในความสัมพันธ์โดยนัย องค์ประกอบความคืบหน้าจะอยู่ภายในป้ายกำกับดังนี้
<label>Loading progress<progress></progress></label>
ในการสาธิต ผมเลือกใส่ป้ายกำกับสำหรับโปรแกรมอ่านหน้าจอเท่านั้น
ซึ่งทำได้โดยการตัดข้อความป้ายกำกับใน <span>
และนำรูปแบบบางอย่างไปใช้กับข้อความเพื่อให้ปิดหน้าจอได้อย่างมีประสิทธิภาพ ดังนี้
<label>
<span class="sr-only">Loading progress</span>
<progress></progress>
</label>
เมื่อใช้ CSS ต่อไปนี้จาก WebAIM
.sr-only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
พื้นที่ที่ได้รับผลกระทบจากการโหลด
ถ้าคุณมีสายตาที่ดี ก็สามารถเชื่อมโยงตัวบ่งชี้ความคืบหน้ากับองค์ประกอบที่เกี่ยวข้องและพื้นที่ของหน้าเว็บได้ง่ายๆ แต่สำหรับผู้ใช้ที่มีความบกพร่องทางสายตา จะเห็นได้ไม่ชัดเจนนัก ปรับปรุงประสิทธิภาพนี้โดยการกำหนดแอตทริบิวต์ aria-busy
ให้กับองค์ประกอบบนสุดซึ่งจะเปลี่ยนแปลงเมื่อการโหลดเสร็จสมบูรณ์
นอกจากนี้ ให้ระบุความสัมพันธ์ระหว่างความคืบหน้าและโซนการโหลดด้วย aria-describedby
<main id="loading-zone" aria-busy="true">
…
<progress aria-describedby="loading-zone"></progress>
</main>
จาก JavaScript ให้สลับ aria-busy
เป็น true
เมื่อเริ่มงาน และเปลี่ยนไปเป็น false
เมื่อเสร็จสิ้น
การเพิ่มแอตทริบิวต์ Aria
แม้ว่าบทบาทโดยนัยขององค์ประกอบ <progress>
คือ progressbar
แต่ฉันได้ระบุอย่างชัดแจ้งสำหรับเบราว์เซอร์ที่ไม่มีบทบาทโดยนัยดังกล่าว เรายังได้เพิ่มแอตทริบิวต์ indeterminate
เพื่อทำให้องค์ประกอบอยู่ในสถานะที่ไม่รู้จักอย่างชัดแจ้ง ซึ่งชัดเจนกว่าการสังเกตการที่องค์ประกอบไม่ได้ตั้งค่า value
<label>
Loading
<progress
indeterminate
role="progressbar"
aria-describedby="loading-zone"
tabindex="-1"
>unknown</progress>
</label>
ใช้
tabindex="-1"
เพื่อทำให้องค์ประกอบความคืบหน้าโฟกัสได้จาก JavaScript ข้อมูลนี้สำคัญสำหรับเทคโนโลยีโปรแกรมอ่านหน้าจอ เนื่องจากการโฟกัสที่ความคืบหน้าเป็นการเปลี่ยนแปลงความคืบหน้าจะประกาศให้ผู้ใช้ทราบถึงความคืบหน้าที่ได้รับการอัปเดต
รูปแบบ
องค์ประกอบความคืบหน้าจะค่อนข้างซับซ้อนเล็กน้อยในเรื่องการจัดรูปแบบ องค์ประกอบ HTML แบบบิวท์อินมีส่วนพิเศษที่ซ่อนอยู่ซึ่งเลือกยากและมักจะนำเสนอเพียงชุดพร็อพเพอร์ตี้ที่จำกัดเท่านั้น
เลย์เอาต์
รูปแบบเลย์เอาต์มีไว้เพื่อให้ความยืดหยุ่นในขนาดและตำแหน่งป้ายกำกับขององค์ประกอบความคืบหน้า มีการเพิ่มสถานะเสร็จสมบูรณ์แบบพิเศษที่อาจเป็นสัญลักษณ์ภาพเพิ่มเติม แต่ไม่บังคับ
เลย์เอาต์ <progress>
ความกว้างขององค์ประกอบความคืบหน้าไม่มีการเปลี่ยนแปลงใดๆ จึงสามารถย่อและเติบโตได้โดยมีพื้นที่เพียงพอในการออกแบบ รูปแบบในตัวจะถูกตัดออกโดยการตั้งค่า appearance
และ border
เป็น none
วิธีนี้ทำให้ระบบปรับองค์ประกอบให้เป็นมาตรฐานในเบราว์เซอร์ต่างๆ ได้ เนื่องจากแต่ละเบราว์เซอร์มีรูปแบบของตัวเองสำหรับองค์ประกอบ
progress {
--_track-size: min(10px, 1ex);
--_radius: 1e3px;
/* reset */
appearance: none;
border: none;
position: relative;
height: var(--_track-size);
border-radius: var(--_radius);
overflow: hidden;
}
ค่าของ 1e3px
สำหรับ _radius
ใช้สัญลักษณ์ตัวเลขทางวิทยาศาสตร์เพื่อแสดงตัวเลขขนาดใหญ่เพื่อให้ border-radius
ปัดเศษเสมอ ซึ่งเทียบเท่ากับ
1000px
ฉันชอบใช้ค่านี้เพราะตั้งเป้าไว้ว่าจะใช้ค่าที่ใหญ่มากพอที่
ฉันจะกำหนดได้และไม่ลืมค่าเลย (และเขียนสั้นกว่า 1000px
) และยัง
ทำให้ใหญ่ขึ้นได้ง่ายๆ หากจำเป็น เพียงเปลี่ยนค่า 3 เป็น 4 จากนั้น 1e4px
จะเท่ากับ 10000px
มีการใช้ overflow: hidden
และเป็นรูปแบบที่ถกเถียงกันมาก การทำเช่นนี้ทำให้มี 2-3 อย่างง่ายๆ เช่น ไม่จำเป็นต้องส่งค่า border-radius
ไปยังแทร็ก และติดตามองค์ประกอบแบบเติมโฆษณา แต่ก็หมายความว่าไม่มีเด็กที่ดำเนินการความคืบหน้าอยู่ภายนอกองค์ประกอบได้ คุณอาจทำซ้ำองค์ประกอบความคืบหน้าที่กำหนดเองนี้ได้อีกโดยไม่มี overflow: hidden
และอาจเปิดโอกาสในการทำให้ภาพเคลื่อนไหวหรือสถานะเสร็จสมบูรณ์ที่ดีขึ้นได้
ความคืบหน้าเสร็จสมบูรณ์
ตัวเลือก CSS จะทำงานยากที่นี่โดยการเปรียบเทียบค่าสูงสุดกับค่า และหากตรงกัน ความคืบหน้าจะเสร็จสมบูรณ์ เมื่อเสร็จเรียบร้อยแล้ว ระบบจะสร้างองค์ประกอบจำลองขึ้นและนำไปต่อท้ายองค์ประกอบความคืบหน้าเพื่อให้เป็นจุดชี้นำที่ดีเพิ่มเติมเมื่อเสร็จสมบูรณ์
progress:not([max])[value="1"]::before,
progress[max="100"][value="100"]::before {
content: "✓";
position: absolute;
inset-block: 0;
inset-inline: auto 0;
display: flex;
align-items: center;
padding-inline-end: max(calc(var(--_track-size) / 4), 3px);
color: white;
font-size: calc(var(--_track-size) / 1.25);
}
สี
เบราว์เซอร์มีสีของตัวเองสําหรับองค์ประกอบความคืบหน้า และสามารถปรับให้สว่างและมืดได้ด้วยพร็อพเพอร์ตี้ CSS เพียง 1 รายการ ซึ่งสามารถสร้างขึ้นด้วย ตัวเลือกพิเศษเฉพาะเบราว์เซอร์
รูปแบบเบราว์เซอร์สว่างและมืด
หากต้องการเลือกให้เว็บไซต์ใช้องค์ประกอบ <progress>
แบบปรับได้แบบมืดและสว่าง คุณเพียงต้องใช้ color-scheme
เท่านั้น
progress {
color-scheme: light dark;
}
สีเติมความคืบหน้าของพร็อพเพอร์ตี้เดียว
หากต้องการปรับสมดุลสีเขียว-แดงให้องค์ประกอบ <progress>
ให้ใช้ accent-color
progress {
accent-color: rebeccapurple;
}
สังเกตว่าสีพื้นหลังของแทร็กจะเปลี่ยนจากสว่างเป็นมืดโดยขึ้นอยู่กับ accent-color
เบราว์เซอร์จะตรวจสอบคอนทราสต์ที่เหมาะสม: ค่อนข้างเป็นระเบียบ
สีสว่างและมืดที่กำหนดเองทั้งหมด
ตั้งค่าพร็อพเพอร์ตี้ที่กำหนดเอง 2 รายการในองค์ประกอบ <progress>
โดยแบบแรกสำหรับสีแทร็ก และอีกรายการสำหรับสีความคืบหน้าของแทร็ก ภายในคำค้นหาสื่อ prefers-color-scheme
ให้ระบุค่าสีใหม่สำหรับแทร็กและติดตามความคืบหน้า
progress {
--_track: hsl(228 100% 90%);
--_progress: hsl(228 100% 50%);
}
@media (prefers-color-scheme: dark) {
progress {
--_track: hsl(228 20% 30%);
--_progress: hsl(228 100% 75%);
}
}
เน้นรูปแบบ
ก่อนหน้านี้เราให้ดัชนีแท็บเชิงลบแก่องค์ประกอบเพื่อให้เขียนแบบเป็นโปรแกรมได้ ใช้
:focus-visible
เพื่อปรับแต่งโฟกัสเพื่อเลือกใช้รูปแบบวงแหวนโฟกัสที่ชาญฉลาดยิ่งขึ้น สำหรับวิธีนี้ การคลิกเมาส์และโฟกัสจะไม่แสดงวงแหวนโฟกัส แต่การคลิกแป้นพิมพ์จะแสดง วิดีโอ YouTube จะอธิบายรายละเอียดนี้อย่างละเอียดยิ่งขึ้นและควรค่าแก่การตรวจสอบ
progress:focus-visible {
outline-color: var(--_progress);
outline-offset: 5px;
}
รูปแบบที่กำหนดเองในเบราว์เซอร์ต่างๆ
ปรับแต่งรูปแบบโดยเลือกส่วนขององค์ประกอบ <progress>
ที่เบราว์เซอร์แต่ละรายการแสดง การใช้องค์ประกอบความคืบหน้าเป็นเพียงแท็กเดียว แต่ก็สร้างขึ้นจากองค์ประกอบย่อย 2-3 องค์ประกอบที่แสดงผ่านตัวเลือกเทียมของ CSS เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะแสดงองค์ประกอบเหล่านี้
หากคุณเปิดใช้การตั้งค่า
- คลิกขวาบนหน้าเว็บและเลือกตรวจสอบองค์ประกอบเพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกรูปเฟืองการตั้งค่าที่มุมขวาบนของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ
- ภายใต้ส่วนหัวองค์ประกอบ ให้ค้นหาและเปิดใช้ช่องทำเครื่องหมายแสดงเงาของ User Agent
รูปแบบ Safari และ Chromium
เบราว์เซอร์แบบ WebKit เช่น Safari และ Chromium จะแสดง ::-webkit-progress-bar
และ ::-webkit-progress-value
ซึ่งทำให้ใช้ CSS บางส่วนได้ สำหรับตอนนี้ ให้ตั้งค่า background-color
โดยใช้พร็อพเพอร์ตี้ที่กำหนดเอง
ที่สร้างไว้ก่อนหน้านี้ ซึ่งจะปรับเป็นสว่างและมืด
/* Safari/Chromium */
progress[value]::-webkit-progress-bar {
background-color: var(--_track);
}
progress[value]::-webkit-progress-value {
background-color: var(--_progress);
}
รูปแบบใน Firefox
Firefox จะแสดงตัวเลือกเทียม ::-moz-progress-bar
ในองค์ประกอบ <progress>
เท่านั้น ซึ่งหมายความว่าเราไม่สามารถปรับสมดุลสีเขียว-แดงในแทร็กนั้นโดยตรงได้
/* Firefox */
progress[value]::-moz-progress-bar {
background-color: var(--_progress);
}
โปรดสังเกตว่า Firefox ตั้งค่าสีแทร็กจาก accent-color
ขณะที่ iOS Safari มีแทร็กสีฟ้าอ่อน โหมดมืดก็เหมือนกันคือ Firefox มีดาร์กแทร็ก แต่
ไม่ใช่สีแบบกำหนดเองที่เราตั้งค่าไว้ และทำงานได้ในเบราว์เซอร์แบบ Webkit
แอนิเมชัน
ขณะที่ทำงานกับตัวเลือกเทียมในตัวของเบราว์เซอร์ ซึ่งมักจะมีชุดพร็อพเพอร์ตี้ CSS ที่ได้รับอนุญาตแบบจำกัด
ภาพเคลื่อนไหวเติมเส้นทางให้เต็มกำลัง
การเพิ่มการเปลี่ยนไปยัง inline-size
ขององค์ประกอบความคืบหน้าใช้ได้กับ Chromium แต่ใช้ไม่ได้กับ Safari นอกจากนี้ Firefox ก็ไม่ได้ใช้พร็อพเพอร์ตี้การเปลี่ยนใน ::-moz-progress-bar
ด้วย
/* Chromium Only 😢 */
progress[value]::-webkit-progress-value {
background-color: var(--_progress);
transition: inline-size .25s ease-out;
}
การสร้างภาพเคลื่อนไหวจากสถานะ :indeterminate
ทีนี้ฉันก็จะสร้างสรรค์มากขึ้น เพื่อให้ใส่ภาพเคลื่อนไหวได้ ระบบจะสร้างองค์ประกอบเทียมสำหรับ Chromium ขึ้นและมีการใช้การไล่ระดับสีที่เป็นภาพเคลื่อนไหวกลับไปกลับมาสำหรับทั้ง 3 เบราว์เซอร์
พร็อพเพอร์ตี้ที่กำหนดเอง
คุณสมบัติที่กำหนดเองมีประโยชน์สำหรับหลายๆ อย่าง แต่สิ่งที่ฉันชื่นชอบมากที่สุดคือการตั้งชื่อให้กับค่า CSS ที่ดูน่าทึ่ง ขั้นตอนต่อไปนี้ค่อนข้างซับซ้อน
linear-gradient
แต่เป็นชื่อที่น่าสนใจ ทำให้เข้าใจวัตถุประสงค์และกรณีการใช้งานได้อย่างชัดเจน
progress {
--_indeterminate-track: linear-gradient(to right,
var(--_track) 45%,
var(--_progress) 0%,
var(--_progress) 55%,
var(--_track) 0%
);
--_indeterminate-track-size: 225% 100%;
--_indeterminate-track-animation: progress-loading 2s infinite ease;
}
นอกจากนี้ พร็อพเพอร์ตี้ที่กำหนดเองจะช่วยให้โค้ดเป็นแบบ DRY เนื่องจากเราไม่สามารถจัดกลุ่มตัวเลือกเฉพาะเบราว์เซอร์เหล่านี้เข้าด้วยกันได้
คีย์เฟรม
เป้าหมายคือภาพเคลื่อนไหวที่แสดงกลับไปกลับมาเรื่อยๆ คีย์เฟรมเริ่มต้นและสิ้นสุด
จะกำหนดใน CSS ต้องการเพียงคีย์เฟรมเดียว นั่นคือคีย์เฟรมกลางที่ 50%
เพื่อสร้างภาพเคลื่อนไหวที่กลับไปที่จุดเริ่มต้นของการทำงานซ้ำแล้วซ้ำอีก
@keyframes progress-loading {
50% {
background-position: left;
}
}
การกำหนดเป้าหมายแต่ละเบราว์เซอร์
บางเบราว์เซอร์ไม่อนุญาตให้สร้างองค์ประกอบจำลองบนองค์ประกอบ <progress>
เอง หรืออนุญาตให้แถบความคืบหน้าเคลื่อนไหว มีเบราว์เซอร์มากกว่า 1 อย่างที่รองรับการสร้างภาพเคลื่อนไหวของแทร็กมากกว่าองค์ประกอบเทียม ฉันจึงอัปเกรดจากองค์ประกอบเทียมเป็นฐานและเป็นแถบเคลื่อนไหว
องค์ประกอบเทียมของ Chromium
Chromium ไม่อนุญาตให้ใช้องค์ประกอบเทียม: ::after
กับตำแหน่งเพื่อปกปิดองค์ประกอบ มีการใช้คุณสมบัติที่กำหนดเองแบบไม่ชัดเจน และภาพเคลื่อนไหวแบบกลับไปกลับมาทำงานได้ดี
progress:indeterminate::after {
content: "";
inset: 0;
position: absolute;
background: var(--_indeterminate-track);
background-size: var(--_indeterminate-track-size);
background-position: right;
animation: var(--_indeterminate-track-animation);
}
แถบความคืบหน้าของ Safari
สำหรับ Safari คุณสมบัติที่กำหนดเองและภาพเคลื่อนไหวจะมีผลกับแถบความคืบหน้าขององค์ประกอบจำลองดังนี้
progress:indeterminate::-webkit-progress-bar {
background: var(--_indeterminate-track);
background-size: var(--_indeterminate-track-size);
background-position: right;
animation: var(--_indeterminate-track-animation);
}
แถบความคืบหน้าของ Firefox
สำหรับ Firefox คุณสมบัติที่กำหนดเองและภาพเคลื่อนไหวจะมีผลกับแถบความคืบหน้าขององค์ประกอบเทียมด้วย
progress:indeterminate::-moz-progress-bar {
background: var(--_indeterminate-track);
background-size: var(--_indeterminate-track-size);
background-position: right;
animation: var(--_indeterminate-track-animation);
}
JavaScript
JavaScript มีบทบาทสำคัญกับองค์ประกอบ <progress>
โดยจะควบคุมค่าที่ส่งไปยังองค์ประกอบและดูแลให้มีข้อมูลมากพอในเอกสารสำหรับโปรแกรมอ่านหน้าจอ
const state = {
val: null
}
การสาธิตจะมีปุ่มสำหรับควบคุมความคืบหน้า โดยจะอัปเดต state.val
จากนั้นเรียกใช้ฟังก์ชันเพื่ออัปเดต DOM
document.querySelector('#complete').addEventListener('click', e => {
state.val = 1
setProgress()
})
setProgress()
ฟังก์ชันนี้คือจุดที่มีการแสดง UI/UX เป็นกลุ่ม เริ่มต้นใช้งานโดยการสร้างฟังก์ชัน setProgress()
ไม่จำเป็นต้องใช้พารามิเตอร์เนื่องจากมีสิทธิ์เข้าถึงออบเจ็กต์ state
, องค์ประกอบความคืบหน้า และโซน <main>
const setProgress = () => {
}
กำลังตั้งค่าสถานะการโหลดในโซน <main>
องค์ประกอบ <main>
ที่เกี่ยวข้องต้องอัปเดตแอตทริบิวต์ aria-busy
ดังต่อไปนี้ ขึ้นอยู่กับว่าความคืบหน้าเสร็จสมบูรณ์หรือไม่
const setProgress = () => {
zone.setAttribute('aria-busy', state.val < 1)
}
ล้างแอตทริบิวต์หากไม่ทราบจำนวนเงินที่โหลด
หากไม่ทราบค่าหรือไม่ได้ตั้งค่า null
ในการใช้งานนี้ ให้นำแอตทริบิวต์ value
และ aria-valuenow
ออก ซึ่งจะเปลี่ยน <progress>
เป็นไม่ทราบ
const setProgress = () => {
zone.setAttribute('aria-busy', state.val < 1)
if (state.val === null) {
progress.removeAttribute('aria-valuenow')
progress.removeAttribute('value')
progress.focus()
return
}
}
แก้ไขปัญหาการคำนวณทศนิยมของ JavaScript
เนื่องจากผมเลือกใช้ค่าเริ่มต้นความคืบหน้าสูงสุดคือ 1 ฟังก์ชัน
การเพิ่มและการลดของการสาธิตจะใช้การคำนวณทศนิยม JavaScript และภาษาอื่นๆ อาจทำงานได้ไม่ดีเสมอไป
นี่คือฟังก์ชัน roundDecimals()
ที่จะตัดผลลัพธ์ทางคณิตศาสตร์ที่เกินมาออก
const roundDecimals = (val, places) =>
+(Math.round(val + "e+" + places) + "e-" + places)
ปัดเศษค่าเพื่อให้มองเห็นและอ่านได้ชัดเจน ดังนี้
const setProgress = () => {
zone.setAttribute('aria-busy', state.val < 1)
if (state.val === null) {
progress.removeAttribute('aria-valuenow')
progress.removeAttribute('value')
progress.focus()
return
}
const val = roundDecimals(state.val, 2)
const valPercent = val * 100 + "%"
}
กำหนดค่าสำหรับโปรแกรมอ่านหน้าจอและสถานะเบราว์เซอร์
ค่านี้จะใช้ใน 3 ตำแหน่งใน DOM ได้แก่
- แอตทริบิวต์
value
ขององค์ประกอบ<progress>
- แอตทริบิวต์
aria-valuenow
- เนื้อหาข้อความภายใน
<progress>
const setProgress = () => {
zone.setAttribute('aria-busy', state.val < 1)
if (state.val === null) {
progress.removeAttribute('aria-valuenow')
progress.removeAttribute('value')
progress.focus()
return
}
const val = roundDecimals(state.val, 2)
const valPercent = val * 100 + "%"
progress.value = val
progress.setAttribute('aria-valuenow', valPercent)
progress.innerText = valPercent
}
มุ่งเน้นไปที่ความคืบหน้า
อัปเดตค่าแล้ว ผู้ใช้ที่มองเห็นจะเห็นการเปลี่ยนแปลงความคืบหน้า แต่ผู้ใช้โปรแกรมอ่านหน้าจอยังไม่ได้รับประกาศการเปลี่ยนแปลง โฟกัสองค์ประกอบ <progress>
แล้วเบราว์เซอร์จะประกาศการอัปเดต
const setProgress = () => {
zone.setAttribute('aria-busy', state.val < 1)
if (state.val === null) {
progress.removeAttribute('aria-valuenow')
progress.removeAttribute('value')
progress.focus()
return
}
const val = roundDecimals(state.val, 2)
const valPercent = val * 100 + "%"
progress.value = val
progress.setAttribute('aria-valuenow', valPercent)
progress.innerText = valPercent
progress.focus()
}
บทสรุป
ตอนนี้คุณก็รู้แล้วว่าตัวเองทำยังไง คุณจะทำอะไรบ้าง‽ 🙂
แน่นอนว่ามีการเปลี่ยนแปลงบางอย่างที่เราอยากทําหากให้โอกาสอีกครั้ง ฉันคิดว่ายังมีพื้นที่ให้ล้างคอมโพเนนต์ปัจจุบัน และมีพื้นที่ให้ลองสร้างคอมโพเนนต์โดยไม่มีข้อจำกัดด้านรูปแบบคลาส Pseudo ขององค์ประกอบ <progress>
น่าสำรวจ!
มาลองเปลี่ยนแนวทางของเราและเรียนรู้วิธีทั้งหมดเพื่อสร้างเว็บกันเถอะ
สร้างเดโม ลิงก์ทวีตฉัน แล้วฉันจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง