CSS εναντίον JavaScript: Trust vs. Control

Όταν το GotoConf Amsterdam μου ζήτησε να μιλήσω, σκέφτηκα ότι θα ήταν μια άλλη εκμάθηση μηχανών ή η συζήτηση για το Progressive Web Apps. Αντ 'αυτού οι διοργανωτές μου ζήτησαν να καλύψω το CSS. Μια υποεκπροσωπούμενη γλώσσα στην οδό "γλώσσας προγραμματισμού". Τώρα, ήμουν fan του CSS από την αρχή. Υποθέτω ότι οι άνθρωποι σε ένα σκληρό πυρήνα αναπτυξιακό συνέδριο δεν θα είναι τόσο ενθουσιασμένοι. Δεν θα είχαν εξετάσει λεπτομερώς το CSS. Αντ 'αυτού, η παραδοχή μου ήταν ότι είναι περισσότερο απαραίτητη ενόχληση σε αυτούς. Έτσι έγραψα μια συζήτηση για το τι χρησιμοποιεί το CSS και πώς δεν το χρησιμοποιούμε στα δυνατά του σημεία.

Ακολουθούν οι σημειώσεις της ομιλίας μου.

Μια βαρετή μάχη

Την άλλη μέρα παρακολούθησα ξανά το "Captain America: Civil War". Και για άλλη μια φορά με βαρεθεί και δεν έκανα αρκετά την έννοια του. Η ιδέα των σούπερ ηρώων που αναγκάστηκαν να είναι υπεύθυνοι για τις παράπλευρες ζημιές τους δεν είναι καινούργια. Ζητώντας τον έλεγχο τους δεν είναι ούτε καινούριος. Το "The Incredibles" έκανε σπουδαία δουλειά με αυτό.

Ήμουν βαρεθεί για την προϋπόθεση όλων αυτών των δροσερό σούπερ ήρωες που αγωνίζονται εναντίον του άλλου. Γνωρίζουμε τις δυνάμεις τους. Γνωρίζουμε ότι είναι βαθιά φίλοι που έσωσαν τις ζωές τους σε αμέτρητες περιπτώσεις. Γνωρίζουμε ότι οι δυνάμεις τους ταιριάζουν. Δεν υπάρχει βία, καμία πραγματική κίνηση, καμία οργή σε αυτές τις συναντήσεις. Αισθάνεται ότι ο Marvel εισήγαγε πάρα πολλούς δροσερούς χαρακτήρες και τώρα προσπαθεί να βρει έναν τρόπο να αφήσει τους ανθρώπους να πάρουν τις πλευρές. Πουλήστε περισσότερα παιχνίδια, δημιουργήστε τεχνητό δράμα.

Παίρνω την ίδια εντύπωση όταν μιλάμε για τη χρήση CSS ή JavaScript για διάταξη. Και οι δύο έχουν τα πλεονεκτήματά τους, και οι δύο έχουν τις δυνάμεις τους. Έχουν και οι δύο ανεμιστήρες έτοιμοι να ανακαλύψουν τις πιο λεπτομερείς πληροφορίες για να υποστηρίξουν το ένα πάνω στο άλλο. Αλλά βρίσκω αυτό το βαρετό. Και οι δύο που χρησιμοποιούνται μαζί είναι αυτό που έφερε τον ιστό προς τα εμπρός. Και μας κρατά πίσω ότι υπάρχουν δύο μαζικά στρατόπεδα. Το ένα άκρο βλέπει το CSS ως ένα παρελθόν και στον κόσμο που καθοδηγείται από το module μας, πρέπει να κάνουμε όλα σε ένα χώρο scripting. Ο άλλος βλέπει το CSS και τους προεπεξεργαστές του και χτίζει σενάρια ως κάτι περισσότερο από αρκετό για να κάνει τα πάντα. Θυμηθείτε τις ημέρες DHTML όταν κάναμε τα πάντα με το JavaScript; Θυμηθείτε την αντίδραση "μόνο για τις λύσεις CSS"; Όταν χρησιμοποιούμε (ab) πλαίσια ελέγχου για πολύπλοκη διαδραστικότητα για να αποφύγουμε τη χρήση JavaScript;

Η Giana Blantin το έλεγε όμορφα:

Μπορούν αυτές οι δύο ομάδες:
 "Το CSS είναι τόσο εύκολο, δεν είναι καν κωδικοποιητικό"
 "Το CSS είναι τόσο δύσκολο, πρέπει να το αντικαταστήσουμε με JS!"
 παρακαλώ μιλήστε ο ένας στον άλλο;

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

