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

Τα queries που ανεβάζω σε αυτό το ποστ αφορούν την προσθήκη -webkit-border-radius όπου υπάρχει -moz-border-radius.

• Προσθήκη -webkit-border-radius όταν το -moz-border-radius έχει μία τιμή
• Προσθήκη -webkit-border-radius όταν το -moz-border-radius έχει 4 τιμές

Το πρώτο αφορά properties όπως -moz-border-radius:5px; ενώ το δεύτερο properties όπως -moz-border-radius:0px 0px 7px 7px;. Δυστυχώς δεν μπόρεσα να σκεφτώ κάποιο τρόπο να τα αντικαθιστά και τα 2 με ένα query λόγω ασυμβατότητας μεταξύ των implementations του κάθε browser. Για να ξεπεραστεί αυτή η ασυμβατότητα το πρώτο προσθέτει μια ιδιότητα ενώ το δεύτερο τέσσερις.

Το query μπορεί εύκολα να τροποποιηθεί για να προσθέτει και άλλες ιδιότητες, όταν δεήσει η Opera ή ο ΙΕ να ενσωματώσει border-radius (προς το παρόν, ειδικά το τελευταίο, είναι ανέκδοτο )

Ελπίζω να σας χρησιμεύσει. Feel free να αναφέρετε οποιοδήποτε bug (μόνο μην μου πείτε ότι δεν δουλεύει για irregular curves ή shorthands με 2 ή 3 τιμές: Ο Mozilla δεν υποστηρίζει irregular curves ενώ δεν χρησιμοποιώ ποτέ shorhand με 2 ή 3 τιμές για την εν λόγω ιδιότητα, οπότε κάτι τέτοιο θα μου ήταν άχρηστο).