Προοδευτική ενίσχυση με το δίκτυο CSS

Το CSS Grid (Grid) έχει παραμείνει εδώ και καιρό, με πλήρη υποστήριξη σε μεγάλα σύγχρονα προγράμματα περιήγησης. Θα αφήσω τους άλλους να βουτήξουν για το γιατί είναι τόσο υπέροχο και ποιες νέες δυνατότητες σχεδίασης κάνει τόσο εύκολο να τις εξερευνήσετε. Αν ψάχνετε για τον καλύτερο τρόπο για να υποστηρίξετε σχέδια ανταποκρίσεων web, έχω ακόμα δει κάποιον που δεν αγαπά το Grid. Είναι απλό στη χρήση, αλλά εξαιρετικά ισχυρό και ευέλικτο.

Αλλά, σας ακούω να λέτε ότι πολλοί χρήστες μας δεν χρησιμοποιούν τις πιο πρόσφατες εκδόσεις του προγράμματος περιήγησης ή βρίσκονται σε αγορές στις οποίες το Chrome / Firefox δεν κατέχει μερίδιο πλειοψηφίας. Και, πραγματικά, ξαναγράφετε όλο τον παλιό κώδικα που πραγματικά αξίζει τον κόπο;

Ένιωσα ομοίως, μέχρι να ακούσω μια μεγάλη συζήτηση που έδωσε η Natalya Shelburne. Περιγράφει πώς ξεκίνησε τη χρήση του CSS Grid μαζί με το Bootstrap, χωρίς να χάσει την υποστήριξη για παλαιότερα προγράμματα περιήγησης, βελτιώνοντας παρά διαγράφοντας το παλιό CSS.

Rachel Andrew από τη Laura Kishimoto στη ScotlandCSS

Είναι σημαντικό να το χρησιμοποιήσετε χωρίς να χρησιμοποιήσετε πολλά polyfills JavaScript, αλλά χρησιμοποιώντας καθαρό CSS. Όπως αναφέρει η Rachel Andrew:

Όπως γνωρίζουμε ήδη, τα προγράμματα περιήγησης που δεν υποστηρίζουν πλέγμα είναι παλαιότερα, πιο αργά προγράμματα περιήγησης ή προγράμματα περιήγησης που βρίσκονται συχνότερα σε συσκευές χαμηλής ισχύος σε αναδυόμενες αγορές. Γιατί θα πιέζετε μια δέσμη JavaScript σε αυτές τις συσκευές;

Η Natalya περιγράφει τον τρόπο με τον οποίο μπορούν να χρησιμοποιηθούν "ερωτήματα χαρακτηριστικών" για την υλοποίηση του Grid σε προγράμματα περιήγησης που το υποστηρίζουν, χωρίς να χάνουν την υπάρχουσα λειτουργικότητα. Το MDN αναφέρεται σε αυτό ως "προοδευτική ενίσχυση", δηλώνοντας ότι:

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

Χρησιμοποιώντας το πλέγμα

Λοιπόν, πώς θα το κάνουμε αυτό;

Σε μια προηγούμενη ανάρτηση, περιέγραψα μια απλή προσέγγιση για να "κρατήσετε το υποσέλιδο σας από όπου ανήκει". Αυτό αποφεύγει τα προβλήματα που εμφανίζονται όταν το κύριο περιεχόμενο μιας σελίδας είναι πολύ μικρό για να ωθήσει ένα υποσέλιδο στο κάτω μέρος της σελίδας.

Από το

Αυτό παρέχει την ευκαιρία να δείξει πώς μπορεί να χρησιμοποιηθεί ένα ερώτημα δυνατοτήτων για να μετακινηθείτε στο Grid.

Είναι σημαντικό να σημειωθεί ότι αυτό είναι ένα παράδειγμα του πώς θα μπορούσατε να μετακινήσετε στη χρήση του Grid σε μια υπάρχουσα βάση κώδικα και όχι γιατί είναι ένα ισχυρό εργαλείο. Αυτό το παράδειγμα χρησιμοποιείται επειδή είναι μικρό - οπότε είναι δυνατόν να κατανοήσουμε τον τρόπο με τον οποίο δεν εντοπίστηκαν περισπασμοί σε ένα μεγαλύτερο κώδικα βάσης.

Ρεαλιστικά, το Grid δεν προσφέρει μεγάλη βελτίωση εδώ. Τα οφέλη από τη χρήση ενός νέου εργαλείου θα πρέπει να συζητηθούν, και όχι απλά να το υλοποιήσουμε, διότι είναι δροσερό!

Το παράδειγμα είναι παρακάτω. Περισσότερες εξηγήσεις σχετικά με τον κώδικα υπάρχουν εδώ.

index.html:


 
   
 

 
   
             
 

main.css:

# page-container {
  θέση: σχετική.
  min-ύψος: 100vh;
}}
# content-wrap {
  padding-bottom: 2.5rem; / * Υπόβαθρο ύψος * /
}}
#footer {
  θέση: απόλυτη;
  κάτω: 0;
  πλάτος: 100%.
  ύψος: 2.5rem; / * Υπόβαθρο ύψος * /
}}

