Αναμείνατε ολίγον τι
Web Devel

CSS is Awesome

CSS is awesome, sarcastic picture

Όλοι όσοι ασχολούνται με το web development, είτε επαγγελματικά είτε όχι, γνωρίζουν το κλασσικό αστείο του “CSS is Awesome”, και σίγουρα αναγνωρίζουν την ειρωνεία της εικόνας. Και φυσικά υπάρχει παντού, από κούπες μέχρι μπλουζάκια, και έχει χρησιμοποιηθεί ακόμα και σε παρουσιάσεις σε συνέδρια.

Οι περισσότεροι από σας που διαβάζετε αυτές τις γραμμές έχετε πετύχει κάπου την εικόνα αυτή, τουλάχιστον μία φορά. Είναι κάτι που σχετικά όλοι μας (web developers) έχουμε συναντήσει - “πάθει”. Προσπαθώντας να κάνουμε κάτι απλό με το CSS, και με αυτούς τους μυστικιστικούς τρόπους που αλληλεπιδρούν ακόμα και τα πιο απλά properties, καταλήγει να μας κάνει την ζωή δύσκολη.

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

Το πρόβλημα

See the Pen CSS is Awesome by Brandon (@brundolf) on CodePen.


Υπάρχουν τρεις βασικές συνθήκες που πρέπει να ισχύσουν για να εμφανιστεί το πρόβλημα:

  • το περιεχόμενο δεν μπορεί να μικρύνει για να προσαρμοστεί στο container
  • το container δεν μπορεί να μεγαλώσει για να προσαρμοστεί και χωρέσει το περιεχόμενο
  • το container δεν χειρίζεται με όμορφο τρόπο το overflow

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

Διορθώνοντας το μέγεθος του περιεχομένου

Είναι κάπως άδικο για το κείμενο, γιατί η λέξη AWESOME δεν χωράει σε μία γραμμή με αυτό το μέγεθος γραμματοσειράς και με αυτό το μέγεθος του container width. Από προεπιλογή, το κείμενο αναδιπλώνεται όπου υπάρχουν κενά και δεν “σπάει” τις λέξεις. Για τώρα, ας υποθέσουμε ότι δεν μπορούμε να αλλάξουμε τις διαστάσεις του container. Θα μπορούσε, το κείμενο να είναι παραφουσκωμένη επικεφαλίδα σε ένα site, το οποίο βλέπουν από ένα μικρό τηλέφωνο.

Κατακερματίζοντας τις λέξεις

Για να κάνεις μια μεγάλη λέξη να αναδιπλωθεί, θα πρέπει να χρησιμοποιήσουμε το property word-break. Βάζοντας το σε break-all δίνουμε την οδηγία στον browser να κατακερματίσει τις λέξεις εάν αυτό φανεί αναγκαίο όταν αναδιπλώνει ένα κείμενο μέσα στο container του.

See the Pen CSS is Awesome: word-break by Brandon (@brundolf) on CodePen.

Άλλου είδους περιεχόμενο

Σε αυτή την περίπτωση ο μόνος τρόπος για να κάνουμε το περιεχόμενο να αποκρίνεται καλύτερα έπρεπε να ενεργοποιήσουμε το word breaking. Αλλά υπάρχουν και άλλα ήδη περιεχομένου που μπορεί να βγαίνουν εκτός ορίων – να κάνουν overflow. Εάν στο word-wrap δώσουμε την τιμή nowrap, το κείμενο δεν θα αναδιπλωθεί ούτε στα κενά μεταξύ των λέξεων. Ή το περιεχόμενο είναι ένα block-level element, του οποίου το width ή το min-width έχει τιμή μεγαλύτερη από αυτή του width του container.

Διορθώνοντας τις διαστάσεις του container

Υπάρχουν αρκετοί τρόποι όπου το container μπορεί να έχει εξαναγκαστεί να μην αλλάζει μέγεθος. Για παράδειγμα: width, max-width, και flex. Αλλά αυτό που έχουν κοινό είναι ότι το width προσδιορίζεται από κάτι άλλο και όχι από το περιεχόμενο. Αυτό δεν είναι απαραίτητα κακό, ειδικά όταν δεν υπάρχει προκαθορισμένο height, το οποίο στις περισσότερες περιπτώσεις θα ανάγκαζε το περιεχόμενο να επεκταθεί προς τα κάτω. Αλλά σε μια τέτοια περίπτωση ή παρόμοια, αξίζει τον κόπο να αναρωτηθεί κανείς αν χρειάζεται να ελέγξει-αλλάξει το width ή αν μπορεί να το αφήσει στην σελίδα να αποφασίσει πως θα εμφανιστεί.

Εναλλακτικοί τρόποι εκτός της αλλαγής του width

