תוכן עניינים
בנובמבר של השנה שחלפה, גרסה 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
ברוך השב! לאחר שבגרסה 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
צילום מסך:
שימו לב שבקוד לדוגמה, הדגמתי את היכולת לשרשר תפריט בתוך תפריט ("שיתוף ברשתות חברתיות" ו – "יישור טקסט").
תאימות לדפדפנים
נכון לרגע זה, רק 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), ומכיל בתוכו שני 'תתי' תנאים:
- מפורש – צפיפות פיקסלים + x (לדוגמה: 1.5x)
- מחושב – רוחב התמונה + 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 ותתאים את עצמה למציאות הקיימת.
בינתיים הם מוכיחים את עצמם.
2 תגובות
איתן
3 בפברואר 2017 - 18:06כתבה נהדרת.
יונתן נקסון
12 בפברואר 2017 - 14:52?