Τι είναι τα φύλλα στυλ Cascading;
Οι ιστότοποι αποτελούνται από έναν αριθμό μεμονωμένων κομματιών, συμπεριλαμβανομένων εικόνων, κειμένου και διαφόρων εγγράφων. Αυτά τα έγγραφα δεν περιλαμβάνουν μόνο αυτά που μπορούν να συνδεθούν από διάφορες σελίδες, όπως αρχεία PDF, αλλά και τα έγγραφα που χρησιμοποιούνται για την κατασκευή των ίδιων των σελίδων, όπως τα έγγραφα HTML για τον καθορισμό της δομής μιας σελίδας και των εγγράφων CSS (Cascading Style Sheet) να υπαγορεύει την εμφάνιση μιας σελίδας. Αυτό το άρθρο θα εμβαθύνει στο CSS, καλύπτοντας το τι είναι και πού χρησιμοποιείται σήμερα στις ιστοσελίδες.
Ένα μάθημα ιστορίας CSS
Το CSS αναπτύχθηκε για πρώτη φορά το 1997 ως ένας τρόπος για τους προγραμματιστές ιστοσελίδων να καθορίσουν την οπτική εμφάνιση των ιστοσελίδων που δημιουργούν. Στόχος του ήταν να επιτρέψει στους επαγγελματίες του διαδικτύου να διαχωρίσουν το περιεχόμενο και τη δομή του κώδικα ενός δικτυακού τόπου από τον οπτικό σχεδιασμό, κάτι που δεν ήταν δυνατό πριν από αυτό το διάστημα.
Ο διαχωρισμός της δομής και του στυλ επιτρέπει στο HTML να εκτελέσει περισσότερες από τις λειτουργίες στις οποίες είχε αρχικά βασιστεί - η σήμανση του περιεχομένου, χωρίς να χρειάζεται να ανησυχείτε για το σχεδιασμό και τη διάταξη της ίδιας της σελίδας, κάτι που είναι κοινώς γνωστό ως "look and feel" της σελίδας.
Το CSS δεν κέρδισε τη δημοτικότητα μέχρι το 2000, όταν τα προγράμματα περιήγησης ιστού άρχισαν να χρησιμοποιούν περισσότερα από τα βασικά χαρακτηριστικά γραμματοσειράς και χρώματος αυτής της γλώσσας σήμανσης. Σήμερα, όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το CSS Level 1, το μεγαλύτερο μέρος του CSS Level 2, ακόμα και τις περισσότερες πτυχές του CSS Level 3. Καθώς το CSS συνεχίζει να εξελίσσεται και εισάγονται νέα στυλ, οι περιηγητές ιστού έχουν αρχίσει να εφαρμόζουν ενότητες που φέρνουν νέα υποστήριξη CSS σε αυτά τα προγράμματα περιήγησης και δίνουν στους σχεδιαστές ιστοσελίδων ισχυρά νέα εργαλεία σχεδιασμού για να δουλέψουν.
Στα (πολυ) χρόνια πριν, υπήρξαν επιλεγμένοι σχεδιαστές ιστοσελίδων που αρνήθηκαν να χρησιμοποιήσουν το CSS για το σχεδιασμό και την ανάπτυξη ιστοσελίδων, αλλά αυτή η πρακτική είναι όλοι εκτός από τη βιομηχανία σήμερα. Το CSS είναι πλέον ένα ευρέως χρησιμοποιούμενο πρότυπο στον σχεδιασμό ιστοσελίδων και θα δυσκολευόσαστε να βρούμε όσους εργάζονται στον κλάδο σήμερα και που δεν έχουν τουλάχιστον μια βασική κατανόηση αυτής της γλώσσας.
Το CSS είναι μια συντομογραφία
Όπως ήδη αναφέρθηκε, ο όρος CSS σημαίνει "Φύλλο στυλ Cascading". Ας σπάσουμε αυτή τη φράση λίγο για να εξηγήσουμε καλύτερα αυτά που κάνουν αυτά τα έγγραφα.
Η λέξη "φύλλο στυλ" αναφέρεται στο ίδιο το έγγραφο (όπως το HTML, τα αρχεία CSS είναι απλά έγγραφα κειμένου που μπορούν να επεξεργαστούν με ποικιλία προγραμμάτων). Τα φύλλα στυλ έχουν χρησιμοποιηθεί για το σχεδιασμό εγγράφων για πολλά χρόνια. Πρόκειται για τις τεχνικές προδιαγραφές μιας διάταξης, είτε έντυπη είτε ηλεκτρονική. Οι σχεδιαστές εκτύπωσης έχουν χρησιμοποιήσει από πολύ καιρό φύλλα στυλ για να εξασφαλίσουν ότι τα σχέδια τους εκτυπώνονται ακριβώς σύμφωνα με τις προδιαγραφές τους. Ένα φύλλο στυλ για μια ιστοσελίδα εξυπηρετεί τον ίδιο σκοπό, αλλά με την προστιθέμενη λειτουργικότητα να λέει επίσης στο πρόγραμμα περιήγησης στο web πώς να αποδίδει το έγγραφο που προβάλλεται. Σήμερα, τα φύλλα στυλ CSS μπορούν επίσης να χρησιμοποιούν ερωτήματα μέσων για να αλλάξουν τον τρόπο με τον οποίο μια σελίδα αναζητά διαφορετικές συσκευές και μεγέθη οθόνης . Αυτό είναι εξαιρετικά σημαντικό αφού επιτρέπει σε ένα έγγραφο HTML να καταστεί διαφορετικό ανάλογα με την οθόνη που χρησιμοποιείται για την πρόσβαση σε αυτό.
Το Cascade είναι το πραγματικά ιδιαίτερο τμήμα του όρου "cascading style sheet". Ένα φύλλο στυλ ιστού προορίζεται να καταρρεύσει μέσα από μια σειρά από στυλ σε αυτό το φύλλο, όπως ένα ποτάμι πάνω από έναν καταρράκτη. Το νερό του ποταμού πλήττει όλα τα βράχια στον καταρράκτη, αλλά μόνο αυτά που βρίσκονται στο κάτω μέρος επηρεάζουν ακριβώς πού θα ρέει το νερό. Το ίδιο ισχύει και για τον καταρράκτη στα φύλλα στυλ ιστοτόπου.
Κάθε ιστοσελίδα επηρεάζεται από τουλάχιστον ένα φύλλο στυλ, ακόμη και αν ο σχεδιαστής ιστού δεν εφαρμόζει στυλ. Αυτό το φύλλο στυλ είναι το φύλλο στυλ πρακτόρων χρηστών - επίσης γνωστό ως τα προεπιλεγμένα στυλ που θα χρησιμοποιήσει το πρόγραμμα περιήγησης ιστού για την εμφάνιση μιας σελίδας εάν δεν παρέχονται άλλες οδηγίες. Για παράδειγμα, οι προεπιλεγμένες υπερσύνδεσμοι έχουν στυλ με μπλε χρώμα και είναι υπογραμμισμένες. Αυτά τα στυλ προέρχονται από το προεπιλεγμένο φύλλο στυλ του προγράμματος περιήγησης ιστού. Εάν ο σχεδιαστής ιστοσελίδων παρέχει άλλες οδηγίες, ωστόσο, το πρόγραμμα περιήγησης θα πρέπει να γνωρίζει ποιες οδηγίες έχουν προτεραιότητα. Όλα τα προγράμματα περιήγησης έχουν τα δικά τους προεπιλεγμένα στυλ, αλλά πολλές από αυτές τις προεπιλογές (όπως οι μπλε υπογραμμισμένες συνδέσεις κειμένου) μοιράζονται σε όλα ή τα περισσότερα μεγάλα προγράμματα περιήγησης και εκδόσεις.
Για ένα άλλο παράδειγμα προεπιλογής προγράμματος περιήγησης, στο πρόγραμμα περιήγησης ιστού μου, η προεπιλεγμένη γραμματοσειρά είναι " Times New Roman " που εμφανίζεται στο μέγεθος 16. Σχεδόν καμία από τις σελίδες που επισκέπτομαι εμφανίζεται σε αυτή την οικογένεια γραμματοσειρών και το μέγεθος, ωστόσο. Αυτό συμβαίνει επειδή ο καταρράκτης ορίζει ότι τα δευτερεύοντα φύλλα στυλ, τα οποία καθορίζονται από τους ίδιους τους σχεδιαστές, για να επαναπροσδιορίσουν το μέγεθος γραμματοσειράς και την οικογένεια, παρακάμπτοντας τις προεπιλογές του προγράμματος περιήγησης του ιστού μου. Τα τυχόν φύλλα στυλ που δημιουργείτε για μια ιστοσελίδα θα έχουν περισσότερη εξειδίκευση από τα προεπιλεγμένα στυλ του προγράμματος περιήγησης, επομένως αυτές οι προεπιλογές θα ισχύουν μόνο εάν το φύλλο στυλ σας δεν τις παρακάμπτει. Εάν θέλετε οι συνδέσεις να είναι μπλε και υπογραμμισμένες, δεν χρειάζεται να κάνετε τίποτα, αφού αυτή είναι η προεπιλογή, αλλά εάν το αρχείο CSS του ιστότοπού σας λέει ότι οι δεσμοί πρέπει να είναι πράσινοι, το χρώμα αυτό θα αντικαταστήσει το προεπιλεγμένο μπλε. Η υπογράμμιση θα παραμείνει σε αυτό το παράδειγμα, αφού δεν διευκρινίσατε διαφορετικά.
Πού χρησιμοποιείται το CSS;
Το CSS μπορεί επίσης να χρησιμοποιηθεί για τον ορισμό του τρόπου εμφάνισης των ιστοσελίδων όταν προβάλλονται σε άλλα μέσα από ένα πρόγραμμα περιήγησης ιστού. Για παράδειγμα, μπορείτε να δημιουργήσετε ένα φύλλο στυλ εκτύπωσης που θα καθορίζει τον τρόπο εκτύπωσης της ιστοσελίδας. Επειδή τα στοιχεία της ιστοσελίδας, όπως τα κουμπιά πλοήγησης ή οι φόρμες ιστού, δεν έχουν καμιά σκοπιά στην εκτυπωμένη σελίδα, ένα φύλλο στυλ εκτύπωσης μπορεί να χρησιμοποιηθεί για να "απενεργοποιήσει" αυτές τις περιοχές όταν εκτυπώνεται μια σελίδα. Αν και δεν είναι μια συνηθισμένη πρακτική σε πολλούς ιστότοπους, η επιλογή δημιουργίας φύλλων στυλ εκτύπωσης είναι ισχυρή και ελκυστική (από την εμπειρία μου - οι περισσότεροι επαγγελματίες του διαδικτύου δεν το κάνουν αυτό απλώς και μόνο επειδή το πεδίο εφαρμογής του προϋπολογισμού ενός τόπου δεν απαιτεί να γίνει αυτό το πρόσθετο έργο ).
Γιατί είναι σημαντικό το CSS;
Το CSS είναι ένα από τα πιο ισχυρά εργαλεία που μπορεί να μάθει ένας σχεδιαστής ιστοσελίδων γιατί με αυτό μπορείτε να επηρεάσετε ολόκληρη την οπτική εμφάνιση ενός ιστότοπου. Τα καλά γραμμένα φύλλα στυλ μπορούν να ενημερωθούν γρήγορα και να επιτρέψουν στους ιστότοπους να αλλάξουν αυτό που έχει προτεραιότητα οπτικά στην οθόνη, το οποίο με τη σειρά του δείχνει αξία και εστίαση στους επισκέπτες, χωρίς να χρειάζεται να γίνουν αλλαγές στην υποκείμενη σήμανση HTML.
Η κύρια πρόκληση του CSS είναι ότι υπάρχει αρκετός χρόνος για να μάθει κανείς - και με τα προγράμματα περιήγησης που αλλάζουν καθημερινά, αυτό που λειτουργεί καλά σήμερα μπορεί να μην έχει νόημα αύριο, καθώς υποστηρίζονται νέα στυλ και άλλα χάνονται ή χάνονται υπέρ για έναν ή άλλο λόγο .
Επειδή το CSS μπορεί να καταρρεύσει και να συνδυαστεί και λαμβάνοντας υπόψη το πώς τα διαφορετικά προγράμματα περιήγησης μπορούν να ερμηνεύσουν και να εφαρμόσουν τις οδηγίες διαφορετικά, το CSS μπορεί να είναι πιο δύσκολο από το απλό HTML για master. Το CSS αλλάζει επίσης στα προγράμματα περιήγησης με τέτοιο τρόπο ώστε η HTML πραγματικά δεν συμβαίνει. Μόλις αρχίσετε να χρησιμοποιείτε το CSS, ωστόσο, θα δείτε ότι η αξιοποίηση της δύναμης των φύλλων στυλ θα σας δώσει απίστευτη ευελιξία στο πώς σχεδιάζετε ιστοσελίδες και ορίζετε την εμφάνιση και την αίσθηση. Κατά μήκος του δρόμου, θα συγκεντρώσετε μια «τσάντα με κόλπα» στυλ και προσεγγίσεις που έχουν εργαστεί για σας στο παρελθόν και τις οποίες μπορείτε να γυρίσετε πάλι καθώς δημιουργείτε νέες ιστοσελίδες στο μέλλον.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 7/5/17,