css3.gr

Πρόσφατα, το W3C ανακοίνωσε την δημιουργία τεσσάρων νέων modules για το CSS3 που εισάγουν νέους όρους και λειτουργίες στο CSS standard, λειτουργίες που οι προηγούμενες εκδόσεις δεν παρείχαν.

Τα νέα αυτά modules βασίστηκαν κυρίως σε προτάσεις της ομάδας της Apple που είναι υπεύθυνη για την εξέλιξη του webkit και τα προσχέδια μπορείτε να τα βρείτε στην ιστοσελίδα του W3C.

Αναφορικά, τα τέσσερα αυτά modules είναι τα εξής:

• CSS3 Transitions
• CSS3 Animations
• CSS3 2D Transforms
• CSS3 3D Transforms

Σε αυτή την σειρά των άρθρων, θα προσπαθήσω να αναλύσω όσο το δυνατόν καλύτερα τις λειτουργίες καθενός module ξεχωριστά, ξεκινώντας από τα πιο απλά (transitions) και μεταβαίνοντας σε πιο σύνθετα (3d transforms).

Πριν όμως ξεκινήσω την ανάλυση, θα ήθελα να σημειώσω πως αρκετά από τα χαρακτηριστικά των εν λόγω modules έχουν αρχίσει να υλοποιούνται ή έχουν υλοποιηθεί εξ ολοκλήρου σε κάποιους browsers.

Όπως είναι φυσικά αναμενόμενο, οι browsers της Apple, Safari 4 (beta) και Mobile Safari έχουν τα ηνία σε αυτό τον τομέα, με τον Mobile Safari παραδόξως να είναι πιο ολοκληρωμένος σε θέματα υποστήριξης από τον... "μεγάλο" αδερφό του, έχοντας πλήρως υλοποιημένο το αρκετά σύνθετο CSS3 3D Transforms module.

Δεν είναι όμως μόνο οι μηχανικοί της Apple που έχουν υλοποιήσει τα modules αυτά. Το Google Chrome έχει εισάγει αρκετές από τις δυνατότητες των νέων modules και η επόμενη έκδοση του Mozilla Firefox (3.5) θα υποστηρίζει τα 3D transforms. Προς στιγμήν λοιπόν, οι browsers με τους οποίους μπορείτε να δείτε τα νέα αυτά 'ζωντανά' κομμάτια του CSS 3 είναι η beta του Safari 4, το Mobile Safari και το Google Chrome.

Επίσης, μπορείτε ήδη να βρείτε σελίδες που κάνουν χρήση των εν λόγω χαρακτηριστικών και να μελετήσετε τον κώδικά τους για να δείτε πως δουλεύει. Ως παράδειγμα εφαρμογής των modules που θα αναλυθούν μπορώ να δώσω την αρχική σελίδα του Safari 4 beta που κάνει εκτενή χρήση, τόσο των νέων CSS3 modules, όσο και της HTML 5.

Τέλος, σε όλη την έκταση αυτού του οδηγού, θα παρέχονται και παραδείγματα / demos των modules που μπορείτε να δοκιμάζετε και μόνοι σας, είτε από τον Safari 4 και το Chrome είτε από το Mobile Safari.

CSS3 Transitions

Η πρώτη ενότητα που αποφάσισα να αναλύσω είναι το αρκετά απλό αλλά πολύ θεαματικό transition module. Σύμφωνα με τον ορισμό της W3C, τα CSS Transitions επιτρέπουν την ομαλή αλλαγή των CSS χαρακτηριστικών ενός αντικειμένου για κάποιο συγκεκριμένο χρονικό διάστημα.

Αν ο ορισμός σας φαίνεται λίγο...περίεργος, ένα παράδειγμα θα βοηθήσει αρκετά την κατάσταση: Έστω ότι έχουμε μια εικόνα να αλλάζει ομαλά opacity όταν μετακινούμε το ποντίκι πάνω της, με το όλο εφέ να κρατάει τέσσερα δευτερόλεπτα, ξεκινώντας ένα δευτερόλεπτο αφού το mouse περάσει πάνω από την εικόνα. Δύσκολο ε;

