ภาพรวมพื้นฐานของวิธีสร้างแถบการโหลดสีที่ปรับเปลี่ยนได้และเข้าถึงได้ด้วยองค์ประกอบ <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 เมื่อเสร็จสิ้น
การเพิ่มแอตทริบิวต์ของอารียา
แม้ว่าบทบาทโดยนัยขององค์ประกอบ <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 ใช้แล้วและเป็นสไตล์ที่เป็นข้อขัดแย้ง ซึ่งทำให้การทำงานบางอย่างกลายเป็นเรื่องง่าย เช่น ไม่จำเป็นต้องส่งค่า 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 เพียงรายการเดียว ซึ่งสามารถสร้างขึ้นจาก ตัวเลือกพิเศษเฉพาะเบราว์เซอร์
รูปแบบเบราว์เซอร์แบบสว่างและมืด
หากต้องการเลือกให้เว็บไซต์ใช้เอลิเมนต์ <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> ที่แต่ละเบราว์เซอร์จะแสดง การใช้เอลิเมนต์ 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 ใช้เพียง 1 คีย์เฟรมเท่านั้น คือคีย์เฟรมกลางที่ 50% เพื่อสร้างภาพเคลื่อนไหวที่กลับไปยังจุดที่เริ่มต้นซ้ำแล้วซ้ำอีก
@keyframes progress-loading {
50% {
background-position: left;
}
}
การกำหนดเป้าหมายแต่ละเบราว์เซอร์
บางเบราว์เซอร์ไม่อนุญาตให้สร้างองค์ประกอบเทียมในองค์ประกอบ <progress> หรืออนุญาตให้ทำให้แถบความคืบหน้าเคลื่อนไหวได้ มีเบราว์เซอร์จำนวนมากรองรับแทร็กที่เคลื่อนไหวได้มากกว่าองค์ประกอบเทียม ผมจึงอัปเกรดจากองค์ประกอบเทียมเป็นฐานและเป็นแถบที่เคลื่อนไหวได้
องค์ประกอบเทียมของ 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()
}
บทสรุป
ตอนนี้คุณก็รู้แล้วว่าฉันทำท่านั้นได้อย่างไร คุณจะทำยังไงบ้างคะ‽ 🙂
ถ้ามีโอกาส ฉันอยากจะทำการเปลี่ยนแปลงบางอย่าง ฉันคิดว่ามีที่ว่างสำหรับล้างคอมโพเนนต์ปัจจุบัน และมีพื้นที่ให้ลองสร้างคอมโพเนนต์ที่ไม่มีข้อจำกัดรูปแบบคลาสจำลองขององค์ประกอบ <progress> ได้ ขอแนะนำให้สำรวจ
มาเพิ่มความหลากหลายให้กับแนวทางของเราและเรียนรู้วิธีทั้งหมดในการสร้างเนื้อหาบนเว็บกัน
สร้างการสาธิต ลิงก์ทวีตฉัน แล้วฉันจะเพิ่ม ลงในส่วนรีมิกซ์ของชุมชนด้านล่าง