Στόχευση μόνο του Firefox με CSS

Χρησιμοποιώντας σχόλια υπό όρους είναι εύκολο να στοχεύσετε τον 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...

Shishir Morshed
Επεξεργασμένη ερώτηση Κάνε Δεκέμβριος 2015 в 8:13
Προγραμματισμός
firefox css css-hack
Κάνε Ιούνιος 2009 в 8:19
26 προβολές

Πρώτα απ' όλα, μια αποποίηση ευθυνών. Δεν υποστηρίζω πραγματικά τη λύση που παρουσιάζω παρακάτω. Το μόνο CSS που γράφω για συγκεκριμένο πρόγραμμα περιήγησης είναι για τον IE (ειδικά για τον IE6), αν και θα ήθελα να μην ισχύει αυτό.

Τώρα, η λύση. Ζητήσατε να είναι κομψή, οπότε δεν ξέρω πόσο κομψή είναι, αλλά σίγουρα θα στοχεύει μόνο σε πλατφόρμες Gecko.

Το τέχνασμα λειτουργεί μόνο όταν είναι ενεργοποιημένη η JavaScript και κάνει χρήση των δεσμεύσεων Mozilla (XBL), οι οποίες χρησιμοποιούνται σε μεγάλο βαθμό εσωτερικά στον Firefox και σε όλα τα άλλα προϊόντα που βασίζονται στο Gecko. Για λόγους σύγκρισης, αυτό είναι σαν την ιδιότητα behavior CSS στον IE, αλλά πολύ πιο ισχυρό.

Τρία αρχεία εμπλέκονται στη λύση μου:

  1. ff.html: το αρχείο για το στυλ
  2. ff.xml: το αρχείο που περιέχει τις δεσμεύσεις Gecko
  3. ff.css: Ειδικό στυλ για τον Firefox

ff.html






body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}




<h1>This should be red in FF</h1>

ff.xml

<?xml version="1.0"?>

ff.css

h1 {
 color: red;
}

Ενημέρωση: Η παραπάνω λύση δεν είναι τόσο καλή. Θα ήταν καλύτερα αν αντί να προσθέσει ένα νέο στοιχείο LINK θα προσθέσει αυτή την κλάση "firefox" στο στοιχείο BODY. Και αυτό είναι εφικτό, απλά αντικαθιστώντας το παραπάνω JS με το ακόλουθο:

this.className += " firefox";

Η λύση είναι εμπνευσμένη από τον Dean Edwards' moz-behaviors.

Ionuț G. Stan
Επεξεργασμένη απάντηση Κάνε Ιούνιος 2009 в 9:16
Σχόλια (0)

Μια παραλλαγή της ιδέας σας είναι να έχετε έναν "ανιχνευτή USER-AGENT από την πλευρά του διακομιστή" που θα υπολογίζει ποιο φύλλο στυλ θα επισυνάψει στη σελίδα. Με αυτόν τον τρόπο μπορείτε να έχετε ένα firefox.css, ie.css, opera.css, κλπ.

Μπορείτε να πετύχετε κάτι παρόμοιο στην ίδια τη Javascript, αν και μπορεί να μην το θεωρείτε τόσο καθαρό.

Έχω κάνει κάτι παρόμοιο έχοντας ένα default.css το οποίο περιλαμβάνει όλα τα κοινά στυλ και στη συνέχεια προστίθενται συγκεκριμένα φύλλα στυλ για να παρακάμψουν ή να βελτιώσουν τις προεπιλογές.

Anzil khaN
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2018 в 7:40
Σχόλια (2)

Ο μόνος τρόπος για να το κάνετε αυτό είναι μέσω διαφόρων CSS hacks, τα οποία θα κάνουν τη σελίδα σας πολύ πιο πιθανό να αποτύχει στις επόμενες ενημερώσεις του προγράμματος περιήγησης. Αν μη τι άλλο, θα είναι λιγότερο ασφαλές από τη χρήση ενός js-browser sniffer.

Σχόλια (0)