Εάν σχεδιάζετε για το Διαδίκτυο καθ 'όλη τη διάρκεια της τελευταίας δεκαετίας, είστε αναμφίβολα εξοικειωμένοι με την ιδιοκτησία float CSS. Δεδομένου ότι η βιομηχανία (ευτυχώς) ενέκρινε την αρχή των διατάξεων χωρίς τραπέζια, τα πλωτήρες ήταν το όπλο επιλογής που χρησιμοποιούν οι περισσότεροι από εμάς για να σχεδιάσουμε τις ιστοσελίδες μας, αλλά είναι η καλύτερη επιλογή;
Παρά τη δημοτικότητα αυτής της μεθόδου, είναι τακτικά η αιτία της απογοήτευσης και της σύγχυσης για τους νέους σχεδιαστές και γίνεται πρόβλημα όταν τα επιπλέουν στοιχεία παραμένουν "ασαφή". Αυτά τα μη εκκαθαρισμένα επιπλέουν μπορούν να προκαλέσουν πολλαπλά ζητήματα που κυμαίνονται από την αλαζονική αισθητική μέχρι την πλήρη έλλειψη προσβασιμότητας. Με ένα μικρό έργο είναι πολύ απλό να αντιμετωπίζεις πρόβλημα με ένα θέμα float, αλλά όταν δουλεύεις σε μια μεγάλη διαδικτυακή εφαρμογή με δυναμικό περιεχόμενο μπορεί να είναι λίγο πιο δύσκολο, να τρώει πολύτιμο χρόνο και να σου κοστίζει χρήματα.
Ακόμη και όταν χρησιμοποιείται σωστά, οι πλωτήρες αλλάζουν κανονική ροή ενός εγγράφου το οποίο μπορεί να προκαλέσει απροσδόκητη συμπεριφορά και να περιορίσει τις επιλογές στυλ. Δεδομένου ότι ο πλωτήρας δεν βρίσκεται στη «κανονική ροή», τα μη τοποθετημένα κιβώτια τεμαχίων που δημιουργήθηκαν πριν και μετά από τη ροή του κιβωτίου πλωτήρα κατακόρυφα, σαν να μην υπήρχε ο πλωτήρας. Με ανταποκρινόμενο σχεδιασμό, όπου τα μεγέθη είναι δυναμικά και ρέουν για να γεμίσουν διαθέσιμο χώρο, αυτό δεν είναι καθόλου ιδανικό. Τι γίνεται αν υπήρχε ένας καλύτερος τρόπος;
Flexbox είναι το συναρπαστικό μέλλον των layouts του ιστότοπου, αλλά για όσους από εμάς πρέπει να υποστηρίξουμε τους παλαιότερους browsers, αυτό εξακολουθεί να είναι ένα μακρινό όνειρο. Η ιδιότητα εμφάνισης , από την άλλη πλευρά, έχει πλήρη υποστήριξη και μπορεί να προσφέρει σχεδόν όλη τη λειτουργικότητα διάταξης ενός πλωτήρα χωρίς τα μειονεκτήματα.
Η ιδιότητα εμφάνισης , σε συνδυασμό με το πλωτήρα και τη θέση , καθορίζει τον τύπο κουτιού ή κιβωτίων που παράγονται για ένα στοιχείο. Σε μια πολύ απλή περιστροφή, τα στοιχεία επιπέδου μπλοκ καλύπτουν ολόκληρο το πλάτος του δοχείου τους αναγκάζοντας όλα τα επόμενα στοιχεία στην επόμενη γραμμή ενώ τα στοιχεία επιπέδου γραμμής καλύπτουν μόνο το πλάτος του περιεχομένου τους, επιτρέποντας σε κάθε στοιχείο επιπέδου γραμμής να ρέει δίπλα του στην ίδια γραμμή.
Εφαρμογή οθόνης: μπλοκ σε ένα στοιχείο δημιουργεί ένα δοχείο μπλοκ σε επίπεδο γραμμής. Σκεφτείτε το κείμενο μέσα σε μια ετικέτα. Όλα είναι "εν σειρά" μεταξύ τους, ενώ η ίδια η ετικέτα είναι ένα δοχείο σε επίπεδο μπλοκ. Με την κατανόηση αυτής της συμπεριφοράς μπορούμε να χρησιμοποιήσουμε την ιδιότητα εμφάνισης για να τοποθετήσουμε το περιεχόμενό μας το ένα δίπλα στο άλλο. Δεδομένου ότι όλα τα στοιχεία μας παραμένουν στην κανονική ροή, δεν έχουμε προβλήματα με ένα στοιχειοθετημένο γονικό στοιχείο. Κατά τη γνώμη μου, αυτή είναι μια πολύ καθαρότερη λύση που εξακολουθεί να επιτυγχάνει το επιθυμητό αποτέλεσμα.
Δείτε το στυλό Inline-μπλοκ πάνω από πλωτήρες από το davidicus στο CodePen.
Αυτή η μέθοδος λειτουργεί σχεδόν οπουδήποτε θα χρησιμοποιούσατε κανονικά το πλωτήρα. Ας ρίξουμε μια ματιά στην κλασική διάταξη του main / sidebar. Για το HTML έχουμε ένα στοιχείο περιτυλίγματος με δύο παιδικά στοιχεία μέσα του έτσι όπως:
Το CSS μας:
.wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}Ακριβώς έτσι έχουμε το κύριο περιεχόμενο και την πλευρική μπάρα.
Η κατεύθυνση του "πλωτήρα" καθορίζεται από την ευθυγράμμιση του κειμένου του περιτυλίγματος div. Δεδομένου ότι η προεπιλεγμένη ευθυγράμμιση έχει μείνει δεν είχαμε να κάνουμε τίποτα. Ωστόσο, θα μπορούσατε εύκολα να το τοποθετήσετε στο κέντρο ή στο δεξί μέρος για να επιτύχετε ορισμένες διατάξεις που δεν είναι ακόμη δυνατές με πλωτήρες (περισσότερο σε αυτό αργότερα). Παρατηρήστε το σχόλιο "χωρίς διαστήματα" τοποθετημένο ανάμεσα στα δύο παιδικά τμήματα του δοχείου .wrapper . Αυτό είναι σημαντικό να σημειωθεί, και ο λόγος για να γίνει αυτό είναι αυτός "con" σχετικά με αυτή τη μέθοδο.
Ας επιστρέψουμε στο παράδειγμα της ετικέτας. Όταν γράφετε κείμενο σε html, όλος ο λευκός χώρος είναι τυλιγμένος σε ένα μόνο κενό χαρακτήρα, ανεξάρτητα από το μέγεθος των διαστημάτων που έχετε στο έγγραφό σας HTML. Έτσι, τυχόν κενά που έχετε μεταξύ των στοιχείων που "επιπλέουν" στο markup θα εγγραφούν στην πραγματικότητα ως ένας χώρος μεταξύ τους στο πρόγραμμα περιήγησης, ακριβώς όπως το κείμενο της παραγράφου μας. Αυτό φυσικά θα προκαλέσει τον υπολογισμό του μεγέθους σας, ώστε να μην χτυπήσει το τελευταίο στοιχείο στο επόμενο επίπεδο της σελίδας. Δεν bueno! Ευτυχώς για εμάς υπάρχουν αρκετές λύσεις για να διορθώσουμε αυτό το μικρό θέμα. Οπως:
Καταργήστε το χώρο μεταξύ των στοιχείων σας στην HTML σας, αφαιρώντας έτσι τον χώρο από την εξίσωση. Το έκανα για λίγο, αλλά φαινόταν απλός και δυσκολότερο να το διαβάσω.
Αν προσθέσετε ένα σχόλιο HTML μεταξύ των στοιχείων σας, θα αφαιρεθεί επίσης ο χαρακτήρας χώρου όπως έκανε στο παράδειγμά μας. Αυτή είναι η λύση που προτιμώ . Το κείμενο που επισημαίνεται στους περισσότερους συντάκτες κειμένων είναι τέτοιο ώστε η αντίθεση μεταξύ της σημείωσης και των στοιχείων είναι αρκετή για να βελτιώσει σημαντικά την αναγνωσιμότητα της βαθμολογίας σας. Αυτό θα σας επιτρέψει επίσης να διατηρήσετε τη σωστή εσοχή του ίδιου του ίδιου του στοιχείου.
Μπορεί να σκέφτεστε: "Αυτό είναι καλό και όλα, αλλά γιατί θα άλλαζα μια μέθοδο που λειτουργεί καλά για μένα;" Λοιπόν, ακόμα κι αν είστε πλοίαρχος float, υπάρχουν ορισμένα πράγματα που απλά δεν μπορούν να κάνουν. Για παράδειγμα:
Το φευγαλέο "επικεντρωμένο πλωτήρα", το οποίο είναι συχνά επιθυμητό, απαιτεί επιπρόσθετη σήμανση και πολλαπλές ιδιότητες CSS για να επιτευχθεί. Με τη μέθοδο της οθόνης αυτό γίνεται απλά εφαρμόζοντας το κείμενο-align: center στο περιτύλιγμα.
Το μεγαλύτερο πλεονέκτημα της επιλογής της μεθόδου εμφάνισης είναι η δυνατότητα κάθετης ευθυγράμμισης του περιεχομένου σας. Πόσο συχνά θέλετε να εστιάσετε ένα στοιχείο στο αδελφό του; Θα μπορούσατε να χρησιμοποιήσετε την τοποθέτηση με το αρνητικό περιθώριο / το τέχνασμα μετάφρασης αλλά, και πάλι, με ένα απόκριτο, δυναμικό περιβάλλον αυτό δεν είναι προτιμότερο. Αντί να εφαρμόζετε κάθετη ευθυγράμμιση: μεσαία. θα συγκεντρώσει τέλεια τα στοιχεία σας κάθε φορά χωρίς επιπλέον εργασία από την πλευρά σας. (Δείτε το στυλό Inline-μπλοκ πάνω από πλωτήρες από το davidicus στο CodePen.)
Στην πραγματικότητα δεν υπάρχει "ένα μέγεθος που ταιριάζει σε όλους" όταν πρόκειται για σχεδιασμό ιστοσελίδων και πραγματικά βράζει προς την προσωπική προτίμηση. Χρησιμοποιώ ακόμα πλωτήρες σε ορισμένες καταστάσεις και μερικές φορές είναι πραγματικά το καλύτερο εργαλείο για τη δουλειά. Το κάνω, ωστόσο, πιστεύω ότι υπάρχει ένα συγκεκριμένο πλεονέκτημα στη χρήση της μεθόδου εμφάνισης. Από την εμπειρία μου, έχω διαπιστώσει ότι είναι η καλύτερη, λιγότερο επιρρεπής σε σφάλματα μέθοδος για την αντιμετώπιση των σχεδίων. Για όσους από εσάς θα επιθυμούσατε να εξερευνήσετε αυτή τη μέθοδο περισσότερο, έχω δημιουργήσει ένα πλέγμα "Ας πούμε όχι να πλέει": Πλέγμα εντός πλαισίου με SASS στο CodePen.
Προτεινόμενη εικόνα / μικρογραφία, κατάρρευση τοίχου μέσω του Chris Cotterman