10 תכונות חדשות של HTML 5.1 & כיצד להשתמש בהם IRL

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

במאמר זה, אנחנו הולכים לראות את התכונות החדשות שלה אתה יכול לעשות שימוש מבלי לגעת ב- JavaScript, עם זאת את השיפורים של רקע JavaScript הם גם יוצא דופן, כפי שאתה יכול לראות את זה יומן שינוי רשמי.

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

1. הגדר מספר רב של משאבי תמונה עבור עיצוב גמיש

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

ה התג עצמו אינו מציג שום דבר, הוא פועל בדיוק כמו ההקשר של משאבי התמונה המרובים. אתה צריך להצהיר על משאב התמונה ברירת המחדל כמו הערך של src תכונה של תג, ואת משאבי תמונה חלופיים ללכת בתוך srcset תכונות של ו אלמנטים.

קוד לדוגמה:

2. הצג או הסתר מידע נוסף

עם ה

ו

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

בתוך

. לאחר

אתה יכול הוסף את המידע הנוסף אתה רוצה להתחבא.

קוד לדוגמה:

 
 
הודעת שגיאה
 
 
לא הצלחנו לסיים את הורדת הסרטון הזה.
 
 
שם קובץ:
mefile.mp4
 
גודל הקובץ:
100 MB
 
משך הפעילות:
00:05:27
 
 
 
 

כך נראה קוד זה ב- Firefox 50.0.2:

3. הוסף פונקציונליות לתפריט ההקשר של הדפדפן

עם ה היסוד שלה type = "הקשר" תכונה, אתה יכול הוסף פונקציונליות מותאמת אישית אל ה תפריט ההקשר של הדפדפן. אתה צריך להקצות כמו אלמנט הילד של

תג. ה id של ה האלמנט צריך לשאת את אותו ערך כמו תפריט הקשר תכונה של אלמנט שאליו אנחנו רוצים להוסיף את תפריט ההקשר (שהוא רכיב בדוגמה הבאה).

קוד לדוגמה:

לחץ לחיצה ימנית

ה התג יכול יש שלושה סוגים שונים, "תיבת סימון", "פקודה" (שאליו עליך להוסיף פעולה עם JavaScript), וכן רדיו. ניתן להוסיף יותר מתפריט תפריט אחד לתפריט הקשר, עם זאת תמיכה בדפדפן עבור תכונה זו לא ממש טוב. Chrome 54 אינו תומך בו, ו- Firefox 50 מאפשר רק נוכחות של תפריט הקשר נוסף אחד. בהמשך תוכל לראות כיצד פועל קוד הקוד ב- Firefox 50.

4. כותרות עליונות ותחתונות של נסט

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

תכונה זו יכולה להיות שימושית אם ברצונך להוסיף המורחבת כותרות אלמנטים סמנטית חתך, כמו

ו

. דוגמת הקוד להלן יוצרת סרגל צד בתוך הכותרת,