Είναι σίγουρο πως όσοι έχετε ασχοληθεί με jQuery θα σκέφτεστε μεθόδους μέσω Javascript ενώ όσοι προτιμάτε απλή CSS θα ορκίζεστε πως κάτι τέτοιο απλά δεν γίνεται. Κι όμως, το transition module κάνει αυτό ακριβώς.

Η ιδιότητα transition του CSS3 standard, μπορεί να "σπάσει" σε τέσσερα ξεχωριστά properties που μπορούν να χρησιμοποιηθούν ανάλογα με την περίσταση, ή και όλα μαζί (όπως για παράδειγμα λειτουργεί η ιδιότητα background).

Έτσι λοιπόν, έχουμε τις εξής ιδιότητες:

• transition-property
• transition-duration
• transition-delay
• transition-timing-function
• transition (γενική ιδιότητα)

transition-property

Το καλό με τις ιδιότητες του transition module είναι πως η ονομασία τους είναι αρκετά σαφής σε σχέση με τις λειτουργίες τους. Έτσι λοιπόν, το transition-property ορίζει το όνομα της ιδιότητας CSS στο οποίο θα εφαρμοστεί η μετάβαση (ή αλλιώς transition).

Για παράδειγμα, αν θέλετε να εφαρμόσετε μια ομαλή μετάβαση στο opacity μιας εικόνας, δεν έχετε παρά να ορίσετε πρώτα ότι η ιδιότητα που θα υποστεί αυτή την μετάβαση θα είναι το opacity:

transition-property: opacity;

Να σημειώσω εδώ πως η αρχική τιμή του transition-property είναι all, γεγονός που σημαίνει πως εξ ορισμού, αν δεν έχει οριστεί ιδιότητα για μετάβαση, η μετάβαση θα εφαρμοστεί σε όλες τις ιδιότητες του στοιχείου που μπορεί να υποστούν μετάβαση.

transition-duration

Το transition-duration ορίζει την διάρκεια της μετάβασης. Έτσι λοιπόν μπορείτε να επιλέξετε η μετάβαση να διαρκεί 1, 2, 3 ή 10 δευτερόλεπτα ορίζοντας την ιδιότητα ως εξής:

transition-duration: 2s;

Η αρχική τιμή του transition-duration είναι 0, που σημαίνει ότι η μετάβαση γίνεται άμεσα, όπως δηλαδή γίνονται ως τώρα οι αλλαγές στο CSS 2.1 πρότυπο.

transition-delay

Η ιδιότητα transition-delay ορίζει πότε θα ξεκινήσει η μετάβαση, ή με άλλα λόγια, ορίζει την καθυστέρηση που θα προηγηθεί πριν ξεκινήσει το transition.

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

Επί του πρακτέου:

transition-delay: 3s;

Ο παραπάνω κώδικας υποδεικνύει στη μετάβαση να ξεκινήσει τρία δευτερόλεπτα μετά την έναρξη της αλλαγής του χαρακτηριστικού που επέλεξε ο χρήστης με το transition-property.

transition-timing-function

Το transition module, δίνει την ευκαιρία στον web designer να ελέγξει την ταχύτητα της μετάβασης τόσο μέσω κάποιον προκαθορισμένων συναρτήσεων, όσο και με πλήρη έλεγχο της ταχύτητας. Σε αυτό βοηθάει η ιδιότητα transition-timing-function που ορίζει το cubic bezier curve ή αλλιώς την easing συνάρτηση ή ακόμη πιο απλά τον τρόπο που θα αλλάζει ομαλά η ταχύτητα της μετάβασης κατά την διάρκεια του εφέ.

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

Η W3C παρέχει ήδη πέντε προκαθορισμένες συναρτήσεις προς χρήση με αυτή την ιδιότητα, καθώς και την δυνατότητα στον designer να επιλέξει αυτός τις συντεταγμένες των δύο ενδιάμεσων σημείων. Έτσι λοιπόν, οι πιθανές τιμές που μπορεί να πάρει το transition-timing-function, είναι:

