Μεταβάσεις CSS 101

Παρά την προσδοκία των ανθρώπων για αλλαγή και κίνηση στην οθόνη, το CSS και το HTML έχουν λίγα στοιχεία ελέγχου που σας επιτρέπουν να σχεδιάζετε αλληλεπίδραση και εκείνα που υπάρχουν είναι δυαδικά.

Ένας σύνδεσμος είναι ένα ή άλλο χρώμα. Ένα πεδίο κειμένου είναι είτε ένα μέγεθος είτε άλλο. Μια φωτογραφία είναι είτε διαφανής είτε αδιαφανής. Δεν υπάρχουν ενδιάμεσα μεταξύ των κρατών. Δεν υπάρχουν μεταβάσεις .

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

Ναι, μπορούμε να χρησιμοποιήσουμε το DHTML και να αξιοποιήσουμε τη βιβλιοθήκη jQuery για μεταβάσεις, αλλά αυτό απαιτεί πολύ κώδικα για κάτι που πρέπει να είναι πολύ απλό.

Αυτό που χρειαζόμαστε είναι ένας γρήγορος και εύκολος τρόπος για να προσθέσετε απλές μεταβάσεις στη σελίδα και σε αυτό το άρθρο θα βρείτε χρήσιμες πληροφορίες σχετικά με τις μεταβάσεις του CSS και τον τρόπο χρήσης τους.

Λίγους μήνες πίσω, έχω κολλήσει το πόδι μου στο στόμα μου γεγονός που υποδηλώνει ότι οι σχεδιαστές πρέπει να αρχίσουν να χρησιμοποιούν τις νέες τεχνικές CSS 3 που τους επιτρέπουν να κάνουν μερικά από τα βασικά στυλ που έχουν υποστηρίξει. Το μόνο πρόβλημα: κανένας από αυτούς δεν εργάστηκε στον Internet Explorer. Όχι, ούτε καν IE8.

Κάποιοι αναγνώστες θεώρησαν ότι οι τεχνικές που περίπου 75% των ακροατηρίων δεν θα μπορούσαν να δουν ήταν άστοχες.

Σε αυτούς τους αναγνώστες λέω, "Κρατήστε τα καπέλα σας" , επειδή πρόκειται να σας παρουσιάσω μια άλλη νέα ιδιότητα CSS που σας επιτρέπει να προσθέσετε μεταβάσεις σε οποιοδήποτε στοιχείο με μόνο μερικές σειρές κώδικα.

Οι μεταβάσεις CSS εισάγονται αυτή τη στιγμή στο Επίπεδο 3 του CSS, αλλά έχουν ήδη προστεθεί ως επέκταση στο Webkit. Αυτή τη στιγμή αυτό σημαίνει ότι λειτουργούν μόνο σε προγράμματα περιήγησης βασισμένα στο Webkit, όπως το Apple Safari και το Google Chrome.

Από πού προέρχονται οι μεταβάσεις του CSS

Οι μεταβάσεις αποτελούν μέρος του Webkit για λίγο και αποτελούν τη βάση πολλών από τα δροσερά πράγματα που μπορεί να κάνει το Safari UI που δεν μπορούν να κάνουν και άλλοι φυλλομετρητές.

Όμως, η W3C CSS Workgroup αντιστάθηκε στην προσθήκη μεταβάσεων στις επίσημες προδιαγραφές της, μερικά μέλη υποστηρίζοντας ότι οι μεταβάσεις δεν είναι ιδιότητες στυλ και θα ήταν καλύτερα να χειριστούν από μια γλώσσα scripting.

Αλλά πολλοί σχεδιαστές και προγραμματιστές, συμπεριλαμβανομένου και εμού, υποστήριζαν ότι αυτά είναι στην πραγματικότητα στυλ - μόνο δυναμικά στυλ, παρά τα παραδοσιακά στατικά στυλ που μας ταιριάζουν πολλοί από εμάς.