Συχνά αυτό είναι υπέρβαση του σημείου. Όπως και με τη χρήση του OpenGL για απλή δημιουργία κλίσεων, δεν χρειάζεται να βγάζουμε τα μεγάλα όπλα όλη την ώρα. Το CSS έχει μερικά κόλπα επάνω στο μανίκι του και δεν μπορούμε να ταιριάξουμε με scripting από την πλευρά του πελάτη. Και δεν έχει καμία σχέση με συντακτικά ή γλωσσικά χαρακτηριστικά. Πρόκειται για την κατανομή της ευθύνης.

Ποιος είναι σφάλμα και ποιος πρέπει να είναι ανεκτικός;

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

Τα προϊόντα που έχουν κατασκευαστεί με CSS εξακολουθούν να εμφανίζονται όταν ο προγραμματιστής έκανε λάθος. Δεν φαίνονται τέλειοι, αλλά λειτουργούν. Όταν ένας αναλυτής CSS συναντά μια ιδιότητα που δεν καταλαβαίνει - το παρακάμπτει. Όταν συναντά μια τιμή που δεν μπορεί να αντιμετωπίσει ή το ακίνητο δεν υποστηρίζει - το παραλείπει. Με αυτόν τον τρόπο παραμένουμε συμβατά προς τα πίσω.

Ένα κουμπί που έχει ένα χρώμα φόντου και μια κλίση θα δείξει το χρώμα σε παλαιότερα περιβάλλοντα. Το δείχνει επίσης σε περιβάλλοντα που δεν υποστηρίζουν κλίσεις λόγω προβλημάτων απόδοσης. Τα ταχύτερα, πιο hi-fi και υποστηρικτικά περιβάλλοντα θα εμφανίζουν κλίση.

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

Το JavaScript δεν είναι ανεκτικό σε σφάλματα. Αυτό μπορεί να είναι καταστροφικό. Έχετε πολύ πιο έλεγχο όταν χρησιμοποιείτε το JavaScript. Αλλά είστε και πολύ πιο υπεύθυνοι.

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

Με άλλα λόγια:

  • CSS - Εφαρμόζετε τα στυλ σας και ελπίζετε ότι λειτούργησε.
  • JavaScript - Μπορείτε να ελέγξετε το στυλ και μπορείτε και πρέπει να επαληθεύσετε ότι λειτούργησε

Το CSS σημαίνει να αγκαλιάζεις την "πικρία" του ιστού, όπως το έθεσε ο Brad Frost. Ο ιστός δεν είναι σταθερός καμβάς στον οποίο μπορείτε να ορίσετε εικονοστοιχεία. Πολλά πράγματα σε αυτό είναι πέρα ​​από τον έλεγχό σας:

  • Τα προγράμματα περιήγησης των χρηστών σας
  • Η ανάλυση, η πυκνότητα των pixel και οι ρυθμίσεις χρώματος των συσκευών τους
  • Η αξιοπιστία και η ταχύτητα σύνδεσης τους
  • Ο περιορισμός της σύνδεσης τους - ο αποκλεισμός των πόρων είναι ένα πράγμα
  • Το μέγεθος και το μέγεθος της γραμματοσειράς τους χρειάζονται
  • Η διαθεσιμότητα των πόρων στις μηχανές τους για το προϊόν σας (είναι η CPU ήδη καύση;)
  • Το μέγεθος του περιεχομένου κειμένου και των μεγεθών εικόνας στο προϊόν σας - CMS καθένας;

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

Σε αυτό το άγνωστο περιβάλλον πρέπει να αποφασίσουμε ποιος αναλαμβάνει τη δουλειά για να αντιμετωπίσει τα προβλήματα απόδοσης:

  • CSS - Είναι η εργασία του προγράμματος περιήγησης να λειτουργεί καλά, να χρησιμοποιεί τους πόρους GPU και να παρακάμπτει τη λειτουργικότητα.
  • JavaScript - Είναι δική σας δουλειά να δοκιμάσετε υποστήριξη. Και για να εξασφαλιστεί η απόδοση, η ζωγραφική και η ανανέωση είναι γρήγορη. Και για να διατηρήσετε συγχρονισμό στο συγχρονισμό.

Το CSS είναι χαλασμένο σε αυτό και οι κατασκευαστές περιηγητών βάζουν πολύ μεγάλη προσπάθεια για να βελτιώσουν την απόδοση του interface.

Γιατί λοιπόν υποτιμούμε το CSS και υπερτιμάμε τα οφέλη της JavaScript; Υποθέτω ότι ένα πράγμα που κατηγορείται είναι ένα κλασικό - ο Internet Explorer.

CSS και την ιστορία της

Το CSS αναγκάστηκε να μεγαλώσει γρήγορα και δεν έλαβε την υποστήριξη από προγράμματα περιήγησης ότι έπρεπε να είναι ένα αξιόπιστο εργαλείο.

