נט2יו - איכות ברשת משנת 2004
  סטנדרט הזהב: אל העתיד עם HTML 5.1
2/2/2017 9:51

בנובמבר של השנה שחלפה, גרסה 5.1 של HTML קיבלה מעמד רשמי והחליפה את גרסה 5.0 כסטנדרט. באיחור אופנתי, התפניתי לסקור את השינויים המהותיים שהוצגו.

המטרה העיקרית שבגרסה החדשה היא נרמול: לא רעיונות פורצי דרך וטכנולוגיות חדשות, אלא הטמעה בתקן באופן רשמי של פיצ'רים שקיימים במרבית הדפדפנים באופן לא-רשמי לצד הטמעה של פרקטיקות שמיושמות הלכה למעשה באופן לא רשמי. המשמעות היא ברורה: W3C החליטו עבור הדפדפנים – את הפיצ'רים הבאים אתם הולכים להטמיע, אם עוד לא עשיתם זאת.


נראה שמשהו טוב עובר על החברים ב – W3C: הם הבינו שאנחנו חיים בעולם דינמי ומהיר שדורש התאמות תכופות כדי להישאר רלוונטיים. ואכן, גרסה 5.1 של HTML נכנסה לסטנדרט כשנתיים בלבד לאחר ש – HTML 5.0 הוטמעה בתקן, העבודה על גרסה 5.2 כבר החלה וההערכות מדברות על כך שתהפוך לתקן בסוף השנה הנוכחית. התקדמות גדולה בהתחשב בכך שלקח להם יותר מעשור (!) לקפוץ מ – HTML 4.01 ל – HTML 5.


כאמור, HTML 5.1 הוטמעה בתקן רק לפני מס' חודשים ולכן – חלק מהאלמנטים והפיצ'רים החדשים עדיין אינם נתמכת באחוזים מספקים. מאידך, את חלקם אתם כבר מכירים ואף עושים בהם שימוש.

