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. Εάν λοιπόν δεν τα θυμάστε ή δυσκολεύεστε να καταλάβετε κάτι, ρίξτε τους μια γρήγορη ματιά. Ας ξεκινήσουμε λοιπόν...

Ένα από τα πράγματα που λατρεύω στο CSS είναι η απλότητα του. Απλά επιλέγεις το element στο οποίο θέλεις να δουλέψεις και του προσθέτεις τους styling κανόνες που θα ακολουθεί! Τόσο απλά! Το παρακάτω άρθρο λοιπόν, θα παρουσιάσει όλους τους CSS selectors ξεκινώντας από την πρώτη έκδοση του CSS φτάνοντας μέχρι και το τελευταίο standard, το W3C CSS3.

Σας υπόσχομαι, πως μετά την ολοκλήρωση του άρθρου η επιλογή των element θα σας φαίνεται παιχνιδάκι, ενώ ταυτόχρονα θα βελτιώσετε και την συγγραφή W3C XHTML, μιας και δεν θα υπάρχει λόγος να χρησιμοποιείτε περιττές κλάσεις (classes) και ids, πέρα από τα απολύτως απαραίτητα.

Πολλοί από τους παρακάτω selectors δεν υποστηρίζονται από όλους του browsers ακόμα, ωστόσο καλό είναι να γνωρίζουμε όσους περισσότερους γίνεται, έτσι ώστε να κάνουμε την ζωή μας ευκολότερη! Αφήστε που πλέον μπορούμε να τους χρησιμοποιήσουμε και για άλλες εργασίες, όπως για παράδειγμα, για την επιλογή κάποιου element σε κάποια Javascript library όπως το jQuery.

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

Σε αυτό το δεύτερο μέρος μέρος λοιπόν, θα ασχοληθούμε με τους νέους κανόνες που μας προσφέρει το CSS σε θέματα background, fonts και columns (o Αλέξανδρος έχει ήδη γράψει και την δική του άποψη πάνω σε αυτό το θέμα). Ας συνεχίσουμε λοιπόν!

Από καιρό ήθελα να γράψω ένα άρθρο με θέμα τις νέες δυνατότητες του CSS και πραγματικά πιστεύω πως αυτή είναι η καλύτερη στιγμή για να το δημοσιεύσω! Δεν έχει να κάνει μόνο με το ολοκαίνουργιο project που ξεκινάμε όλοι εμείς, αλλά κυρίως με τους browsers, που σιγά-σιγά αρχίζουν επιτέλους να υποστηρίζουν κάποιους CSS3 κανόνες, είτε επίσημα είτε ανεπίσημα.

Στο παρακάτω πρώτο μέρος του άρθρου λοιπόν, δεν θα προσπαθήσω να εξηγήσω όλους τους καινούργιους κανόνες και δυνατότητες της CSS3, αλλά θα κάνω κάτι πολύ πιο πρακτικό. Θα παρουσιάσω κάποιους CSS3 κανόνες που μπορείτε να χρησιμοποιήσετε αυτήν την στιγμή στα site σας, έτσι ώστε και να τα κάνετε πιο όμορφα - στους browsers που μπορούν να καταλάβουν τους νέους κανόνες φυσικά - αλλά και για να τα προετοιμάσετε κατάλληλα για το μέλλον!