Υπάρχουν δύο βασικά μέρη για την προσθήκη του Grid:

  • προσθέτοντας τις απαραίτητες ιδιότητες νέου δικτύου
  • παρακάμπτοντας όλες τις ιδιότητες που δεν χρειάζονται πλέον.

main.css μπορεί να επεκταθεί για να προσθέσει:

@supports (εμφάνιση: πλέγμα) {
    # page-container {
        θέση: στατική; // override
        εμφάνιση: πλέγμα; // νέος
        πλέγμα-πρότυπο-σειρές: 1fr auto; // νέος
        πλέγμα-πρότυπο-στήλες: 100%; // νέος
    }}
    
    # content-wrap {
        padding-bottom: 0; // override
    }}
    #footer {
        θέση: στατική; // override
        ύψος: auto; // override
    }}
}}

η θέση επαναφέρεται στην προεπιλεγμένη θέση της στατικής λειτουργίας και η επένδυση και το ύψος επαναφέρονται σε τιμές που δεν παρεμβαίνουν στη νέα διάταξη.

min-height: Δεν γίνεται αναφορά σε 100vh. Χρησιμοποιείται επίσης από το Grid, οπότε δεν χρειάζεται να αλλάξει.

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

Και αυτό είναι όλο που υπάρχει! Τώρα, τα προγράμματα περιήγησης που υποστηρίζουν το Grid θα χρησιμοποιήσουν τον κώδικα στο ερώτημα λειτουργίας, ενώ θα υποστηρίζουν πλήρως τα προγράμματα περιήγησης που δεν το χρησιμοποιούν. Αυτό επιτρέπει ακόμη και για τα μεμονωμένα εξαρτήματα να προσθέσουν ένα πλέγμα ένα κάθε φορά - μια ομάδα μπορεί να δει πόσο απλή είναι η διαδικασία χωρίς τεράστια επένδυση χρόνου.

Ας ελπίσουμε ότι αυτό απεικονίζει την βαθμιαία προσέγγιση που μπορεί να ληφθεί για τη χρήση του Grid.

Πιο πολύπλοκες χρήσεις

Η δύναμη του τι προσφέρει το Grid φαίνεται καλύτερα στα πιο περίπλοκα παραδείγματα που έγραψε η Natalya που ενέπνευσαν αυτό το ενημερωτικό άρθρο. Αυτό δείχνει τη δύναμη του τι μπορεί να προσφέρει το Grid όταν χρησιμοποιείται σε μεγαλύτερη κλίμακα.

Γρήγορες συμβουλές

Ο εφεδρικός κώδικας μπορεί να δοκιμαστεί χωρίς πρόσβαση σε παλαιότερο πρόγραμμα περιήγησης ή εξομοιωτή. Η προσωρινή αλλαγή @ υποστηρίζει (εμφάνιση: πλέγμα) σε μια ανύπαρκτη τιμή, για παράδειγμα gridNO, οπότε χρησιμοποιείται ο εφεδρικός κώδικας.

Ο Firefox παρέχει μερικά εξαιρετικά εργαλεία που το Chrome δεν διαθέτει αυτή τη στιγμή. Αυτές είναι οι "Ρυθμίσεις οθόνης πλέγματος" που ενεργοποιούνται στην καρτέλα "Επιθεωρητής". Αυτές οι ρυθμίσεις συμβάλλουν στην οπτική απεικόνιση του τρόπου εκτέλεσης του πλέγματος, το οποίο είναι ιδανικό για σύνθετες διατάξεις.

Εργαλεία του Firefox dev κάτω από τον Επιθεωρητή

Τέλος, εμπνεύστηκα από μια δήλωση του Rachel Andrew:

Δεν πρέπει να φαίνεται το ίδιο σε όλα τα προγράμματα περιήγησης, θα πρέπει να είναι μια καλή εμπειρία σε όλα τα προγράμματα περιήγησης.

Η προεπιλογή πολλών εταιρειών είναι να προσπαθήσουν για μια διπλή εμπειρία σε κάθε πρόγραμμα περιήγησης. Αλλά αξίζει να σκεφτεί κανείς ότι σε παλαιότερα, πιο αργά προγράμματα περιήγησης, μια απλούστερη προσέγγιση μπορεί στην πραγματικότητα να είναι μια καλύτερη εμπειρία;

Ευχαριστώ για την ανάγνωση Ελπίζω ότι αυτό θα σας εμπνεύσει να δοκιμάσετε να χρησιμοποιήσετε το Grid όχι μόνο σε έργα greenfield, αλλά και μαζί με οτιδήποτε μπορεί να χρησιμοποιείτε σήμερα!

Πόροι

  • Από το Bootstrap στο CSS Grid
  • Κρατώντας το υποσέλιδο στο κάτω μέρος με το CSS-Grid
  • Ένας πλήρης οδηγός για το πλέγμα
  • Διάταξη πλέγματος CSS και προοδευτική βελτίωση
  • Χρήση του πλέγματος CSS: Υποστήριξη φυλλομετρητών χωρίς πλέγμα

Ακολουθούν μερικά άλλα πράγματα που έγραψα πρόσφατα:

  • Χρησιμοποιώντας τους Pa11y CI και Drone ως gatekeepers ελέγχου προσβασιμότητας
  • Mocking αιτήματα HTTP με Nock