MasterScripter

סטנדרט הזהב: אל העתיד עם HTML 5.1

בנובמבר של השנה שחלפה, גרסה 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 Context

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

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

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

נכון לרגע זה, רק 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 ותתאים את עצמה למציאות הקיימת.
בינתיים הם מוכיחים את עצמם.

אם הגעת עד לפה, הגיע הזמן להירשם לניוזלטר!

Summary
Article Name
סטנדרט הזהב: אל העתיד עם HTML 5.1
Description
HTML 5.1 כבר כאן - עם נורמליזציה של פיצ'רים שכולנו חיכינו להם: מתמונות רספונסיביות ועד לשליטה על התפריט בקליק ימני!
Author
Publisher Name
MasterScripter
Publisher Logo
אודות 
hello world! אני יונתן, מתעסק בתכנות ופיתוח WEB פלוס מינוס מאז שאני זוכר את עצמי. ב2013 הקמתי את קבוצת סיזן ביחד השותף היקר שלי - שלומי שלומקה זק. ביום מתעסק בפיתוח ועיצוב אתרי אינטרנט ואפליקציות, עיצוב חוויית משתמש, הקמת מיזמים, ועוד..אבל מה שלא ידעתם עליי - זה שבלילה אני באטמן. אל תגלו לאף אחד!

2 תגובות

  1. איתן

    3 בפברואר 2017 - 18:06
    תגובה

    כתבה נהדרת.

השאר/י תגובה לאיתן

לבטל

האימייל לא יוצג באתר. שדות החובה מסומנים *