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

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

Καλώς ήρθατε στο τρίτο και τελευταίο μέρος του άρθρου “CSS selectors : Ότι πρέπει να ξέρετε”! Με αυτό το μέρος ολοκληρώνεται η σειρά των άρθρων που παρουσιάζουν όλους τους CSS selectors, μέχρι τουλάχιστον να εμφανιστεί το CSS4 (που πιστέψτε με, θα αργήσει πολύ ακόμα). Σε αυτό το τελευταίο μέρος του άρθρου, παρουσιάζεται ότι πιο καινούργιο έχει να επιδείξει το CSS – σε επίπεδο selectors πάντα – οπότε εάν δεν είστε ήδη πολύ έμπειρος στο θέμα, καλό θα είναι να ρίξετε μια ματιά στο πρώτο και δεύτερο μέρος του άρθρου, έτσι ώστε να ξεκινήσετε με τα πιο βασικά.

CSS3 selectors

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

Attribute selectors

Στο CSS3 προστίθενται ακόμα 3 attribute selectors που προσθέτουν επιπλέον δυνατότητες και έλεγχο στους υπάρχοντες CSS2 attribute selectors.

  1. Στον πρώτο selector λοιπόν, επιλέγουμε το element (Ε), όπου περιέχει την attribute “att” η οποία ξεκινάει με την τιμή “val”.
  2. Στον δεύτερο selector ισχύει το ακριβώς ανάποδο, δηλαδή επιλέγουμε το element (Ε), όπου περιέχει την attribute “att” η οποία τελειώνει με την τιμή “val”.
  3. Τέλος στο CSS3 κάνει την εμφάνιση του και ένας πιο “μπαλαντέρ” selector, ο οποίος επιλέγει το element (Ε), που περιέχει την attribute “att” η οποία περιέχει σε οποιοδήποτε σημείο της το string “val”.

Ρίξτε μια ματιά στα παραδείγματα, μιας και η θεωρία είναι λίγο δυσνόητη στους συγκεκριμένους selectors.

Patterns

  1. E[att^=”val”]
  2. E[att$=”val”]
  3. E[att*=”val”]

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


a[href^="mailto:"] {  
padding-right: 18px;  
background: url(icons/email.png) no-repeat right;  
}  
  
a[href$=".mov"] {  
padding-right: 18px;  
background: url(icons/video.png) no-repeat right;  
}  
  
a[href*="username"] {  
padding-right: 18px;  
background: url(icons/star.png) no-repeat right;  
}  

Pseudo-classes

