HTML5 Τρόπος χρήσης

και

Ετικέτες

Αυτό το άρθρο είναι μέρος του μας "Σειρά HTML5 / CSS3 Tutorials" - αφιερωμένο να σας βοηθήσει να κάνετε έναν καλύτερο σχεδιαστή και / ή προγραμματιστή. Κάντε κλικ ΕΔΩ για να δείτε περισσότερα άρθρα από την ίδια σειρά.

Μεταξύ αρκετών νέων ετικετών που είναι διαθέσιμες στο HTML5, Προδιαγραφές (όπως: φιγούρα, απόλαυση, και κατά μέρος), λεπτομέρεια και περίληψη ετικέτες, κατά τη γνώμη μου, είναι οι πιο χρήσιμες. Με αυτές τις νέες ετικέτες μπορείτε να αποκρύψετε κάποιο από το μεγάλο περιεχόμενο και να εμφανίσετε μόνο τη σύνοψη.

Στην πραγματικότητα βλέπουμε συχνά αυτό το φαινόμενο, αλλά οι περισσότεροι από αυτούς εξακολουθούν να βασίζονται στο JavaScript ή στον αδελφό του: το jQuery, το οποίο οι περισσότεροι άνθρωποι δεν καταλαβαίνουν. Τώρα, με αυτά τα νέα στοιχεία - Λεπτομέριες και περίληψη - τα πράγματα θα γίνουν ευκολότερα.

Έτσι, ας δούμε πώς λειτουργούν οι ετικέτες σε ένα πραγματικό σενάριο.

Σε αυτό το demo θα συνοψίσουμε μια περιγραφή προϊόντος. Πρώτα ας δημιουργήσουμε μια ετικέτα 'λεπτομέρειες' και στη συνέχεια να βάλουμε όλο το περιεχόμενο μαζί με την ετικέτα 'περίληψη' μέσα σε αυτήν, όπως στο παρακάτω παράδειγμα:

 
 
Προδιαγραφή MacBook Pro
 
 
13,3 ιντσών LED-οπίσθιο φωτισμένο γυαλιστερό ευρείας οθόνης με διαφανή γυαλιά από άκρη σε άκρη (ανάλυση 1280 x 800 pixel).
 
2.4 GHz επεξεργαστής Intel Core i5 διπλού πυρήνα με 3 MB μνήμης cache L3 για εξαιρετικό multitasking.
 
Intel HD Graphics 3000 με 384 MB DDR3 SDRAM που μοιράζονται με την κύρια μνήμη.
 
Σκληρός δίσκος Serial ATA 500 GB (5400 σ.α.λ.)
 
Εγκατεστημένη μνήμη RAM 4 GB (1333 MHz DDR3, υποστηρίζει έως και 8 GB)
 
 
 

Σε αυτό το παράδειγμα, έχω προσθέσει λεπτομέρειες MacBook Pro, και τώρα ας δούμε πώς το πρόγραμμα περιήγησης κάνει αυτές τις ετικέτες.

Έχω επίσης προσθέσει έναν τίτλο και περισσότερες περιγραφές του προϊόντος πάνω από τις λεπτομέρειες για να καταστήσει το παραπάνω demo πιο λογικό σε εσάς. Λοιπόν, τι νομίζεις? Είναι αρκετά εύκολο, σωστά?

Υποστήριξη του προγράμματος περιήγησης

Ωστόσο, προτού σπεύσετε να εφαρμόσετε αυτήν την ετικέτα σε ολόκληρο τον ιστότοπό σας, πρέπει να σημειώσετε ότι οι λεπτομέρειες και η ετικέτα περίληψης υποστηρίζονται αυτήν τη στιγμή μόνο στο Chrome 12 και παραπάνω.

Ακόμη και ο τελευταίος Firefox δεν τις υποστηρίζει ακόμα.

Επομένως, εάν θέλετε να εφαρμόσετε αυτήν την ετικέτα, πρέπει να συμπεριλάβετε μια λειτουργία εναλλαγής για μη υποστηριζόμενα προγράμματα περιήγησης. Τα καλά νέα, είναι απλό. μπορείτε να χρησιμοποιήσετε αυτό το στοιχείο polyfill, το οποίο θα επαναλαμβάνει αυτόματα τη λειτουργικότητα της ετικέτας για παλιά προγράμματα περιήγησης.

Κάντε λήψη αυτού του αρχείου και συνδέστε το με το έγγραφο html μαζί με το jQuery (τουλάχιστον 1,7+) και βεβαιωθείτε ότι τοποθετήσατε το polyfill πριν από την ετικέτα κοντά στο σώμα.

Και μέσα στην ετικέτα κεφαλής, εισαγάγετε την ακόλουθη ετικέτα υπό όρους για να συμπεριλάβετε το HTML5shiv για το IE8 και παλαιότερα, διαφορετικά ο Internet Explorer δεν θα αναγνωρίσει αυτές τις νέες ετικέτες.

Τώρα ας δούμε πώς φαίνεται στον Internet Explorer:

Και τώρα λειτουργεί και στον Internet Explorer.

• Διαδήλωση
• Λήψη πηγής

συμπέρασμα

Η δημιουργία ενός τέτοιου αποτελέσματος απόκρυψης και προβολής με JavaScript ή jQuery είναι πραγματικά σχετικά εύκολη, αλλά η υποστήριξη που υποστηρίζεται από το πρόγραμμα περιήγησης είναι σίγουρα μια πολύ πιο εύκολη λύση για πολλούς ανθρώπους. Είτε θέλετε να το κάνετε σε JavaScript είτε σε HTML5, είναι η απόφασή σας. Ευχαριστώ για την ανάγνωση και ελπίζω να το απόλαυσα.