Το CSS ήταν αρχικά πολύ περιορισμένο και σήμαινε ως αντικατάσταση της οπτικής HTML και των χαρακτηριστικών. Ξεκινήστε όλες αυτές τις γραμματοσειρές, bgcolor, ευθυγράμμιση, κέντρο, HR και φίλους. Η ελαφριά υποστήριξη του προγράμματος περιήγησης και τα πολύ περίεργα σφάλματα χωρίς επιλογές αποσφαλμάτωσης δεν την βοήθησαν. Ξέραμε ότι τα πράγματα ήταν λανθασμένα, αλλά δεν μπορούσαμε να κάνουμε τίποτα γι 'αυτό. Ακόμα και δεν μπορούσαμε να ζητήσουμε κανέναν, καθώς οι κατασκευαστές προγραμμάτων περιήγησης δεν ήταν διαθέσιμοι για ανατροφοδότηση.

Όταν το iPhone βγήκε το CSS είχε την ημέρα του στο προσκήνιο. Η ιστορία "HTML5 είναι η μελλοντική" χρειάζεται πολλή επιπλέον λειτουργικότητα. Με την Apple να καλεί τις λήψεις εκεί και η τυποποίηση που πήρε πάρα πολύ πολύ ήταν "Webkit μόνο".

Αυτό σήμαινε προθέματα στο CSS και για άλλη μια φορά forking για διαφορετικές μηχανές rendering. Οι κατασκευαστές φυλλομετρητών καινοτομούσαν και έδειξαν την κυριαρχία τους έναντι των άλλων με προκαθορισμένη λειτουργικότητα. Ως προγραμματιστές αυτό σήμαινε επανάληψη και έπρεπε να επιλέξει ένα σχέδιο υποστήριξης για καθένα από αυτά. Και φυσικά κάποιος για να υποστηρίξει παλαιότερα ξεπερασμένα προγράμματα περιήγησης. Αυτοί οι νέοι πόλεμοι περιηγητών γύρω από τα προθέματα προκάλεσαν πολλά επιχειρήματα και σύγχυση.

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

Δεν είναι αυτό που ονομάζετε μια αξιόπιστη γραμμή βάσης ή μια που ήταν απλή στην κατανόηση αν δεν είστε "web native"

Χρειαζόμασταν να κάνουμε το CSS να λειτουργεί ανεξάρτητα από την υποστήριξη του προγράμματος περιήγησης

Η λύση μας ήταν να διορθώσουμε το JavaScript. Μπορούμε να διαβάσουμε τις συνθήκες και να αντιδράσουμε σε αυτές δημιουργώντας HTML και εφαρμόζοντας το στυλ. Δεδομένου ότι η γλώσσα JavaScript είναι μια γλώσσα προγραμματισμού, έχουμε πλήρη έλεγχο του τι συμβαίνει. Έχουμε συνθήκες, βρόχους, συγκρίσεις - όλα τα πράγματα που ένας προγραμματιστής χάνει στο CSS. Αυτό, σε κάποιο βαθμό, αποτελεί παρεξήγηση της CSS ως έννοια. Ένας επιλογέας που ταιριάζει με πολλά στοιχεία είναι - ουσιαστικά - ένας βρόχος. Μπορούμε ακόμη να χρησιμοποιήσουμε το nth-child () για να στοχεύσουμε ένα στοιχείο σε μια συλλογή.

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

  • Τα απεριόριστα προγράμματα περιήγησης είναι κάτι - όλα τα προγράμματα περιήγησης βρίσκονται σε διαρκή πορεία αναβάθμισης. Μαθαίνουμε ακόμη και από τους κατασκευαστές του προγράμματος περιήγησης τι έρχεται κάτω από τη γραμμή.
  • Το εργαλείο περιήγησης παρέχει λεπτομερείς πληροφορίες σχετικά με το τι ισχύει για το CSS. Παίρνουμε ακόμη οπτικά εργαλεία όπως επεξεργαστές κινούμενων σχεδίων και συλλέκτες χρωμάτων.
Επεξεργαστής Visual για κινούμενα γραφικά CSS σε εργαλεία του Firefox για προγραμματιστές
  • Η υποστήριξη CSS σε όλα τα προγράμματα περιήγησης είναι καλά τεκμηριωμένη: το caniuse.com είναι ένας απίστευτος πόρος. Δεν δείχνει μόνο ποιο πρόγραμμα περιήγησης και ποιο περιβάλλον υποστηρίζει τι. Επίσης εξηγεί τα σφάλματα στις υλοποιήσεις, προσφέρει συνδέσμους με τις προδιαγραφές και τις αναφορές σφαλμάτων. Έχει ακόμη και ένα API για να ενσωματώσει αυτές τις πληροφορίες σε έγγραφα τεκμηρίωσης και εργαλεία ανάπτυξης.
