Za pomocą komentarzy warunkowych łatwo jest zaatakować program Internet Explorer za pomocą reguł CSS specyficznych dla przeglądarki:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Czasami źle działa silnik Gecko (Firefox). Jaki byłby najlepszy sposób kierowania reklam tylko na Firefoksa przy użyciu reguł CSS, a nie na żadną inną przeglądarkę? Oznacza to, że Internet Explorer powinien nie tylko ignorować reguły tylko dla Firefoksa, ale także WebKit i Opera.
Uwaga: szukam „czystego” rozwiązania. Używanie sniffera przeglądarki JavaScript w celu dodania klasy „firefox” do mojego HTMLa nie jest moim zdaniem czyste. Wolałbym zobaczyć coś, co zależy od możliwości przeglądarki, podobnie jak komentarze warunkowe są tylko „specjalne” dla IE…
Odpowiedzi:
OK, znalazłem to. Jest to prawdopodobnie najczystsze i najłatwiejsze rozwiązanie na rynku i nie polega na włączeniu JavaScript.
Jest oparty na innym rozszerzeniu CSS specyficznym dla Mozilli. Tutaj jest cała lista tych rozszerzeń CSS: Rozszerzenia CSS Mozilli .
źródło
domain()
filtra. Na przykład@-moz-document domain(google.com) {...}
zastosuje załączone reguły CSS tylko w domenie google.com.Zaktualizowano (z komentarza @Antoine)
Możesz użyć
@supports
Więcej
@supports
tutajźródło
Oto jak poradzić sobie z trzema różnymi przeglądarkami: IE, FF i Chrome
źródło
Oto kilka hacków przeglądarki skierowanych tylko na przeglądarkę Firefox,
Używanie selektorów.
Hacki JavaScript
Hacki zapytań o media
To będzie działać, Firefox 3.6 i później
Jeśli potrzebujesz więcej informacji, odwiedź przeglądarkę
źródło
_:moz-tree-row(hover)
więc będzie to jedyna osoba, która będzie mogła przetworzyć.selector{}
kolejne. Ten konkretny hack działa obecnie we wszystkich wersjach Firefoksa, sprawdź browserhacks.com więcej informacji na temat .Przede wszystkim wyłączenie odpowiedzialności. Tak naprawdę nie opowiadam się za rozwiązaniem, które przedstawiam poniżej. Jedyny napisany przeze mnie CSS dla przeglądarki jest przeznaczony dla IE (szczególnie IE6), choć szkoda, że tak nie było.
Teraz rozwiązanie. Poprosiłeś, aby był elegancki, więc nie wiem, jak elegancki jest, ale z pewnością będzie skierowany tylko na platformy Gecko.
Ta sztuczka działa tylko wtedy, gdy JavaScript jest włączony i korzysta z powiązań Mozilla ( XBL ), które są intensywnie używane wewnętrznie w Firefoksie i we wszystkich innych produktach opartych na Gecko. Dla porównania jest to właściwość CSS zachowania w IE, ale o wiele bardziej wydajna.
W moje rozwiązanie zaangażowane są trzy pliki:
ff.html
ff.xml
ff.css
Aktualizacja: powyższe rozwiązanie nie jest tak dobre. Byłoby lepiej, gdyby zamiast dodawać nowy element LINK , dodałby klasę „firefox” do elementu BODY. I jest to możliwe, po prostu zastępując powyższy JS następującym:
Rozwiązanie jest zainspirowane zachowaniem Dean Edwards .
źródło
Użycie reguł specyficznych dla silnika zapewnia skuteczne kierowanie na przeglądarkę.
źródło
Odmiana Twojego pomysłu polega na
server-side USER-AGENT detector
tym, aby dowiedzieć się, jaki arkusz stylów dołączyć do strony. W ten sposób możesz miećfirefox.css, ie.css, opera.css, etc
.Podobną czynność możesz osiągnąć w samym Javascript, chociaż nie możesz uważać tego za czyste.
Zrobiłem podobną rzecz, dodając opcję,
default.css
która zawieraall common styles and then specific style sheets
dodawanie, aby zastąpić lub ulepszyć ustawienia domyślne.źródło
Teraz, gdy Firefox Quantum 57 jest obecnie oferowany z istotnymi - i potencjalnie przełomowymi - ulepszeniami Gecko, znanymi wspólnie jako Stylo lub Quantum CSS, możesz znaleźć się w sytuacji, w której będziesz musiał rozróżnić starsze wersje Firefox i Firefox Quantum.
Z mojej odpowiedzi tutaj :
źródło
Jedynym sposobem na to jest skorzystanie z różnych hacków CSS, co znacznie zwiększy prawdopodobieństwo niepowodzenia Twojej strony przy następnych aktualizacjach przeglądarki. Jeśli tak, będzie MNIEJSZY bezpieczniejszy niż użycie sniffera przeglądarki js.
źródło
Obsługa CSS ma powiązanie z javascript, na marginesie.
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
źródło
Poniższy kod ma tendencję do rzucania ostrzeżeń o stylu:
Zamiast używać
Pomógł mi! Tutaj znajdziesz rozwiązanie do ostrzegania o strzępach stylu
źródło