HTML5 כיצד להשתמש ב-

ו-

תגיות

מאמר זה הוא חלק שלנו "HTML5 / CSS3 סדרת הדרכות" - ייעודי כדי לעזור לך לעשות מעצב טוב יותר ו / או מפתח. לחץ כאן כדי לראות מאמרים נוספים מאותה סדרה.

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

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

אז, בואו לראות איך התגים לעבוד במקרה תרחיש אמיתי.

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

 
 
מפרט MacBook Pro
 
 
מסך רחב בגודל 13.3 אינץ 'עם מסך רחב מבריק עם קצה לקצה, ללא הפרעה זכוכית (1280 x 800 פיקסלים ברזולוציה).
 
מעבד Intel Core i5 בעל ליבה כפולה עם 3 MB משותף מטמון L3 עבור ריבוי משימות מעולה.
 
אינטל HD גרפיקה עם 384 MB של DDR3 SDRAM משותף עם הזיכרון הראשי.
 
500 GB כונן קשיח ATA טורי (5400 סל"ד)
 
4 GB מותקן RAM (1333 מגהרץ DDR3; תומך בעד 8 GB)
 
 
 

בדוגמה זו, הוספתי פירוט MacBook Pro מפרט, ועכשיו בואו לראות איך הדפדפן מעבד את התגים.

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

דפדפן תומך

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

גם את Firefox האחרונה אינה תומכת בהם עדיין.

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

הורד את הקובץ וקשר אותו למסמך HTML יחד עם jQuery (1.7+ לפחות) וודא שאתה שם את polyfill לפני תג קרוב הגוף.

ובתוך תג הכותרת, הוסף את התג המותנה הבא כדי לכלול HTML5shiv עבור IE8 וקודם, אחרת Internet Explorer לא יזהה את התגים החדשים.

עכשיו בואו נראה איך זה מסתבר ב- Internet Explorer:

וזה עובד עכשיו על Internet Explorer גם כן.

• הדגמה
• הורד מקור

סיכום

יצירת אפקט הסתר והופעה עם JavaScript או jQuery הוא למעשה קל יחסית, אך לאחר שהוא נתמך באופן מקורי מהדפדפן הוא בהחלט פתרון הרבה יותר קל עבור אנשים רבים. אם אתה רוצה לעשות את זה ב- JavaScript או ב- HTML5, זה ההחלטה שלך. תודה על הקריאה, ואני מקווה שנהנית.