שש תכונות HTML שימושיות עם תיקונים עדכניים
שש תכונות HTML שימושיות בעדכון למאמר מ־2011
מדדי התקדמות, מדיה, canvas, סימון טקסט ואחסון מקומי מובנים מצמצמים צורך לשחזר יכולות דפדפן בתוספים ובספריות. המקור פורסם ב־17 בספטמבר 2011; טענותיו על Windows 8, Internet Explorer 9, Flash ומלחמת הקודקים הן היסטוריות, לא הנחיות תאימות עדכניות. הטענה ש־Microsoft אסרה בפשטות על Adobe בכל טאבלטי Windows 8 הייתה רחבה מדי. כאן הדרך הרלוונטית היא HTML מובנה; בדקו דפדפן, קודק ונגישות בפועל במקום להשתמש בטבלת התמיכה הישנה.
1. התקדמות
progress מייצג התקדמות במשימה. ממשק העלאה יכול לעדכן אותו לפי אירועי התקדמות אמיתיים, לא להניח שבקשת AJAX השלימה מספר בתים מסוים. יש לתת תווית נגישה. ערך 22 עם max 100 מייצג 22%; במשימה שאורכה אינו ידוע משמיטים value.
<label for="upload-progress"> התקדמות ההעלאה</label>
<progress id="upload-progress" value="22" max="100"> 22%</progress> 2. וידאו
משתמשים ב־video עם src, או ברכיבי source מקוננים בעלי src ו־type, ולא במאפיין source על video. קיימים controls, muted ו־autoplay, אך מדיניות הדפדפן עשויה לחסום הפעלה אוטומטית. MP4 הוא מכולה ו־H.264 הוא קודק; גם Ogg ו־Theora הם שכבות שונות. התמיכה תלויה בדפדפן, במערכת ובקידוד, ולא בחלוקה נצחית בין Chrome ל־Firefox. יש לספק כתוביות מתאימות ותמליל לדיבור ולשמע משמעותי.
<video controls preload="metadata" width="320" height="240">
<source src="lesson.mp4" type="video/mp4">
<track kind="captions" src="lesson-he.vtt" srclang="he" label="עברית">
הדפדפן אינו יכול לנגן את הווידאו.
</video> lesson.mp4 ו־lesson-he.vtt הם שמות נכסים מקומיים להמחשה, לא הורדות שסופקו. החליפו במדיה ובכתוביות מאומתות. נגן HTTP של out.mp4/out.ogv וקטע final.ogg במקור לא אומתו כמדיה ניתנת לניגון ואינם מופעלים מחדש בנוסח המתוקן.
3. שמע
audio משתמש באותו מודל בחירת משאבים. השתמשו ב־src וב־controls ובסוג התקני audio/mpeg למקור MP3. סיומת קובץ לבדה אינה מוכיחה תוכן או תמיכת קודק. ספקו תמליל לפי הצורך.
<audio controls preload="metadata">
<source src="lesson.mp3" type="audio/mpeg">
הדפדפן אינו יכול לנגן את השמע.
</audio> שם הקובץ הוא להמחשה. שתי כתובות Google Sites במקור השתמשו במאפיין source לא תקין ותוכן המדיה שלהן לא אומת; לא הומצאו כאן חלופות עובדות.
4. משטח ציור
canvas מספק משטח ציור הנשלט ב־JavaScript. הוא עשוי לחסוך הורדת תמונת bitmap עבור צורה מחושבת, אך עבודה בצד הלקוח אינה מזרזת דף אוטומטית. יש למדוד עלות ציור ואנרגיה. canvas אינו רכיב ריק: נדרשים תג סוגר וחלופה נגישה; רכיב ריק לבדו אינו מצייר דבר.
<canvas id="someCanvas" width="320" height="200">
תיאור חלופי של התרשים המתוכנן.
</canvas> 5. סימון
mark מסמן טקסט רלוונטי להקשר הנוכחי, כגון התאמה בחיפוש, ולא רק משמש עיצוב כללי. הדוגמה משמרת את המחשת ההדגשה שבמקור.
טקסט ארוך, <mark> חשוב</mark> סוף הטקסט.טקסט ארוך, חשוב סוף הטקסט.
6. אחסון מקומי
localStorage שומר צמדי מחרוזות לפי origin, לא לפי דומיין שלם בלי קשר לפרוטוקול ולפורט. בניגוד לעוגיות, הערכים אינם נשלחים אוטומטית בבקשות HTTP. עוגיות מצורפות לבקשות מתאימות; שרת מגדיר או מעדכן אותן ב־Set-Cookie כשצריך, לא מחזיר כל עוגייה בכל תשובה. שתי הטכנולוגיות כפופות לבקרת המשתמש. localStorage אינו בטוח יותר מעצם טבעו: קוד מאותו origin יכול לקרוא אותו, ולכן אין לשמור בו פרטי הזדהות רגישים רק כדי להימנע מעוגיות.
מכסה קבועה של 5 MB אינה הבטחה אוניברסלית. גישה יכולה לזרוק חריגה עקב מדיניות או מכסה והנתונים עשויים להימחק. בדיקת קיום המאפיין אינה מוכיחה שימושיות. השתמשו במתודות עם טיפול בשגיאות; הדוגמה כותבת וקוראת רק כשהיישום קורא לה במכוון. לא בוצעה גישה לאחסון דפדפן לצורך המאמר.
function saveExample() {
try {
window.localStorage.setItem("MyKey", "Test");
return window.localStorage.getItem("MyKey");
} catch (error) {
return null; // The application should handle unavailable storage.
}
}התכונות המובנות שימושיות כשמטפלים במפורש במשאבים, בתאימות, באבטחה ובנגישות שלהן.