Folosind comentarii conditionale este ușor de țintă Internet Explorer cu browser-reguli specifice CSS:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Uneori este Gecko motor (Firefox), care se poarta urat. Ce ar fi mai bun mod de a viza doar Firefox cu reguli CSS și nu un singur alt browser? Asta este, nu numai ar trebui să Internet Explorer ignora Firefox-numai regulile, dar, de asemenea, WebKit și Mozilla ar trebui.
Notă: - am'm în căutarea pentru o 'curat' soluție. Folosind un browser JavaScript sniffer pentru a adăuga un 'firefox' clasa mea HTML nu se califică la fel de curat în opinia mea. Mai degrabă aș vrea să văd ceva care depinde de caracteristicile browser-ului, mai mult ca condiționată comentarii sunt doar 'special' la IE...
OK, am'am găsit-o. Aceasta este probabil cea mai curată și soluție ușor acolo și nu se bazează pe JavaScript pornit.
@-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
L's bazat pe un alt Mozilla specifice extensia CSS. Nu's o listă întreagă de aceste CSS extensiile aici: Opera CSS Extensiile.
Aici este cum să abordeze trei diferite browsere: IE, FF si Chrome
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
****Actualizat(de la @Antoine comentariu)
Puteți utiliza @sprijină
@supports (-moz-appearance:none) {
h1 { color:red; }
}
<h1>This should be red in FF</h1>
Mai multe despre @sprijină
aici
Aici este un browser-ul hacks pentru direcționarea doar browser-ul Firefox,
_:-moz-tree-row(hover), .selector {}
var isFF = !!window.sidebar;
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
Acest lucru este de gând să lucreze la, Firefox 3.6 și mai Târziu
@media screen and (-moz-images-in-menus:0) {}
Dacă aveți nevoie de mai multe informații,vă Rugăm să vizitați browserhacks
Mai întâi de toate, un act de renunțare. Eu nu't într-adevăr avocat pentru soluție, voi prezenta mai jos. Singurul browser CSS specifice scriu este pentru IE (mai ales IE6), deși îmi doresc să nu fi fost't caz.
Acum, soluția. Ai cerut ca sa fie elegant, așa că nu't știu cât de elegant este, dar's sigur ca o sa-țintă Gecko doar platforme.
Trucul este de lucru doar atunci când JavaScript este activat și face uz de Mozilla legaturi (XBL), care sunt foarte mult utilizate la nivel intern în Firefox și toate celelalte Gecko-produse pe baza de. Pentru o comparație, e ca comportamentul proprietate CSS în IE, dar mult mai puternic.
Trei fișiere sunt implicate în soluția mea:
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;
}
Actualizare: Soluția de mai sus nu este atât de bun. Ar fi mai bine dacă în loc de adăugarea unui nou element de LEGĂTURĂ se va adăuga care "firefox" clasa pe elementul BODY. Și-l's posibil, doar prin înlocuirea de mai sus JS cu următorul text:
this.className += " firefox";
Soluția este inspirat de Dean Edwards' moz-comportamente.
Folosind -motor norme specifice asigură eficient browser-ul de direcționare.
<style type="text/css">
//Other browsers
color : black;
//Webkit (Chrome, Safari)
@media screen and (-webkit-min-device-pixel-ratio:0) {
color:green;
}
//Firefox
@media screen and (-moz-images-in-menus:0) {
color:orange;
}
</style>
//Internet Explorer
<!--[if IE]>
<style type='text/css'>
color:blue;
</style>
<![endif]-->
O variație pe ideea este de a avea un server-side USER-AGENT detectorcă vă dați seama ce foaie de stil pentru a atașa la pagina. În acest fel puteți avea un firefox.css, de exemplu.css, opera.css, etc
.
Puteți realiza un lucru similar în Javascript în sine, deși este posibil să nu-l considere la fel de curat.
Am făcut un lucru similar de a avea un default.css
care include toate stilurile comune și atunci specifice foi de stil` sunt adăugate pentru a trece peste, sau de a spori valorile implicite.
Acum, că Firefox Cuantice 57 este cu substanțiale și potențial de rupere — îmbunătățiri la Gecko colectiv cunoscut sub numele de Stylo sau Cuantică CSS, vă puteți găsi într-o situație în care trebuie să se facă distincția între versiunile mai vechi de Firefox și Firefox Cuantice.
La răspunsul meu here:
puteți utiliza
@sprijină "cu o" calc(0s)
expresie în legătură cu@-moz-document pentru a testa pentru Stylo — Gecko nu acceptă valori de timp în
calc()` expresii dar Stylo face:
@-moz-document url-prefix() { @sprijină (animație: calc(0)) { / Stylo / } }
Aici's un proof-of-concept:
body::before {
content: 'Not Fx';
}
@-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
@supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}
Direcționarea versiunile mai vechi de Firefox este un pic mai complicat — daca're interesat doar în versiuni care sprijin
@sprijină
, care este Fx 22 și, pentru@nu acceptă (animație: calc(0s))` este tot ce ai nevoie:
@-moz-document url-prefix() { @nu acceptă (animație: calc(0)) { / Gecko / } }
... dar daca ai nevoie de sprijin, chiar și versiunile mai vechi,'ll nevoie pentru a face uz de cascade, cum s-a demonstrat în dovada-of-concept de mai sus.
Singura modalitate de a face acest lucru este prin intermediul diferitelor CSS hacks, care va face pagina dvs. mult mai probabil să eșueze pe lângă browser-ul actualizări. În orice caz, aceasta va fi mai PUȚIN sigur decât folosind un js-browser sniffer.
Următorul cod tinde să arunce Stil scame avertismente:
@-moz-document url-prefix() {
h1 {
color: red;
}
}
În schimb, folosind
@-moz-document url-prefix('') {
h1 {
color: red;
}
}
M-a ajutat! Am o soluție pentru stilul scame avertizare de aici
Suport CSS are caracter obligatoriu pentru javascript, ca o notă separată.
if (CSS.supports("( -moz-user-select:unset )")){
console.log("FIREFOX!!!")
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions