Αυτόματη προσθήκη -webkit-border-radius όπου έχετε -moz-border-radius

Μέχρι να έρθουν οι μέρες που το CSS3 θα έχει φτάσει σε επίσημο specification που θα υποστηρίζεται από όλους τους browsers, είμαστε αναγκασμένοι αν θέλουμε να χρησιμοποιήσουμε κάποιο feature του να χρησιμοποιούμε proprietary properties του κάθε browser και να ξέρουμε ότι δεν πρόκειται το εφέ μας να φαίνεται ίδιο παντού (με ελάχιστες εξαιρέσεις όπως το opacity που πλέον το υποστηρίζουν όλοι εκτός από τον ΙΕ, ο οποίος όμως έχει αντίστοιχο filter και κάααπως παλεύεται).

Ένα τέτοιο παράδειγμα είναι και το border-radius. Επί του παρόντος, υποστηρίζεται μόνο από Firefox 3 και Safari 3 (υπάρχει και στον Firefox 2, αλλά τόσο άθλιο που δεν αξίζει). Προφανώς, σε περιπτώσεις που θέλουμε όπωσδήποτε κάτι να έχει στρογγυλεμένες γωνίες θα καταφύγουμε σε κάποιον από τους all time classic τρόπους (τεχνικές με background images, τεχνικές με javascript κοκ). Υπάρχουν όμως και περιπτώσεις που κάτι φαίνεται αρκετά όμορφο χωρίς rounded corners, και δεν θεωρούμε απαραίτητο να το φορτώσουμε με το extra markup που είται απαιτείται είτε παράγεται από όλες τις υπάρχουσες cross-browser μεθόδους για rounded corners. Σε αυτή την περίπτωση χρησιμοποιούμε proprietary css properties (-moz-border-radius, -webkit-border-radius). Μεγάλα παιδιά είστε, δεν χρειάζεται να σας επισημάνω τους “κινδύνους” από κάτι τέτοιο (πχ css που δεν περνάει το validation) σαν τις προειδοποιήσεις στα πακέτα των τσιγάρων. Όποιος το χρησιμοποιεί υποτίθεται ότι ξέρει γιατί το κάνει και ποιές είναι οι συνέπειες.

Ωστόσο ο σκοπός του παρόντος δεν είναι να αναλύσει τα αρνητικά και τα θετικά των τρέχοντων implementations του border-radius. Το παρόν post έχει σκοπό να εγκαινιάσει μια νέα κατηγορία στο blog: Dreamweaver find & replace regular expressions. Διαπιστώνω ότι πολλοί συνάδελφοι δεν έχουν ασχοληθεί με τα regular expressions ενώ πέρα από προγραμματιστική ευκολία μπορεί να τους βοηθήσουν να γλιτώσουν αρκετό χρόνο από βαρετά tasks. Έτσι, αποφάσισα στην κατηγορία αυτή να ανεβάζω διάφορα έτοιμα dreamweaver queries όταν κρίνω ότι πέρα από μένα, μπορεί να χρησιμεύσουν και σε άλλους.

Update: Λευκά περιθώρια και drop shadow σε εικόνα μόνο με CSS! (για Firefox & IE)

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

Με την προηγούμενη τεχνική σε άλλους browsers εμφανιζόταν απλά ένα άχρηστο λευκό χοντρό πλαίσιο, το οποίο στο λευκό φόντο της σελίδας έμοιαζε απλά με έξτρα margin. To ψευτο-margin αυτό δε, στον Safari που κατανοεί το “:root” selector είχε …13 πίξελ πλάτος!

Το update της τεχνικής αυτής κάνει την εικόνα να εμφανίζεται με το λευκό πλαίσιο μεν, αλλά με 1px γκρι border σε όσους browsers δεν υποστηρίζουν το :root (όπως η Opera) και με 5px γκρι border σε όσους το υποστηρίζουν (όπως ο Safari), εκτός φυσικά από Firefox & IE στους οποίους εμφανίζει κανονικά τη σκιούλα μας.

Προσπάθησα αρκετά να επεκτείνω την τεχνική για Safari, αλλά μέχρι στιγμής δεν το έχω καταφέρει. Ο λόγος;

Λευκά περιθώρια και drop shadow σε εικόνα μόνο με CSS! (για Firefox & IE)

Πολλές φορές θέλουμε να δώσουμε ένα λευκό χοντρό περιθώριο σε μια εικόνα και μια απαλή γκρι σκιά σε αυτή. Συνήθως καταλήγουμε να το κάνουμε μέσω Photoshop ή με βαριές CVI-javascript λύσεις.

Είχα μια ιδέα τις προάλλες που το χρειάστηκα (και το έκανα μέσω Photoshop τότε) και το blog μου έδωσε ώθηση να την δοκιμάσω σήμερα. Ουσιαστικά στηρίζεται σε χρησιμοποίηση κάποιων proprietary ιδιοτήτων των δύο browsers οι οποίες δεν αναγνωρίζονται παρά μόνο από τον συγκεκριμένο browser που τις ενσωματώνει. Από την μία για τον ΙΕ με έναν συνδυασμό shadow filters και για τον Firefox με διαφορετικά χρώματα border μέσω των ιδιοτήτων -moz-border-x-colors (όπου x=top,right,bottom,left).