Πολύ πιο συχνά απ’ ότι νομίζουμε, αν θέσουμε στο width μια τιμή, ειδικά αν είναι σε pixels, εννοούμε πραγματικά να ρυθμίσουμε το min-width ή το max-width. Εκεί έρχεται η ερώτηση: ποιο από τα δύο μας ενδιαφέρει σε αυτή την περίπτωση. Αυτό το element εξαφανίστηκε εντελώς όταν δεν είχε περιεχόμενο γιατί το width πήρε τιμή 0; Θέτουμε το min-width, ώστε να έχει μια συγκεκριμένη διάσταση και να μπορεί να μεγαλώσει. Μήπως πλατειάζει πάρα πολύ και μία παράγραφος χωράει σε μία μόνο σειρά και γίνεται πολύ δύσκολο να διαβαστεί; Θέτουμε το max-width, ώστε να μην περάσει ένα συγκεκριμένο όριο, και επίσης δεν θα βγει εκτός οθόνης στις μικρές συσκευές. Το CSS πρέπει να το καθοδηγείς, όχι να του επιβάλλεσαι σε κάθε κίνηση που κάνεις.

Overflow από το flexbox

Αν ένα flex αντικείμενο έχει περιεχόμενο που κάνει overflow, τα πράγματα γίνονται λίγο πιο περίπλοκα. Το πρώτο πράγμα που μπορεί να κάνει κανείς είναι να ελέγξει αν καθορίζει κάπου το width, όπως κάναμε πιο πριν. Αν δεν συμβαίνει κάτι τέτοιο, τότε το πιο πιθανό είναι να κάνει “flex-shrinking”. Τα flex αντικείμενα καθορίζουν το μέγεθος τους πρώτα από τους κανονικούς κανόνες, width, content, κτλ. Οι διαστάσεις που προκύπτουν ονομάζονται το flex-basis τους (που μπορεί να καθοριστεί ξεχωριστά με ένα property με το ίδιο όνομα). Αφού καθοριστεί το flex-basis για κάθε αντικείμενο, εφαρμόζονται τα flex-grow και flex-shrinkflex, που καθορίζει και τα δύο σε μία εντολή). Τα αντικείμενα μεγαλώνουν και μικραίνουν με ένα σταθμισμένο τρόπο, που βασίζεται στις τιμές αυτών των δύο και το μέγεθος του container.

Θέτοντας το flex-shrink: 0 δίνει την οδηγία στον browser ότι αυτό το αντικείμενο δεν πρέπει ποτέ να γίνει μικρότερο από το flex-basis. Αν το flex-basis έχει καθοριστεί από το περιεχόμενο (προεπιλογή), αυτό λύνει το πρόβλημα. Προσοχή όμως με αυτό. Μπορεί να καταλήξει κανείς να του εμφανιστεί το ίδιο πρόβλημα ξανά στο πατρικό element. Αν αυτό το flex αντικείμενο αρνείται να μικρύνει, ακόμα και όταν ο flex container είναι μικρότερος από αυτό, θα κάνει overflow και γυρνάς πίσω στην αρχή.

Αντιμετωπίζοντας το overflow

Μερικές φορές δεν υπάρχει τρόπος για να το παρακάμψουμε. Ίσως το width του container να είναι περιορισμένο από το μέγεθος της οθόνης. Ίσως το περιεχόμενο να είναι ένας πίνακας δεδομένων, με γραμμές που δεν αναδιπλώνονται και στήλες που δεν συρρικνώνονται άλλο. Μπορούμε να αντιμετωπίσουμε το overflow με πιο όμορφο τρόπο από το να έχουμε διαρροές από παντού.

overflow: hidden;

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

See the Pen CSS is Awesome: overflow:hidden by Brandon (@brundolf) on CodePen.

Αν το περιεχόμενο είναι κείμενο, μπορούμε να το κάνουμε πιο ωραίο και οπτικά αποδεκτό βάζοντας text-overflow: ellipsis;, το οποίο προσθέτει αυτόματα τρεις τελείες “...” (ellipsis) στην θέση του κειμένου που αποκόπτεται. Βέβαια, θα αποκοπεί μεγαλύτερο μέρος του κειμένου για να δημιουργηθεί χώρος για να μπουν οι τελείες. Επίσης, για να λειτουργήσει αυτό, είναι απαραίτητο να έχει οριστεί και το overflow: hidden;.

See the Pen CSS is Awesome: ellipsis by Brandon (@brundolf) on CodePen.

overflow: auto;

Προτιμότερη λύση είναι το overflow: auto;. Αυτό δίνει στον browser την ελευθερία να προσθέσει μια scroll bar όταν το περιεχόμενο κάνει overflow, επιτρέποντας στον χρήστη να κάνει scroll στο container.

See the Pen CSS is Awesome: overflow:auto by Brandon (@brundolf) on CodePen.


Αυτή είναι μία ωραία εναλλακτική, γιατί σημαίνει πως ότι και αν συμβεί, ο χρήστης θα μπορέσει να έχει πρόσβαση σε όλο το περιεχόμενο. Και η scroll bar θα εμφανιστεί μόνο αν χρειαστεί, που δεν είναι κακή ιδέα να προσθέσει κανείς αυτό το property σε κρίσιμα σημεία, ακόμα και αν δεν περιμένεις να εμφανιστεί.

Γιατί όλο αυτό έχει τέτοια απήχηση σε όσους έχουν χρησιμοποιήσει CSS;

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