בסקירה שלפניכם, כללתי הסבר, דוגמה או צילום מסך (במקרה שהפיצ'ר לא נתמך) ואחוזי תמיכה. בסוף הפוסט מחכה לכם בונוס: תכונה משמעותית שהוצאה מחוץ ל – HTML בגרסה 5.1.

כדי שלא תגידו שאני חופר, בחרתי להתמקד בפיצ'רים המרכזיים. אם אתם רוצים לדעת על כל שינוי שנעשה – זה המקום בשבילכם (אבל רק אחרי שתקראו את הפוסט, מבטיחים?)


תכונות חדשות ב – HTML 5.1


details & summary


שני האלמנטים מאפשרים להגדיר בלוקים-ניתנים להרחבה, ללא שימוש ב – Javascript, כש – details משמש כאלמנט המכיל, summary נכנס בתוך details ומשמש כ'כותרת':



See the Pen Details & Summary by Master Scripter (@MasterScripter) on CodePen.light



כדי לשנות את מצב ברירת המחדל של האלמנט לפתוח, נשתמש בתכונה open="true".


תאימות לדפדפנים


בדיקת תאימות עדכנית


אחוז התמיכה בישראל עומד על כ – 90%, כשכמעט כל הדפדפנים הגדולים (Firefox, Chrome, Safari) תומכים באלמנטים.

עם זאת, בדפדנים של מיקרוסופט (IE11 ו – Edge), עדיין לא קיימת תמיכה.


למזלנו, Tyler Uebele יצר ספרייה קטנה שמוסיפה תמיכה לאלמנטים בדפדפנים שלא תומכים בהם:

https://github.com/tyleruebele/details-shim


menu ו – menuitem


ברוך השב! לאחר שבגרסה 4.01 של HTML האלמנט menu הוצא משימוש, הוא הוגדר מחדש וחוזר אלינו – בצעדים קטנים.

לדעתי, זו האפשרות המרגשת ביותר שהוצגה בגרסה הנוכחית: menu מאפשר לנו להגדיר תפריט או רשימה של פקודות.


בשביל להגדיר פקד, נשתמש באלמנט menuitem, שיכול להיות משלושה סוגים:



  • checkbox – תיבת סימון

  • command – לחצן שמפעיל פונקציה

  • radio – רשימת בחירה


בגרסה 5.1 של HTML רק תפריט מסוג context קיים, בגרסאות עתידיות ניתן לצפות שיצטרפו עוד סוגים (toolbar ו – list כבר בדרך).

את הדוגמה לפיצ'ר הנפלא יוכל לראות רק מי שגולש מדפדפן פיירפוקס בגרסה 50 ומעלה. מי שלא – צירפתי גם צילום מסך (אם כי – הרבה פחות מרגש..).

עוד פרטים על עניין התאימות – בהמשך.


תכונה נחמדה שיש ל – menuitem היא icon שמאפשרת להוסיף אייקון לפריט.



See the Pen Menu Element by Master Scripter (@MasterScripter) on CodePen.light



צילום מסך:


HTML 5.1: הדגמה של Menu Contexthttp://masterscripter.co.il/wp-conten ... monstration-2-300x263.jpg 300w" sizes="(max-width: 418px) 100vw, 418px" />


שימו לב שבקוד לדוגמה, הדגמתי את היכולת לשרשר תפריט בתוך תפריט ("שיתוף ברשתות חברתיות" ו – "יישור טקסט").


תאימות לדפדפנים


בדיקת תאימות עדכנית


נכון לרגע זה, רק Firefox תומך באלמנט menu, וגם זה באופן חלקי (תומך רק ב – Context Menu).

ב – Chrome, Safari ו – Opera ניתן להפעיל את הפיצ'ר כפיצ'ר ניסיוני.


לצערי, לא נותר לי אלא לקבוע שהאלמנט לא מתאים לשימוש בפרודקשן.


בחיפוש מהיר ברשת, לא הצלחתי למצוא ספרייה בלתי-תלויה שתהווה תחליף טוב מספיק לפיצ'ר הזה, אבל כן נתקלתי בשני הדברים הבאים (לא ניסיתי אותם מעולם):



סוגי קלט חדשים: month, week ו – datetime-local


HTML 5.1 מציגה שלושה סוגי קלט חדשים:


week


מאפשר לבחור מספר שבוע ושנה


month


מאפשר לבחור חודש ושנה



datetime-local


מאפשר לבחור תאריך ושעה, בהתבסס על איזור הזמן המוגדר אצל המשתמש (בשונה מהתנהגות ברירת המחדל – הסתמכות על איזור הזמן של השרת)


דוגמה לשלושת סוגי הקלט:



See the Pen New Input Types in HTML 5.1 by Master Scripter (@MasterScripter) on CodePen.light



תאימות לדפדפנים


בדיקת תאימות עדכנית


שלושת סוגי הקלט לא נתמכים ב – Firefox, Safari ו – IE11 (שלא תומכות בכלל בקלט מסוג תאריך/שעה)

חשוב לדעת שהסיכון שבשימוש בקלט לא נתמך הוא נמוך, שכן הדפדפנים ממירים סוג קלט שהם לא מכירים לסוג קלט text.


תמונות ריספונסיביות


אם האלמנט menu הוא המרגש ביותר בסט הפיצ'רים החדשים שקיבלנו, אז תמונות ריספונסיביות הוא הפיצ'ר הנחוץ שבהם.

HTML 5.1 מציעה את 'החבילה השלמה' להטמעת תמונות ריספונסיביות:


picture


אלמנט מכיל (container).

צריך להכיל בתוכו אלמנט אחד או יותר מסוג source ואלמנט אחד בלבד מסוג img.


על האלמנט source לקבל את התכונות הבאות:



  • media – תנאי מדיה

  • srcset (חובה) – מחרוזת שמכילה את מקור(ות) התמונה

  • sizes – מחרוזת שמכילה את רוחב התמונה


רגע רגע רגע!

אמנם תנאי מדיה דיי פשוט להבנה – הוא נכתב בדיוק כפי שאנו כותבים media query בקובץ ה – CSS.

אבל srcset? sizes? על מה מדובר? בואו נתעכב על זה רגע:


srcset


(התכונה עשויה להסתמך על התכונה sizes, עליה אפרט בפסקה הבאה)

תכונה של האלמנט img שמכילה רשימה של מחרוזות, מופרדות על-ידי פסיק. כל מחרוזת מייצגת מקור לתמונה ותנאי לבחירה במקור.

התנאי מתייחס לצפיפות הפיקסלים (pixel density), ומכיל בתוכו שני 'תתי' תנאים:



  1. מפורש – צפיפות פיקסלים + x (לדוגמה: 1.5x)

  2. מחושב – רוחב התמונה + w (לדוגמה: 200w)

    אם נשתמש בתנאי זה, צפיפות הפיקסלים תחושב על פי הנוסחה הבאה:

    רוחב התמונהגודל התמונה המתאים מהתכונה sizes

    מיותר לציין, שהתכונה sizes נדרשת כדי להשתמש בתנאי הזה.


המקור האחרון שיצוין יהיה מקור ברירת מחדל, במקרה שאף אחד מהתנאים לא מתקיים.


sizes


תכונה של האלמנט img שמכילה רשימה של מחרוזות, מופרדות על-ידי פסיק. כל מחרוזת מייצגת תנאי מדיה (מנוסח כמו media query) ורוחב התמונה בפועל אם התנאי מתקיים.

התכונה באה לידי ביטוי רק אם נעשה שימוש בתכונה srcset עם תנאי מחושב (תנאי מספר 2).


איך זה נראה בפועל


ככל הנראה, אני לא הולך לחדש לרבים מכם. ככה זה נראה בפועל:


See the Pen HTML 5.1 Responsive Image by Master Scripter (@MasterScripter) on CodePen.light



תאימות לדפדפנים


בדיקת תאימות עדכנית [picture] | בדיקת תאימות עדכנית [srcset]


מרבית הדפדפנים הטמיעו את האלמנט לפני ש (בדפדפנים מסויימים, הרבה לפני ש) HTML 5.1 הפך לתקן המומלץ ע"י W3C ולכן – אחוזי התמיכה גבוהים מאד, כ – 3 חודשים לאחר פרסום גרסה 5.1 לתקן.

עם זאת, בהרבה דפדפנים התמיכה נוספה ממש בצמוד לפרסום HTML 5.1 ואפילו אחרי, כך קרה בדפדפן Chrome למכשירי אנדרואיד ובדפדפן אופרה.


בואו נדבר מספרים: 89.9% תמיכה בישראל באלמנט picture ו – 90.2% תמיכה בתכונה srcset.

ואם תהיתם מי הדפדפן שמוריד את האחוזים, תרשו לי לא להפתיע אתכם: Internet Explorer 11 מככב גם פה.


אל תתבאסו! ראשית, האלמנט picture כולל fallback למקרה שהדפדפן לא תומך בו.

אבל מה אם אנחנו רוצים שגם ב – Internet Explorer הידוע לשמצה יהיו תמונות ריספונסיביות? אני כאן כדי להציל את המצב!

יותר נכון, Scott Jehl כאן כדי להציל את המצב, עם תחליף לדפדפנים שלא תומכים – הספרייה Picturefill:

http://scottjehl.github.io/picturefill/


אני משתמש בספרייה הזו בכל פרוייקט שאני מבצע – השימוש בה פשוט ולא דורש כלום מעבר ל"התקנה" והיא עושה עבודה מעולה מבחינה ביצועית. מומלץ בחום!


שלום ולא להתראות: Appcache בחוץ!


אוקיי, כנראה ש-שלום ולא להתראות זו בחירת מילים לא מוצלחת.

W3C הגדירה את Appcache כ'מיושן'. יש שקפצו (אהמ אהמ מוזילה) להסיק מכך שהמכניזם הזה הוצא מחוץ לחוק – אבל לא כך הדבר.

Appcache מוטמע כמעט בכל הדפדפנים (98.29% תמיכה בישראל) ויקח זמן עד שלא ניתן יהיה להשתמש בו יותר.


אבל, חשוב להבין שזו המגמה: Appcache החוצה!

ואם אתם תוהים לעצמכם מה זה הרעש הזה – זה צהלות השמחה שלי ושל מפתחים רבים שסבלו מהפיצ'ר הזה.


למה?

על קצה המזלג: הציפיות מ – Appcache היו שונות בתכלית ממה שהוא סיפק בפועל, והוא פשוט נכשל במבחן התוצאה.


ואולי הסיבה לכך ש – Appcache הוגדר כמיושן ולא כיצא מכלל שימוש היא שנוצר ואקום: איך ניצור אפליקציות אופליין בלי המנגנון הזה?

התשובה טמונה ב – Service Workers, שעדיין לא נתמך ומוגדר כטיוטה. אבל על זה אפרט בפוסט נפרד (מבטיח).


אז אמנם עדיין אין תחליף, אבל לפחות אנחנו יודעים שהוא בדרך.


שלום ולהתראות (בפוסט הבא)


HTML 5.1 הינה "עדכון גרסה" שמטרתו העיקרית היא להתקין פרקטיקות "פיראטיות" שנעשה בהן שימוש רווח.

ברוח התקופה, אפשר להגיד שגרסה 5.1 מביאה איתה לגליזציה 😉


נותר רק לקוות ש – HTML תלך אחרי Javascript ו – CSS ותתאים את עצמה למציאות הקיימת.

בינתיים הם מוכיחים את עצמם.


הפוסט סטנדרט הזהב: אל העתיד עם HTML 5.1 הופיע ראשון בMasterScripter







האחריות על התגובות למאמרים השונים חלה על שולחיהן. הנהלת האתר אינה אחראית על תוכנן.
שליחת תגובה
חוקי שליחת תגובות*
תגובות חברי האתר מאושרות אוטומטית
כותרת*
_CM_USER*
_CM_EMAIL*
_CM_URL*
הודעה*
קוד אבטחה*

 הערה: התכנים המוצגים בעמוד זה ...

התכנים המופיעים במדור זה מועברים אוטומטית מבלוגים ואתרי מידע ברשת, כל הזכויות על התכנים: כולל טקסטים, תמונות, סרטים וכל מדיה נוספת, הנם של יוצרי החומר המקורי בלבד. אתר נט2יו אינו טוען לבעלות או לזכויות יוצרים על התכנים, אלא רק מצביע עליהם בצורה נוחה ומרוכזת, וכן מקשר אל האתר המקורי, עם המאמרים המלאים. אם למרות האמור לעיל, נתקלת בחשש להפרת זכויות יוצרים, או שתוכן מסויים באתר אינו לרוחך, אנא דווח לנו באמצעות טופס יצירת הקשר ונורידו בהקדם האפשרי מהאתר.
×

הצהרת נגישות

אתר זה מונגש לאנשים עם מוגבלויות על פי Web Content Accessibility Guidelines 2 ברמה AA.
האתר נמצא תמידית בתהליכי הנגשה: אנו עושים כל שביכולתנו שהאתר יהיה נגיש לאנשים עם מוגבלות.
אם בכל זאת נתקלתם בבעיית נגישות אנא שלחו לנו הערתכם במייל (אל תשכחו בבקשה לציין את כתובת האתר).

אודות ההנגשה באתר:

  • אמצעי הניווט וההתמצאות באתר פשוטים ונוחים לשימוש.
  • תכני האתר כתובים בשפה פשוטה וברורה ומאורגנים היטב באמצעות כותרות ורשימות.
  • מבנה קבוע ואחיד לנושאים, תתי הנושאים והדפים באתר.
  • האתר מותאם לצפייה בסוגי הדפדפנים השונים (כמו כרום, פיירפוקס ואופרה)
  • האתר מותאם לסביבות עבודה ברזולוציות שונות.
  • לאובייקטים הגרפיים באתר יש חלופה טקסטואלית (alt).
  • האתר מאפשר שינוי גודל הגופן על ידי שימוש במקש CTRL וגלגלת העכבר וכן בלחיצה על הכפתור המתאים בערכת ההנגשה הנגללת בצד האתר ונפתחת בלחיצה על הסמלון של כסא הגלגלים.
  • הקישורים באתר ברורים ומכילים הסבר להיכן הם מקשרים.
    לחיצה על הכפתור המתאים בערכת ההנגשה שבצד האתר, מסמנת את כל קישורי האתר בקו תחתון.
  • אנימציות ותכנים מהבהבים: הכפתור המתאים לכך בערכת ההנגשה שבצד האתר , מאפשר להסתיר בלחיצה אחת את כל התכנים באתר הכוללים היבהובים או תכנים המכילים תנועה מהירה (אנימציות, טקסט נע).
  • למתקשי ראיה: מתקשי הראיה שבנינו יכולים להעזר בשני כפתורים הנמצאים בערכת ההנגשה בצדו הימני של האתר, האחד מסב את האתר כולו לגוונים של שחור ולבן, השני מעביר את האתר כולו למצב של ניגודיות גבוהה.