Πολλά και διάφορα

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

Καταρχάς έχω δημιουργήσει 2 πολύ πρακτικά repositories με grunt και gulp boilerplates για web designers. Documentation μπορείτε να βρείτε τόσο στο Phrappe.com όσο και στα ίδιο τα repositories, ωστόσο είναι πολύ κατανοητά τόσο στον τρόπο λειτουργίας τους όσο και στα features που υποστηρίζουν. Στόχος τους είναι να βοηθήσουν όσους θέλουν να χρησιμοποιήσουν CSS και JS preprocessors (και όχι μόνο), χρησιμοποιώντας το grunt ή το  gulp. Κάνουν περίπου, ότι κάνει το Codekit (για τους Apple users), απλά δωρεάν και χωρίς GUI (οι εντολές ωστόσο είναι πολύ εύκολες). Στόχος μου ήταν να τα κάνω και Yeoman generators ωστόσο με πρόλαβαν άλλοι οπότε και δεν έχει νόημα η συγκεκριμένη επένδυση χρόνου…

To δεύτερο πράγμα που ήθελα να μοιραστώ εδώ και καιρό, είναι πως είμαι ενθουσιασμένος με το porcupine-letter. Ξεχωρίζει με διαφορά από τα υπόλοιπα newsletters (ειδικά τα corporate) και μου φτιάχνει την διάθεση όποτε το λαμβάνω στο inbox μου. Ο Γιάννης κάνει φοβερή δουλειά και αξίζει να ρίξετε μια ματιά. Δυστυχώς λόγω περίεργων συγκυριών (εκλογών και όχι μόνο) έχασα την παρουσίαση του στο UpNorth. Έχω την αίσθηση πως έχασα το καλύτερο φετινό event μιας και εκτός του Γιάννη, ήταν πάρα πολλοί αυτοί που ήθελα να δω και δεν κατάφερα (Ζαχαρένια, Φώτη και πολλοί άλλοι)…  Ελπίζω να ανέβουν κάποια στιγμή video των παρουσιάσεων μπας και “ρεφάρω” την χασούρα…