Χρησιμοποιώντας μια επέκταση για τον κώδικα του Visual Studio, μπορείτε να λάβετε πληροφορίες σχετικά με την υποστήριξη των λειτουργιών του προγράμματος περιήγησης απευθείας στο πρόγραμμα περιήγησης. Μάθετε ποιος αποκλείετε ενώ κωδικοποιείτε.
  • Διαθέτουμε κανάλια υποστήριξης και παρακολούθηση σφαλμάτων για σχεδόν όλα τα προγράμματα περιήγησης. Μερικοί ακόμη σας επιτρέπουν να καταθέσετε ένα σφάλμα χρησιμοποιώντας το Twitter. Οι ομάδες κατασκευαστών προγραμμάτων περιήγησης δραστηριοποιούνται σε κοινωνικά μέσα και είναι προσβάσιμα.
  • Προ-επεξεργαστές όπως ο Sass και ο Λιγότερος έχουν ανοίξει τη θερμότητα για να καινοτομήσουν τα CSS spec πιο γρήγορα. Όπως το jQuery εμπνευσμένο από το JavaScript σήμερα, αυτά οδηγούν σε λειτουργικότητα που θέλουν οι άνθρωποι.
  • Η κοινότητα ξοδεύει πολύ χρόνο καθιστώντας το CSS πιο διατηρήσιμο. Οι προσεγγίσεις όπως το αντικειμενοστρεφές CSS από Nicole Sullivan και το Atomic Design από τον Brad Frost βρίσκονται εδώ και αιώνες και πρέπει να βοηθήσουν στη μείωση της πολυπλοκότητας.

Τι μπορεί να κάνει το CSS για εσάς

Εδώ είναι μερικά εκπληκτικά πράγματα που μπορεί να κάνει το CSS τώρα και πρέπει να εξετάσετε τη χρήση.

Υπολογισμένες τιμές CSS

Ένα πράγμα που πάντα έμοιαζε να λείπει από το CSS ήταν ένας τρόπος υπολογισμού των αξιών. Το κλασικό παράδειγμα είναι ένα απολύτως τοποθετημένο στοιχείο που είναι 100% ευρύ, αλλά χρειάζεται επένδυση. Στις παλαιότερες εποχές χρειαζόμασταν να το κάνουμε φτιάχνοντας ένα άλλο στοιχείο και εφαρμόζοντας την επένδυση σε αυτό. Για αρκετό καιρό όμως θα μπορούσαμε να χρησιμοποιήσουμε το CSS calc () για αυτό και να εφαρμόσουμε πλάτος calc (100% - 1em).

Οι υπολογισμοί υποστηρίζονται πολύ καλά σε όλα τα προγράμματα περιήγησης. Δεν πρέπει να υπάρχει καμία αμφιβολία για τη χρήση τους.

Ερωτήματα Media

Τα CSS Media Queries σάς επιτρέπουν να αντιδράτε στις αλλαγές του παραθύρου προβολής του εγγράφου. Στην ουσία, σημαίνει ότι εφαρμόζετε μέρος του φύλλου στυλ σας όταν το παράθυρο προβολής πληροί ορισμένα κριτήρια. Αυτό θα μπορούσε να είναι ένα παράθυρο προβολής που έχει τουλάχιστον ένα ορισμένο πλάτος ή το πολύ ένα ορισμένο ύψος. Μπορείτε επίσης να ελέγξετε για προσανατολισμό στην οριζόντια ή οριζόντια πλευρά της οθόνης ή εάν το έγγραφο είναι εκτύπωση.
 Τα CSS Media Queries έχουν επίσης ένα JavaScript ίσο με το matchMedia. Αυτό σας επιτρέπει να φορτώσετε το περιεχόμενο κατόπιν ζήτησης. Ένα πρόβλημα Media Queries είναι ότι τα προγράμματα περιήγησης φορτώνουν εικόνες σε μπλοκ ανεξάρτητα από την αντιστοιχία.

Δημιουργία περιεχομένου

Χρησιμοποιώντας τα πεδία :: πριν και μετά από τους ψευδοεπιλογείς στο CSS, μπορείτε να δημιουργήσετε περιεχόμενο καθαρά οπτικό. Αυτός είναι ένας πολύ καλός τρόπος για να βεβαιωθείτε ότι τα πράγματα που είναι για καλλυντικούς λόγους δεν χρειάζονται ένα δικό του, άδειο στοιχείο DIV, SPAN, B ή I. Είναι ένας τρόπος να διατηρήσετε όλα τα οπτικά διατηρημένα στο φύλλο στυλ αντί για τα σενάρια ή το έγγραφο HTML. Μπορείτε να το συνδυάσετε με σκιές, κλίσεις και άλλες λειτουργίες CSS που δημιουργούν γραφικά. Μια εντυπωσιακή βιτρίνα είναι "A Single DIV". Αυτός ο ιστότοπος δείχνει δεκάδες γραφικά που δημιουργήθηκαν από ένα μόνο στοιχείο DIV.

Αυτό το γραφικό δημιουργείται χρησιμοποιώντας ένα μόνο στοιχείο DIV

Κινούμενες εικόνες και μεταβάσεις

Οι κινούμενες εικόνες και οι μεταβάσεις στο CSS ήταν η μεγάλη ανακάλυψη όταν βγήκε το iPhone. Οι μεταβάσεις σας επιτρέπουν να δημιουργήσετε μια ομαλή αλλαγή από τη μια κατάσταση στην άλλη. Δεν χρειάζεται να γνωρίζετε ποιες αλλαγές θα πρέπει να γίνουν. Το μόνο που λέτε στο πρόγραμμα περιήγησης είναι πόσο καιρό να μεταβαίνετε και τι λειτουργία χαλάρωσης να χρησιμοποιήσετε. Οι κινούμενες εικόνες σας δίνουν πιο λεπτομερή έλεγχο. Μπορείτε να ορίσετε τα βασικά καρέ και τι πρέπει να εμψυχώσουν τον τρόπο. Τόσο οι κινούμενες εικόνες όσο και οι μεταβάσεις πυρκαγιών πριν, κατά τη διάρκεια και μετά. Αυτό σας επιτρέπει να αλληλεπιδράσετε με το JavaScript με έναν προβλέψιμο τρόπο. Το πλεονέκτημα της χρήσης του CSS για αυτό είναι ότι το πρόγραμμα περιήγησης διασφαλίζει την απόδοση της κινούμενης εικόνας. Αυτό συμβαίνει με την εκτέλεση τους στη GPU και τον περιορισμό του ρυθμού καρέ σε περίπτωση ανάγκης. Αυτό είναι ένα σημαντικό βήμα για να εξασφαλιστεί μια καλή διάρκεια ζωής των μπαταριών των χρηστών σας. Εάν ζωνώνετε στο JavaScript, αυτό μπορεί εύκολα να πάει στραβά.

Μονάδες προβολής

Τα ερωτήματα των μέσων ενημέρωσης έχουν νόημα όταν θέλετε να ορίσετε λεπτομερώς τις εμπειρίες. Αντ 'αυτού, μπορείτε επίσης να χρησιμοποιήσετε μονάδες προβολής σε στοιχεία μεγέθους ανάλογα με τον διαθέσιμο χώρο. Το Width Viewport (vw) είναι ένα ποσοστό του πλήρους πλάτους της προβολής. Έτσι, σε μια ευρεία οθόνη μεγέθους 480 px, το 10vw είναι 10% ή 48px. Αυτό διαφέρει από τη μονάδα%, η οποία είναι το ποσοστό του γονικού στοιχείου και όχι του παραθύρου προβολής. Τα ποσοστά που έχουν φτιαχτεί θα γίνουν μικρότερα. Το ύψος του παραθύρου προβολής (vh) είναι ένα ποσοστό του ύψους του πλήρους διαγράμματος προβολής. Μπορείτε επίσης να κάνετε τον εαυτό σας ανεξάρτητο από τον προσανατολισμό με τη χρήση vmin και vmax. Αυτά είτε παίρνουν το μικρότερο είτε το μεγαλύτερο των vw και vh. Το μόνο niggle που υποστηρίζει τις μονάδες παραθύρων προβολής είναι ότι μέχρι σήμερα η Edge δεν υποστηρίζει vmin και vmax.

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

Flexbox

Το Flexbox είναι ένας τρόπος για να δημιουργήσετε τη διάταξη των στοιχείων στο CSS. Στην ουσία είναι ό, τι οι άνθρωποι που ισχυρίστηκαν πίνακες layout ήταν ευκολότεροι που χάθηκαν στο CSS - και πολλά άλλα. Μπορείτε να ευθυγραμμίσετε τα παιδικά στοιχεία ενός στοιχείου να είναι δεξιά, αριστερά, πάνω ή κάτω. Μπορείτε να τα ορίσετε για να γεμίσετε τον διαθέσιμο χώρο, με το καθένα να χρησιμοποιεί το ίδιο ποσό ή και περισσότερο από τα υπόλοιπα. Μπορείτε επίσης να τα ορίσετε για να χρησιμοποιήσετε το διαθέσιμο χώρο μεταξύ τους ή γύρω από κάθε ένα από αυτά. Είναι τόσο ευέλικτο όσο λέει στο κασσίτερο. Εάν θέλετε να έχετε έναν οπτικό επεξεργαστή για να δείτε τι σημαίνει αυτό, το Build With React έχει ένα μεγάλο editor flexbox για να παίξει με.

Η κατασκευή με τον επεξεργαστή flexbox του React δείχνει τη δύναμη της τοποθέτησης στοιχείων χρησιμοποιώντας αυτήν την τεχνική

Υπάρχει επίσης ένα παιχνίδι που ονομάζεται Flexbox Froggy. Διδάσκει τις έννοιες με έναν ευχάριστο και προσβάσιμο τρόπο και είναι ιδανικό για τα παιδιά να ξεκινούν με το CSS.

Μια μεγάλη συζήτηση για το Flexbox είναι αυτή που έδωσε η Zoe Gillenwater σε διάφορες εκδηλώσεις. Αυτό που μου αρέσει περισσότερο για τη συζήτηση είναι πώς η Zoe δείχνει πώς χρησιμοποίησε το Flexbox στην παραγωγή. Τα παραδείγματα προέρχονται από την booking.com και εμφανίζουν εναλλακτικές λύσεις για προγράμματα περιήγησης που δεν την υποστηρίζουν.

CSS Grid

Εάν το Flexbox είναι η απάντηση στα στοιχεία διάταξης σε μια σειρά ή σε μια στήλη, το CSS Grid το μεταφέρει στο επόμενο επίπεδο. Με τη χρήση του μπορείτε να τοποθετήσετε στοιχεία σε ένα καθορισμένο πλέγμα σε δύο διαστάσεις, τόσο σε σειρές όσο και σε στήλες. Το πλέγμα μαγειρεύει για λίγο και τώρα υποστηρίζεται τελικά σε όλο το σκάφος.

Το πλέγμα μπορεί να είναι αποθαρρυντικό για να το εξετάσουμε καθώς η ευελιξία του σημαίνει ότι υπάρχουν πολλές επιλογές από τις οποίες μπορείτε να επιλέξετε. Μέχρι στιγμής, ο απλούστερος τρόπος για να ξεκινήσετε είναι ο πόρος του Rachel Andrew "Πλέγμα από Παράδειγμα". Αυτός έχει αντίγραφα + επικόλληση παραδείγματα των σχεδίων πλέγματος. Πολλοί από αυτούς έρχονται με εφεδρεία για μη υποστηριζόμενα προγράμματα περιήγησης. Εκπαίδευση βίντεο που εξηγούν τα μέσα και τα έξω από αυτά κάνουν ένα καταπληκτικό πόρο.

Εάν μάθετε καλύτερα με τις προκλήσεις, μπορείτε να πιάσετε το CSS Grid παίζοντας το CSS Grid Garden.

Υπάρχουν κάποιες συζητήσεις σχετικά με τα δίκτυα CSS στο διαδίκτυο. Το πρώτο είναι το "CSS Layout Grid", και πάλι από την Rachel Andrew.

Ο Jen Simmons ακολουθεί μια διαφορετική προσέγγιση. Στην κατεύθυνση της "Πραγματικής Καλλιτεχνικής Διεύθυνσης στο Διαδίκτυο", δείχνει πώς η ευελιξία του Grid μπορεί να μας βοηθήσει να ξεφύγουμε από τη σκέψη του "box layout".

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

Προσαρμοσμένες ιδιότητες CSS (μεταβλητές)

Ένα από τα πιο απαιτητικά χαρακτηριστικά του CSS ότι οι προεπεξεργαστές όπως ο Sass και ο Less είχαν για πολύ καιρό μεταβλητές. Τώρα έχουμε CSS Custom Properties που είναι αυτό που με ενθουσιάζει περισσότερο με το CSS. Μπορείτε να ορίσετε επαναχρησιμοποιήσιμες ρυθμίσεις μία φορά στο έγγραφό σας και να τις εφαρμόσετε καθ 'όλη τη διάρκεια. Η πιο συνηθισμένη περίπτωση χρήσης για αυτό είναι προσαρμοσμένα χρώματα και μεγέθη. Αλλά μπορείτε να προχωρήσετε περισσότερο και να ορίσετε γραμματοσειρές και άλλη τυπογραφία. Μπορείτε επίσης να τα χρησιμοποιήσετε για να υπολογίσετε φωτισμούς στο CSS. Αυτό δεν ήταν δυνατό πριν. Ένα εκπληκτικό χαρακτηριστικό είναι ότι οι Custom Properties μπορούν επίσης να ρυθμιστούν δυναμικά με το JavaScript.

Πώς να διαβάσετε και να γράψετε προσαρμοσμένες ιδιότητες CSS με JavaScript - (απόσπασμα από τη συζήτηση της Lea Verou)