Οι περισσότερες προσθήκες selectors στο CSS3 έχουν γίνει στις ψευδοκλάσεις, μιας και εμφανίζονται 12 – ναι καλά διαβάσατε – ολοκαίνουριες από αυτές. Προς το παρόν, λίγοι είναι browsers που τις υποστηρίζουν, ωστόσο όπως καταλαβαίνετε οι συγκεκριμένοι selectors είναι το βαρύ πυροβολικό στο CSS3. Ας τις δούμε όμως μία-μία ξεχωριστά.

  1. Επιλέγει το root element του document, που στην περίπτωση μας είναι πάντα το . Όπως καταλαβαίνετε ο συγκεκριμένος selector δεν έχει πολύ νόημα στα (X)HTML document, αλλά είναι πολύ πρακτικός σε άλλους τύπους document, όπως XML.
  2. Η επόμενη ψευδοκλάση είναι ίσως η πιο σημαντική προσθήκη στο CSS3. Με αυτήν μπορούμε να επιλέξουμε το νιοστό (n) child element. Οι παράμετροι που μπορεί να πάρει ο συγκεκριμένος selector είναι πολλοί, γι αυτόν τον λόγο άλλωστε είναι και πανίσχυρος, και μπορεί να είναι αριθμητικές (πχ. 2n+1, όπου θα επιλέξει όλα τα μονά στοιχεία), λέξεις κλειδιά (πχ. odd, οπού θα κάνει ακριβώς το ίδιο) ή κατευθείαν κάποιον αριθμό (πχ. 1, όπου θα επιλέξει το πρώτο child element). Ρίξτε μια ματιά στα παραδείγματα και θα καταλάβετε αμέσως τι δύναμη κρύβει ο συγκεκριμένος selector.
  3. Ακριβώς η ίδια ψευδοκλάση με την παραπάνω (ίδιο συντακτικό, παραμέτρους, κτλ.), με την διαφορά πως αρχίζει το μέτρημα από το τελευταίο και όχι το πρώτο element. Ίσως το W3C να το παραέκανε κάπως, ωστόσο ποτέ δεν ξέρεις που θα σου χρειαστεί κάποιος selector!
  4. Ακόμα μία πολύ χρήσιμη ψευδοκλάση. Με αυτήν μπορούμε να επιλέξουμε το νιοστό (n) child element ενός συγκεκριμένου τύπου, όπως για παράδειγμα ενός γραφικού (img). Οι παράμετροι που μπορεί να δεχθεί είναι ακριβώς οι ίδιοι με τους 2 παραπάνω selectors, δηλαδή αριθμητικές τιμές (πχ. 2n+1, όπου θα επιλέξει όλα τα μονά στοιχεία), λέξεις κλειδιά (πχ. odd, οπού θα κάνει ακριβώς το ίδιο) ή κατευθείαν κάποιον αριθμό (πχ. 1, όπου θα επιλέξει το πρώτο child element).
  5. Ακριβώς η ίδια ψευδοκλάση με την παραπάνω (ίδιο συντακτικό, παραμέτρους, κτλ.), με την διαφορά πως αρχίζει το μέτρημα από το τελευταίο και όχι το πρώτο element.
  6. Και ερχόμαστε επιτέλους σε πιο εύκολες ψευδοκλάσεις οι οποίες υποστηρίζονται και από αρκετούς μοντέρνους browsers. Με την last-child ψευδοκλάση λοιπόν, επιλέγουμε το τελευταίο child element. Αξιοσημείωτο είναι πως ο ανάποδος selector (E:first-child) είχε κάνει την εμφάνιση του στο CSS2!
  7. Επιλέγει το πρώτο child element ενός συγκεκριμένου τύπου, όπως για παράδειγμα γραφικού (img).
  8. Επιλέγει το τελευταίο child element ενός συγκεκριμένου τύπου.
  9. Επιλέγει το μοναδικό child element (δηλαδή το element δεν έχει siblings).
  10. Επιλέγει το μοναδικό child element ενός συγκεκριμένου τύπου (δηλαδή το element δεν έχει άλλα siblings ίδιου τύπου).
  11. Επιλέγει το element το οποίο δεν έχει ούτε child nodes, ούτε text nodes (με άλλα λόγια εμφανίζεται τελείως καινό στο DOM).
  12. Επιλέγει το element, το οποίο είναι ο στόχος κάποιου URI. Όλοι μας έχουμε χρησιμοποιήσει την id ιδιότητα έτσι ώστε να στείλουμε κάποιο link στο συγκεκριμένο σημείο (χρησιμοποιώντας στο τέλος του URL το σύμβολο #). Η συγκεκριμένη ψευδοκλάση λοιπόν αναλαμβάνει να επιλέξει αυτά τα elements.

Patterns

  1. E:root
  2. E:nth-child(n)
  3. E:nth-last-child(n)
  4. E:nth-of-type(n)
  5. E:nth-last-of-type(n)
  6. E:last-child
  7. E:first-of-type
  8. E:last-of-type
  9. E:only-child
  10. E:only-of-type
  11. E:empty
  12. E:target

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


:root { color: red; }  
  
tr:nth-child(2n+1) /* επιλέγει όλες τις μονές σειρές ενός πίνακα */  
tr:nth-child(odd) /* επιλέγει όλες τις μονές σειρές ενός πίνακα, χρησιμοποιώντας την λέξη κλειδί odd  */  
tr:nth-child(2n) /* επιλέγει όλες τις ζυγές σειρές ενός πίνακα */  
tr:nth-child(even) /* επιλέγει όλες τις ζυγές σειρές ενός πίνακα, χρησιμοποιώντας την λέξη κλειδί even */  
li:nth-child(1) /* επιλέγει το πρώτο list item */  
  
tr:nth-last-child(1) /* επιλέγει την τελευταία σειρά ενός πίνακα */  
  
img:nth-of-type(2n+1) { float: right; } /* επιλέγει όλα τα μονά images */  
img:nth-of-type(2n) { float: left; } /* επιλέγει όλα τα ζυγά images */  
  
img:nth-last-of-type(1){ border-bottom: 1px solid #000; } /* To τελευταίο image θα έχει border */  
  
li:last-child { color: red; } /* To τελευταίο list item θα έχει κόκκινο χρώμα */  
  
img:first-of-type { padding:10px; border:1px solid #000; } /* To πρώτο image θα έχει padding και border */  
  
p:last-of-type { font-size: 1.2em; } /* Η τελευταία παράγραφος θα έχει μεγαλύτερο font */  
  
li:only-child { list-style-type: square; } /* Σε μία λίστα με ένα και μοναδικό list item, το list item θα έχει τετραγωνάκι για τύπο λίστας */  
  
img:only-of-type { padding:10px; border:1px solid #000; } /* Το image που δεν έχει άλλα siblings ίδιου τύπου (images - img tags), θα έχει padding και border */  
  
p:empty { display: none; } /* Οι παράγραφοι που δεν έχουν child και text nodes δεν θα εμφανίζονται */  
  
h2:target { color;red; } /* Επιλέγει τους h2 τίτλους που είναι στόχοι κάποιου URI */ 

UI element states pseudo-classes

Στο CSS3 εμφανίζονται για πρώτη φορά και κάποιες – 3 για την ακρίβεια – User Interface ψευδοκλάσεις. Αυτές χρησιμοποιούνται κυρίως στις φόρμες (τουλάχιστον έτσι έχω καταλάβει, διορθώστε με εάν κάνω λάθος) και λειτουργούν ανάλογα με την κατάσταση του user interface του browser.

  1. Πιο συγκεκριμένα, με την ψευδοκλάση :enabled, επιλέγουμε το στοιχείο του περιβάλλοντος χρήσης το οποίο βρίσκεται σε ενεργοποιημένη κατάσταση στον browser.
  2. Αντίθετα με την ψευδοκλάση :disabled, επιλέγουμε το στοιχείο του περιβάλλοντος χρήσης το οποίο βρίσκεται σε απενεργοποιημένη κατάσταση στον browser.
  3. Τέλος υπάρχει και η ψευδοκλάση :checked η οποία επιλέγει τα radio και checkbox elements εάν είναι επιλεγμένα.

Patterns

  1. E:enabled
  2. E:disabled
  3. E:checked

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


input:enabled { background: red; }  
input:disabled { padding: 5px; border: 1px solid red; }  
input[type="checkbox"]:checked { background: red; }  

Negation pseudo-class

Μια πολύ σημαντική προσθήκη στο CSS3 ήταν και η πολυσυζητημένη negation ψευδοκλάση, που εξαιρεί τα elements που βρίσκονται μέσα στην παρένθεση. Μέσα στην παρένθεση μπορούμε να προσθέσουμε οποιονδήποτε απλό selector έτσι ώστε να εξαιρεθούν τα συγκεκριμένα elements από τον selector μας (λειτουργεί κατά κάποιον τρόπο σαν μια function που παίρνει για arguments απλούς selectors).

Pattern

  1. E:not(s)

Παράδειγμα


*:not(h1) { padding: 0; margin:0; }

General sibling combinator

Τέλος στο CSS3 προστέθηκε και ακόμα ένας πιο γενικός sibling combinator selector. Με το σύμβολο ~ λοιπόν, επιλέγουμε το δεύτερο element F (το element που εμφανίζεται δεξιά από το σύμβολο ~), το οποίο έχει κοινό γονιό (parent) με το το πρώτο element E (αυτό που βρίσκεται αριστερά από το σύμβολο ~) και εμφανίζεται στο DOM μετά από αυτό. Επειδή ίσως σας μπέρδεψα λίγο, ας δούμε μαζί το παρακάτω παράδειγμα. Στο παρακάτω παράδειγμα λοιπόν, το δεύτερο heading (h2) θα έχει κόκκινο χρώμα, μόνο εάν έχει κοινό γονιό με το h1 και εμφανίζεται στο DOM μετά από αυτό. Η διαφορά του με τον Adjacent sibling combinator (E + E) (που εμφανίστηκε στο CSS2 και παρουσιάστηκε στο προηγούμενο μέρος του άρθρου), είναι πως ο συγκεκριμένος κανόνας επιλέγει το δεύτερο element (το element που εμφανίζεται δεξιά από το σύμβολο +), έχει κοινό γονιό (parent) με το το πρώτο element (αυτό που βρίσκεται αριστερά από το σύμβολο +) και εμφανίζεται στο DOM ακριβώς μετά από αυτό (και όχι απλά μετά από αυτό).

Pattern

  1. E ~ F

Παράδειγμα


h1 ~ h2 { color: red; } /* ο δεύτερος header (h2) θα έχει κόκκινο χρώμα, ακόμα και στην παρακάτω markup. */  
  
<h1>H1 Header</h1>  
<p>Intro paragraph</p>  
<h2>H2 Header</h2> 

Επίλογος

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

Τέλος το CSS εξελίσσεται συνέχεια, και πιστεύω πως γρήγορα θα καταφέρει να γίνει και ένα πολύ καλό και web standard υποκατάστατο του Flash, οπότε όσο πιο πολλά γνωρίζετε γι’αυτό, τόσο πιο εύκολα θα μπορέσετε να συνεχίσετε προς αυτήν την κατεύθυνση.

Οι 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 και δεν θα χάσετε.

Mobile app vs native app

Ο τίτλος θα μπορούσε να είναι και “θέλω να φτιάξω ένα site που να παίζει σε όλους τους browsers, κινητά και tablets που υπάρχουν στην αγορά”. Δυστυχώς όμως μερικά πράγματα δεν γίνονται όσο μαγικά θέλουμε… Αλλά καλύτερα ας πάρουμε τα πράγματα από την αρχή. Το mobile web έχει μπει για τα καλά στην ζωή μας, μιας και μπορούμε πολύ εύκολα είτε με ένα smartphone είτε με ένα tablet να κάνουμε σχεδόν τα πάντα και μάλιστα ενώ είμαστε μακριά από το γραφείο μας. Η πλειοψηφία των παραπάνω συσκευών λειτουργεί με μόλις 2 λειτουργικά, το iOS της Apple που είναι ενσωματωμένο σε όλες τις συσκευές της (iPhone, iPad, κτλ.) και το Androind OS το οποίο είναι η πρώτη σοβαρή και open source επιλογή για τους υπόλοιπους κατασκευαστές.

Το πρόβλημα συνήθως ξεκινάει με το πως θα φαίνεται το site μας σε μια τέτοια συσκευή. Για κάποιο περίεργο λόγο, οι περισσότεροι χρήστες/πελάτες είναι αρκετά μπερδεμένοι, μιας και δεν ξέρουν τι λύσεις υπάρχουν (και υπάρχουν λύσεις για όλα τα budgets), ποια είναι τα πλεονεκτήματα και μειονεκτήματα τους, και γενικότερα επικρατεί μια σύγχυση για το θέμα, με αποτέλεσμα να δημιουργούνται προβλήματα και παρεξηγήσεις. Ελπίζω το παρακάτω άρθρο να ξεδιαλύνει κάπως το τοπίο έτσι ώστε να επωφεληθούμε όλοι. Σε αυτό το σημείο θα ήθελα να τονίσω πως δεν είμαι κανένας φοβερός mobile guru/expert, και ίσως κάπου κάνω λάθος, γι’ αυτόν τον λόγο όποιος έχει να συμπληρώσει/προσθέσει κάτι, απλά ας μου αφήσει ένα σχόλιο. Έχουμε και λέμε λοιπόν, το site μας μπορεί να εμφανιστεί στο smartphone/tablet μας με δύο τρόπους.

Web app

Επιλέγοντας αυτήν την λύση, εννοούμε πως θα χρησιμοποιούμε τον browser της συσκευής μας (smartphone/tablet) για να δούμε το site μας. Μια αρκετά απλή λύση μπορεί να είναι η χρήση κάποιων CSS queries (Responsive Web Design) έτσι ώστε το site μας να φαίνεται λίγο πιο μαζεμένο και optimised στις συσκευές (οθόνες) που έχουμε αποφασίσει να υποστηρίξουμε. Αυτό δεν σημαίνει πως μπορούμε να φτάσουμε μέχρι εκεί. Ανάλογα με τις ανάγκες του project, και φυσικά το budget του, το mobile site μπορεί να γίνει όσο πολύπλοκο θέλουμε, χρησιμοποιώντας όσο καλύτερα γίνεται τις δυνατότητες της συσκευής και του browser που μας παρέχει. Για παράδειγμα η Google (λόγω και του Android), αποφεύγει τις native εφαρμογές, προσφέρει όμως σχεδόν σε όλες της τις υπηρεσίες ειδικά διαμορφωμένες web εφαρμογές για κινητά και tablets (μπείτε στο Gmail από τον browser του κινητού σας και θα καταλάβετε τι εννοώ).

Τα πλεονεκτήματα μιας web app είναι αρκετά. Το πρώτο και σημαντικότερο είναι πως δεν χρειάζεστε κάποιο συγκεκριμένο SDK (όπως πχ. το iOS SDK) για να δημιουργήσετε την web εφαρμογή σας. Μπορείτε να χρησιμοποιήσετε web τεχνολογίες όπως HTML (HTML5 καλύτερα), CSS και Javascript! Σε αυτό το σημείο αξίζει να σημειώσω πως οι browsers των κινητών/tablet (των σοβαρών κατασκευαστών τουλάχιστον) είναι φοβερά εξελιγμένοι και με πολλά χαρακτηριστικά, πράγμα που σημαίνει πως ήδη υποστηρίζουν πολλά HTML5 και CSS3 καλούδια. Το δεύτερο πλεονέκτημα μιας web app είναι πως, αν είναι καλοσχεδιασμένη φυσικά (βλέπε Progressive enhancement, Responsive Web Design, κτλ. κτλ.), μπορεί να καλύψει την πλειοψηφία των συσκευών και των browser που υπάρχουν! Αυτό σημαίνει πως με μόλις μία εφαρμογή μπορεί να καλυφθούν όλα τα κινητά και tablets ανεξαρτήτου κατασκευαστή και λειτουργικού συστήματος. Τέλος ακόμα ένα πλεονέκτημα μπορεί να θεωρηθεί και η ανεξάρτητη διανομή, μιας και στην ουσία η εφαρμογή ζει στο web και όχι σε κάποιο store (o χρήστης απλά συνδέεται με την εφαρμογή χρησιμοποιώντας τον browser του). Χαρακτηριστικό παράδειγμα φοβερής web εφαρμογής που ήθελε να παρακάμψει το γνωστό για την εκκεντρικότητα του Apple App Store, είναι η εφαρμογή της Financial Times. Ρίξτε οπωσδήποτε μια ματιά από το κινητό σας και δείτε τι φανταστική δουλειά έχουν κάνει…

Τα μειονεκτήματα τώρα (ναι υπάρχουν και αυτά) έχουν να κάνουν κυρίως στο ότι δεν είναι εγγενής (native) εφαρμογή (τι έγραψα τώρα!). Οι web εφαρμογές λοιπόν, είναι συνήθως λίγο πιο αργές σε ανταπόκριση, μιας και στέλνουν σε έναν server κάποιο request και περιμένουμε απάντηση, ενώ συνήθως δεν έχουν και την “γυαλάδα” του native user interface. Επίσης οι web εφαρμογές μπορούν να κάνουν μόνο ότι μπορεί να καταλάβει ο browser της εκάστοτε συσκευής, δεν έχουν με άλλα λόγια πρόσβαση σε πιο advanced χαρακτηριστικά της συσκευής (όπως πχ. camera, GPS, πυξίδα, γυροσκόπιο, κτλ.).

Native app

Εγγενείς (native) εφαρμογές ονομάζουμε αυτές που τις κατεβάζουμε και της εγκαθιστούμε στην συσκευή μας από κάποιο store (πχ. App Store), είτε δωρεάν, είτε πληρώνοντας κάποιο χρηματικό ποσό. Η κάθε εφαρμογή έχει φτιαχτεί ειδικά για την συγκεκριμένη συσκευή, πράγμα που σημαίνει πως εκμεταλλεύεται πολύ καλά τα χαρακτηριστικά της εκάστοτε συσκευής, αλλά όπως καταλαβαίνεται πρέπει να γράψετε τουλάχιστον 2 διαφορετικές εφαρμογές (και να δουλέψετε με 2 διαφορετικά SDK) έτσι ώστε να δημιουργήσετε εφαρμογές για τα 2 βασικά λειτουργικά των κινητών/tablet (iOS και Android).

Τα πλεονεκτήματα και εδώ είναι αρκετά, με πρώτο και σημαντικότερο πως δεν χρειάζεται να είσαι συνδεδεμένος στο internet για να χρησιμοποιήσεις την εφαρμογή (εκτός φυσικά και αν αυτό είναι requirement της ίδιας της εφαρμογής). Το user interface και η απόκρισή είναι πολύ πιο γρήγορα και συνήθως πιο εντυπωσιακά από τα αντίστοιχα μιας web εφαρμογής, ενώ μπορούμε να χρησιμοποιήσουμε και όλα τα advanced χαρακτηριστικά της εκάστοτε συσκευής όπως camera, GPS, πυξίδα, γυροσκόπιο, κτλ. (εδώ την έχει πατήσει λίγο το Android μιας και οι κατασκευαστές εκτός από ότι είναι πολλοί, προσφέρουν και διαφορετικά χαρακτηριστικά στις συσκευές τους, πράγμα που δημιουργεί αρκετά προβλήματα στους developers).

Το βασικότερο μειονέκτημα τώρα, το ανέφερα και πιο πάνω, δεν είναι άλλο από το γεγονός πως η εφαρμογή είναι platform-dependent, που σημαίνει πως πρέπει να γράψετε την ίδια εφαρμογή για πολλές πλατφόρμες (τουλάχιστον 2), χωρίς να κάνω λόγο για τις υποπεριπτώσεις τους (όπως πχ. τις αλλαγές που μπορεί να υπάρχουν σε hardware χαρακτηριστικά πχ. retina display, ή εντελώς διαφορετικά hardware setup σε android συσκευές). Τέλος ένα μικρό μειονέκτημα μπορεί να θεωρηθεί και το γεγονός πως για να γίνει update η εφαρμογή, πρέπει να ξανά-ανέβει στο εκάστοτε store (αφού εγκριθεί κτλ .κτλ.), να την ξανά-κατεβάσει και να την ξανά-κάνει install ο εκάστοτε χρήστης (στην περίπτωση της web app το update είναι πολύ πιο άμεσο).

Αυτά τα λίγα περί web και native εφαρμογών για κινητά και tablets. Ελπίζω να ξεκαθάρισα λιγάκι το τοπίο, μιας και για κάποιο ανεξήγητο λόγο τα πράγματα είναι αρκετά μπερδεμένα! Αν κάποιος θέλει να συμπληρώσει κάτι, ας αφήσει απλά ένα σχόλιο…

CSS3 και βοηθητικά εργαλεία…

Δεν υπάρχει πιο καλή περίοδος από αυτήν για να αρχίσουμε σιγά-σιγά να χρησιμοποιούμε όλο και περισσότερους CSS3 κανόνες. Οι καινούργιοι browsers είναι αρκετά ώριμοι για κάτι τέτοιο, οι mobile  browsers βρίσκονται σε εξίσου υψηλό επίπεδο, ενώ στους παλιότερους δεν πρόκειται να χαλάσει τίποτα, απλά δεν θα “βλέπουν” τα καινούργια καλούδια (δεν πρόκειται να χαλάσει κάτι).

Το μόνο αρνητικό στην παραπάνω υπόθεση είναι πως στις περισσότερες περιπτώσεις είτε το συντακτικό είναι κάπως δύσκολο στην εκμάθηση (κάθε αρχή και δύσκολη), είτε χρησιμοποιούνται διάφορα browser prefixes για να λειτουργήσουν σωστά, είτε οι κανόνες είναι αρκετά “visual”, οπότε θέλουμε να βλέπουμε άμεσα στον browser το αποτέλεσμα, και όχι να προσπαθούμε να μαντεύουμε τις ρυθμίσεις.

Παρακάτω έχω μαζέψει κάποια online εργαλεία που χρησιμοποιώ για την γρήγορη επίλυση των παραπάνω περιπτώσεων. Έχουμε και λέμε λοιπόν :

  • CSS3 Please! : Ένα απλό αλλά πολύ περιεκτικό site για να αντιγράψετε εύκολα και γρήγορα τους CSS3 κανόνες που θέλετε (μαζί με όλα τα browser prefixes). Γρήγορο, minimal και “to the point”. Είναι συνήθως ο πρώτος μου σταθμός όταν ψάχνω κάποιο prefix για CSS3 κανόνα.
  • CSS3 Generator : Εξίσου καλό εργαλείο, ωστόσο μερικές φορές πρέπει να κάνεις κάποια click παραπάνω για να πάρεις αυτό που θέλεις…
  • Font Squirrel : Απλά το καλύτερο εργαλείο για μετατροπή γραμματοσειρών σε web fonts (@font-face). Δεν έχω χρησιμοποιήσει ποτέ μου άλλο εργαλείο γι’ αυτήν την δουλειά.
  • Layer Style : Ένα πολύ-εργαλείο που προσφέρει γραφικό περιβάλλον (σε στυλ “Photoshop”) για την δημιουργία των κανόνων μας, αλλά και live preview! Πολύ έξυπνη ιδέα και υλοποίηση, που θα βοηθήσει πολλούς γραφίστες και όχι μόνο…
  • Drop Shadow Generator : Πιο εξειδικευμένο στις σκιές, ωστόσο τα έτοιμα presets του είναι φανταστικά, ενώ μπορείτε να δείτε και σε live preview το πως θα φαίνεται η σκιά σας. Προσωπικά το χρησιμοποιώ συχνά γιατί δεν μπορώ να προβλέψω με τίποτα το πως θα φαίνονται οι σκιές στον browser!

Έχετε να προσθέσετε κάποιο άλλο εργαλείο, τότε απλά αφήστε ένα comment 😉

Update : Προσθέτω ακόμα 2 πολύ καλά εργαλεία που συστήνει ο φίλος μου Γιάννης.

  • CSS3.0 Maker : Μια λύση “όλα σε ένα”, μιας και δημιουργεί κώδικα για τα πάντα, από border-radius μέχρι CSS animations. Μου αρέσει γιατί δείχνει και ποιοι browsers υποστηρίζουν τους CSS3 κανόνες.
  • Ultimate CSS Gradient Generator : Πολύ καλό εργαλείο για την δημιουργία gradients με πολλά presets και εύκολο UI.

CSS3 και CSSS

Δεν ξέρω πόσοι από εσάς το πείραν χαμπάρι, αλλά η “δική” μας Λία ήταν ομιλήτρια στο τελευταίο Front-Trends Conference, το οποίο έγινε στην Βαρσοβία. Περισσότερα για τo θέμα μπορείτε να διαβάσετε στο post της (πάντα στα αγγλικά), ωστόσο εάν ασχολείστε έστω και λίγο με το web – και για να διαβάζετε αυτό το blog μάλλον ασχολείστε – πρέπει οπωσδήποτε να παρακολουθήσετε την παρουσίαση της ή ακόμα καλύτερα να την κατεβάσετε! Προσωπικά πιστεύω πως είναι μια από τις καλύτερες και πιο επεξηγηματικές παρουσιάσεις για το τι είναι το CSS3, τι λύσεις δίνει και τι νέες δυνατότητες παρέχει σε όλους εμάς. Καιρό είχα να παρακολουθήσω μια τόσο καλοφτιαγμένη και δομημένη παρουσίαση, και για να πω την αλήθεια στεναχωρήθηκα που δεν κατάφερα να την δω live, ωστόσο ελπίζω ακόμα σε κάποιο video της παρουσίασης…

Πέρα από αυτό και για τις ανάγκες της ίδιας της παρουσίασης, η Λία δημιούργησε και το δικό της slideshow system το οποίο ακούει στο όνομα CSSS. Όπως εύκολα καταλαβαίνει κάποιος στηρίζεται κυρίως σε CSS3 χαρακτηριστικά (και Javascript φυσικά), ενώ μπορεί να το κατεβάσει και να το  χρησιμοποιήσει ο καθένας για τις παρουσιάσεις του (απορώ ποιοι χρησιμοποιούν ακόμα Powerpoint!). Και πάλι συγχαρητήρια και μακάρι να δούμε ανάλογου επιπέδου events και στην Ελλάδα (αν και το βλέπω πάρα πολύ δύσκολο)…

CSS selectors

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

Τα καλύτερα links – Ιούλιος/Αυγουστος 09

Web Design

  • SlickMap CSS : Για εύκολα και γρήγορα CSS maps.
  • HTML 5 validator : Ο πρώτος – και πολύ πειραματικός όπως γράφουν και οι δημιουργοί του – HTML5 validator.

Web Development

  • Modernizr : HTML5 και  CSS3 εδώ και τώρα! Μπορεί να το χρησιμοποιήσω και στο επόμενο official Tsevdos.com WP theme που ετοιμάζω (ή μήπως είναι νωρίς ακόμα; )…
  • BBC Glow : H Javascript library του BBC!
  • qWikiOffice Web Desktop : Ακόμα μία Javascript library, με έμφαση σε desktop-like interfaces/λειτουργίες.
  • Javascript InfoVis Toolkit : Και άλλη μία για Interactive Data Visualizations και άλλα τέτοια περίεργα…

Tools

  • Open Atrium : Γρήγορο, εύκολο και πάνω από όλα οικονομικό intranet site! Με πολλά features και φυσικά open source. Απλά συμφέρει…
  • MeeCSS : Για να μην καταχωρείται τα site σας ένα-ένα στις CSS galleries…
  • Color Suckr : “Ρουφήξτε” τα χρώματα οποιασδήποτε φωτογραφίας.

Accessibility/Usability

  • 247 web usability guidelines : Για όσους θέλουν να ασχοληθούν σοβαρά με το άθλημα.
  • OpenHallway : Άλλη μια χρήσιμη υπηρεσία για on-line usability tests.

Plug ins

  • jQuery Blend : Πολύ απλό και εντυπωσιακό εφέ, ιδιαίτερα για μενού.
  • jQuery Flip : Για γυριστές καταστάσεις (δείτε το demo, δεν ξέρω τι άλλο να γράψω!)…

Blogs

  • SSMaP : Ένα podcast με την sugarenia και τον Στέλιο, με θέμα το web φυσικά. Κυκλοφόρησαν ήδη 2 επεισόδια
  • Pink Moustache : Το ροζ μουστάκι ήταν η ελληνική καλοκαιρινή έκπληξη που χρειαζόμουν! Πραγματικά μ’ αρέσει να βλέπω τέτοιες προσπάθειες από τόσο ταλαντούχους ανθρώπους.

Δωρεάν/Freebies