10 Νέες δυνατότητες της HTML 5.1 & Πώς να τις χρησιμοποιήσετε IRL

Η προδιαγραφή HTML πήρε ένα γενική επισκευή πριν από μερικές εβδομάδες, όταν το W3C δημοσίευσε το δικό του νέα σύσταση HTML 5.1 τον Νοέμβριο του 2016. Στην πρόσφατη θέση του στο blog, το W3C κάλεσε τη νέα μεγάλη κυκλοφορία του χρυσός κανόνας, καθώς το HTML 5.1 μας παρέχει νέους τρόπους με τους οποίους μπορούμε να χρησιμοποιήσουμε την HTML για να δημιουργήσουμε πιο ευέλικτες εμπειρίες ιστού.

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

Σημειώστε ότι προς το παρόν όχι όλα τα προγράμματα περιήγησης υποστηρίζουν όλες αυτές τις λειτουργίες, οπότε μην ξεχάσετε να το κάνετε ελέγξτε την υποστήριξη του προγράμματος περιήγησης πριν τα χρησιμοποιήσετε στην παραγωγή. Εάν ενδιαφέρεστε για το περαιτέρω ανάπτυξη του προτύπου HTML, μπορείτε να δείτε το σχέδιο εργασίας του HTML 5.2 επίσης.

1. Καθορίστε πολλαπλούς πόρους εικόνας για ευαίσθητο σχεδιασμό

Σε HTML 5.1, μπορείτε να χρησιμοποιήσετε tag μαζί με το srcset χαρακτηριστικό να κάνει ευαίσθητη επιλογή εικόνας δυνατόν. ο ετικέτα αντιπροσωπεύει ένα δοχείο εικόνας που επιτρέπει στους προγραμματιστές να δηλώνουν διαφορετικούς πόρους εικόνας προκειμένου να προσαρμοστούν στην UAτο μέγεθος του παραθύρου προβολής, την πυκνότητα των εικονοστοιχείων, τον τύπο οθόνης και άλλες παραμέτρους που χρησιμοποιούνται ανταποκρίσιμος σχεδιασμός.

ο η ίδια η ετικέτα δεν εμφανίζει τίποτα, λειτουργεί απλά ως πλαίσιο για τους πόρους πολλαπλών εικόνων. Πρέπει να δηλώσετε το προεπιλεγμένη πηγή εικόνας ως η αξία του src χαρακτηριστικό του ετικέτα και το εναλλακτικούς πόρους εικόνας πηγαίνετε μέσα στο srcset χαρακτηριστικά του και στοιχεία.

Παράδειγμα κώδικα:

2. Εμφανίστε ή αποκρύψτε επιπλέον πληροφορίες

Με το

και

ετικέτες, μπορείτε προσθέστε εκτεταμένες πληροφορίες σε ένα κομμάτι περιεχομένου. Οι επιπλέον πληροφορίες δεν εμφανίζεται από προεπιλογή, αλλά αν ενδιαφέρονται οι χρήστες, αυτοί έχετε την επιλογή να ρίξετε μια ματιά. Στον κώδικα σας, υποτίθεται ότι Τοποθετήστε το

ετικέτα μέσα

. Μετά το

ετικέτα μπορείτε προσθέστε τις πρόσθετες πληροφορίες θέλετε να κρύψετε.

Παράδειγμα κώδικα:

 
 
Μήνυμα λάθους
 
 
Δεν ήταν δυνατό να ολοκληρωθεί η λήψη αυτού του βίντεο.
 
 
Ονομα αρχείου:
yourfile.mp4
 
Μέγεθος αρχείου:
100 MB
 
Διάρκεια:
00:05:27
 
 
 
 

Έτσι φαίνεται αυτό το παράδειγμα κώδικα στο Firefox 50.0.2:

3. Προσθέστε λειτουργικότητα στο μενού περιβάλλοντος του προγράμματος περιήγησης

Με το και του type = "context" χαρακτηριστικό, μπορείτε προσθήκη προσαρμοσμένης λειτουργικότητας στο μενού περιβάλλοντος του προγράμματος περιήγησης. Πρέπει να εκχωρήσετε ως το παιδικό στοιχείο του

ετικέτα. ο ταυτότητα απο στοιχείο πρέπει να έχουν την ίδια τιμή με το κατάλογος συμφραζόμενων Χαρακτηριστικό του στοιχείου στο οποίο θέλουμε να προσθέσουμε το μενού περιβάλλοντος στο (ποιο είναι το στοιχείο στο παρακάτω παράδειγμα).

Παράδειγμα κώδικα:

Κάντε δεξί κλικ

ο ετικέτα μπορεί έχουν τρεις διαφορετικούς τύπους, "πλαίσιο ελέγχου", "εντολή" (στην οποία πρέπει να προσθέσετε μια ενέργεια με JavaScript), και ραδιόφωνο. Είναι δυνατό να προσθέσετε περισσότερα από ένα στοιχεία μενού σε ένα μενού περιβάλλοντος, ωστόσο υποστήριξη του προγράμματος περιήγησης για αυτό το χαρακτηριστικό είναι δεν είναι πολύ καλό ακόμα. Το Chrome 54 δεν το υποστηρίζει και ο Firefox 50 επιτρέπει μόνο την παρουσία ενός επιπλέον μενού περιβάλλοντος. Παρακάτω μπορείτε να δείτε πώς λειτουργεί το παράδειγμα κώδικα στον Firefox 50.

4. Κεφαλίδες και υποσέλιδα

HTML 5.1 σας επιτρέπει να τις κεφαλίδες και τα υποσέλιδα αν κάθε επίπεδο είναι που περιέχεται στο περιεχόμενο του τμήματος. Η παρακάτω σημείωση είναι ένα στιγμιότυπο οθόνης από τα έγγραφα του W3C και συμβουλεύει τους προγραμματιστές σχετικά με τον σωστό τρόπο τοποθέτησης κεφαλίδας και υποσέλιδου.

Αυτή η λειτουργία μπορεί να είναι χρήσιμη αν θέλετε να προσθέσετε επεξεργάστηκαν κεφαλίδες σε σημασιολογικά στοιχεία διατομής, όπως

και

. Το παρακάτω παράδειγμα κώδικα δημιουργεί μια πλευρική γραμμή μέσα στην κεφαλίδα, το