Επίσης εδώ και κάποιο καιρό, έχω ξεκινήσει την μεταφορά κάποιον άρθρων μου από το CSS3.gr στο Tsevdos.com. Στόχος μου είναι να μεταφερθούν σιγά-σιγά όλα, μιας και είχα ξοδέψει πολύ χρόνο για την συγγραφή τους. Το αξιοσημείωτο είναι πως ακόμα και μετά από 5 χρόνια τα άρθρα διαβάζονται ακόμα άνετα και είναι σχετικά επίκαιρα - γι’ αυτό και μπαίνω στην εν λόγω διαδικασία άλλωστε… Γενικά μου λείπει το CSS3.gr :-(

Τέλος αν έχετε σκοπό να κάνετε interview για κάποια front-end developer θέση, είτε ως αυτός που θέτει είτε ως αυτός που απαντάει σε ερωτήσεις, ρίξτε μια ματιά στο Front-end developer interview questions repo. Έμαθα πολλά προσπαθώντας να απαντήσω σωστά σε όλες τις ερωτήσεις και επειδή μου άρεσε πολύ αποφάσισα να το μεταφράσω κι ολας.

CSS selectors: Ότι πρέπει να ξέρετε! (μέρος 2ο – CSS 2)

Σημείωση : Το παρακάτω άρθρο γράφτηκε τον Φεβρουάριο του 2009 (πριν 5 χρόνια!) για το CSS3.gr.

Καλώς ήρθατε στο 2ο μέρος του άρθρου “CSS selectors : Ότι πρέπει να ξέρετε!” Σε αυτό το δεύτερο μέρος θα παρουσιαστούν αναλυτικά οι διάφοροι CSS 2 selectors. Γι’ αυτούς που δεν έχουν διαβάσει το πρώτο μέρος και δεν θεωρούν τους εαυτούς τους CSS gurus, καλό θα ήταν να ρίξουν μια ματιά στο προηγούμενο μέρος του άρθρου έτσι ώστε να ξεκινήσουν σωστά και να θέσουν “γερές” βάσεις στο θέμα CSS selectors. Στην συνέχεια μπορούν να συνεχίσουν την ανάγνωση του συγκεκριμένου άρθρου, στο οποίο θα βρουν συγκεντρωμένους όλους τους CSS 2 selectors.

Σε αυτό το σημείο θα ήθελα να αναφέρω πως οι CSS 1 και 2 selectors αποτελούν τον πυρήνα των CSS selectors, μιας και οι περισσότεροι σύγχρονοι browsers (Firefox, Opera, Chrome, Safari και Internet Explorer 8) τους υποστηρίζουν πλήρως! Τώρα υπάρχουν κάποια μικρά προβληματάκια με τον Internet Explorer 7 (και ακόμα πιο μεγάλα με τον 6) ωστόσο το γεγονός πως ο Internet Explorer 8 κατάφερε επιτέλους να υποστηρίξει όλους τους CSS 1 και 2 selectors, θεωρήθηκε μεγάλη επιτυχία. Τέλος, θα ήθελα να υπενθυμίσω πως στο πρώτο μέρος του άρθρου εξηγώ πολύ αναλυτικά τους διάφορους χαρακτήρες και σύμβολα που χρησιμοποιώ για τα pattern του κάθε selector. Εάν λοιπόν δεν τα θυμάστε ή δυσκολεύεστε να καταλάβετε κάτι, ρίξτε τους μια γρήγορη ματιά. Ας ξεκινήσουμε λοιπόν…

CSS2 selectors

Για να είμαστε και ακριβείς οι παρακάτω selectors είναι οι selectors που εμφανίστηκαν στην έκδοση 2.1 των προδιαγραφών (specifications) CSS, όμως γενικότερα στο web design όταν λέμε CSS έκδοση (version) 2 συνήθως εννοούμε την έκδοση 2.1. Η συγκεκριμένη έκδοση ήταν η πιο σημαντική αναβάθμιση των προδιαγραφών, όχι μόνο επειδή πρόσφερε απλόχερα νέους selectors, κανόνες και γενικότερα πολλές νέες δυνατότητες, αλλά επειδή κατάφερε να πείσει την web κοινότητα πως με την εν λόγω τεχνολογία μπορούμε επιτέλους να διαχωρίσουμε το περιεχόμενο (content) από την εμφάνιση (style). Και επειδή όπως καταλαβαίνετε έχουμε πολλά να πούμε, περνάω αμέσως στο κυρίως θέμα.

Universal selector

Ο γνωστός, σε όλους μας θέλω να πιστεύω, universal selector, αντιπροσωπεύει όλα τα elements που έχει το document. Γράφοντας δηλαδή τον αστερίσκο (*) επιλέγουμε όλα τα elements που υπάρχουν στην σελίδα μας, και από εκεί και πέρα δηλώνουμε τους κανόνες μας.

Pattern

* {}

Παράδειγμα


* { margin: 0; padding: 0; }

Child combinator

Άλλος ένας πολύ χρήσιμος selector που δυστυχώς δεν χρησιμοποιείται όσο θα έπρεπε, κυρίως λόγω της ελλιπής υποστήριξης του στον Internet Explorer 6 (o 7 τον υποστηρίζει επιτέλους). Με το σύμβολο “μεγαλύτερο από” (>) επιλέγουμε το δεύτερο element (το element που εμφανίζεται δεξιά από το σύμβολο >) το οποίο έχει “γονιό” (parent) το πρώτο element (αυτό που βρίσκεται αριστερά από το σύμβολο >).

Η διαφορά με τον descendant selector που περιέγραψα στο πρώτο μέρος του άρθρου, είναι πως ο συγκεκριμένος selector θα λειτουργήσει μόνο εάν το δεύτερο element είναι child, και όχι απλός απόγονος (descendant) του πρώτου element.

Pattern

E > E {}

Παράδειγμα


body > p { color: red; }
ol > li { color: red; }

Adjacent sibling combinator

Ακόμα ένας χρήσιμος selector που δυστυχώς δεν χρησιμοποιείται σχεδόν καθόλου λόγω ελλιπής υποστήριξης στον Internet Explorer. Με το σύμβολο συν (+) επιλέγουμε το δεύτερο element (το element που εμφανίζεται δεξιά από το σύμβολο +) και έχει κοινό γονιό (parent) με το το πρώτο element (αυτό που βρίσκεται αριστερά από το σύμβολο +) και εμφανίζεται στο DOM ακριβώς μετά από αυτό.

Επειδή ίσως σας μπέρδεψα λίγο, ας δούμε μαζί το παρακάτω παράδειγμα. Στο παρακάτω παράδειγμα λοιπόν, το δεύτερο heading (h2) θα έχει κόκκινο χρώμα, μόνο εάν έχει κοινό γονιό με το h1 (με class opener) και εμφανίζεται στο DOM ακριβώς μετά από αυτό. Όλα τα άλλα h2 δεν θα έχουν κόκκινο χρώμα.

Pattern

E + E {}

Παράδειγμα


h1.opener + h2 { color: red; }

Attribute selectors

Με το CSS 2.1 κάνουν επιτέλους την εμφάνιση τους οι πρώτοι τρεις attribute selectors, οι οποίοι πραγματικά έχουν να προσφέρουν πολλά πράγματα στο θέμα των selectors. Όπως ήταν λογικό λίγοι browsers τους υποστήριξαν αμέσως, ωστόσο πλέον μπορούμε να τους χρησιμοποιήσουμε χωρίς ιδιαίτερα προβλήματα (με εξαίρεση και πάλι τον IE6). Παρακάτω παρουσιάζω όλους τους CSS 2.1 attribute selectors, μιας και στο CSS3 προστέθηκαν και άλλοι.

Μην ξεχνάτε (όπως είχα γράψει και στο πρώτο μέρος), πως για λόγους ευκολίας, το κάθε pattern θα στηρίζεται στην εξής σύνταξη : Το γράμμα E αντιπροσωπεύει οποιοδήποτε valid (X)HTML element, το string att αντιπροσωπεύει οποιοδήποτε valid (X)HTML attribute ενώ το string val αντιπροσωπεύει την τιμή (value) που μπορεί να πάρει το κάθε attribute.

  1. Στον πρώτο selector λοιπόν, επιλέγουμε το element (E) με attribute “att”. Έτσι στο παράδειγμα μας οποιοδήποτε h1 element έχει κάποιο “title” attribute, οποιαδήποτε τιμή και αν περιέχει, θα έχει κόκκινο χρώμα.
  2. Στον δεύτερο selector, επιλέγουμε το element (E) με attribute “att” και τιμή (value) “val”. Στο παράδειγμα μας λοιπόν, όποιο h1 element έχει “title” attribute με τιμή “main”, θα έχει κόκκινο χρώμα.
  3. Τέλος στον τελευταίο selector, επιλέγουμε το element (E) με attribute “att” και τιμή (value) “val” κάποια από τις πολλές τιμές (οι οποίες χωρίζονται με κενό/whitespace) που μπορεί να έχει το συγκεκριμένο attribute. Έτσι στο τελευταίο παράδειγμα, οι τίτλοι (h1) με “title” attribute “main” και “header” θα έχουν κόκκινο χρώμα.

Patterns

  1. E[att] {}
  2. E[att="val"] {}
  3. E[att~="val"] {}

Παραδείγματα


h1[title] { color:red; }
h1[title="main"] { color:red; }
h1[title~="main header"] { color:red; }

Pseudo-classes

Οι ψευδοκλάσεις (pseudo-classes) ήταν μια πολύ έξυπνη ιδέα που έκανε την εμφάνιση της στις πρώτες CSS οδηγίες, ωστόσο όπως σωστά μαντέψατε λίγοι browsers τις υποστήριξαν τότε. Οι περισσότερες ψευδοκλάσεις υποστηρίχθηκαν πλήρως από τους browsers όταν εμφανίστηκε το CSS 2.1 στο οποίο και παρουσιάστηκαν πιο αναλυτικά και σωστά. Σήμερα όλοι οι μοντέρνοι browsers υποστηρίζουν τις παρακάτω ψευδοκλάσεις (o IE6 ποτέ δεν υποστήριξε την first-child ψευδοκλάση, αλλά μικρό το κακό) και είναι από τους selectors που πρέπει οπωσδήποτε να γνωρίζετε, γιατί με αυτούς μπορείτε να δώσετε ζωή στα links και στα μενού επιλογών σας.

Για να καταλάβετε ακόμα καλύτερα τόσο τον τρόπο λειτουργίας τους, όσο και τον λόγο για τον οποίο έχουν ονομαστεί έτσι (ψευδοκλάσεις/pseudo-classes), σκεφτείτε το παρακάτω παράδειγμα. Έστω ότι έχουμε ένα anchor element (κοινώς link), στο οποίο θέλουμε να δώσουμε διάφορους styling κανόνες ανάλογα με την κατάσταση (status) που έχει στο DOM την δεδομένη στιγμή (δηλαδή εάν ο κέρσορας είναι πάνω του, εάν ο χρήστης έχει ήδη επισκεφθεί το link, κτλ.). Εάν δεν είχαμε τις ψευδοκλάσεις θα έπρεπε όλα τα links του site μας να είχαν τις ανάλογες κλάσεις (classes) έτσι ώστε να καταφέρουμε να πετύχουμε το παραπάνω αποτέλεσμα. Όπως καταλαβαίνετε κάτι τέτοιο όχι μόνο θα χάλαγε αρκετά τον όρο semantic στο markup μας, αλλά θα ήταν και πολύ δύσκολο να συντηρήσουμε το εν λόγω markup, μιας και θα αναγκαζόμασταν να χρησιμοποιούμε πάρα πολλές κλάσεις για κάτι που θα έπρεπε να είναι απλό. Με αυτήν την λογική λοιπόν, οι ψευδοκλάσεις λύνουν το συγκεκριμένο πρόβλημα. Παρακάτω εξηγώ αναλυτικά τις 6 ψευδοκλάσεις (pseudo-classes) που εμφανίζονται στις CSS 2.1 οδηγίες.

  1. Στον πρώτο selector, επιλέγουμε το element E που είναι ο πρώτος απόγονος (child) του “γονιού” element. Έτσι στο παράδειγμα μας το πρώτο list item (li) κάθε λίστας θα έχει κόκκινο χρώμα.
  2. Ο δεύτερος selector ισχύει μόνο για τα anchor element (a ή απλά links), και ακόμα πιο συγκεκριμένα τα anchor elements τα οποία δεν έχει επισκεφθεί μέχρι εκείνη την στιγμή ο browser του χρήστη. Στο παράδειγμα μας δηλαδή, το link (a) εάν δεν το έχει επισκεφθεί ο χρήστης, θα έχει πράσινο χρώμα.
  3. Και ο τρίτος selector ισχύει μόνο για τα anchor elements, αλλά αυτή την φορά γι’ αυτά που έχει επισκεφθεί ο browser του χρήστη. Έτσι στο παράδειγμα μας, το link (a) εάν το έχει επισκεφθεί ο χρήστης, θα έχει κόκκινο χρώμα.
  4. Ο τέταρτος selector είναι ίσως ο πιο γνωστός, μιας και επιλέγει το εκάστοτε element όταν ο κέρσορας του mouse βρίσκεται από πάνω του. Έτσι στο παράδειγμα μας το link (a) θα έχει μπλε χρώμα όταν το mouse βρίσκεται πάνω του.
  5. Ο πέμπτος selector επιλέγει το εκάστοτε element όταν είναι active, όπως για παράδειγμα όταν ο χρήστης έχει πατήσει (και αφήσει) κάποιο κουμπί (button). Δεν από τις δημοφιλείς ψευδοκλάσεις, μιας και χρησιμοποιείτε κυρίως σε φόρμες και links, ωστόσο για λόγους συμβατότητας, όταν γράφουμε κανόνες styling για μενού, καλό θα είναι να τον χρησιμοποιούμε (μιας και οι παλιότερες εκδόσεις του Internet Explorer θέλουν και τις τέσσερις ψευδοκλάσεις σε συγκεκριμένη σειρά!). Στο παράδειγμα μας δηλαδή, το link (a) ενώ έχουμε πατημένο το ποντίκι, θα έχει γκρι χρώμα.
  6. Τέλος στον τελευταίο selector, επιλέγουμε το element που έχει την εστίαση (focus) την εκάστοτε στιγμή. Έτσι στο παράδειγμα μας το input element που έχουμε εστιάσει, θα έχει μπλε border γύρω του.

Σε αυτό το σημείο θα ήθελα να σημειώσω πως οι 3 τελευταίες ψευδοκλάσεις (hover, active, και focus) μπορούν να χρησιμοποιηθούν σε οποιοδήποτε element (και όχι μόνο σε anchor elements – links), ωστόσο δεν θα δουλεύουν σε Internet Explorer 6 και γενικότερα σε παλιότερους browsers.

Patterns

  1. E:first-child
  2. E:link
  3. E:visited
  4. E:hover
  5. E:active
  6. E:focus

Παραδείγματα


li:first-child { color: red; }
a:link { color: green; }
a:visited { color: red; }
a:hover { color: blue; }
a:active { color: grey; }
input:focus { border: 2px solid blue; }

Pseudo-elements

Τα pseudo-elements είναι και αυτά με την σειρά τους κάποιοι έξυπνοι selectors, οι οποίοι εμφανίστηκαν και αυτοί στις πρώτες CSS οδηγίες, ωστόσο οι περισσότεροι browsers τους υποστήριξαν πάλι καθυστερημένα. Όπως και οι ψευδοκλάσεις, έτσι και τα pseudo-elements κρύβουν και αυτά κάποιον λόγο που έχουν ονομαστεί έτσι.

Θα εξηγήσω και πάλι με ένα παράδειγμα που χρησιμεύουν και τον λόγο που έχουν ονομαστεί έτσι. Έστω λοιπόν πως θέλετε να επιλέξετε το πρώτο γράμμα μιας παραγράφου (p) έτσι ώστε να το τροποποιήσετε και να δημιουργήσετε κάποιο από τα εφέ που βλέπετε πολύ συχνά σε βιβλία και εκτυπώσεις. Εάν δεν υπήρχαν τα pseudo-elements, θα έπρεπε να προσθέσουμε το πρώτο γράμμα της παραγράφου μέσα σε κάποιο άλλο element (tag), μέσα σε ένα span ας πούμε, το οποίο θα έκανε πιο πολύπλοκη την markup μας αλλά και την συντήρηση της (έστω και με την βοήθεια κάποιας server-side γλώσσας).

Τα pseudo-elements δημιουργήθηκαν για να αποφευχθούν ακριβώς τέτοια προβλήματα. Αντί να δημιουργούμε καινούργια elements, να χαλάμε την markup μας και να κάνουμε πιο περίπλοκα τα πράγματα, με τους συγκεκριμένους selectors κάνουμε την δουλειά μας εύκολα και “καθαρά”… Παρακάτω εξηγώ και τους 4 pseudo-elements selectors (οι 2 πρώτοι είναι από τις CSS 1 οδηγίες, ενώ οι υπόλοιποι είναι από τις CSS 2.1 οδηγίες), οι οποίοι υποστηρίζονται επιτέλους από τους περισσότερους browsers.

  1. Στον πρώτο selector, επιλέγουμε το πρώτο γράμμα (letter) του element E. Έτσι στο παράδειγμα μας το πρώτο γράμμα της παραγράφου (p) θα έχει font-size 3em.
  2. Στον δεύτερο selector, επιλέγουμε την πρώτη σειρά (line) του element E. Έτσι στο παράδειγμα μας η πρώτη σειρά της παραγράφου (p) θα έχει όλα τα γράμματα κεφαλαία (text-transform: uppercase).
  3. Στον τρίτο selector, επιλέγουμε το element E και προσθέτουμε δυναμικά πριν από αυτό το περιεχόμενο (content) που βρίσκεται μέσα στα εισαγωγικά (“). Έτσι στο παράδειγμα μας το quote (q) element θα έχει διπλά εισαγωγικά («) πριν από αυτό.
  4. Τέλος στο τελευταίο παράδειγμα, επιλέγουμε το element E και προσθέτουμε δυναμικά μετά από αυτό το περιεχόμενο (content) που βρίσκεται μέσα στα εισαγωγικά (“). Έτσι στο παράδειγμα μας το quote (q) element θα έχει διπλά εισαγωγικά (») μετά από αυτό.

Patterns

  1. E::first-letter
  2. E::first-line
  3. E::before
  4. E::after

Παραδείγματα


p::first-letter { font-size: 3em; }  
p::first-line { text-transform: uppercase; }  
q::before { content: "«"; }  
q::after { content: "»"; }  

Επίλογος

Με την ολοκλήρωση και του δεύτερου μέρους του άρθρου έχετε καλύψει όλους τους βασικούς selectors που μπορείτε να χρησιμοποιήσετε στο CSS (και όχι μόνο)… Οι CSS 2.1 οδηγίες ήταν αυτές που στην ουσία έπεισαν τους περισσότερους web designers πως μπορούν να αλλάξουν το web και να διαχωρίσουν επιτέλους το περιεχόμενο από την εμφάνιση. Οι παραπάνω κανόνες, μαζί με αυτούς που αναφέρθηκαν στο πρώτο μέρος του άρθρου, αποτελούν την βάση των CSS selectors. Οι συγκεκριμένοι selectors βοήθησαν πολύ στην ανάπτυξη του web και επιτέλους έχουμε φτάσει σε ένα πολύ ικανοποιητικό επίπεδο υποστήριξης και από τους περισσότερους browsers.

Ελπίζω να μην σας κούρασα πολύ, μιας και παρουσιάστηκαν πολλά πράγματα σε αυτό το μέρος, ωστόσο νομίζω πως σίγουρα άξιζε τον κόπο. Τέλος θα ήθελα να αναφέρω πως στο τρίτο και τελευταίο μέρος του άρθρου θα παρουσιαστούν οι ολοκαίνουριοι CSS 3 selectors, οπότε μείνετε συντονισμένοι!

CSS selectors : Ότι πρέπει να ξέρετε! (μέρος 1ο – CSS 1)

Σημείωση : Το παρακάτω άρθρο γράφτηκε τον Νοέμβρη του 2008 (πριν 6 χρόνια!) για το CSS3.gr.

Ένα από τα πράγματα που λατρεύω στο CSS είναι η απλότητα του. Απλά επιλέγεις το element στο οποίο θέλεις να δουλέψεις και του προσθέτεις τους styling κανόνες που θα ακολουθεί. Τόσο απλά! Το παρακάτω άρθρο λοιπόν, θα παρουσιάσει όλους τους CSS selectors ξεκινώντας από την πρώτη έκδοση του CSS φτάνοντας μέχρι και το τελευταίο standard, το CSS3.

Σας υπόσχομαι, πως μετά την ολοκλήρωση του άρθρου η επιλογή των element θα σας φαίνεται παιχνιδάκι, ενώ ταυτόχρονα θα βελτιώσετε και την συγγραφή XHTML, μιας και δεν θα υπάρχει λόγος να χρησιμοποιείτε περιττές κλάσεις (classes) και ids, πέρα από τα απολύτως απαραίτητα.

Πολλοί από τους παρακάτω selectors δεν υποστηρίζονται από όλους του browsers ακόμα, ωστόσο καλό είναι να γνωρίζουμε όσους περισσότερους γίνεται, έτσι ώστε να κάνουμε την ζωή μας ευκολότερη! Αφήστε που πλέον μπορούμε να τους χρησιμοποιήσουμε και για άλλες εργασίες, όπως για παράδειγμα, για την επιλογή κάποιου element σε κάποια Javascript library όπως το jQuery.

Για λόγους ευκολίας, το άρθρο έχει χωριστεί σε τρία κομμάτια, παρουσιάζοντας τους selectors του CSS1, CSS2 και CSS3 αντίστοιχα.

Σε αυτό το πρώτο κομμάτι θα παρουσιαστούν οι selectors του CSS1, οι οποίοι αποτελούν την βάση, έτσι ώστε να περάσετε και στους πιο περίπλοκους selectors του CSS2 καθώς και στους ολοκαίνουριους selectors του CSS3. Πέρα από την αναλυτική παρουσίαση του κάθε selector, καθώς και του pattern που ακολουθεί, θα υπάρχει και κάποιο χρήσιμο παράδειγμα, έτσι ώστε τα πάντα να είναι ξεκάθαρα και κατανοητά.

Τέλος, για λόγους ευκολίας, το κάθε pattern θα στηρίζεται στην παρακάτω σύνταξη : Το γράμμα E θα αντιπροσωπεύει οποιοδήποτε valid (X)HTML element, το string att αντιπροσωπεύει οποιοδήποτε valid (X)HTML attribute ενώ το string val αντιπροσωπεύει την τιμή (value) που μπορεί να πάρει το κάθε attribute.

Μετά από αυτές τις επεξηγήσεις μπορούμε να ξεκινήσουμε λοιπόν!

Μια μικρή εισαγωγή σε CSS1

Η πρώτη εμφάνιση του CSS δεν έχει να παρουσιάσει και πολύ σπουδαία πράγματα, ωστόσο έθεσε τις βάσεις (και πολύ γερές μάλιστα) για την επερχόμενη επανάσταση στο web! Ο χωρισμός του markup από το style ήταν η μεγαλύτερη επανάσταση στο web, τουλάχιστον από τεχνική άποψη. Παρακάτω μπορείτε να διαβάσετε τους πρώτους CSS selectors που έθεσε το W3C

Type selector

Ο πιο εύκολος και βασικός selector. Απλά επιλέγει κάποιο element που υπάρχει στο DOM (Document Object Model) (Document Object Model).

Pattern

E {}

Παράδειγμα


h1 {color: red;}

ID selector

O selector που ίσως χρησιμοποιείται συχνότερα απ’ όλους (μαζί με τον class selector)! Κάθε σελίδα (document) μπορεί να έχει μόνο μία και μοναδική τιμή για κάθε id attribute. Έτσι κανένα element δεν μπορεί να έχει την ίδια id τιμή με κάποιο άλλο element, κάνοντας το με αυτόν τον τρόπο μοναδικό. Μπορούμε λοιπόν να το επιλέξουμε γράφοντας απλά την τιμή που έχει στο id του με μία δίεση (#) μπροστά, προσθέτοντας εάν θέλουμε, και τον τύπο του element πριν από την δίεση.

Pattern

#id {}
E#id {}

Παράδειγμα


#maintitle {color: red;}
h1#maintitle {color: red;}

Class selector

O δεύτερος must selector που πρέπει οπωσδήποτε να γνωρίζουμε! Και πάλι οποιοδήποτε element μπορεί να δεχθεί μία κλάση (ή αλλιώς class attribute). Σε αντίθεση με το id attribute, μέσα σε μία σελίδα (document), μπορούν να υπάρχουν πολλές κλάσεις (classes) με την ίδια τιμή. Η επιλογή γίνεται όπως ακριβώς παραπάνω με την διαφορά πως αντί για δίεση, χρησιμοποιούμε τελεία (.).

Pattern

.class {}
E.class {}

Παράδειγμα


.warning {color: red;}
span.warning {color: red;}

Descendant selector

Ακόμα ένας σημαντικότατος selector. Εάν θέλουμε να επιλέξουμε τον απόγονο (descendant) κάποιου element, απλά επιλέγουμε το element “πρόγονο” (ancestor), αφήνουμε ένα κενό (whitespace) και στην συνέχεια επιλέγουμε τον απόγονο που θέλουμε.

Η διαδικασία αυτή μπορεί να γίνει αλλεπάλληλες φορές στον ίδιο selector, αρκεί ο απόγονος που επιλέγουμε να υπάρχει φυσικά στο DOM (Document Object Model). Όπως καταλαβαίνετε ο συγκεκριμένος selector μπορεί να γίνει πολύ πολύπλοκος, μιας και συνήθως ανακατεύει πολλούς απλούστερους selectors (συνήθως id, class και element selectors) και δημιουργεί μεγάλες αλυσίδες από elements της σελίδας μας (ρίξτε μια ματιά στα παρακάτω παραδείγματα).

Pattern

E E {}
#id E {}
.class E {}
#id .class Ε {}
*οποιαδήποτε σωστή (valid) αλληλουχία από selectors που υπάρχουν στο DOM.

Παράδειγμα


p strong { color:red; }
#testid span { color:red; }
.warningclass strong { color:red; }
#feature .article p strong { color:red; }

First-line και First-letter pseudo-elements selectors

Τέλος οι παρακάτω selectors δημιουργήθηκαν έτσι ώστε να επιλέγουμε συγκεκριμένα κομμάτια markup χωρίς ταυτόχρονα να γεμίζουμε τον κώδικα μας με άσκοπες κλάσεις (classes). Πολλοί browsers, ιδιαίτερα οι παλιότεροι, δεν αναγνωρίζουν τους παρακάτω selectors, ωστόσο καλό είναι να τους γνωρίζουμε, μιας και μπορούμε πολύ εύκολα να δημιουργήσουμε έξυπνα εφέ στα site μας. Οι χρήστες παλιότερων browsers, απλά δεν θα απολαμβάνουν τα εν λόγω εφέ, χωρίς ωστόσο να χαλάει τίποτα άλλο στο browser τους!

Το μόνο που έχετε να κάνετε για να διαλέξετε το πρώτο γράμμα ή την πρώτη γραμμή ενός κειμένου, είναι να επιλέξετε το element που θέλετε με οποιονδήποτε selector, και στην συνέχεια να προσθέσετε 2 φορές άνω-κάτω τελεία (:) και την λέξη (keyword) first-letter ή first-line αντίστοιχα.

Pattern – first-line pseudo-element

E::first-line {}

Παράδειγμα first-line pseudo-element


p::first-line { background-color:red; }

Pattern – first-letter pseudo-element

E::first-letter {}

Παράδειγμα first-letter pseudo-element


p::first-letter { font-size:200%; text-transform:uppercase; }

Επίλογος

Κάπως έτσι ξεκίνησε το CSS και σιγά-σιγά προστέθηκαν από το World Wide Web Consortium ακόμα πιο έξυπνοι selectors έτσι ώστε να επιλέγουμε ακόμα πιο γρήγορα και με περισσότερη ακρίβεια τα διάφορα elements ενός document.

Οι σελίδες (documents) έχουν γίνει πλέον πολύ πολύπλοκες και απαιτητικές, και όσους περισσότερους τρόπους επιλογής ξέρουμε, τόσα λιγότερα προβλήματα θα αντιμετωπίζουμε κατά την κατασκευή των σελίδων μας… Μείνετε συντονισμένοι στο CSS3.gr για το δεύτερο και τρίτο μέρος του άρθρου όπου παρουσιάζονται οι CSS2 και CSS3 selectors αντίστοιχα.

Οι CSS3 κανόνες του αύριο, σήμερα (μέρος 2ο)

Σημείωση : Το παρακάτω άρθρο γράφτηκε τον Οκτώβρη του 2008 (πριν 6 χρόνια!) για το CSS3.gr.

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

Σε αυτό το δεύτερο μέρος μέρος λοιπόν, θα ασχοληθούμε με τους νέους κανόνες που μας προσφέρει το CSS σε θέματα background, fonts και columns (o Αλέξανδρος έχει ήδη γράψει και την δική του άποψη πάνω σε αυτό το θέμα). Ας συνεχίσουμε λοιπόν!

Multiple background-images, background-origin και background-size

Ας ξεκινήσουμε από τον πρώτο κανόνα, ο οποίος θα σώσει στην κυριολεξία πολλά sites από extra και non-semantic markup η οποία χρησιμοποιείται απλά και μόνο για presentational σκοπούς, κάτι που φυσικά είναι λάθος. Τα καινούργια specifications λοιπόν, δίνουν επιτέλους την δυνατότητα να έχουμε πολλαπλά background γραφικά σε ένα element, και όχι μόνο ένα όπως ισχύει μέχρι τώρα! Φανταστείτε τι ελευθερία κινήσεων δίνεται πλέον τόσο στους styling κανόνες όσο και στην ίδια την markup μας, η οποία θα είναι πολύ πιο καθαρή, χρησιμοποιώντας απλά και μόνο τις νέες δυνατότητες του background-image κανόνα, με τις αντίστοιχες ρυθμίσεις του!

Στο παρακάτω παράδειγμα λοιπόν, το element με το id “multiple_backgrounds” θα έχει τέσσερα (ναι σωστά διαβάσατε) background images :

See the Pen Multiple background-images by John Tsevdos (@tsevdos) on CodePen.

Προς το παρόν οι μόνοι browsers που καταλαβαίνουν τον παραπάνω κανόνα είναι αυτοί που στηρίζονται στον Webkit (δηλαδή ο Safari, Konqueror και Chrome), ωστόσο λόγο της μεγάλης σημασίας του συγκεκριμένου κανόνα, πιστεύω πως θα προσπαθήσουν να υποστηρίξουν τον συγκεκριμένο κανόνα και οι υπόλοιποι browsers (Firefox 3 και Internet Explorer 8) όσο πιο γρήγορα γίνεται. Καλό θα ήταν λοιπόν είναι να τον ξέρετε, έτσι ώστε να έχετε κρυμμένο έναν άσσο στο μανίκι σας πριν απ’ όλους τους άλλους!

Οι βελτιώσεις στο θέμα background δεν τελειώνουν εδώ όμως. Το W3C έχει βάλει σαν στόχο να προσφέρει πολλές δυνατότητες και ευκολίες στον συγκεκριμένο τομέα, και πολύ καλά κάνει, μιας και τέτοιοι περιορισμοί ανάγκαζαν επί χρόνια τους designers να καταφεύγουν σε άλλες λύσεις. Ο δεύτερος λοιπόν κανόνας με αρκετό ενδιαφέρον, είναι το background-origin, το οποίο μπορεί να πάρει 3 τιμές, borderpadding ή content. Ο εν λόγω κανόνας μοιάζει πολύ με τον background-position κανόνα, με την διαφορά πως αντί να επιλέξουμε μια μονάδα μέτρησης έτσι ώστε να τοποθετήσουμε το background image στην θέση που θέλουμε, χρησιμοποιούμε τις ιδιότητες του ίδιου του element. Έτσι ανάλογα με την επιλογή μας, το background γραφικό μας θα ξεκινήσει να εμφανίζεται είτε από εκεί που ξεκινάει το περιεχόμενο μας (content), είτε από εκεί που ξεκινάει ο border μας ή είτε τέλος από εκεί που ξεκινάει το padding μας…

See the Pen awkHy by John Tsevdos (@tsevdos) on CodePen.

Όπως καταλαβαίνετε ο συγκεκριμένος κανόνας δεν υποστηρίζεται επίσημα από κανέναν browser αυτήν την στιγμή, ωστόσο υπάρχουν οι αντίστοιχοι κανόνες για τον Safari/Chrome και τον Firefox, πράγμα που σημαίνει πως σύντομα θα υποστηριχθεί κανονικά από τους συγκεκριμένους browsers.

Τέλος, το CSS3 μας δίνει την δυνατότητα να ελέγξουμε και το μέγεθος ενός background-image μέσα από την CSS, με τον background-size κανόνα! Απλά δώστε τις τιμές που θέλετε (σε pixels ή ποσοστά) και η CSS θα αναλάβει όλα τα υπόλοιπα!

See the Pen JoDAp by John Tsevdos (@tsevdos) on CodePen.

Και ο συγκεκριμένος κανόνας δεν υποστηρίζεται από κανέναν browser, τουλάχιστον στην επίσημη W3C μορφή του, ωστόσο όπως μπορείτε να δείτε πολλοί browsers όπως Safari, Konqueror, Opera και Chrome έχουν ήδη έτοιμες τις δικές τους υλοποιήσεις, οπότε και αυτός ο κανόνας βρίσκεται ψηλά στις προτεραιότητες των κατασκευαστών browser.

Γενικότερα οι κανόνες που έχουν να κάνουν με το background θεωρούνται οι πιο σημαντικοί κανόνες, μιας και στην ουσία θα αλλάξουν τον τρόπο με τον οποίο χτίζουμε τις σελίδες μας, τόσο σε CSS όσο και σε markup επίπεδο! Λογικό είναι λοιπόν οι κατασκευαστές να δείξουν πολύ μεγάλη προσοχή σε αυτούς τους κανόνες και να τους υποστηρίξουν όσο πιο γρήγορα γίνεται.

Custom Web Fonts

Ή αλλιώς η πλήρης απελευθέρωση από τα (βαρετά;) web-safe fonts! Με την CSS3 έχουμε επιτέλους την δυνατότητα να χρησιμοποιήσουμε fonts τα οποία δεν υπάρχουν εγκατεστημένα στον browser του χρήστη! Αυτό γίνεται με ένα απλό CSS include, το @font-face, με το οποίο δηλώνουμε στον browser την τοποθεσία και το font που πρέπει να κατεβάσει. Από εκεί και πέρα μπορούμε να χρησιμοποιήσουμε το font με το όνομα που του έχουμε ορίσει. Στο παρακάτω παράδειγμα, απλά δηλώνω το όνομα του font που γίνεται import και φυσικά την διεύθυνση που βρίσκεται το συγκεκριμένο font. Αφού λοιπόν έχει γίνει import το font στον CSS κώδικα μας, μετά μπορούμε απλούστατα να χρησιμοποιήσουμε την συγκεκριμένη γραμματοσειρά με το όνομα της, όπως κάναμε τόσο καιρό.

See the Pen Custom Web Fonts by John Tsevdos (@tsevdos) on CodePen.

Δυστυχώς η συγκεκριμένη δυνατότητα, αν και είναι μια από τις μεγαλύτερες αναβαθμίσεις στους νέους CSS κανόνες, υποστηρίζεται μόνο από τις τελευταία έκδοση του Safari, με τον Firefox και τον Opera να βρίσκονται και αυτοί αρκετά κοντά στην τελική υλοποίηση (νομίζω πως η καινούργια beta του Firefox 3 τον υποστηρίζει!). Το μόνο σίγουρο είναι πως και οι υπόλοιποι browser θα υποστηρίξουν την συγκεκριμένη δυνατότητα αργά ή γρήγορα, για τον απλούστατο λόγο πως η συγκεκριμένη δυνατότητα θα αλλάξει την τυπογραφία στο Web!

Multi-column layout

Το τελευταίο αλλά εξίσου σημαντικό χαρακτηριστικό της CSS3 που θα παρουσιαστεί σε αυτό το άρθρο έχει να κάνει με την διάταξη (layout) στο web design. Μέχρι και την CSS2, η μόνη επιλογή που είχαμε για να παρουσιάσουμε το περιεχόμενο μας, ήταν μέσα σε κουτιά (boxes), όπως div, p, κτλ., όπου το κείμενο έρεε από αριστερά προς τα δεξιά και από πάνω προς τα κάτω, προσπαθώντας να καλύψει τον χώρο του κουτιού που το φιλοξενούσε. Εάν θέλαμε μια πιο πολύπλοκη διάταξη πέρα από την κανονική, θα έπρεπε να χρησιμοποιήσουμε πολλούς διαφορετικούς CSS κανόνες, πάνω σε πολλά διαφορετικά elements της markup μας και τις περισσότερες φορές πολλά διαφορετικά hacks, έτσι ώστε να πετύχουμε κάτι πιο λειτουργικό και εντυπωσιακό.

Ευτυχώς με την έλευση της τρίτης version του CSS, τα πράγματα αλλάζουν, μιας και μας δίνει πολλές επιπλέον δυνατότητες στο συγκεκριμένο θέμα, με πολλούς καινούργιους κανόνες για multi-column layouts. Έτσι λοιπόν στο παρακάτω παράδειγμα το div που θα φιλοξενεί το κείμενο, θα είναι χωρισμένο σε 3 στήλες (column-count: 3;) με κενό 20px ανάμεσα στην κάθε στήλη (column-gap: 20px;) και μαύρο διαχωριστικό 1px (column-rule: 1px solid #000;).

See the Pen Multi-column by John Tsevdos (@tsevdos) on CodePen.

Για ακόμα μια φορά οι επίσημοι κανόνες (column-count, column-gap και column-rule) δεν αναγνωρίζονται από τους browsers, ωστόσο όπως μπορείτε να παρατηρήσετε υπάρχουν οι αντίστοιχοι για τις rendering μηχανές Gecko και Webkit. Το W3C δείχνει πως έχει πάρει πολύ σοβαρά το θέμα multi-column layouts, για το οποίο έχει δημιουργήσει και πολλούς κανόνες (οι πιο παρατηρητικοί από εσάς θα πρόσεξαν πως έχω και σε comments άλλον έναν κανόνα για το πλάτος της κάθε στήλης, ωστόσο στο παράδειγμα μας αποφάσισα να μην το χρησιμοποιήσω). Όλοι αυτοί οι νέοι κανόνες θα ανοίξουν νέους ορίζοντες στο θέμα διάταξης (layout) του περιεχομένου και πιστεύω πως σύντομα θα δούμε πολλά sites τα οποία θα αξιοποιούν τις νέες δυνατότητες που μας παρέχονται!

Επίλογος

Προσωπικά νιώθω ενθουσιασμένος με τις καινούργιες δυνατότητες που θα προσφέρει σε όλους εμάς το CSS3 και πραγματικά περιμένω πως και πως να υποστηρίξουν τους κανόνες της όσο πιο γρήγορα γίνεται όλοι οι κατασκευαστές browser! Οι περισσότεροι βρίσκονται ήδη σε πάρα πολύ καλό δρόμο υποστηρίζοντας ήδη είτε τους επίσημους κανόνες, είτε τους ανεπίσημους δικούς τους (κάτω από ένα δικό τους namespace) πράγμα που σημαίνει πως η περισσότερη δουλειά έχει γίνει και είναι θέμα χρόνου να υποστηρίξουν και τα επίσημα standards.

Οι νέες δυνατότητες που θα μπορούμε να χρησιμοποιούμε σύντομα, πραγματικά θα αλλάξουν τον τρόπο με τον οποίο κατασκευάζουμε ιστοσελίδες, τόσο σε styling επίπεδο, όσο και σε markup, μιας και θα βοηθήσει στον περιορισμό της χρήσης presentational και non-semantic markup. Προετοιμαστείτε κατάλληλα λοιπόν και χρησιμοποιείστε όπου νομίζετε κάποιους από τους παραπάνω κανόνες!

Οι CSS3 κανόνες του αύριο, σήμερα (μέρος 1ο)

Σημείωση : Το παρακάτω άρθρο γράφτηκε τον Σεπτέμβρη του 2008 (πριν 6 χρόνια!) για το CSS3.gr.

Από καιρό ήθελα να γράψω ένα άρθρο με θέμα τις νέες δυνατότητες του CSS και πραγματικά πιστεύω πως αυτή είναι η καλύτερη στιγμή για να το δημοσιεύσω! Δεν έχει να κάνει μόνο με το ολοκαίνουργιο project που ξεκινάμε όλοι εμείς, αλλά κυρίως με τους browsers, που σιγά-σιγά αρχίζουν επιτέλους να υποστηρίζουν κάποιους CSS3 κανόνες, είτε επίσημα είτε ανεπίσημα.

Στο παρακάτω πρώτο μέρος του άρθρου λοιπόν, δεν θα προσπαθήσω να εξηγήσω όλους τους καινούργιους κανόνες και δυνατότητες της CSS3, αλλά θα κάνω κάτι πολύ πιο πρακτικό. Θα παρουσιάσω κάποιους CSS3 κανόνες που μπορείτε να χρησιμοποιήσετε αυτήν την στιγμή στα site σας, έτσι ώστε και να τα κάνετε πιο όμορφα – στους browsers που μπορούν να καταλάβουν τους νέους κανόνες φυσικά – αλλά και για να τα προετοιμάσετε κατάλληλα για το μέλλον!

Μα καλά πως γίνεται αυτό;

Οι περισσότεροι browsers προετοιμάζονται εδώ και καιρό, όπως και τα επίσημα standards άλλωστε, για την έλευση των καινούργιων styling κανόνων. Πιο συγκεκριμένα οι rendering μηχανές WebkitGecko και Presto (η μηχανή rendering του Opera), έχουν κάνει αρκετά βήματα μπροστά, είτε ακολουθώντας τα επίσημα standards είτε δημιουργώντας δικούς κανόνες ανάλογων δυνατοτήτων έτσι ώστε η μετάβαση σε αυτά να γίνει ευκολότερη.

Γι’ αυτούς που θα βιαστούν να πουν πως δεν αξίζει ο κόπος να χρησιμοποιήσει κάποιος τις παρακάτω τεχνικές γιατί πολύ απλά οι συγκεκριμένες μηχανές rendering έχουν μικρό ποσοστό στην αγορά, να τους θυμίσω πως οι συγκεκριμένες μηχανές rendering βρίσκονται στην καρδιά των δημοφιλών browser, SafariChromeFirefox και Opera, ενώ παράλληλα πολλά κινητά έχουν browsers που στηρίζονται στις εν λόγω μηχανές, όπως ο Safari για το iPhone και o Nokia Mini Map για τα Nokia κινητά τηλέφωνα (και οι δύο στηρίζονται στο Webkit, o Opera Mobile ο οποίος βρίσκεται σε πολλά κινητά με Symbian OS και όχι μόνο, ενώ τέλος αξίζει να αναφέρω και τις Rich Internet Applications (RIA) πλατφόρμες Adobe AIR και Mozilla Prism οι οποίες στηρίζονται στο Webkit και την Gecko rendering engine αντίστοιχα.

Όπως πολύ εύκολα καταλαβαίνετε, ο χρόνος που θα αφιερώσετε εάν αποφασίσετε να εισάγεται κάποιους από τους παρακάτω CSS3 κανόνες στα styles σας, μόνο χαμένος δεν θα πάει! Έχουμε και λέμε λοιπόν…

Border-radius

Όσοι έχουν παράπονο πως το σημερινό web είναι κάπως “τετραγωνισμένο” ο συγκεκριμένος κανόνας είναι ότι χρειάζεστε, μιας και θα σας “στρογγυλέψει” λίγο το web… Με το border-radius λοιπόν μπορείτε να στρογγυλέψετε τον border οποιουδήποτε element! Αυτήν την στιγμή δυστυχώς, κανένας browser δεν υποστηρίζει τον επίσημο W3C κανόνα (!), ωστόσο ο Safari, ο Firefox και ο Chrome έχουν τους δικούς τους εναλλακτικούς κανόνες που δουλεύουν μια χαρά. Έτσι λοιπόν, με το παρακάτω παράδειγμα το element με id “border_radius” θα έχει έναν μαύρο border ο οποίος θα στρογγυλεύει κατά 10 pixels στις άκρες του!

See the Pen Border radius by John Tsevdos (@tsevdos) on CodePen.

O πρώτος W3C επίσημος κανόνας border-radius, αν και όπως ανάφερα δεν αναγνωρίζεται από κανέναν browser, καλό θα είναι να εφαρμόζεται έτσι ώστε το style μας να είναι έτοιμο και για τους μελλοντικούς browsers που θα τον υποστηρίξουν. Από εκεί και πέρα, ο δεύτερος (-moz-border-radius: 10px;) και τρίτος (-webkit-border-radius: 10px;) κανόνας, είναι για τις Gecko και Webkit rendering engines αντίστοιχα. O συγκεκριμένος κανόνας μπορεί να δημιουργήσει ενδιαφέροντα εφέ, ιδιαίτερα εάν χρησιμοποιούμε το radious σε συγκεκριμένες γωνίες, όπως για παράδειγμα :

See the Pen Custom Border radius by John Tsevdos (@tsevdos) on CodePen.

Όπως παρατηρείτε οι διαφορές από τον επίσημο κανόνα είναι μικρές και για τις 2 rendering engines, ενώ πολύ σύντομα πιστεύω πως και οι 2 θα αρχίσουν να αναγνωρίζουν και τον επίσημο κανόνα. Να δούμε πότε θα μπορέσουμε να χρησιμοποιήσουμε και το border-image, το οποίο πιστεύω πως θα είναι η άλλη μεγάλη προσθήκη στο θέμα CSS3 borders!

Opacity (ή απλά CSS transparency!)

Άλλος ένας κανόνας που θα αλλάξει τόσο τον τρόπο με τον οποίο σχεδιάζουμε sites όσο και τον τρόπο με τον οποίο θα αλληλεπιδρούν τα χρώματα μέσα σε αυτά. Με αυτόν τον απλό κανόνα λοιπόν, μπορούμε να δώσουμε διαφάνεια (transparency) σε οποιοδήποτε element! Όλο το element, συμπεριλαμβανομένου του κειμένου του, του background χρώματος αλλά και του border του, θα είναι όσο διάφανο του ορίσουμε, με την τιμή 0 να το κάνει τελείως διάφανο (αόρατο) και την τιμή 1 πλήρη ορατό. Έτσι λοιπόν με τον παρακάτω κανόνα, το div με id opacity, θα είναι 50% διάφανο!

See the Pen Opacity by John Tsevdos (@tsevdos) on CodePen.

Ήδη οι καινούργιες εκδόσεις των Firefox, Opera, Safari και Chrome μπορούν να καταλάβουν τον επίσημο W3C κανόνα (opacity), ενώ με μερικούς extra browser-specific κανόνες μπορούμε να έχουμε το ίδιο εφέ και στον Internet Explorer (6 και 7), σε παλιότερες εκδόσεις του Firefox, ενώ τέλος μπορεί να λειτουργήσει και στον Konqueror (για να μην παραπονιούντε και οι KDE χρήστες). Απλός και πολύ πρακτικός κανόνας που μπορεί να χρησιμοποιηθεί άμεσα και να δώσει υπέροχους συνδυασμούς χρωμάτων ανάλογα με την διαφάνεια (transparency) που έχει οριστεί στα διάφορα elements.

Box-shadow και Text-shadow

Θέλετε διάφορα elements της σελίδας σας να έχουν σκιές, αλλά ταυτόχρονα δεν θέλετε να παρά-φορτώσετε τα site σας με επιπλέον γραφικά, πολύπλοκη markup και περίπλοκους styling κανόνες; Με την έλευση του CSS3 η λύση είναι πολύ απλή και λειτουργική και ονομάζεται box-shadow. Απλά θα επιλέγεται το element που θέλετε να έχει σκιά και η rendering μηχανή του εκάστοτε browser αναλαμβάνει όλα τα υπόλοιπα! Δύσκολο να το πιστέψει κάποιος, έτσι; Ας δούμε ένα παράδειγμα καλύτερα :

See the Pen Box Shadow by John Tsevdos (@tsevdos) on CodePen.

Ο συγκεκριμένος κανόνας δέχεται τρεις τιμές και ένα χρώμα.  Η πρώτη τιμή καθορίζει την οριζόντια θέση της σκιάς. Μία αρνητική τιμή θα μετακινήσει την σκιά πιο αριστερά ενώ μία θετική πιο δεξιά από το element στο οποίο εφαρμόζουμε τον κανόνα. Η δεύτερη τιμή καθορίζει την κάθετη θέση της σκιάς. Μία αρνητική τιμή θα μετακινήσει την σκιά πιο πάνω ενώ μία θετική πιο κάτω από το element στο οποίο εφαρμόζουμε τον κανόνα. Η τρίτη τιμή έχει να κάνει με το πόσο “σκοτεινή” θα είναι η σκιά. Εάν επιλέξουμε 0 η σκιά θα είναι πάρα πολύ “σκοτεινή”, ενώ όσο η τιμή μεγαλώνει τόσο περισσότερο θα “θολώνει” και η σκιά μας. Ο ακριβής αλγόριθμος δεν έχει αποφασιστεί ακόμα ούτε από το W3C! Η τέταρτη τιμή είναι κάποια τιμή χρώματος, η οποία χρωματίζει ανάλογα την σκιά μας.

Και σε αυτό το παράδειγμα καμία μηχανή rendering δεν θα καταλάβει τον επίσημο κανόνα, ενώ δυστυχώς η μόνη rendering μηχανή που έχει κάνει κάποια δουλειά στον συγκεκριμένο κανόνα είναι το Webkit (όπως βλέπετε και στο παράδειγμα). Στην ίδια ακριβώς φιλοσοφία κινείται και ο αντίστοιχος κανόνας για σκιές στο κείμενο (text-shadow). Ο συγκεκριμένος κανόνας δεν είναι καν CSS3 κανόνας, αλλά “παλιός” και καλός CSS2 κανόνας, και μπορεί να εμφανιστεί σωστά τόσο στους browsers που χρησιμοποιούν το Webkit σαν rendering engine (όχι στον Chrome για κάποιον περίεργο λόγο) όσο και από τον Opera, και μάλιστα χρησιμοποιώντας κατευθείαν τον επίσημο W3C κανόνα (δείτε το παρακάτω παράδειγμα):

See the Pen Text Shadow by John Tsevdos (@tsevdos) on CodePen.

Απλές και εύκολες σκιές λοιπόν, τόσο για τα elements όσο και για το κείμενο μας, χωρίς extra markup και πολύπλοκους styling κανόνες! Γιατί να κουραζόμαστε άλλωστε…

Μείνετε συντονισμένοι

Το ξέρω πως σας άνοιξα την όρεξη και θέλετε να μάθετε και άλλους τέτοιους πρακτικούς CSS3 κανόνες, ωστόσο θα πρέπει να κάνετε λίγη υπομονή μέχρι να δημοσιευθεί το δεύτερο και τελευταίο μέρος του άρθρου. Για την ώρα, το μόνο που μπορώ να εγγυηθώ είναι πως και εκεί θα ανακαλύψετε πολλούς κανόνες που θα σας λύσουν τα χέρια! Μείνετε συντονισμένοι στο CSS3.gr και δεν θα χάσετε.

Linux summer switch

Τον τελευταίο καιρό έχω κάνει μια δυναμική επιστροφή στο open source και οφείλω να ομολογήσω πως δεν το έχω μετανοιώσει καθόλου. Για κάποιο λόγο έχω απογοητευτεί εντελώς από την Apple (fanboys/girls μην βαράτε) και λιγότερο από τα Windows (τα Windows 7 με υπηρέτησαν μια χαρά τα τελευταία χρόνια), ωστόσο αποφάσισα πως πρέπει επιτέλους να γίνω λίγο πιο expert σε linux-based συστήματα. Άλλωστε εκεί καταλήγει το 90% των πραγμάτων που φτιάχνω…

Εκτός λοιπόν από το switch μου σε Android, με το Nexus 4 (από iPhone 3GS) τον περασμένο Δεκέμβρη, φέτος το καλοκαίρι αποφάσισα να κάνω και switch και στο desktop μου. Η διανομή που με κέρδισε μετά από μερικά tests, ήταν το Linux Mint (με Xfce για default windows manager ωστόσο έχω και τα KDE/MATE για να ρίχνω μια ματιά και εκεί) το οποίο χρησιμοποιεί τα repositories του Ubuntu. Αυτό σημαίνει ευκολία και υποστήριξη Ubuntu χωρίς ωστόσο να έχεις Ubuntu (για κάποιο λόγο δεν με κέρδισε). Με άλλα λόγια το μόνο “κλειστό” προϊόν που μου έχει απομείνει πλέον είναι το iPad 2 (χωρίς retina-display), που κάποια στιγμή στο μέλλον μάλλον θα αντικατασταθεί από κάποιο nexus.

Από εφαρμογές δεν μου λείπει τίποτα, ίσα-ίσα στο linuxακι καταφέρνω να βρίσκω περισσότερες λύσεις οι οποίες είναι και δωρεάν! Πιο συγκεκριμένα και για web-development έχω τα εξής:

Για τα υπόλοιπα τώρα, το Linux έχει κάνει πολλά βήματα μπροστά και δεν θα έχετε πρόβλημα στο να δείτε video, να ακούσετε μουσική κτλ. Μέχρι και το Steam έχει κυκλοφορήσει για να παίζετε και κανένα παιχνίδι την προκοπής (αν και προτιμώ το PS3 μου). Αν το κόλλημα σας πάντως είναι το software (για κάποιο λόγο αυτό είναι το πρόβλημα των περισσότερων) στο Linux υπάρχουν άπειρες περισσότερες λύσεις και μάλιστα οι περισσότερες είναι και ποιητικές και free*. Ρίξτε μια ματιά πόσες επιλογές έχετε και θα με θυμηθείτε.

*Free as freedom ;-)

Στατιστικά και ματαιοδοξία…

… ή πολύ απλά vanity metrics που λένε και στο εξωτερικό. Αναρωτιούνται πολλοί, ακόμα και επαγγελματίες του χώρου, γιατί ενώ έχουν x unique επισκέπτες, οι πελάτες/συνδρομητές τους δεν αυξάνονται ή ενώ το site έχει y pageviews οι πωλήσεις είναι λίγες, το μαγαζί δεν βγαίνει κτλ. Τέτοια ερωτήματα κάνουν ακόμα πιο συχνά την εμφάνιση τους στα social media. – Μα πως γίνεται να έχω 5000 followers/10.000 likes και ενώ ανεβάζω μια πολύ καλή προσφορά να έχω ελάχιστη ανταπόκριση;

Αν έχετε βρεθεί σε αυτήν την θέση, πρέπει να καταλάβετε πως τα στατιστικά είναι απλά κάποια μετρήσιμα στοιχεία και τίποτα παραπάνω! Το ότι έχετε x uniques visitors την μέρα δεν σημαίνει πως αυτοί είναι πελάτες σας, συνδρομητές σας ή οτιδήποτε άλλο. Σημαίνει πολύ απλά πως αυτοί μπήκαν στο site σας (σίγουρα ένα πολύ καλό πρώτο βήμα). Από εκεί και πέρα θα πρέπει να τους αποδείξετε πως είστε οι καλύτεροι και πως πρέπει  να επιλέξουν εσάς και όχι τους υπόλοιπους, με την καλοστημένη υπηρεσία σας, τις καλές τιμές σας, την ευκολία χειρισμού και χιλιάδων άλλων παραμέτρων! Το ότι σας έχουν κάνει like 10.000 άτομα, είτε επειδή απλά κάνουν like τους πάντες, είτε επειδή τους αναγκάσατε κάποια στιγμή (πχ. για να μπουν σε κάποιον διαγωνισμό, να δουν κάποιο άρθρο σας, κτλ.), δεν σημαίνει πως την επόμενη φορά που θα ανακοινώσετε μια προσφορά ή θα προωθήσετε κάποιο προϊόν θα περιμένουν πως και πως να σας ακούσουν και να σας στηρίξουν (πόσο μάλλον να σας προμοτάρουν)!

Αυτό είναι κάτι που πρέπει να αρχίσουμε να καταλαβαίνουμε σιγά-σιγά και να μην “ψαρώνουμε” από αριθμούς που πολύ απλά μπορεί να μην σημαίνουν και τίποτα. Τι και αν έχω εκατομμύρια visitors και καθόλου convertion ή άπειρους “άσχετους” με το προϊόν/υπηρεσία μου followers. Καλύτερα να είχα πολύ λιγότερους και να ήταν όλοι τους πελάτες/χρήστες της υπηρεσίας/προϊόντος μου. Καλύτερα να έχω πραγματικό user engagement από 100 άτομα παρά “εικονικό” από 10000! Έξω ήδη μιλάνε για actionable-metrics, όπως active users, convertions, engagement, και πολλά άλλα, ενώ εμείς εξακολουθούμε να συζητάμε για στατιστικά ματαιοδοξίας.

Καλό είναι λοιπόν να ξέρουμε που βρισκόμαστε από pageviews και visitors, αλλά να έχουμε στο μυαλό μας και πιο ουσιαστικά στατιστικά (actionable-metrics).

Ενοχλητικά features σε site

Δεν ξέρω αν είμαι περίεργος (δεν νομίζω) ωστόσο τελευταία παρατηρώ όλο και πιο συχνά το εξής φαινόμενο. Ενώ βλέπω σημάδια φοβερής προόδου στο internet, στο ελληνικό domain φαίνεται να κάνουμε βήματα προς τα πίσω! Με άλλα λόγια, αντι-τεχνικές (marketing, κακού design, ανύπαρκτου UX, κακή/υπερβολική χρήση διαφημίσεων, κτλ.) που έχουν εξαφανιστεί από σοβαρά διεθνή sites, στην Ελλάδα για κάποιο περίεργο λόγο έχουν κάνει ένα δυναμικό comeback! Παρακαλώ αν κάνετε κάτι από τα παρακάτω, επανεξετάστε την στρατηγική σας, σεβαστείτε τον χρήστη σας και προσπαθείστε να μην ακολουθείτε τα λάθη που πιθανόν κάνει κάποιο άλλο ελληνικό site. Το ότι τα χρησιμοποιεί κάποιος άλλος – ακόμα και μεγάλος – ελληνικός “παίχτης” δεν σημαίνει απαραίτητα ούτε ότι είναι σωστό αλλά ούτε και ότι κερδίζει κάτι ουσιαστικό, οπότε καλό είναι να μην αντιγράφουμε το λάθος του…

Παρακάτω παρουσιάζω τα anti-patterns που έχω παρατηρήσει να συμβαίνουν πιο συχνά στα ελληνικά sites και αναλύω με πολύ απλά λόγια γιατί είναι λάθος! Έχουμε και λέμε:

1) Popup ads και modal ads
Δυστυχώς εν έτη 2013 πρέπει να εξηγούμε πως τα popups παράθυρα γεμάτα διαφημίσεις είναι anti-pattern! Κάποιοι έχουν κάνει λίγο πιο “μοντέρνα” αυτήν την “εμπειρία” και αντί για popups windows, “πετάνε” modals με διαφημίσεις, τα οποία πολλές φορές δεν μπορείς να κλείσεις μέχρι να δεις ολόκληρη την διαφήμιση (ή έστω μεγάλο μέρος της). Τι να γράψω πάνω σε αυτό; Τα έχουν πει/γράψει άπειρες φορές πολύ πιο έξυπνοι άνθρωποι από εμένα. Δεν λειτουργούν, ποτέ δεν λειτούργησαν και το μόνο που θα καταφέρεται είναι να χάσετε χρήστες, αφού πρώτα τους σπάσετε και τα νεύρα! Τώρα αν αξίζει να χάσετε χρήστες για να κερδίσετε κάποια προσωρινή διαφήμιση/σπόνσορα, αυτό είναι καθαρά δικό σας θέμα. Αυτό που θα σας ρωτήσω είναι σε ποιον θα πουλάτε διαφημίσεις όταν χάσετε τους χρήστες σας…

2) Θες να γίνουμε φίλοι; O social-άκιας
Πρόκειται για sites τα οποία για να δεις το περιεχόμενο τους πρέπει να γίνεται απαραιτήτως φίλοι ή να κάνετε like στο Facebook page τους κοκ. Απλά τραγικό και θα εξηγήσω πολύ απλά γιατί χάνετε έτσι κι αλλιώς. Ο χρήστης με το που βρεθεί αντιμέτωπος με ένα τέτοιο site έχει 2 επιλογές: Ή θα φύγει κατευθείαν – όπως κάνω συνέχεια – και δεν θα ξανα-επιστρέψει ποτέ, ή θα κάνει like για να δει αυτό που θέλει. Στην δεύτερη περίπτωση τώρα, έστω ότι σας έχουν κάνει like 10.000.000 χρήστες (όλη η Ελλάδα), τι νομίζεται πως έχετε πετύχει; Είναι όλοι αυτοί πελάτες σας; Θα αυξήσετε το convertion rate σας; Θα αρχίσουν ξαφνικά όλοι αυτοί να εξυμνούν το site/υπηρεσία/προϊόν σας; OXI! Το αντίθετο μπορεί να συμβεί! Απλά έχετε καταφέρει να έχετε πολλούς άσχετους φίλους/followers κτλ. Μπράβο σας…

4) Η 10MB page
Καταλαβαίνω πως έχουμε 2013 και πολύ περισσότερο bandwidth απ’ ότι 5 χρόνια πριν, ωστόσο αυτό δεν σημαίνει πως πρέπει να κατασκευάζουμε σελίδες των 10 MB! Η Google μιλάει και επίσημα πλέον πως όσο πιο optimized και γρήγορο είναι ένα site τόσο καλύτερο page rank θα έχει, ωστόσο στην Ελλάδα μου τυχαίνει όλο και συχνότερα να πέφτω πάνω σε sites δεινόσαυρους (μεγατόνων κι όλας). Τις περισσότερες φορές με ελάχιστο optimization (σε images, http requests, κτλ.) μπορούμε να ρίξουμε το file size στο μισό χωρίς να θυσιάσουμε τίποτα σε ποιότητα! Επίσης βγάζοντας κάποιες διαφημίσεις/Flash objects μπορούμε να κάνουμε το site να πετάει, ωστόσο για κάποιο λόγο θέλουμε να ανήκει στην “heavy weight” κατηγορία…

