css3.gr

Προσπαθώ σε αυτό το άρθρο να συντάξω ένα μικρό οδηγό επιβίωσης, όσον αφορά το presentation κομμάτι του εκάστοτε web site. Η χρήση των css shorthands δεν προσδίδει μόνο μικρό μέγεθος στο css file, πράγμα που το κάνει να γίνεται load πιο γρήγορα, αλλά επιπλέον δίνει στον όρο web site maintenance μια απαράμιλλη ποιότητα που έγκειται στην ευκολία συντήρησης του εκάστοτε web site. Aπό την άλλη, λίγο-πολύ όλοι μας χρησιμοποιούμε τα shorthand properties στην καθημερινή μας εργασία, ωστόσο αν κρίνω από τον εαυτό μου, πολλές φορές αυτή η χρήση γίνεται μηχανικά. Το ξέρω, το κάνω. Με αυτή την προσέγγιση, είναι μοιραίο πολλές φορές να ξεχνάμε τις default τιμές που παίρνουν οι ιδιότητες που δεν συμπεριλαμβάνονται στο εκάστοτε shorthand. Τις παραθέτω λοιπόν, μαζί με διάφορα παραδείγματα χρήσης τους. Καλή ανάγνωση!

Εν αρχή λοιπόν, θεωρώ ότι όλο το CSS είναι βασισμένο πάνω στην έννοια “shorthand”. Για να γίνει πιο κατανοητό αυτό, ας δούμε πως θα δηλώναμε τα font properties μιας απλής φράσης αν δεν υπήρχε το CSS :

</p><font face="Tahoma" color="#000000" size="12">Σήμερα είναι Κυριακή</font><p>

με την ύπαρξη του CSS, περνάμε όλα αυτά τα properties σε ένα style (ας το ονομάσουμε “text”) και εύκολα και απλά το εφαρμόζουμε :

<span class="text">Σήμερα είναι Κυριακή</span>

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

Margin - Padding

Γενική Σύνταξη : margin-top, margin-right, margin-bottom, margin-left

style { margin: 1px 1px 1px 1px; }

σε αυτό το παράδειγμα όλες οι πλευρές που εφαρμόζεται το margin παίρνουν την τιμή 1px

ας εφαρμόσουμε το shorthand

style { margin: 1px; }

από την στιγμή που θέλουμε να εφαρμόσουμε το ίδιο μέγεθος margin σε όλες τις πλευρές, δεν χρειάζεται να γράψουμε τέσσερις φορές την ίδια τιμή.

εφαρμόζοντας το margin στις οριζόντιες και κάθετες πλευρές (top - bottom, right - left)
style { margin: 2px 3px; }

με την ανωτέρω σύνταξη, οι οριζόντιες πλευρές (top - bottom) θα έχουν margin 2px και οι κάθετες (right - left) θα έχουν margin 3px

εφαρμόζοντας το margin στις οριζόντιες και κάθετες πλευρές (top, right - left, bottom)
style { margin: 1px 3px 2px; }

με την ανωτέρω σύνταξη, η πλευρά top θα έχει margin 1px, οι κάθετες (right - left) θα έχουν margin 3px και η πλευρά bottom θα έχει margin 2px.

Eίναι σημαντικό να έχετε στο μυαλό σας πάντα, την σειρά δήλωσης των margins (top, right, bottom, left). Eγώ χρησιμοποιώ μια “μέθοδο υπενθύμισης” που διάβασα στο blog του “συναγωνιστή” Αλέξανδρου Λίγγρη, το γνωστό, κορυφαίο και μη εξαιρετέο Webz. T-R-B-L που μοιάζει με το TROUBLE.

Eπίσης, χρίζει αναφοράς και το γεγονός ότι οι τιμές που θα δηλωθούν μπορούν να είναι και αρνητικές :

style { margin: -1px 3px 2px; }

* όσον αφορά το padding οι ιδιότητες είναι ίδιες. Αντικαταστήστε την λέξη margin με την λέξη padding στα ανωτέρω παραδείγματα για εφαρμογή.

Χρώματα

εδώ τα πράγματα είναι πιο απλά. Υπάρχουν διάφοροι τρόποι για να δηλωθούν χρωματισμοί μέσω CSS :

keywords (red, black, blue, lime κλπ.)
style { color: red }

RGB
style { color: rgb(255,0,0) }

