Χρησιμοποιώντας σχόλια υπό όρους είναι εύκολο να στοχεύσετε τον Internet Explorer με κανόνες CSS για συγκεκριμένο πρόγραμμα περιήγησης:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Μερικές φορές είναι η μηχανή Gecko (Firefox) που συμπεριφέρεται άσχημα. Ποιος θα ήταν ο καλύτερος τρόπος για να στοχεύσετε μόνο τον Firefox με τους κανόνες CSS σας και κανένα άλλο πρόγραμμα περιήγησης; Δηλαδή, όχι μόνο ο Internet Explorer θα πρέπει να αγνοεί τους κανόνες που αφορούν μόνο τον Firefox, αλλά και το WebKit και ο Opera.
Σημείωση: Ψάχνω για μια 'καθαρή' λύση. Η χρήση ενός JavaScript browser sniffer για την προσθήκη μιας κλάσης 'firefox' στην HTML μου δεν χαρακτηρίζεται ως καθαρή κατά τη γνώμη μου. Θα ήθελα μάλλον να δω κάτι που εξαρτάται από τις δυνατότητες του προγράμματος περιήγησης, όπως τα υπό όρους σχόλια είναι μόνο 'ειδικά' για τον IE...
Πρώτα απ' όλα, μια αποποίηση ευθυνών. Δεν υποστηρίζω πραγματικά τη λύση που παρουσιάζω παρακάτω. Το μόνο CSS που γράφω για συγκεκριμένο πρόγραμμα περιήγησης είναι για τον IE (ειδικά για τον IE6), αν και θα ήθελα να μην ισχύει αυτό.
Τώρα, η λύση. Ζητήσατε να είναι κομψή, οπότε δεν ξέρω πόσο κομψή είναι, αλλά σίγουρα θα στοχεύει μόνο σε πλατφόρμες Gecko.
Το τέχνασμα λειτουργεί μόνο όταν είναι ενεργοποιημένη η JavaScript και κάνει χρήση των δεσμεύσεων Mozilla (XBL), οι οποίες χρησιμοποιούνται σε μεγάλο βαθμό εσωτερικά στον Firefox και σε όλα τα άλλα προϊόντα που βασίζονται στο Gecko. Για λόγους σύγκρισης, αυτό είναι σαν την ιδιότητα behavior CSS στον IE, αλλά πολύ πιο ισχυρό.
Τρία αρχεία εμπλέκονται στη λύση μου:
ff.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
Ενημέρωση: Η παραπάνω λύση δεν είναι τόσο καλή. Θα ήταν καλύτερα αν αντί να προσθέσει ένα νέο στοιχείο LINK θα προσθέσει αυτή την κλάση "firefox" στο στοιχείο BODY. Και αυτό είναι εφικτό, απλά αντικαθιστώντας το παραπάνω JS με το ακόλουθο:
this.className += " firefox";
Η λύση είναι εμπνευσμένη από τον Dean Edwards' moz-behaviors.
Μια παραλλαγή της ιδέας σας είναι να έχετε έναν "ανιχνευτή USER-AGENT από την πλευρά του διακομιστή" που θα υπολογίζει ποιο φύλλο στυλ θα επισυνάψει στη σελίδα. Με αυτόν τον τρόπο μπορείτε να έχετε ένα firefox.css, ie.css, opera.css, κλπ
.
Μπορείτε να πετύχετε κάτι παρόμοιο στην ίδια τη Javascript, αν και μπορεί να μην το θεωρείτε τόσο καθαρό.
Έχω κάνει κάτι παρόμοιο έχοντας ένα default.css
το οποίο περιλαμβάνει όλα τα κοινά στυλ και στη συνέχεια προστίθενται συγκεκριμένα φύλλα στυλ
για να παρακάμψουν ή να βελτιώσουν τις προεπιλογές.
Ο μόνος τρόπος για να το κάνετε αυτό είναι μέσω διαφόρων CSS hacks, τα οποία θα κάνουν τη σελίδα σας πολύ πιο πιθανό να αποτύχει στις επόμενες ενημερώσεις του προγράμματος περιήγησης. Αν μη τι άλλο, θα είναι λιγότερο ασφαλές από τη χρήση ενός js-browser sniffer.