Αν θέλετε να μάθετε όλα σχετικά με την εκπληκτική ισχύ των CSS Custom Properties, υπάρχει μια ομιλία που δεν πρέπει να χάσετε. Οι μεταβλητές CSS της Lea Verou: var (- υπότιτλος) είναι ένας θησαυρός πληροφοριών.

Ερωτήματα δυνατοτήτων CSS

Μια άλλη πολύ ευπρόσδεκτη προσθήκη στο CSS ήταν τα τεκμήρια των χαρακτηριστικών. Αυτά τα έργα μοιάζουν με τα Media Queries. Με τη χρήση του @supports ελέγχετε αν ο τρέχων πράκτορας χρήστη υποστηρίζει μια συγκεκριμένη λειτουργία. Στη συνέχεια, ορίζετε ένα μπλοκ CSS που εφαρμόζεται μόνο όταν υπάρχει υποστήριξη χαρακτηριστικών. Αυτό μπορεί να είναι περίεργο καθώς ο χαρακτήρας της CSS θα πρέπει να το φροντίζει ήδη. Αυτό που κάνει όμως είναι να σας δώσει πολύ πιο λεπτομερή έλεγχο. Επίσης, σας επιτρέπει να ορίσετε μια εναλλακτική λύση όταν δεν υπάρχει υποστήριξη για ένα συγκεκριμένο χαρακτηριστικό χρησιμοποιώντας τη λέξη "όχι".

CSS και JavaScript;

Το CSS και το JavaScript που εργάζονται μαζί είναι ισχυρό και το σωστό. Όσον αφορά το CSS, δεν μπορεί να κάνει τα πάντα. Υπάρχουν σενάρια όπου η ίδια η φύση του CSS βρίσκεται σε αντίθεση με αυτό που θέλουμε να επιτύχουμε.

Όπως εξηγεί ο Cristiano Rastelli στην ομιλία του "Ας υπάρξει η ειρήνη στο CSS", το αγαπημένο χαρακτηριστικό του "Διαχωρισμού των Ανημάτων" δεν ισχύει σε έναν κόσμο ενότητας.

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

Το CSS και το JavaScript λειτουργούν από κοινού σε έναν μη-συστατικό κόσμο

Όταν κατασκευάζουμε λύσεις βάσει εγγράφων, δεν υπάρχει δικαιολογία για να μην σκάβουμε την εξουσία του CSS. Μπορείτε και πρέπει να χρησιμοποιήσετε το JavaScript για να φέρει τις πληροφορίες που δεν μπορεί να διαβάσει το CSS στο CSS. Είναι συνετό να το κάνουμε με τον λιγότερο παρεμβατικό τρόπο.

Η ιεραρχία του CSS και του JS να συνεργαστεί με ένα άλλο σε αυτό το σενάριο είναι τα εξής:

  • Χρησιμοποιήστε το CSS όταν μπορείτε - χρησιμοποιώντας τα πράγματα που είδατε εδώ
  • Εάν πρέπει να επικοινωνήσετε με το CSS, σκεφτείτε να αλλάξετε τις Custom Properties
  • Αν αυτή δεν είναι μια επιλογή, εφαρμόστε τάξεις σε γονικά στοιχεία χρησιμοποιώντας το classList.
  • Ως τελευταία λύση, μπορείτε να αλλάξετε το στυλ άμεσα
Ένα εξαιρετικό παράδειγμα που δείχνει πώς να διαβάσετε τη θέση του ποντικιού στο JavaScript και να το αποθηκεύσετε σε CSS Custom Properties - (απόσπασμα από τη συζήτηση της Lea Verou)

Κάθε φορά που αλλάζετε δυναμικά τα στυλ, θυμηθείτε ότι εργάζεστε με το πρόγραμμα περιήγησης. Κάθε αλλαγή στυλ έχει συνέπειες στην ανανέωση, απόδοση και ζωγραφική. Ο Paul Lewis και ο Das Surma διατηρούν έναν εύχρηστο οδηγό που ονομάζεται CSSTriggers. Αυτό περιγράφει λεπτομερώς τις αλλαγές του CSS που οδηγούν σε τι τιμωρία στον browser.

Το CSS Triggers σας δίνει πληροφορίες για τις επιδράσεις των διαφορετικών αλλαγών στυλ

Συνοψίζοντας

Το CSS είναι πολύ πιο αξιόπιστο από ό, τι ήταν και δεν έχει απομείνει πολύ που πρέπει να είναι διαφορετικό από αυτό που είναι. Το κύριο πράγμα που πρέπει να θυμάστε είναι ότι το CSS δεν έχει σκοπό να κάνει τα ίδια πράγματα που κάνει το JavaScript. Ακόμη και οι γλώσσες διάταξης δεν λειτουργούν με τον τρόπο που κάνει το CSS και καλύπτουν την ίδια ανάγκη. Έχει μια πολύ σκληρή δουλειά να κάνει και το κάνει καλά. Όταν χρησιμοποιείτε το CSS, το πρόγραμμα περιήγησης σάς βοηθά να ικανοποιήσετε τις ανάγκες των τελικών χρηστών σας, ανεξάρτητα από την εγκατάστασή τους. Αυτή είναι μια βασική αρχή του ιστού και ορίζεται στις Αρχές Σχεδιασμού HTML του W3C:

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