• ease (default τιμή), που αντιστοιχεί σε καμπύλη με ενδιάμεσα σημεία τα (0.25, 0.1) και (0.25, 1.0)
• linear, που αντιστοιχεί σε καμπύλη με ενδιάμεσα σημεία τα (0.0, 0.0) και (1.0, 1.0)
• ease-in, που αντιστοιχεί σε καμπύλη με ενδιάμεσα σημεία τα (0.42, 0.0) και (1.0, 1.0)
• ease-out, που αντιστοιχεί σε καμπύλη με ενδιάμεσα σημεία τα (0.0, 0.0) και (0.58, 1.0)
• ease-in-out, που αντιστοιχεί σε καμπύλη με ενδιάμεσα σημεία τα (0.42, 0.0) και (0.58, 1.0)
• cubic-bezier, που ορίζει μια καμπύλη cubic bezier και δέχεται τέσσερις τιμές, οι δύο πρώτες ορίζουν το δεύτερο σημείο και οι δύο επόμενες το τρίτο, προσέχοντας πάντα οι τιμές να είναι μεταξύ 0 και 1

Είναι λογικό το transition-timing-function να σας προκάλεσε σύγχυση, και είναι φυσικό πως δεν απαιτείται από κανέναν να γνωρίζει απέξω αυτές τις τιμές, πόσο μάλλον την συμπεριφορά του transition σε κάθε μία από τις συναρτήσεις, έτσι λοιπόν το παρακάτω demo ίσως να σας βοηθήσει λίγο περισσότερο.

transition

Όπως είπαμε και νωρίτερα, οι τέσσερις παραπάνω ιδιότητες μπορούν να οριστούν σε μια μόνο γραμμή CSS κώδικα, χρησιμοποιώντας το property.

Έτσι λοιπόν, μπορείτε να συμπεριλάβετε όλα τα παραπάνω, ως εξής:

transition: transition-property transition-duration transition-timing-function transition-delay;

...αντικαθιστώντας στο όνομα της κάθε ιδιότητας, την τιμή που θέλετε ή τοποθετώντας την αρχική τιμή.

Αυτό που πρέπει να σημειωθεί επίσης για το transition module γενικά, είναι πως ορίζει το πως θα γίνει η μετάβαση αλλά όχι τις αρχικές τιμές της ιδιότητας που θα αλλαχθεί. Τις τιμές αυτές μπορείτε να τις ορίσετε εσείς, απλά, όπως τις ορίζατε μέχρι τώρα.

Δηλαδή, αν στο αρχικό μας παράδειγμα με την εικόνα, θέλαμε στο mouse over να υπάρχει μετάβαση στο opacity και από 1.0 να γινόταν 0.0, τότε θα γράφαμε αρχικά τους παρακάτω - συμβατούς με το CSS 2.1 - κανόνες:

img { opacity: 1.0; /* Μπορεί να παραληφθεί, αλλά συμπεριλήφθηκε χάριν παραδείγματος */ } img:hover { opacity: 0.0; }

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

img { opacity: 1.0; /* Ξανά, χάριν παραδείγματος */ transition: opacity 4s ease-in-out 1s; }

Τώρα, για λόγους συμβατότητας, το Safari χρησιμοποιεί το πρόθεμα 'webkit-' μπροστά από κάθε ιδιότητα, έτσι λοιπόν το παρακάτω παράδειγμα μπορεί να σας δείξει και στην πράξη το εφέ σε διαφορετικές μορφές. Για να το δείτε, χρησιμοποιήστε Safari 4 beta, Google Chrome ή Μobile Safari.

Αυτά για την ώρα, ελπίζω να σας βοήθησε το πρώτο μέρος του οδηγού, σειρά έχει το CSS3 Animation module!

Πηγές

• CSS Transitions Module Level 3
• CSS Animation
• CSS: Transition Timing Functions

Έμπνευση

• Better Place Recordings
• Αρχική σελίδα του Safari 4