Ένας εμπειρικός κανόνας για την διαχείριση αυτής της κατάστασης: ποτέ μην γίνεσαι σαφής ή συγκεκριμένος από όσο χρειάζεται. Οι ιστοσελίδες είναι responsive by default. Γράφοντας καλό CSS αξιοποιούμε αυτό το γεγονός αντί να το παρακάμπτουμε. Χρησιμοποιείστε ποσοστά ή viewport units αντί για ένα media query αν είναι δυνατόν. Χρησιμοποιείστε min-width αντί για width, όπως είδαμε και παραπάνω. Σκεφτείτε περισσότερο το τι θέλετε να εκφράσετε πραγματικά, παρά να προσθέτετε συνέχεια properties μέχρι να φαίνονται όλα σωστά. Προσπαθήστε να έχετε μια αίσθηση του πως ο browser αναλύει το layout και τα sizes, και κάντε τις αλλαγές και τις προσθήκες σύμφωνα με αυτό. Δουλέψτε μαζί με το CSS, όχι εναντίον του.

Ένας άλλος εμπειρικός κανόνας είναι να αφήνουμε το width ή το height να προσδιοριστεί από το περιεχόμενο. Σε αυτή την περίπτωση που είδαμε, δεν ήταν αρκετό, αλλά στις περισσότερες περιπτώσεις είναι. Δώστε στα πράγματα χώρο. Όταν θέτετε κανόνες για το ποια θα είναι τα μεγέθη των elements, ειδικά για elements που περιέχουν κείμενο, σκεφτείτε πρώτα τις ακραίες περιπτώσεις: “τι θα συμβεί να το περιεχόμενο είναι μόνο ένας χαρακτήρας; τι θα συμβεί αν το κείμενο είναι 3 παράγραφοι; ίσως να μην δείχνει και πολύ καλά, αλλά θα μου διαλύσει όλο το layout;”

Επίσης είναι σημαντικότατο να ελέγξει κανείς πως φαίνονται όλα όσα έχει κάνει σε διαφορετικούς browsers.Ο κάθε browser αντιμετωπίζει τα πράγματα διαφορετικά, και το τελικό αποτέλεσμα μπορεί να μην είναι αυτό που είδες στον Firefox από αυτό που παράγει ο Chrome. Ακόμα και σε αυτά που είδαμε πιο πάνω, στο παράδειγμα που βάλαμε word-break: break-all; στον Chrome (και στον IE) κάνει αυτό που περιγράφω, στον Firefox όμως δεν έχει κανένα αποτέλεσμα. Εκεί η λύση είναι να βάλουμε white-space: pre-wrap; word-break: break-all; που δίνει αντίστοιχο αποτέλεσμα.

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

Πηγή: css-tricks

Μοιραστείτε το άρθρο

The following two tabs change content below.
agathan

agathan

Αποφοίτησα απο το τμήμα Εφαρμοσμένων Μαθηματικών του Πανεπιστημίου Κρήτης. Κάτα την διάρκεια εργάστηκα στην τεχνική υποστήριξη του τμήματος. Ακολούθησε το μεταπτυχιακό μου, Msc In Applied Mathematics at University Of Delaware. Ύστερα δούλεψα για μερικά χρόνια σαν web developer (CMS and what not) και SEO/Adwords engineer.
Και τώρα είμαστε στο GeekD, μια λέξη που περιγράφει όλα τα παραπάνω.

"All we have to decide is what to do with the time that is given us."
-Gandalf The Grey, JRR Tolkien

Αφήστε ένα σχόλιο

Επιλογές της ομάδας
Νέα εντυπωσιακά ευρήματα από το ναυάγιο των Αντικυθήρων
Μελέτη σε αρχαίο κείμενο αποκαλύπτει νέα στοιχεία για την προέλευση του μηδενός
Τα 10++ καλύτερα plugins αναζήτησης του Wordpress για το 2017
Ο «ανθρώπινος υπολογιστής» Katherine Johnson, τιμάται από τη NASA για το σπουδαίο έργο της στις διαστημικές αποστολές
Έξι επιστήμονες της NASA πέρασαν έναν χρόνο «αρειανής ζωής» στη Γη
tablet - smartphone
Flash player and Html 5 logos
cassini grand finale video still Science Breakthrough
Catan in Virtual Reaiity
Close

Συνεχίζοντας να χρησιμοποιείτε την ιστοσελίδα, συμφωνείτε με τη χρήση των cookies. Περισσότερες πληροφορίες.

Οι ρυθμίσεις των cookies σε αυτή την ιστοσελίδα έχουν οριστεί σε "αποδοχή cookies" για να σας δώσουμε την καλύτερη δυνατή εμπειρία περιήγησης. Εάν συνεχίσετε να χρησιμοποιείτε αυτή την ιστοσελίδα χωρίς να αλλάξετε τις ρυθμίσεις των cookies σας ή κάνετε κλικ στο κουμπί "Κλείσιμο" παρακάτω τότε συναινείτε σε αυτό.

Κλείσιμο