5) Διαφημίσεις μέσα στο περιεχόμενο
Παλιό, κλασικό κόλπο, που εγκαταλείπεται σιγά-σιγά παντού, εκτός από την Ελλάδα όπου ανθίζει! Μπορεί να λειτουργήσει τις πρώτες 4-5 φορές, ωστόσο ο χρήστης σύντομα θα μάθει να αγνοεί και αυτές τις διαφημίσεις (όπως και όλες τις υπόλοιπες), οπότε στο τέλος το μόνο που καταφέρνουμε είναι να τον εκνευρίσουμε και τίποτα παραπάνω.

6) Νewsletter που δεν σου προσφέρουν τίποτα!
Ακόμα μια ελληνική πατέντα. Πρόκειται συνήθως για newsletters τα οποία δεν έχουν να πουν κάτι ουσιαστικό και που στην καλύτερη των περιπτώσεων θα σε ενημερώνουν για κάποια “προσφορά”. Τα περισσότερα είναι κακο-σχεδιασμένα, μόνο με images – όπου αν δεν εμφανιστούν απλά δεν διαβάζεις τίποτα – και τα στέλνουμε με την καταπληκτική λογική πως όλοι στέλνουν newsletters (πχ. ανταγωνιστές, γνωστοί, συνάδελφοι, κτλ.). Αυτοί που στέλνουν τέτοιου είδους newsletters, συνήθως δεν αξιολογούν τίποτα, όπως πχ. για το ποιος και αν τα ανοίγει/διαβάζει, αν κερδίζουμε κάτι από αυτά ή απλά χάνουμε άδικα τον χρόνο μας. Η λογική είναι πως τα στέλνουμε επειδή μαζί με το site πρέπει να στέλνουμε και κανένα newsletter.