Ευτυχώς, το επιχείρημα για δυναμικά στυλ κράτησε την ημέρα. Τον περασμένο Μάρτιο, εκπρόσωποι της Apple και του Mozilla άρχισαν να προσθέτουν το CSS Transitions Module στην προδιαγραφή CSS Level 3 , που σχεδιάστηκε στενά από το τι είχε ήδη προσθέσει η Apple στο Webkit.

Σύντομη σημείωση σχετικά με τις βελτιώσεις σχεδιασμού

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

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

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

Πρώτον, λίγες ιδέες μετάβασης

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

Θα χρειαστεί να δείτε αυτή τη σελίδα στο Apple Safari 3+ ή Google Chrome για να δείτε αυτές τις μεταβάσεις εργασίας. Και τα δύο προγράμματα περιήγησης είναι διαθέσιμα σε γεύσεις Mac και PC.

Ανατροπές

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

Παράδειγμα # 1

Ρυθμιζόμενα μενού

Τα καθαρά μενού CSS είναι εύκολο να επιτευχθούν και οι μεταβάσεις σάς επιτρέπουν να δίνετε μενού σε ελάσματα και να επισημαίνετε τα εφέ.

Παράδειγμα # 2

Κινουμένων σχεδίων

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

Παράδειγμα # 3

Κάντε κλικ & κρατήστε!

Μεταβάσεις, κράτη και ενέργειες

Αλλά κρατήστε ένα λεπτό εκεί, το Tex.Πριν να καταδυθείτε σε μεταβάσεις, πρέπει να καταλάβουμε τα διάφορα κράτη στα οποία μπορεί να μεταβεί ένα στοιχείο.

Τα κράτη καθορίζουν τον τρόπο με τον οποίο ένα συγκεκριμένο στοιχείο αλληλεπιδρά με τον χρήστη ή τη σελίδα και καθορίζονται στο CSS χρησιμοποιώντας τις ψευδοκλάδιες. Για παράδειγμα, όταν ο χρήστης κινείται πάνω από ένα στοιχείο, αυτό το στοιχείο θα είναι στυλ με το hover ψευδο-τάξη.

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

Μια απλή μετάβαση

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

Ιδιότητα CSS
Η ιδιότητα που πρόκειται να τροποποιηθεί (για παράδειγμα, το χρώμα). Δείτε τον παρακάτω πίνακα για μια λίστα με όλες τις ιδιότητες του CSS που μπορούν να μεταφερθούν.

Διάρκεια
Πόσο καιρό θα διαρκέσει η μετάβαση, γενικά σε δευτερόλεπτα (για παράδειγμα, .25s ).

Λειτουργία χρονισμού
Σας δίνει τη δυνατότητα να ελέγξετε τον τρόπο χρονικής κατανομής της διάρκειας. Αντί να χρησιμοποιήσετε απλούς γραμμικούς μετρητές, μπορείτε να επιταχύνετε ή να επιβραδύνετε τη μετάβαση ή ακόμα και να καθορίσετε ένα ρυθμό ή μια μέτρηση (για παράδειγμα, linear ). Περισσότερα για αυτό αργότερα στο άρθρο.

Καθυστέρηση
Πόσο καιρό να περιμένετε μεταξύ της ενέργειας και της έναρξης της μετάβασης, συνήθως εκφράζεται σε δευτερόλεπτα (για παράδειγμα, .1s ). Αυτή η τιμή μπορεί να παραλειφθεί εάν δεν θέλετε καθυστέρηση.

Επειδή η ιδιότητα μετάβασης ξεκίνησε ως επέκταση Webkit, πρέπει να συμπεριλάβουμε και το transition και -webkit-transition ιδιότητες για συμβατότητα προς τα πίσω.

Ας προσθέσουμε πρώτα και τις δύο αυτές ιδιότητες στο :hover ψευδο-τάξη:

[css]
α: αιωρείται {
χρώμα: κόκκινο;
-Μετάβαση μετάβασης: χρώμα .25 γραμμική.
μετάβαση: χρώμα .25s γραμμική?
}}
[/ css]

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

