28105 sujets

CSS et mise en forme, CSS3

Bonjour,

Est-il possible de définir des classes css qui impacte uniquement un navigateur, Firefox pour ce qui me concerne. Smiley ohwell ????????????
Bonjour Goudurisc,

Tu peux faire ça pour iE pour Firefox je ne sais pas puisque en général tout marche avec. C'est plutôt les autres navigateurs qui ont tendance à buger.

il y a des articles qui pourront te donner un coup de main : ici et ici
Modifié par blond1n (07 Dec 2016 - 16:35)
Merci pour cette piste, j'(ai tenté

@-moz-document url-prefix()
{
    .maclasse {
       margin-top: 0px;
    }
}

C'était un espoir fou mais ça ne fonctionne pas Smiley bawling
Très mauvaise pratique s'il en est mais bon... en admettant :

Il faut donc détecter le user agent côté serveur (via php ou autre) ou côté client (via javascript), solution peu fiable car n'importe quel navigateur peut se présenter sous n'importe quel user agent, mais je ne connais pas d'autre solution.

Variable à récupérer pour une solution en php :
$_SERVER['HTTP_USER_AGENT']

Une fois détecté il faut appliquer une classe en correspondance dans la balise html ou body :
<body class="mozilla">

Ensuite, côté css, il n'y a plus qu'à se servir de cette classe comme espace de nom :
.unStyle {color: Blue} // Tout les navigateurs
.mozilla .unStyle {color: Red} // Spécifique à Firefox
Merci beaucoup Olivier, je conserve cette procédure qui me semble effectivement plus pro mais pour tout dire, la solution précédente fonctionne finalement et me permet de corriger un seul petit souci de margin-top. Comme tout le reste est ok, je ne vais pas aller plus loin, mais si le cas se représente, j'aurai au moins un plan B... Qui passera en A Smiley cligne
Modérateur
Olivier C a écrit :
Très mauvaise pratique

C'est clair.
Pour moi c'est un overkill.
Ton "petit souci de margin" ne peut pas être régler "normalement" avant de sortir l'artillerie lourde ? Surtout sous FF c'est pas le plus chiant normalement...

Si tu veux tu peux nous parler de ton "souci" Smiley langue
Pour tout dire, je ne sais pas ce qu'est un overkill...
Et dans ce cas, quels problème est-ce que je peux rencontrer en utilisant ma méthode ? Ou bien, quels avantages retirer d'une méthode plus orthodoxe ? Smiley ohwell
goudurisc a écrit :
Pour tout dire, je ne sais pas ce qu'est un overkill..

En français: un marteau pilon pour écraser une mouche!
Modérateur
PapyJP a écrit :

En français: un marteau pilon pour écraser une mouche!
Ben bonne chance pour y arriver avec ça ! Smiley lol


Si vous me cherchez, je me suis attrapé par le col et sortis comme un bon garçon Smiley cligne
Modérateur
Greg_Lumiere a écrit :
Ben bonne chance pour y arriver avec ça !
Smiley lol hahahaha

Mais sinon oui c'est sortir un katana pour couper du beurre : ca fait le taff mais c'est beaucoup trop et c'est inadapté. Ce que je veux dire goudurisc c'est que souvent c'est une propriété css qui passe différemment d'un navigateur à l'autre (ex une marge par défaut) et qu'on peut souvent régler ça facilement.

Le fait d'aller détecter le navigateur coté serveur, de caller une classe sur le body et ensuite de faire un sélecteur en fonction, ca marche mais bon, c'est un peu démesuré s'il suffit de mettre un overflow:auto; dessus non ? (Et en plus c'est plus couteux en perf et en maintient...)

Après c'est peut etre l'unique solution pour régler ton soucis mais j'ai rarement vu ça... Smiley smile
Modérateur
goudurisc a écrit :
Pour tout dire, je ne sais pas ce qu'est un overkill...
Et dans ce cas, quels problème est-ce que je peux rencontrer en utilisant ma méthode ? Ou bien, quels avantages retirer d'une méthode plus orthodoxe ? Smiley ohwell

La technique que tu utilises est un hack CSS, qui consiste a écrire un bout de code qui ne sera valide que dans le navigateur que tu cibles et ignoré par les autres. Le problème est que ça repose soit sur une erreur du navigateur soit sur une propriété non standard. L'un comme l'autre peuvent disparaître du jour au lendemain dans une nouvelle version du navigateur.

Trouver la vraie source du problème et la corriger proprement permet de faire du code qui restera valide plus longtemps généralement.
Merci pour cette précision mais je n'ai pas compris pourquoi un margin-top pur sucre fonctionnait sur tous les navigateurs sauf Firefox, même IE est content, c'est dire !!
Je vais donc voir ce que je peux changer mais j'avoue que je cale un peu pour l'instant.
Modérateur
goudurisc a écrit :
Merci pour cette précision mais je n'ai pas compris pourquoi un margin-top pur sucre fonctionnait sur tous les navigateurs sauf Firefox, même IE est content, c'est dire !!

Raison de plus pour creuser. Et n'hésite pas à poster le soucis ici ! Smiley cligne