css3.gr

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

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

Τί σημαίνει RGBa;

Τα αρχικά RGBa σημαίνουν Red, Green, Blue, Alpha. Πρόκειται δηλαδή για το γνωστό RGB με το οποίο μπορούμε να καθορίσουμε οποιαδήποτε μίξη χρώματος, με ένα επιπλέον όρισμα, που δηλώνει τη διαφάνεια του χρώματος, το λεγόμενο alpha channel.

Ο CSS κανόνας δεν έχει μεγάλη διαφορά από τον (ήδη υπάρχοντα) RGB - συντάσσεται κάπως έτσι:

div.header { background: rgba(193, 26, 26, .5); }

Όπως μπορείτε να δείτε, οι τρεις πρώτες τιμές είναι ίδιες με τον κανόνα rgb(193, 26, 26), αλλά χρησιμοποιείται ένα παραπάνω όρισμα, με τιμές από το 0 έως το 1, που δηλώνει τη διαφάνεια (0 : πλήρως διαφανές, 1 : αδιαφανές). Μην ξεχνάτε ότι οι δεκαδικές τιμές στο συντακτικό του CSS μπορούν να απωλέσουν το αρχικό μηδενικό για χάρη συντομίας (το παραπάνω .5 δηλαδή ουσιαστικά πρόκειται για 0.5).

Τί μπορώ να κάνω με το RGBa;

Μιλώντας απλά, το RGBa μπορείτε να το χρησιμοποιήσετε όπου καθορίζετε χρώμα, είτε αυτό αναφέρεται σε background, είτε σε border είτε ως απλό color (για παράδειγμα, για γράμματα).

Όπως θα δείτε και στον κώδικα του παραδείγματος που δίνεται παρακάτω, είναι απλό να ορίσετε τις διαφάνειες της αρεσκείας σας:

<div id="example1"> background: rgba(0, 0, 0, .5); </div> #example1 { background: rgba(0, 0, 0, .5); color: #fff; padding: 20px; width: 500px; }

Δοκιμάστε το παραπάνω παράδειγμα σε κάποιο standards-compliant browser, όπως το Safari ή το Firefox. Θα παρατηρήσετε ότι το φόντο είναι αρκετά πιο "αχνό", παρόλο που δηλώθηκε ως μαύρο. Ένα λίγο πιο σύνθετο παράδειγμα είναι το παρακάτω, όπου χρησιμοποιήθηκε ημιδιαφανές άσπρο background σε συνδυασμό με αδιαφανές background στο πατρικό στοιχείο ώστε να δημιουργηθούν συνδυασμοί χρωμάτων:

<div id="example2"> <div>background: rgba(255, 255, 255, .8)</div> </div> #example2 div { background: rgba(255, 255, 255, .5); padding: 20px; }

Φαίνεται αρκετά βολικό, έτσι δεν είναι;

Γιατί να χρησιμοποιήσω το RGBa;

Για να το θέσουμε απλά, εφόσον εξαπλωθεί η υποστήριξή του, το RGBa θα αντικαταστήσει πλήρως τη μέθοδο χρήσης .png εικόνων για την προσομοίωση της διαφάνειας φόντου σε κάποιο στοιχείο. Λιγότερες εικόνες σημαίνει τόσο λιγότερα HTTP requests όσο και μειωμένο μέγεθος σελίδας, και αυτό μόνο καλό μπορεί να είναι.

Επιπλέον, το RGBa κάνει αρκετά ευκολότερη την αλλαγή αποχρώσεων μετά τον σχεδιασμό - αν κάποιος πελάτης ζητήσει αλλαγή, αν χρησιμοποιείτε .png θα πρέπει να ανοίξετε ξανά Photoshop και να δημιουργήσετε την εικόνα από την αρχή - όχι και πολύ πρακτικό. Με το RGBa, αυτό δεν παίρνει παρά μερικά δευτερόλεπτα.

Μα υπάρχει ήδη το opacity!

Είναι αλήθεια ότι υπάρχει ήδη το attibute opacity, που υποστηρίζεται από αρκετούς browsers και θα μπορούσε να χρησιμοποιηθεί με τα ίδια αποτελέσματα όπως το RGBa σε μερικές περιπτώσεις.

Υπάρχει όμως μια ειδοποιός διαφορά: το opacity κληρονομείται από κάθε “παιδί” του στοιχείου στο οποίο αποδίδεται. Αυτό έχει ως αποτέλεσμα αν, για παράδειγμα, το εφαρμόσουμε στο background κάποιου στοιχείου, να φαίνονται το ίδιο διαφανή και τα γράμματα που περιέχονται σε αυτό, κάτι που δεν είναι συχνά επιθυμητό:

<div id="example3"> opacity: 0.5 </div> #example3 { background: #000; color: green; padding: 20px; width: 500px; opacity: 0.5; }

Σε αυτές τις περιπτώσεις, που η χρήση του opacity απαιτεί περίπλοκους χειρισμούς με absolutely positioned στοιχεία για να παίξει σωστά, το RGBa λάμπει δια της απλότητάς του.

Πού μπορώ να το χρησιμοποιήσω;

Μέχρι στιγμής, το RGBa υποστηρίζεται από τις τελευταίες εκδόσεις του Firefox και του Safari, ενώ (όπως περιμένατε) δεν υποστηρίζεται καθόλου σε Internet Explorer 6 και 7. Αν το κοινό σας χρησιμοποιεί αυτούς τους browsers, αναγκαστικά θα πρέπει να καταφύγετε στη λύση των conditional comments και των εικόνων .png για να επιτύχετε ένα σχετικά όμοιο αποτέλεσμα.

Αν και η τρέχουσα stable έκδοση του Opera δεν το υποστηρίζει, η beta έκδοση που κυκλοφόρησε πρόσφατα με την ανανεωμένη rendering engine το υποστηρίζει.

Εν κατακλείδι

Το RGBa είναι από εκείνα τα utilities που προσφέρει το CSS3 που θα είναι πραγματικά αναντικατάστατα, εφόσον η υποστήριξή τους εδραιωθεί σε όλους τους σύγχρονους browsers. Μπορεί να διευκολύνει τη ζωή ενός designer απίστευτα, περιορίζοντας τη χρήση εικόνων κατά τη σχεδίαση και μειώνοντας τις απαιτήσεις σε bandwidth, αυξάνοντας παράλληλα τις δυνατότητες για πραγματικά δημιουργική σχεδίαση.