προσωπικά πάντα προτιμώ τον hexadecimal τρόπο.
style { color: #ff0000 }

Το shorthand που προσφέρει το css σε τέτοιες περιπτώσεις, έγκειται στον κανόνα που λέει ότι όταν ένα hexadecimal αποτελείται από 3 ίδια ζεύγη των οποίων τα digits είναι ίδια (στην προκειμένη περίπτωση : ff, 00, 00) το declaration μπορεί απλά να γραφτεί ως εξής :
style { color: #f00 }

Fonts

Καλό θα ήταν πάντα να γνωρίζουμε τις default τιμές που χρησιμοποιούνται σε περίπτωση που δεν δηλωθεί κάποια ιδιότητα :

style { font-size: inherit; line-height: normal; font-weight: normal; font-style: normal; font-family: inherit; font-variant: normal;}

Aς δούμε ένα style με όλα του τα font properties και μετά ας αρχίσουμε να εφαρμόζουμε shorthands πάνω του :

style { font-size: 12px; line-height: 17px; font-weight: normal; font-style: normal; font-family: tahoma;}

με τα shorthands που μας προσφέρει το css μπορεί όλο το ανωτέρω να εφαρμοστεί με ένα declaration :

style { font : 12px/17px tahoma; }

το μυστικό εδώ είναι να γνωρίζουμε πως αν δεν δηλωθούν οι τιμές font-weight και font-style, το css αυτόματα ορίζει ως default το normal. Εξαιτίας αυτού στο shorthand declaration παραλείπονται. Αν θέλαμε να ορίσουμε ας πούμε το font-weight σε bold και το font-style σε oblique το declaration θα μετατρεπόταν ως εξής :

style { font : 12px/17px bold oblique tahoma; }

Σημαντικό επίσης να θυμάστε, ότι για να δουλέψει σωστά θα πρέπει να δηλωθεί στο shorthand απαραιτήτως τόσο το font-size όσο και το font-family. Αν κάποιο από τα δύο λείπει το css declaration αγνοείται εντελώς από τον browser.

Backgrounds

λίγο περίπλοκα εδώ τα πράγματα, και πάντα στις περίπλοκες περιπτώσεις είναι καλό να γνωρίζουμε τις default τιμές που πέρνουν τα background properties. θα εξηγήσω παρακάτω το γιατί.

style { background-color: transparent; background-image: none; background-repeat: repeat; background-position: top left; background-attachment: scroll;}

ας εφαρμόσουμε τώρα σε αυτές τις default τιμές κάποιες εντολές :

style {background-color: #fff; background-image: url(img.jpg); background-repeat: repeat-x; background-position: 5px 20px; background-attachment: fixed;}

ας δοκιμάσουμε όλα αυτά να τα εισάγουμε σε ένα declaration χρησιμοποιώντας shorthand :

style { background: #fff url(img.jpg) repeat-x 5px 20px fixed; }

Xρησιμοποιώ για συγκεκριμένο λόγο όλες τις ιδιότητες (repeat, position, attachment) που στην καθημερινότητα μας πάνω στην δουλειά, ενδεχομένως παραλείπουμε. Το κάνω αυτό, για να γνωρίζουμε τι ακριβώς γίνεται όταν παραλείπουμε κάτι και πως αντιλαμβάνονται αυτή την παράλειψη οι σύγχρονοι browsers. Aν επί παραδείγματι το shorthand μας ήταν δομημένο ως εξής : 

style { background: #fff url(img.jpg) repeat-x; }

ο browser θα το διάβαζε ως εξής :

style { background: #fff url(img.jpg) repeat-x top left scroll; }

οι μη δηλωμένες τιμές δηλαδή, θα είχαν ήδη αντικατασταθεί με τις default τιμές. Οπότε, προσοχή!!!

Borders

Τα borders είναι εύκολα να τα κατανοήσουμε, αυτό που ίσως μας δυσκολέψει είναι ότι συνολικά αποτελούνται από πολλές ιδιότητες, συνολικά 8 : border-style, width, color, border-top, border-right, border-bottom, border-left, border.

ας δούμε ένα μη-shorthand παράδειγμα :

style {border-top: 1px solid #333333;border-right: 1px solid #333333;border-bottom: 1px solid #333333;border-left: 1px solid #333333;}

με την χρήση shorthand

style { border: 1px solid #333; }

και πάλι θα πρέπει να τονιστεί η επίδειξη προσοχής στις default τιμές, ειδικά στα borders που συμπεριφέρονται κάπως ακατανόητα. Αν για παράδειγμα γράψω το εξής :

style { border: solid #333; }

δηλαδή παραλείψω το μέγεθος του border, αυτό που θα λάβω ως αποτελέσμα θα είναι ένα ωραιότατο 3px (!!) στο μέγεθος του border, σε όλες τις πλευρές. (μην με ρωτήσετε πως προκύπτει το 3px ως default τιμή, εκτός του ότι δεν έχω ιδέα, δεν μπορώ να κατανοήσω το γιατί δεν εφαρμόζεται μια πιο “συμβατή” τιμή όπως 0px ή 1px).

Αν παραλλάξω ως εξής το declaration :

style { border: 1px solid; }

η τιμή που θα πάρω στον χρωματισμό των πλευρών του border θα είναι #000000

καταλαβαίνουμε τι θα γίνει αν γράψω μόνο το :

style { border: solid; }

Lists

Γενικώς, τα πράγματα είναι απλά. Όπως και σε κάθε ιδιότητα που παίρνει shorthand καλό θα ήταν να γνωρίζουμε τις default τιμές :

style { list-style-type:disc; list-style-position:outside; list-style-image:none;}

όλο αυτό μπορεί με την χρήση shorthand να γραφεί σε ένα declaration :

style { list-style: disc outside; }

αν θέλουμε να εφαρμόσουμε κάποιο image που θα χρησιμοποιεί το list-style το κάνουμε ως εξής :

style { list-style: disc outside url(img.jpg); }

Συμπέρασμα

Όλες οι παραπάνω css shorthand ιδιότητες υποστηρίζονται από το CSS2. Τρέχουν χωρίς προβλήματα σε όλους τους browsers συμπεριλαμβανομένου του Internet Explorer 5.5 και των μεταγενέστερων. Δεν θα επιμείνω τόσο στην παραγωγή μικρότερου css file που προκύπτει από την εφαρμογή τους, όσο στην απαράμιλλη ευκολία maintenance που προσφέρει η χρήση τους.