Εύκολη σύγκριση Github repositories με το Repocompare.io

Το Repocompare.io είναι το τελευταίο μου προσωπικό (aka. pet) project με το οποίο μπορείς πολύ εύκολα και γρήγορα να συγκρίνεις repositories που φιλοξενούνται στο Github. Πρόκειται για ένα single page application (SPA), στο οποίο προσθέτεις και συγκρίνεις repositories σε αριθμό stars, forks, open issues και άλλων.

Το συγκεκριμένο project είναι υλοποιημένο στο React και γύρω από το οικοσύστημα του. Το build γίνεται μέσω webpack (και babel) και είναι γραμμένο σε ES6 και JSX (ES2015 για την ακρίβεια). Από εκεί και πέρα για state manager χρησιμοποιώ το Mobx, για routing τον React Router καθώς και κάποια επίσημα React components (React Autocomplete). Χρησιμοποίησα επίσης, για πρώτη φορά, το Jest – ένα testing framework από το Facebook – καθώς και CSS modules τα οποία δεν είχα ιδέα τι έκαναν μέχρι τώρα (έχουν πολύ νόημα όταν δουλεύεις με components).

Όποιος θέλει να βοηθήσει μπορεί να το κάνει μιας και το repo είναι ανοιχτό για όλους. Έχω ήδη ανοιχτά κάποια tasks για το project και φυσικά share and enjoy!

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, οπότε όσο πιο πολλά γνωρίζετε γι’αυτό, τόσο πιο εύκολα θα μπορέσετε να συνεχίσετε προς αυτήν την κατεύθυνση.

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

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

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

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

Η παρουσίαση μου στο upNorth conference

Για όσους δεν κατάφεραν να έρθουν στο upΝorth conference (χάσατε by the way), μπορείτε να δείτε παρακάτω το video και τα slides της παρουσίασης μου (και να τα κατεβάσετε φυσικά).

Θα ήθελα να ευχαριστήσω τον Φώτη Ευαγγέλου για την κάλυψη και να ευχυθώ Καλά Χριστούγεννα και καλές γιορτές σε όλους!

Front-end development: Libraries, frameworks και άλλα εργαλεία

H εποχή που με έναν απλό και ταπεινό text editor ξεκινάγαμε να γράφουμε από την αρχή τα πάντα έχει τελειώσει εδώ και πολύ καιρό. Πλέον για την δημιουργία ακόμα και του πιο απλού HTML template είναι σχεδόν υποχρεωτικό να χρησιμοποιήσουμε τουλάχιστον ένα CSS-reset καθώς και αρκετά javascript files, έτσι ώστε να προσθέσουμε συμβατότητα σε παλιότερους browsers, να ελέγξουμε τι υποστηρίζει ο κάθε browser κτλ κτλ. Παρακάτω περιγράφω τι διαδικασία, και φυσικά τα εργαλεία, libraries, scripts και snippets που χρησιμοποιώ σχεδόν σε κάθε νέο project, από το πιο μικρό μέχρι το πιο μεγάλο…

Markup

Ίσως το πιο εύκολο κομμάτι του puzzle. Μέχρι και πέρσι, συνήθως χρησιμοποιούσα ένα δικό μου template (βασισμένο σε Strict XHTML), ωστόσο μιας και προσπαθώ να το γυρίσω σε HTML5, πιάνω τον εαυτό μου να χρησιμοποιεί όλο και πιο συχνά το HTML5 boilerplate του Paul Irish. Το μόνο κακό που του βρίσκω είναι πως δεν μου φαίνεται και τόσο “boilerplate”, και συνήθως μου παίρνει αρκετή ώρα στο να διαγράφω αρχεία και κώδικα έτσι ώστε να το φέρω στα μέτρα μου. Σιγά-σιγά θέλω να φτιάξω και την δική μου λύση, ωστόσο μέχρι τότε το HTML5 boilerplate κάνει μια χαρά την δουλειά του.

CSS

Το πρώτο πράγμα που χρειάζομαι είναι ένα καλό CSS-reset. Αν η markup μου είναι HTML5, χρησιμοποιώ το HTML5 reset του HTML5 Doctor, αν όχι χρησιμοποιώ το παλιό καλό HTML reset του Eric Meyer . Πολλές φορές αν το project “βιάζεται”, χρησιμοποιώ και σαν βάση την τυπογραφία κάποιου έτοιμου CSS framework, συνήθως του Blueprint ή του HTML5 boilerplate. Τέλος, αν το project βιάζεται απελπιστικά ή θέλω κάποιο γρήγορο prototype εδώ και τώρα, χρησιμοποιώ και το grid system του Blueprint (είναι και το μόνο που έχω μάθει!). Τέλος, συνήθως περνάω και τα media queries του Andy Clarke αλλά και ένα print-only style που περιέχει όλη την βασική τυπογραφία για εκτύπωση, για να υπάρχουν (αργά ή γρήγορα θα χρειαστούν)…

Javascript

Και εφόσον κλείσαμε από markup και CSS το μόνο που μας μένει είναι η Javascript μας. Εάν το project έχει HTML5 markup, το html5shiv είναι το πρώτο “must” script που πρέπει να φορτώσουμε. Από εκεί και πέρα συνήθως περνάω το modernizr και το jQuery γιατί όλο και κάπου θα χρειαστούν. Τώρα τελευταία μου αρέσει πολύ σαν ιδέα και το selectivizr μιας και σε βοηθάει πολύ στο να κρατάς την markup σου ακόμα πιο καθαρή, ωστόσο μπορώ να ζήσω και χωρίς αυτό. Τέλος, υπάρχει πιθανότητα (πάντα ανάλογα το project και εάν ο πελάτης είναι περίεργος/φανατικός χρήστης IE) να χρησιμοποιήσω και το Respond.js, έτσι ώστε τα media queries να παίζουν και σε IE 6-7-8…

Αυτά τα λίγα σχετικά με το front-end κομμάτι των site. Όπως καταλαβαίνεται, ακόμα και μικρά projects μπορεί να θέλουν όλα τα παραπάνω και ακόμα περισσότερα για να στηθούν και να λειτουργήσουν όπως πρέπει. Τέλος αν κάποιος χρησιμοποιεί φανατικά κάποιο εργαλείο/library που δεν αναφέρω παραπάνω, ας αφήσει ένα σχόλιο έτσι ώστε το τεστάρουμε και εμείς…

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. Ελπίζω να ξεκαθάρισα λιγάκι το τοπίο, μιας και για κάποιο ανεξήγητο λόγο τα πράγματα είναι αρκετά μπερδεμένα! Αν κάποιος θέλει να συμπληρώσει κάτι, ας αφήσει απλά ένα σχόλιο…