Φυσικά, θέλουμε επίσης να μεταβούμε στο προεπιλεγμένο χρώμα του συνδέσμου, οπότε θα προσθέσουμε μια μετάβαση στο :link (και πιθανώς :visited ) ψευδο-τάξεις, με μια πολύ σύντομη καθυστέρηση (ένα δέκατο του δευτερολέπτου) προτού εξαφανιστεί:

[css]
a: σύνδεσμος, a: επισκέφθηκε {
χρώμα: μπλε;
-περιοχή ιστού: χρώμα .25 γραμμικό .1s;
μετάβαση: χρώμα .25s γραμμική .1s;
}}
[/ css]

Προσθήκη πολλών μεταβάσεων

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

[css]
α: αιωρείται {
χρώμα: κόκκινο;
Χρώμα φόντου: rgb (235,235,185);
-Μετάβαση μετάβασης: χρώμα .25 γραμμική.
μετάβαση: χρώμα .25s γραμμική?
μετάβαση: χρώμα-φόντου .15s γραμμικό .1;
}}
[/ css]

Πολλαπλές μεταβάσεις προστίθενται ως λίστα χωρισμένη με κόμματα στον ίδιο ορισμό ιδιότητας μετάβασης:

[css]
α: αιωρείται {
χρώμα: κόκκινο;
Χρώμα φόντου: rgb (235,235,185);
-webkit-transition: χρώμα .25s γραμμικό, χρώμα-φόντου .15s γραμμικό .1s;
μετάβαση: χρώμα .25s γραμμικό, χρώμα φόντου .15s γραμμικό .1s;
}}
[/ css]

Αυτό θα δημιουργήσει τόσο μια μετάβαση χρώματος και χρώματος φόντου.

Τι μπορεί να μετατραπεί;

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

Ευθεία από το spec των μεταβάσεων του W3C, εδώ είναι μια λίστα με ιδιότητες CSS που μπορούν να δώσουν μια μετάβαση, μαζί με τις πτυχές που μεταμορφώνονται. Έχω επισημάνει μερικές από τις πιο χρήσιμες ιδιότητες.

Χρονισμός μετάβασης και καθυστέρηση

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

Μια καθολική μετάβαση;

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

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

[css]
*: σύνδεσμος, *: επισκέφθηκε, *: αιώνας, *: ενεργός, *: εστίαση {
-περιοχή ιστού:
χρώμα .25s γραμμική,
χρώμα φόντου .25s γραμμική,
border-χρώμα .25s γραμμική?
μετάβαση:
χρώμα .25s γραμμική,
χρώμα φόντου .25s γραμμική,
border-χρώμα .25s γραμμική?
}}
[/ css]

Ένα επιχείρημα ενάντια σε μια καθολική μετάβαση και μάλιστα κατά τη χρήση του γενικού επιλογέα για επαναφορά CSS γενικά είναι ότι η εφαρμογή ενός στυλ σε κάθε στοιχείο της σελίδας μπορεί να επιβραδύνει την απόδοση της σελίδας. Ωστόσο, ποτέ δεν βρήκα κανένα στοιχείο ότι συμβαίνει αυτό. Όποιος ξέρει διαφορετικά;

Jason Cranford Teague είναι ο συντάκτης περισσότερων από 13 βιβλίων για ψηφιακά μέσα, συμπεριλαμβανομένων των Μιλώντας στα στυλ: Οι βασικές αρχές του CSS για τους σχεδιαστές ιστοσελίδων . Για περισσότερες πληροφορίες σχετικά με την CSS και την τυπογραφία Ιστού, δείτε το νέο βιβλίο του Jason, Υγρή τυπογραφία Ιστού . Ακολουθήστε τον Jason στο Twitter: @jasonspeaking .

• ← Πώς να προγραμματίσετε την απουσία JavaScript
• 40 άριστες ιστοσελίδες παρουσίασης μηχανών έκφρασης →