Επιστρέφω στο <BUTTON> βρίσκοντας λύσεις, workarounds και bugs στην προσπάθειά μου να τα κάνω «όμορφα» ή τουλάχιστον, όπως μου ζητήθηκε!

Καλό θα ήταν βέβαια να ρίξετε μια ματιά στο προηγούμενο άρθρο — έχω ήδη παρουσιάσει μερικά από τα προβλήματα που συνοδεύουν τη χρήση τους. Τα περισσότερα από αυτά λύνονται στο backend, μέσω του εκάστοτε CMS ενώ εμείς έχουμε να αντιμετωπίσουμε τα προβλήματα στη μεριά του browser που ίσως να είναι περισσότερα…

Εν πάσει περιπτώσει, μην αποθαρύνεστε, έχουμε απλώς να φτιάξουμε HTML buttons σαν αυτό και για να μην αρχίσετε από τώρα τις δοκιμές σε διάφορους browsers, έχω ήδη φορτώσει 5 διαφορετικούς browsers στα (Microsoft Windows 7 μου) και βλέπετε ήδη τα αποτελέσματα — δε λατρεύετε αυτή τη δουλειά!

Παρεπιπτόντως, δεν νομίζω να απορεί κανείς με την απουσία του Internet Explorer 6.x από το screenshot ωστόσο, έχω ήδη βρει λύσεις και θα τις παρουσιάσω στο τέλος του άρθρου!

Πριν αρχίσουμε να διορθώνουμε τα διάφορα μικροπροβλήματα, ας δούμε το βασικό CSS.

button 	{
	background:url("button_right.png") right center no-repeat;
	border:none;
	margin:0;
	overflow:visible;
	padding:0;
	}
button span {
	background:url("button.png") left center no-repeat;
	display:block;
	height:27px;
	line-height:25px;
	margin:0 15px 0 0;
	padding:0 0 0 15px;
	}

Το οποίο CSS, αν δεν μπήκατε στον κόπο να δείτε τον κώδικα, εφαρμόζεται εδώ: <button type="button"><span>Στρογγυλεμένο πορτοκαλί &lt;button&gt;</span></button>. Η υλοποίηση βασίζεται στην αρχαία (με τα μέτρα και τα σταθμά του Internet) τεχνική Sliding Doors και οι κανόνες δεν είναι δύσκολοι — ας τους δούμε έναν-έναν (εξαιρώντας μερικούς κανόνες που δεν επηρρεάζουν τα προβλήματά μας): το <button> έχει την δεξιά άκρη του κουμπιού σαν background-image. Αυτό το .png έχει πλάτος 15 pixels — θα χρειαστώ αυτή την πληροφορία λίγο παρακάτω. Εξαφανίζω οποιοδήποτε border μπορεί να εφαρμόζει εξ ορισμού ο browser με border:none και μηδενίζω margins και paddings. Το overflow:visible τέλος, το θέλει ο IE 7 ενώ για τους υπόλοιπους browsers δεν αλλάζει κάτι. Απλά τα πράγματα μέχρι εδώ…

…πάμε στο <span>, το οποίο έχει το βασικό γραφικό σαν background τοποθετημένο αριστερά (στο <button> ήταν δεξιά), έχει μετατραπεί σε block για να ελένξω τα margins, έχει ύψος όσα pixels είναι το γραφικό μας, line-height 2 pixels λιγότερο για να κεντράρεται το κείμενο μέσα στο γραφικό (εξαρτάται και από τη γραμματοσειρά που θα χρησιμοποιηθεί), δεξί margin όσο είναι το πλάτος του γραφικού της δεξιάς άκρης (15 pixels, θυμάστε;) και το ίδιο σε αριστερό padding, για να είναι ωραίο. Μέχρι εδώ, ο Opera είναι μια χαρά και ο IE 8 επίσης, όπως θα έπρεπε.

Για να διορθώσω το bug στον Firefox θα έπρεπε είτε να ξανασκεφτώ όλη τη λύση από την αρχή (όχι πως δεν δοκίμασα βέβαια!) είτε, με κάποιο τρόπο, να στείλω CSS μόνο σε αυτόν το browser — και στον Chrome λίγο αργότερα… Μετά από πολύ ψάξιμο, κατέληξα σε hack! Το ξέρω πως δεν θα έπρεπε, ντρέπομαι και κοκκινίζω αλλά τουλάχιστον, μπορώ να ελαχιστοποιήσω τις παρενέργειες. Προτείνω να φτιάξετε ένα hacks.css και να βάλετε εκεί τους παρακάτω κανόνες ώστε, αφενός να κρατήσετε valid το κανονικό σας .css αφετέρου να ξέρετε που να ψάξετε όταν, σε κάποια επόμενη version του browser αλλάξει / σπάσει / βελτιωθεί κάτι. Συμβαίνει συχνά!

/* Mozilla */
@-moz-document url-prefix() {
	button span { margin-right:12px; }
	}

/* Webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	button span { margin-right:12px; }
	}

Τα παραπάνω hacks λοιπόν απευθύνονται σε Mozilla (Firefox) και Webkit (Safari και Chrome) browsers αντίστοιχα και μειώνουν το δεξί margin που έχουμε βάλει στο <span> κατά 3 pixels - όσο είναι και το παραπανήσιο κενό που κατά λάθος προσθέτουν οι 3 αυτοί browsers! Μπορείτε να καλέσετε αυτό το hack.css από το βασικό σας αρχείο με το @import url(hacks.css) στην αρχή του φύλλου.

Για τον IE 7 τελικά δεν χρειάζεται να κάνω πολλά πράγματα, ένα white-space:nowrap στους κανόνες του span είναι αρκετό! Αφού όμως ξεμπερδέψαμε τόσο γρήγορα (!) μπορούμε να διορθώσουμε και τα χάλια του IE 6. Κατ' αρχάς, τα γραφικά μας είναι διάφανα PNG που αυτός ο αρχαίος πλέον browser δεν μπορεί να δείξει σωστά, όχι χωρίς javascript τουλάχιστον. Για να διορθώσω αυτόν τον browser λοιπόν θα χρησιμοποιήσω conditional comments στην html μου:

<!--[if lt IE 7]>
<style type="text/css">
button 			{ background-image:url("button_right.gif"); height:27px; }
button span 	{ background-image:url("button.gif"); bottom:-1px; position:relative; }
</style>
<![endif]-->

Με λίγες γραμμές κώδικα και 5 κανόνες CSS, δίνω στον IE 6 GIFάκια αντί για PNG και έχω κάνει το καθήκον μου κατά το ήμισυ. Το ύψος (στο button), σε συνδυασμό με το bottom:-1px φροντίζουν να έρθουν «στα ίσα» τα δύο tags. Αυτό το τελευταίο χρειάζεται και το position:relative και κατεβάζει 1 pixel πιο κάτω το span — βάλτε έναν φρέσκο browser!

Θα κλείσω το άρθρο σημειώνοντας πως, α) πολλά από τα θέματα που αντιμετώπισα οφείλονται στην ανάγκη να χρησιμοποιήσω διάφανα γραφικά. Αν δεν υπάρχει αυτή η ανάγκη, μια απλούστερη sliding doors μέθοδο (αναζητήστε στο διαδίκτυο διάολε!) μάλλον θα κάνει τη δουλειά, β) όλο αυτό ΘΑ μπορεί να γίνει χωρίς γραφικά, μόνο με border-radius και box-shadow…

(Καμία ψήφος)

 Loading ...

TrackBack URL