Οι χρήστες μας αξίζουν διεπαφές που είναι ομαλές, αξιόπιστες και δεν σκοτώνουν τις μπαταρίες τους. Έτσι, σκεφτείτε το CSS λίγο περισσότερο. Μπορείτε να είστε τεμπέλης και να βασίσετε στο έργο της κοινότητας.

Εμπνευσμένοι και ενεργοί άνθρωποι CSS που θα ακολουθήσουν

Κατά την έρευνα αυτής της ομιλίας, συνέχισα να επιστρέφω στους πόρους που γράφτηκαν και συντηρήθηκαν από τους μυθικούς ανθρώπους στο διαδίκτυο. Εδώ είναι μια σύντομη λίστα σε καμία συγκεκριμένη σειρά των ανθρώπων που πρέπει να ακολουθήσετε, αν θέλετε να είστε μέχρι το μηδέν με τις γνώσεις σας CSS. Πρέπει να ευχαριστήσω κάθε ένα από αυτά. Κάνουν τον ιστό ευκολότερο για όλους μας.

  • Ο Ire Aderinokun (@ireaderinokun) γράφει πολλά εύκολα κατανοητά και στο σημείο CSS πληροφορίες στο blog της, bitsofco.de.
  • Η Ana Tudor (@anatudor) είναι προγραμματιστής που δημιουργεί γελοία περίπλοκα και όμορφα κινούμενα σχέδια στο CSS. Το Codepen της είναι ένα από τα πιο συνηθισμένα και αυτό που κάνει στους κινητήρες CSS είναι μια μεγάλη βοήθεια για τους κατασκευαστές περιηγητών για να δοκιμάσουν την απόδοσή τους
  • Ο Jen Simmons (@ jensimmons) είναι ένας διαχειριστής σχεδίασης και σχεδίασης CSS που εργάζεται για το Mozilla
  • Η Rachel Andrew (@rachelandrew) σε με είναι ο # 1 CSS εμπειρογνώμονας πλέγματος
  • Ο Chris Coyier (@chriscoyier) είναι ο ιδρυτής του καταπληκτικού πόρου CSS CSS Tricks και της διαδραστικής παιδικής χαράς του Codepen
  • Η Sarah Drasner (@sarah_edo) είναι ένας εμπειρογνώμονας σχεδίασης και σχεδίασης που επικεντρώνεται στην κατασκευή διατηρητέων προϊόντων
  • Η Zoe M. Gillenwater (@zomigi) είναι πρωτοπόρος που χρησιμοποιεί την αιχμηρή άκρη CSS στην παραγωγή
  • Ο Brad Frost (@brad_frost) είναι ο συγγραφέας του Atomic Design, ένας κλιμακωτός τρόπος χρήσης και επαναχρησιμοποίησης του CSS σε μεγάλα έργα
  • Η Rachel Nabors (@rachelnabors) είναι ένας εμπειρογνώμονας του κωμικού καλλιτέχνη και του animation που γράφει για τα κινούμενα σχέδια στο διαδίκτυο και τα πλεονεκτήματα των διαφορετικών τεχνολογιών
  • Η Una Kravets (@una) είναι ένας προγραμματιστής που ειδικεύεται στο CSS και τα νέα χαρακτηριστικά του. Είναι επίσης podcaster και έχει το δάχτυλό της πάρα πολύ στον παλμό CSS και άλλες οπτικές τεχνολογίες
  • Η Lea Verou (@leaverou) είναι ο συντάκτης του εξαιρετικού βιβλίου μυστικών CSS, ερευνητής στο MIT και προσκεκλημένος από την ομάδα εργασίας του CSS του W3C. Είναι σχολαστική στην έρευνά της και αδίστακτη στην παράδοση πολλών μεγάλων πληροφοριών σε σύντομο χρονικό διάστημα.
  • Η Sara Soueidan (@sarasoueidan) είναι ένας προγραμματιστής που ειδικεύεται στα σχεδιαστικά σχέδια και στις ρεαλιστικές προσεγγίσεις για τη χρήση των νεώτερων τεχνολογιών.

Παίρνω εμπνευσμένη από αυτούς τους ανθρώπους (μεταξύ άλλων) καθημερινά, και ελπίζω ότι θα αρχίσετε να έχετε την ίδια εμπειρία