7) Flash!
Μπορεί όλη η γη να έχει υποδουλωθεί στις ανοιχτές τεχνολογίες για διαφημίσεις (και όχι μόνο), ωστόσο το μικρό ελληνικό χωριό συνεχίζει να προβάλει αντίσταση σε οτιδήποτε ανοιχτό και δωρεάν. Αναφέρομαι κατά κύριο λόγο στις Flash διαφημίσεις οι οποίες κρατάνε ακόμα την μερίδα του λέοντας στην χώρα μας, άσχετα αν δεν φαίνονται στα περισσότερα smartphones και tablets. Αυτό δεν μπορώ να το καταλάβω με τίποτα. Εδώ η ίδια η Adobe έχει καταλάβει πως το Flash είναι τελειωμένο και όμως στον ελληνικό κυβερνοχώρο η πλειοψηφία των διαφημίσεων είναι Flash (με μπόλικα MB κατά προτίμηση). Πρόσφατα έπεσα και σε μια περίπτωση πελάτη, ο οποίος ήθελε responsive web design, και όταν οι Flash διαφημίσεις του δεν έπαιζαν σε tablets/smartphones αναρωτιόταν γιατί. Απλά τραγικό.

8) Φόρμες που δεν λειτουργούν!
Εκτός από κακο-σχεδιασμένες πολλές φόρμες στο ελληνικό domain υπάρχουν απλά για διακοσμητικό ρόλο! Δεν εξηγείτε αλλιώς πως οι μισές από αυτές απλά δεν λειτουργούν/δεν καταλήγουν πουθενά.

