css3.gr

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

CSS3 selectors

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

Καιρός για το τελευταίο (και ίσως το πιο ενδιαφέρον) κομμάτι του οδηγού για τα νέα CSS 3 modules. Σε αυτό τον οδηγό θα περιγράψουμε σε γενικές γραμμές τους τρισδιάστατους μετασχηματισμούς που εισάγει η CSS 3 και έχουν γίνει το αντικείμενο προσοχής τελευταία.

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

Χωρίς να θέλω να σας τρομάξω, τα 2D transforms εισάγουν αρκετές μαθηματικές έννοιες, με κύρια αυτή της θεωρίας πινάκων. Όσοι γνωρίζουν από πίνακες, μετασχηματισμούς και συστήματα συντεταγμένων θα νιώσουν γνώριμα εδώ (ειδικά όσοι έχουν ασχοληθεί με OpenGL), παρόλα αυτά ο οδηγός αυτός έχει σκοπό να μυήσει όλους στο νέο αυτό module, χωρίς περαιτέρω εμβάθυνση σε μαθηματικούς όρους.

Καλώς ήρθατε στο δεύτερο μέρος του οδηγού για τα τέσσερα νέα modules της W3C σχετικά με το CSS 3 πρότυπο. Σε αυτό το κομμάτι θα αναφερθώ στην ενότητα CSS animations που δίνει ακόμη μεγαλύτερο έλεγχο στον designer (συγκριτικά με τα CSS transitions) όσων αφορά στις μεταβολές των ιδιοτήτων των στοιχείων της HTML στον χρόνο.

Το σκεπτικό των CSS Animations που θα περιγράψουμε παρακάτω, λειτουργεί ως επέκταση των CSS transitions, οπότε αν δεν έχετε διαβάσει το πρώτο μέρος του οδηγού, καλό θα ήταν να του ρίξετε μια ματιά. Δεν είναι πυρηνική φυσική, σας δίνω τον λόγο μου (απλά λίγα-ελάχιστα-τόσο δα μαθηματικά).

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

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

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

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

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