Πριν από περίπου 15 χρόνια, δούλευα σε μια εταιρεία όπου κατασκευάζαμε εφαρμογές για ταξιδιωτικούς πράκτορες, εργαζόμενους στα αεροδρόμια και αεροπορικές εταιρείες. Δημιουργήσαμε επίσης το δικό μας εσωτερικό πλαίσιο για στοιχεία διεπαφής χρήστη και δυνατότητες εφαρμογής μιας σελίδας. Είχαμε στοιχεία για τα πάντα: πεδία, κουμπιά, καρτέλες, εύρη, πίνακες δεδομένων, μενού, επιλογείς ημερομηνίας, επιλογές και πολλαπλές επιλογές. Είχαμε ακόμη και ένα στοιχείο div. Παρεμπιπτόντως, το στοιχείο div μας ήταν υπέροχο, μας επέτρεψε να κάνουμε στρογγυλεμένες γωνίες σε όλα τα προγράμματα περιήγησης, κάτι που, είτε το πιστεύετε είτε όχι, δεν ήταν εύκολο να γίνει εκείνη την εποχή.
Η δουλειά μας έλαβε χώρα σε ένα σημείο της ιστορίας μας όταν το JS, το Ajax και η δυναμική HTML θεωρήθηκαν μια επανάσταση που μας έφερε στο μέλλον. Ξαφνικά, θα μπορούσαμε να ενημερώσουμε μια σελίδα δυναμικά, να λάβουμε δεδομένα από έναν διακομιστή και να αποφύγουμε την πλοήγηση σε άλλες σελίδες, κάτι που θεωρήθηκε αργό και αναβοσβήνει ένα μεγάλο λευκό ορθογώνιο στην οθόνη μεταξύ των δύο σελίδων. Υπήρχε μια φράση, που έγινε δημοφιλής από τον Jeff Atwood (τον ιδρυτή του StackOverflow), η οποία έγραφε: "Οποιαδήποτε εφαρμογή μπορεί να γραφτεί σε JavaScript θα γραφτεί τελικά σε JavaScript." - Jeff Atwood
Για εμάς εκείνη την εποχή, ήταν σαν να τολμούσαμε να πάμε και να δημιουργήσουμε αυτές τις εφαρμογές. Έμοιαζε σαν μια γενική έγκριση να κάνω τα πάντα με την JS. Έτσι κάναμε τα πάντα με το JS και δεν αφιερώσαμε πραγματικά χρόνο για να ερευνήσουμε άλλους τρόπους να κάνουμε πράγματα. Δεν αισθανθήκαμε πραγματικά το κίνητρο να μάθουμε σωστά τι μπορούσε να κάνει η HTML και η CSS. Δεν αντιληφθήκαμε πραγματικά τον Ιστό ως μια εξελισσόμενη πλατφόρμα εφαρμογών στο σύνολό του. Το είδαμε κυρίως ως κάτι που έπρεπε να επιλύσουμε, ειδικά όταν επρόκειτο για την υποστήριξη του προγράμματος περιήγησης. Θα μπορούσαμε απλώς να ρίξουμε περισσότερα JS για να ολοκληρώσουμε τα πράγματα. Θα με βοήθησε να αφιερώσω χρόνο για να μάθω περισσότερα για το πώς λειτουργούσε ο ιστός και τι ήταν διαθέσιμο στην πλατφόρμα; Σίγουρα, θα μπορούσα πιθανώς να είχα ξυρίσει ένα σωρό κώδικα που δεν ήταν πραγματικά απαραίτητο. Αλλά, εκείνη την εποχή, ίσως όχι τόσο πολύ. Βλέπετε, οι διαφορές στο πρόγραμμα περιήγησης ήταν πολύ σημαντικές τότε. Αυτή ήταν μια εποχή που ο Internet Explorer εξακολουθούσε να είναι το κυρίαρχο πρόγραμμα περιήγησης, με τον Firefox να είναι ο δεύτερος, αλλά άρχισε να χάνει μερίδιο αγοράς λόγω του Chrome που κερδίζει γρήγορα δημοτικότητα. Αν και ο Chrome και ο Firefox ήταν αρκετά καλοί στο να συμφωνούν στα πρότυπα ιστού, τα περιβάλλοντα στα οποία λειτουργούσαν οι εφαρμογές μας σήμαιναν ότι έπρεπε να υποστηρίξουμε τον IE6 για μεγάλο χρονικό διάστημα. Ακόμη και όταν μας επέτρεψαν να υποστηρίξουμε τον IE8, έπρεπε να αντιμετωπίσουμε πολλές διαφορές μεταξύ των προγραμμάτων περιήγησης. Όχι μόνο αυτό, αλλά ο ιστός της εποχής απλώς δεν είχε τόσες πολλές δυνατότητες ενσωματωμένες στην πλατφόρμα.
Γρήγορα μπροστά στο σήμερα. Τα πράγματα έχουν αλλάξει τρομερά. Όχι μόνο έχουμε περισσότερες από αυτές τις δυνατότητες από ποτέ, αλλά έχει αυξηθεί και ο ρυθμός με τον οποίο γίνονται διαθέσιμες. Επιτρέψτε μου να κάνω ξανά την ερώτηση, λοιπόν: Θα σας βοηθούσατε σήμερα να αφιερώνετε χρόνο για να μάθετε περισσότερα για το πώς λειτουργεί ο ιστός και τι είναι διαθέσιμο στην πλατφόρμα; Απολύτως ναι. Το να μάθετε να κατανοείτε και να χρησιμοποιείτε την πλατφόρμα ιστού σήμερα σας φέρνει σε τεράστιο πλεονέκτημα έναντι άλλων προγραμματιστών. Είτε εργάζεστε για την απόδοση, την προσβασιμότητα, την ανταπόκριση, όλα μαζί ή απλώς αποστέλλετε λειτουργίες διεπαφής χρήστη, εάν θέλετε να το κάνετε ως υπεύθυνος μηχανικός, η γνώση των εργαλείων που έχετε στη διάθεσή σας σάς βοηθά να επιτύχετε τους στόχους σας πιο γρήγορα και καλύτερα. Μερικά πράγματα για τα οποία μπορεί να μην χρειάζεστε πια βιβλιοθήκη Γνωρίζοντας τι υποστηρίζουν τα προγράμματα περιήγησης σήμερα, το ερώτημα, λοιπόν, είναι: Τι μπορούμε να παραλείψουμε; Χρειαζόμαστε ένα στοιχείο div για να κάνουμε στρογγυλεμένες γωνίες το 2025; Φυσικά, δεν το κάνουμε. Η ιδιότητα border-radius υποστηρίζεται από όλα τα προγράμματα περιήγησης που χρησιμοποιούνται αυτήν τη στιγμή για περισσότερα από 15 χρόνια σε αυτό το σημείο. Και το γωνιακό σχήμα έρχεται επίσης σύντομα, για ακόμα πιο εντυπωσιακές γωνίες. Ας ρίξουμε μια ματιά σε σχετικά πρόσφατες λειτουργίες που είναι πλέον διαθέσιμες σε όλα τα μεγάλα προγράμματα περιήγησης και τις οποίες μπορείτε να χρησιμοποιήσετε για να αντικαταστήσετε υπάρχουσες εξαρτήσεις στη βάση κωδίκων σας. Το θέμα δεν είναι να εγκαταλείψετε αμέσως όλες τις αγαπημένες σας βιβλιοθήκες και να ξαναγράψετε τη βάση κωδικών σας. Όπως για οτιδήποτε άλλο, θα πρέπει πρώτα να λάβετε υπόψη την υποστήριξη του προγράμματος περιήγησης και να αποφασίσετε με βάση άλλους παράγοντες που αφορούν ειδικά το έργο σας. Οι ακόλουθες λειτουργίες εφαρμόζονται στις τρεις κύριες μηχανές προγράμματος περιήγησης (Chromium, WebKit και Gecko), αλλά ενδέχεται να έχετε διαφορετικές απαιτήσεις υποστήριξης προγράμματος περιήγησης που σας εμποδίζουν να τις χρησιμοποιήσετε αμέσως. Ωστόσο, τώρα είναι ακόμα μια καλή στιγμή για να μάθετε για αυτές τις δυνατότητες και ίσως να σχεδιάσετε να τις χρησιμοποιήσετε κάποια στιγμή. Popovers And Dialogs Το Popover API, το στοιχείο HTML
Σίγουρα, η ταχύτητα σύνδεσής σας στο Διαδίκτυο έχει αυξηθεί επίσης, αλλά αυτό δεν ισχύει για όλους. Και δεν έχουν όλοι τις ίδιες δυνατότητες συσκευής. Αντίθετα, το να τραβήξετε κωδικό τρίτου μέρους για πράγματα που μπορείτε να κάνετε με την πλατφόρμα, πιθανότατα σημαίνει ότι αποστέλλετε περισσότερους κωδικούς και επομένως προσεγγίζετε λιγότερους πελάτες από ό,τι συνήθως. Στον ιστό, η κακή απόδοση φόρτωσης οδηγεί σε μεγάλα ποσοστά εγκατάλειψης και βλάπτει τη φήμη της επωνυμίας. Εκτέλεση λιγότερου κώδικα σε συσκευές Επιπλέον, ο κώδικας που στέλνετε στις συσκευές των πελατών σας πιθανότατα εκτελείται πιο γρήγορα εάν χρησιμοποιεί λιγότερες αφαιρέσεις JavaScript πάνω από την πλατφόρμα. Είναι επίσης πιθανώς πιο αποκριτικό και πιο προσιτό από προεπιλογή. Όλα αυτά οδηγούν σε περισσότερους και πιο ευτυχισμένους πελάτες. Ελέγξτε το ετήσιο ιστολόγιο ανισότητας απόδοσης του συναδέλφου μου Alex Russell, το οποίο δείχνει ότι οι συσκευές premium απουσιάζουν σε μεγάλο βαθμό από αγορές με δισεκατομμύρια χρήστες λόγω ανισότητας πλούτου. Και αυτό το χάσμα αυξάνεται μόνο με την πάροδο του χρόνου.
Ενσωματωμένη διάταξη τοιχοποιίας Ένα χαρακτηριστικό της διαδικτυακής πλατφόρμας που έρχεται σύντομα και για το οποίο είμαι πολύ ενθουσιασμένος είναι το CSS Masonry.
Επιτρέψτε μου να ξεκινήσω εξηγώντας τι είναι ο Τεκτονισμός. Τι είναι ο Τεκτονισμός Η τοιχοποιία είναι ένας τύπος διάταξης που έγινε δημοφιλής από το Pinterest πριν από χρόνια. Δημιουργεί ανεξάρτητα κομμάτια περιεχομένου μέσα στα οποία τα στοιχεία συσκευάζονται όσο πιο κοντά μπορούν στην αρχή του κομματιού.
Πολλοί άνθρωποι βλέπουν τον Τεκτονισμό ως μια εξαιρετική επιλογή για χαρτοφυλάκια και γκαλερί φωτογραφιών, κάτι που σίγουρα μπορεί να κάνει. Αλλά ο Τεκτονισμός είναι πιο ευέλικτος από αυτό που βλέπετε στο Pinterest και δεν περιορίζεται μόνο σε διατάξεις που μοιάζουν με καταρράκτες. Σε διάταξη τοιχοποιίας:
Τα κομμάτια μπορεί να είναι στήλες ή σειρές:
Τα κομμάτια περιεχομένου δεν χρειάζεται να έχουν όλα το ίδιο μέγεθος:
Τα στοιχεία μπορούν να εκτείνονται σε πολλά κομμάτια:
Τα αντικείμενα μπορούν να τοποθετηθούν σε συγκεκριμένες πίστες. δεν χρειάζεται να ακολουθούν πάντα τον αλγόριθμο αυτόματης τοποθέτησης:
Demos Ακολουθούν μερικές απλές επιδείξεις που έκανα χρησιμοποιώντας την επερχόμενη υλοποίηση του CSS Masonry στο Chromium. Μια επίδειξη συλλογής φωτογραφιών, που δείχνει πώς τα στοιχεία (ο τίτλος σε αυτήν την περίπτωση) μπορούν να εκτείνονται σε πολλά κομμάτια:
Μια άλλη συλλογή φωτογραφιών που δείχνει κομμάτια διαφορετικών μεγεθών:
Μια διάταξη ιστότοπου ειδήσεων με μερικά κομμάτια πιο φαρδιά από άλλα και ορισμένα στοιχεία που εκτείνονται σε όλο το πλάτος της διάταξης:
Ένας πίνακας kanban που δείχνει ότι τα αντικείμενα μπορούν να τοποθετηθούν σε συγκεκριμένα κομμάτια:
Σημείωση: ΤοΟι προηγούμενες επιδείξεις έγιναν με μια έκδοση του Chromium που δεν είναι ακόμη διαθέσιμη στους περισσότερους χρήστες ιστού, επειδή το CSS Masonry μόλις αρχίζει να εφαρμόζεται σε προγράμματα περιήγησης. Ωστόσο, οι προγραμματιστές ιστού χρησιμοποιούν ευχαρίστως βιβλιοθήκες για να δημιουργήσουν διατάξεις τοιχοποιίας εδώ και χρόνια. Τοποθεσίες που χρησιμοποιούν την τοιχοποιία σήμερα Πράγματι, ο Τεκτονισμός είναι αρκετά συνηθισμένος στον Ιστό σήμερα. Ακολουθούν μερικά παραδείγματα που βρήκα εκτός από το Pinterest:
Και μερικά ακόμη, λιγότερο προφανή, παραδείγματα:
Λοιπόν, πώς δημιουργήθηκαν αυτές οι διατάξεις; Λύσεις Ένα κόλπο που έχω δει να χρησιμοποιείται είναι η χρήση μιας διάταξης Flexbox, η αλλαγή της κατεύθυνσης σε στήλη και η ρύθμιση της αναδίπλωσης. Με αυτόν τον τρόπο, μπορείτε να τοποθετήσετε αντικείμενα διαφορετικού ύψους σε πολλαπλές, ανεξάρτητες στήλες, δίνοντας την εντύπωση μιας διάταξης τοιχοποιίας:
Υπάρχουν, ωστόσο, δύο περιορισμοί με αυτήν τη λύση:
Η σειρά των αντικειμένων είναι διαφορετική από αυτή που θα ήταν με μια πραγματική διάταξη τοιχοποιίας. Με το Flexbox, τα στοιχεία γεμίζουν πρώτα την πρώτη στήλη και, όταν γεμίσει, μεταβαίνουν στην επόμενη στήλη. Με το Masonry, τα στοιχεία θα στοιβάζονται σε όποιο κομμάτι (ή στήλη σε αυτήν την περίπτωση) έχει περισσότερο διαθέσιμο χώρο. Αλλά επίσης, και ίσως το πιο σημαντικό, αυτή η λύση απαιτεί να ορίσετε ένα σταθερό ύψος στο κοντέινερ Flexbox. Διαφορετικά, δεν θα γινόταν τύλιγμα.
Τεκτονικές Βιβλιοθήκες τρίτων Για πιο προχωρημένες περιπτώσεις, οι προγραμματιστές χρησιμοποιούν βιβλιοθήκες. Η πιο γνωστή και δημοφιλής βιβλιοθήκη για αυτό ονομάζεται απλά Masonry και λαμβάνεται περίπου 200.000 φορές την εβδομάδα σύμφωνα με το NPM. Το Squarespace παρέχει επίσης ένα στοιχείο διάταξης που αποδίδει μια διάταξη Masonry, για εναλλακτική λύση χωρίς κώδικα, και πολλοί ιστότοποι το χρησιμοποιούν. Και οι δύο αυτές επιλογές χρησιμοποιούν κώδικα JavaScript για να τοποθετήσουν στοιχεία στη διάταξη. Εντοιχισμένη Τοιχοποιία Είμαι πραγματικά ενθουσιασμένος που το Masonry αρχίζει τώρα να εμφανίζεται στα προγράμματα περιήγησης ως ενσωματωμένη δυνατότητα CSS. Με την πάροδο του χρόνου, θα μπορείτε να χρησιμοποιείτε το Masonry ακριβώς όπως το Grid ή το Flexbox, δηλαδή, χωρίς να χρειάζεστε λύσεις ή κωδικό τρίτου κατασκευαστή. Η ομάδα μου στη Microsoft εφαρμόζει ενσωματωμένη υποστήριξη Masonry στο έργο ανοιχτού κώδικα Chromium, στο οποίο βασίζονται το Edge, το Chrome και πολλά άλλα προγράμματα περιήγησης. Το Mozilla ήταν στην πραγματικότητα ο πρώτος προμηθευτής προγράμματος περιήγησης που πρότεινε μια πειραματική εφαρμογή του Masonry το 2020. Και η Apple ενδιαφέρθηκε επίσης πολύ να κάνει αυτή τη νέα διάταξη ιστού πρωτόγονη. Οι εργασίες για την τυποποίηση του χαρακτηριστικού προχωρούν επίσης, με συμφωνία εντός της ομάδας εργασίας CSS σχετικά με τη γενική κατεύθυνση και ακόμη και μια νέα οθόνη τύπου οθόνης: grid-lanes. Εάν θέλετε να μάθετε περισσότερα σχετικά με τον Τεκτονισμό και να παρακολουθείτε την πρόοδο, ρίξτε μια ματιά στη σελίδα μου με πόρους CSS Masonry. Με τον καιρό, όταν το Masonry γίνει βασικό χαρακτηριστικό, όπως το Grid ή το Flexbox, θα μπορούμε απλά να το χρησιμοποιούμε και να επωφεληθούμε από:
Καλύτερη απόδοση, Καλύτερη ανταπόκριση, Ευκολία στη χρήση και απλούστερος κώδικας.
Ας ρίξουμε μια πιο προσεκτική ματιά σε αυτά. Καλύτερη Απόδοση Το να φτιάξετε το δικό σας σύστημα διάταξης που μοιάζει με Τεκτονική ή να χρησιμοποιήσετε μια βιβλιοθήκη τρίτου κατασκευαστή, σημαίνει ότι θα πρέπει να εκτελέσετε κώδικα JavaScript για να τοποθετήσετε στοιχεία στην οθόνη. Αυτό σημαίνει επίσης ότι αυτός ο κωδικός θα είναι αποκλεισμός απόδοσης. Πράγματι, είτε δεν θα εμφανιστεί τίποτα, είτε τα πράγματα δεν θα είναι στις σωστές θέσεις ή στα σωστά μεγέθη, έως ότου εκτελεστεί αυτός ο κώδικας JavaScript. Η διάταξη τοιχοποιίας χρησιμοποιείται συχνά για το κύριο μέρος μιας ιστοσελίδας, πράγμα που σημαίνει ότι ο κώδικας θα έκανε το κύριο περιεχόμενό σας να εμφανίζεται αργότερα από ό,τι θα μπορούσε να εμφανιστεί διαφορετικά, υποβαθμίζοντας τη μέτρηση LCP ή Largest Contentful Paint, η οποία παίζει μεγάλο ρόλο στην αντιληπτή απόδοση και στη βελτιστοποίηση μηχανών αναζήτησης. Δοκίμασα τη βιβλιοθήκη Masonry JS με μια απλή διάταξη και προσομοιώνοντας μια αργή σύνδεση 4G στο DevTools. Η βιβλιοθήκη δεν είναι πολύ μεγάλη (24KB, 7,8KB gzip), αλλά χρειάστηκαν 600ms για να φορτωθεί υπό τις συνθήκες δοκιμής μου. Ακολουθεί μια καταγραφή απόδοσης που δείχνει ότι ο μεγάλος χρόνος φόρτωσης των 600 ms για τη βιβλιοθήκη Masonry και ότι καμία άλλη δραστηριότητα απόδοσης δεν συνέβη όσο συνέβαινε:
Επιπλέον, μετά τον αρχικό χρόνο φόρτωσης, το σενάριο που κατεβάσατε έπρεπε να αναλυθεί, να μεταγλωττιστεί και στη συνέχεια να εκτελεστεί. Όλα αυτά, όπως αναφέρθηκε προηγουμένως, εμπόδιζαν την απόδοση της σελίδας. Με μια ενσωματωμένη εφαρμογή Masonry στο πρόγραμμα περιήγησης, δεν θα έχουμε σενάριο για φόρτωση και εκτέλεση. Ο μηχανισμός του προγράμματος περιήγησης θα κάνει το πράγμα του κατά το αρχικό βήμα απόδοσης σελίδας. Καλύτερη ανταπόκριση Παρόμοια με την πρώτη φόρτωση μιας σελίδας, η αλλαγή μεγέθους του παραθύρου του προγράμματος περιήγησης οδηγεί στην απόδοση της διάταξης σε αυτήν τη σελίδα ξανά. Σε αυτό το σημείο, ωστόσο, εάν η σελίδα χρησιμοποιεί τη βιβλιοθήκη Masonry JS, δεν χρειάζεται να φορτώσετε ξανά το σενάριο, επειδή είναι ήδηεδώ. Ωστόσο, ο κώδικας που μετακινεί στοιχεία στα σωστά σημεία πρέπει να εκτελεστεί. Τώρα η συγκεκριμένη βιβλιοθήκη φαίνεται να είναι αρκετά γρήγορη στο να το κάνει αυτό όταν φορτώνει η σελίδα. Ωστόσο, ενεργοποιεί τα στοιχεία όταν πρέπει να μετακινηθούν σε διαφορετικό μέρος κατά την αλλαγή μεγέθους παραθύρου, και αυτό κάνει μεγάλη διαφορά. Φυσικά, οι χρήστες δεν ξοδεύουν χρόνο αλλάζοντας το μέγεθος των παραθύρων του προγράμματος περιήγησής τους όσο εμείς οι προγραμματιστές. Αλλά αυτή η κινούμενη εμπειρία αλλαγής μεγέθους μπορεί να είναι αρκετά ενοχλητική και προσθέτει στον αντιληπτό χρόνο που χρειάζεται για να προσαρμοστεί η σελίδα στο νέο της μέγεθος. Ευκολία χρήσης και απλούστερος κώδικας Το πόσο εύκολο είναι να χρησιμοποιήσετε μια δυνατότητα ιστού και πόσο απλός φαίνεται ο κώδικας είναι σημαντικοί παράγοντες που μπορούν να κάνουν μεγάλη διαφορά για την ομάδα σας. Δεν μπορεί ποτέ να είναι τόσο σημαντικά όσο η εμπειρία τελικού χρήστη, φυσικά, αλλά η εμπειρία προγραμματιστή επηρεάζει τη συντηρησιμότητα. Η χρήση μιας ενσωματωμένης δυνατότητας ιστού έχει σημαντικά πλεονεκτήματα σε αυτό το μέτωπο:
Οι προγραμματιστές που γνωρίζουν ήδη HTML, CSS και JS πιθανότατα θα μπορούν να χρησιμοποιήσουν αυτή τη δυνατότητα εύκολα, επειδή έχει σχεδιαστεί για να ενσωματώνεται καλά και να είναι συνεπής με την υπόλοιπη πλατφόρμα ιστού. Δεν υπάρχει κίνδυνος να παραβιαστούν οι αλλαγές που εισάγονται στον τρόπο χρήσης της δυνατότητας. Υπάρχει σχεδόν μηδενικός κίνδυνος αυτή η δυνατότητα να καταργηθεί ή να μην διατηρηθεί.
Στην περίπτωση της ενσωματωμένης τοιχοποιίας, επειδή είναι μια πρωτόγονη διάταξη, τη χρησιμοποιείτε από CSS, όπως ακριβώς το Grid ή το Flexbox, χωρίς JS. Επίσης, άλλες ιδιότητες CSS που σχετίζονται με τη διάταξη, όπως το gap, λειτουργούν όπως θα περιμένατε. Δεν υπάρχουν κόλπα ή λύσεις για να γνωρίζετε και τα πράγματα που μαθαίνετε είναι τεκμηριωμένα στο MDN. Για το Masonry JS lib, η προετοιμασία είναι λίγο περίπλοκη: απαιτεί ένα χαρακτηριστικό δεδομένων με συγκεκριμένη σύνταξη, μαζί με κρυφά στοιχεία HTML για να ορίσετε τα μεγέθη των στηλών και των κενών. Επιπλέον, εάν θέλετε να εκτείνεστε σε στήλες, πρέπει να συμπεριλάβετε μόνοι σας το μέγεθος του κενού για να αποφύγετε προβλήματα:
<στυλ> .track-sizer, .στοιχείο { πλάτος: 20%; } .gutter-sizer { πλάτος: 1rem; } .στοιχείο { ύψος: 100 px; margin-block-end: 1rem; } .item:nth-child(odd) { ύψος: 200 px; } .item--width2 { πλάτος: calc(40% + 1rem); }
Ας το συγκρίνουμε με το πώς θα ήταν μια ενσωματωμένη εφαρμογή Τεκτονικής: <στυλ> .container { οθόνη: grid-lanes; πλέγμα-λωρίδες: επανάληψη (4, 20%); κενό: 1cm; } .στοιχείο { ύψος: 100 px; } .item:nth-child(odd) { ύψος: 200 px; } .item--width2 { πλέγμα-στήλη: span 2; }
Πιο απλός, πιο συμπαγής κώδικας που μπορεί απλώς να χρησιμοποιεί πράγματα όπως το κενό και όπου τα ίχνη εκτείνονται με το διάστημα 2, ακριβώς όπως στο πλέγμα, και δεν απαιτεί από εσάς να υπολογίσετε το σωστό πλάτος που περιλαμβάνει το μέγεθος του κενού. Πώς να μάθετε τι είναι διαθέσιμο και πότε είναι διαθέσιμο; Συνολικά, το ερώτημα δεν είναι πραγματικά αν θα πρέπει να χρησιμοποιήσετε το ενσωματωμένο Masonry σε μια βιβλιοθήκη JS, αλλά μάλλον πότε. Η βιβλιοθήκη Masonry JS είναι καταπληκτική και καλύπτει ένα κενό στην διαδικτυακή πλατφόρμα εδώ και πολλά χρόνια, και για πολλούς χαρούμενους προγραμματιστές και χρήστες. Έχει μερικά μειονεκτήματα, αν το συγκρίνετε με μια ενσωματωμένη εφαρμογή τοιχοποιίας, φυσικά, αλλά αυτά δεν είναι σημαντικά εάν αυτή η υλοποίηση δεν είναι έτοιμη. Είναι εύκολο για μένα να απαριθμήσω αυτές τις δροσερές νέες δυνατότητες πλατφόρμας ιστού, επειδή εργάζομαι σε έναν προμηθευτή προγράμματος περιήγησης και, ως εκ τούτου, τείνω να ξέρω τι έρχεται. Αλλά οι προγραμματιστές συχνά μοιράζονται, έρευνες μετά από έρευνα, ότι η παρακολούθηση νέων πραγμάτων είναι δύσκολη. Η ενημέρωση είναι δύσκολη και οι εταιρείες δεν δίνουν πάντα προτεραιότητα στη μάθηση ούτως ή άλλως. Για να βοηθήσετε σε αυτό, ακολουθούν μερικοί πόροι που παρέχουν ενημερώσεις με απλούς και συμπαγείς τρόπους, ώστε να μπορείτε να λαμβάνετε γρήγορα τις πληροφορίες που χρειάζεστε:
Η πλατφόρμα Ιστού διαθέτει ιστότοπο εξερευνητή: Μπορεί να σας ενδιαφέρει η σελίδα σημειώσεων έκδοσης. Και, αν σας αρέσει το RSS, ρίξτε μια ματιά στη ροή σημειώσεων έκδοσης, καθώς και στις ροές Baseline New Available και Widely Available.
Ο ΙστόςΠίνακας ελέγχου κατάστασης πλατφόρμας: Ίσως σας αρέσουν οι διάφορες σελίδες του έτους αναφοράς.
Σελίδα οδικού χάρτη κατάστασης Chrome Platform.
Εάν έχετε λίγο περισσότερο χρόνο, μπορεί επίσης να σας ενδιαφέρουν οι σημειώσεις έκδοσης των προμηθευτών του προγράμματος περιήγησης:
Chrome Άκρη Firefox Σαφάρι
Για ακόμη περισσότερους πόρους, ανατρέξτε στο φύλλο εξαπάτησης Πλοήγηση στην πλατφόρμα Ιστού. Το πράγμα μου δεν έχει ακόμα εφαρμοστεί Αυτή είναι η άλλη πλευρά του προβλήματος. Ακόμα κι αν βρείτε τον χρόνο, την ενέργεια και τους τρόπους για να παρακολουθείτε, εξακολουθεί να υπάρχει απογοήτευση με το να ακουστεί η φωνή σας και να εφαρμοστούν τα αγαπημένα σας χαρακτηριστικά. Ίσως περιμένατε για χρόνια να επιλυθεί ένα συγκεκριμένο σφάλμα ή να αποσταλεί μια συγκεκριμένη λειτουργία σε ένα πρόγραμμα περιήγησης όπου εξακολουθεί να λείπει. Αυτό που θα πω είναι ότι οι προμηθευτές του προγράμματος περιήγησης ακούνε. Είμαι μέρος πολλών ομάδων μεταξύ οργανισμών όπου συζητάμε συνεχώς τα σήματα προγραμματιστών και τα σχόλια. Εξετάζουμε πολλές διαφορετικές πηγές σχολίων, τόσο εσωτερικές σε κάθε προμηθευτή προγράμματος περιήγησης όσο και εξωτερικές/δημόσιες σε φόρουμ, έργα ανοιχτού κώδικα, ιστολόγια και έρευνες. Και, προσπαθούμε πάντα να δημιουργούμε καλύτερους τρόπους για τους προγραμματιστές να μοιράζονται τις συγκεκριμένες ανάγκες και περιπτώσεις χρήσης τους. Επομένως, εάν μπορείτε, ζητήστε περισσότερα από τους προμηθευτές προγραμμάτων περιήγησης και πιέστε μας να εφαρμόσουμε τις δυνατότητες που χρειάζεστε. Καταλαβαίνω ότι χρειάζεται χρόνο και μπορεί επίσης να είναι εκφοβιστικό (για να μην αναφέρουμε ένα υψηλό εμπόδιο εισόδου), αλλά λειτουργεί επίσης. Ακολουθούν μερικοί τρόποι με τους οποίους μπορείτε να ακούσετε τη φωνή σας (ή της εταιρείας σας): Συμμετάσχετε στις ετήσιες έρευνες Κατάστασης JS, Κατάστασης CSS και Κατάστασης HTML. Παίζουν μεγάλο ρόλο στο πώς οι προμηθευτές προγραμμάτων περιήγησης δίνουν προτεραιότητα στην εργασία τους. Εάν χρειάζεστε ένα συγκεκριμένο API βασισμένο σε πρότυπα που θα εφαρμοστεί με συνέπεια σε όλα τα προγράμματα περιήγησης, εξετάστε το ενδεχόμενο να υποβάλετε μια πρόταση στην επόμενη επανάληψη του έργου Interop. Απαιτεί περισσότερο χρόνο, αλλά σκεφτείτε πώς το Shopify και το RUMvision μοιράστηκαν τις λίστες επιθυμιών τους για το Interop 2026. Λεπτομερείς πληροφορίες όπως αυτή μπορεί να είναι πολύ χρήσιμες για τους προμηθευτές προγραμμάτων περιήγησης για να δώσουν προτεραιότητα. Για πιο χρήσιμους συνδέσμους που επηρεάζουν τους προμηθευτές του προγράμματος περιήγησης, ανατρέξτε στο φύλλο εξαπάτησης της Πλοήγησης στο Web Platform. Συμπέρασμα Κλείνοντας, ελπίζω ότι αυτό το άρθρο σας έχει αφήσει μερικά πράγματα για να σκεφτείτε:
Ενθουσιασμός για την τοιχοποιία και άλλες επερχόμενες λειτουργίες ιστού. Μερικές λειτουργίες ιστού που ίσως θέλετε να αρχίσετε να χρησιμοποιείτε. Μερικά κομμάτια προσαρμοσμένου κώδικα ή κώδικα τρίτου κατασκευαστή που ενδέχεται να μπορείτε να αφαιρέσετε υπέρ των ενσωματωμένων λειτουργιών. Μερικοί τρόποι για να παρακολουθείτε τι έρχεται και να επηρεάσετε τους προμηθευτές του προγράμματος περιήγησης.
Το πιο σημαντικό, ελπίζω να σας έπεισα για τα οφέλη της χρήσης της πλατφόρμας Ιστού στο μέγιστο των δυνατοτήτων της.