9) Αudio/Video auto play!
Τι πιο σωστό από το να έχεις ενεργοποιημένο το auto play στο video/audio που έχεις στο site σου. Ακόμα πιο τραγικό είναι το autoplay ήχου σε διαφημίσεις (εκεί και αν χάνεις την μπάλα)! Παίζεις με το ζόρι αυτό που θες στον χρήστη, με το έτσι θέλω. Αλώστε το site σου είναι ότι θες κάνεις. Τι σημασία έχει που τον τρομάζεις, εκνευρίζεις κτλ. Σημασία έχει να παίξει το audio/video σου!

10) Έχουμε ένα πολύ καλό app για το smartphone/tablet σου!
Ένα trend που δυστυχώς υπάρχει και σε site του εξωτερικού (εξαφανίζεται σιγά-σιγά όμως), που βάζω στοίχημα πως θα ανθήσει full στην Ελλάδα. Πρόκειται για τα site που όταν τα επισκέπτεσαι από το smartphone/tablet σου, αντί να σου δείχνουν το περιεχόμενο που έχεις μπει να δεις, σε ζαλίζουν να κατεβάσεις την υπέρ-εφαρμογή τους! Η λογική είναι ανάλογη με αυτήν των follwers/like απλά σε app store επίπεδο : την εφαρμογή μας την έχουν κατεβάσει 100.000 άτομα, άρα είμαστε οι καλύτεροι! Γιατί μου κάνεις την ζωή μου πιο δύσκολη, εγώ να τσεκάρω κάτι γρήγορα στο site θέλω – από το κινητό/tablet μου – αν ήθελα και το app σου, ξέρω που θα το βρω!

Τα πα και ξαλάφρωσα…

JoomlaDay 2013 (και η παρουσίαση μου εκεί)

Το προηγούμενο Σάββατο (15 Ιουνίου) είχα την τιμή να βρίσκομαι στο JoomlaDay 2013 ως ομιλητής (και όχι μόνο). Το event ήταν πάρα πολύ καλά οργανωμένο και ανά πάσα στιγμή μπορούσες να βρεις την παρουσίαση που σου ταίριαζε στις 2 αίθουσες του κινηματογράφου Δαναού. Αξίζουν συγχαρητήρια στον Φώτη που κάθε χρόνο αναλαμβάνει και οργανώνει ένα μεγάλο event το οποίο μπορούν να παρακολουθήσει ο καθένας εντελώς δωρεάν! Αυτό που μου άρεσε – δεν ξέρω αν θα συμφωνήσουν όλοι με αυτήν την άποψη – είναι πως σχεδόν οι μισές παρουσιάσεις δεν είχαν να κάνουν με το Joomla αλλά γενικότερα με το web design, web developemt, με mobile developement (Firefox OS και Windows mobile) αλλά και με cloud services. Βρίσκω μόνο θετικά μια τέτοια αντιμετώπιση και ελπίζω να συνεχιστεί και σε άλλα event – μην κολλάμε με τεχνολογίες/CMS/frameworks… Παρακολούθησα όλες (εκτός από μία) τις παρουσιάσεις του Σαββάτου (αυτές που γινόντουσαν στην μεγάλη αίθουσα) και μου άρεσαν ιδιαίτερα οι παρουσιάσεις από τα παιδιά της Mozilla Greece για το Firefox OS, του Γεράσιμου για “Web Typography” αλλά και του Γιάννη τόσο για το “Responsive Web Design Workflow” όσο και για το “Fire the workaholics”! Δυστυχώς την Κυριακή την έχασα λόγο άλλων υποχρεώσεων, ωστόσο κατάφερα να ρίξω μια ματιά ματιά σε ελληνικές προσπάθειες που δεν γνώριζα όπως το Radiojar αλλά και σε άλλες που γνώριζα όπως το Akeeba backup και ελπίζω στο μέλλον να καταφέρω να δω κάποιες παρουσιάσεις τους. Τέλος για αυτούς που έχασαν την παρουσίαση μου, με θέμα “Responsive Web Design & Touch Devices” μπορούν να την δουν/κατεβάσουν από το Speakerdeck. Κάποια στιγμή θα έχουμε και το video της παρουσίασης ωστόσο μέχρι τότε μπορείτε να χαζέψετε τα slides. Άντε και του χρόνου.

Η παρουσίαση μου στο πρώτο JoomlaFrappe

Για όσους δεν κατάφεραν να έρθουν στο πρώτο Joomlafrappe μπορείτε να βρείτε παρακάτω τόσο το video της παρουσίασης μου, όσο και τα slides της. Δυστυχώς ο ήχος μας την έσκασε λίγο ωστόσο με λίγη υπομονή ίσως καταφέρεται να με αντέξετε μέχρι το τέλος.

Θα ήθελα να ευχαριστήσω τον Φώτη Ευαγγέλου για την εξαιρετική προσπάθεια που ξεκίνησε, την πολύ καλή οργάνωση και τον πολύ όμορφο χώρο. Το Joomlafrappe θα γίνεται κάθε μήνα και μπορείτε να δηλώσετε συμμετοχή ως ακροατής αλλά και ως ομιλητής (αρκεί να έχετε να πείτε κάτι καλό στην ελληνική web κοινότητα). Enjoy…