Application d'un css spécifique à un navigateur via PHP : votre avis

Bonjour

J'aimerai votre avis sur une technique que dont j'ai eu l'idée en lisant un commentaire sur un forum lorsque je faisait une recherche sur le net. D'ailleurs, ça faisait longtemps que j'avais envie de trouver un moyen pour la rendre possible. Je pense aussi que cette technique, du moins l'idée, n'est pas nouvelle et je ne pense pas avoir inventé quelque chose.

Note : lisez tout le post avant de vous enerver

Cette technique consiste à détecter le navigateur grâce à PHP et à envoyer une feuille de style spécifique au navigateur. Le but est d'utiliser des propriétés non valides sans rendre la feuille de style non valide. L'avantage est que ces propriétés non valides que l'on veut utiliser ne sont visibles qu'aux navigateurs qui les supportent.

Par exemple : je veux utiliser moz-border-radius. Il s'agit là d'une propriété qui teste border-radius, une propriété en préparation dans CSS3 me semble-t-il. Or moz-border-radius est une propriété propriétaire du moteur gecko, donc invalide.

J'utilise le code PHP suivant :

<?php

// détection des navigateurs et affichage du css spécifique
// code by deejay-bee
// licence : GPL
// don't remove this tag

if (ereg("Gecko", $_SERVER["HTTP_USER_AGENT"])) 
{
    echo "  <link rel=\"stylesheet\" media=\"screen\" type=\"text/css\" href=\"styles/geckos-only.css\" />
";
} 

else 
{
    echo "";
}
?>

Si le navigateur utilise le moteur gecko, on inclut une 2e feuille de style contenant les propriétés invalides. Si le navigateur utilise un autre moteur que gecko : on affiche rien.

Ma question est justement là : j'ai attentivement lu plein de tutoriels sur AlsacréationS et j'ai bien saisit la philosophie du web : proposer aux utilisateurs un site qu'ils peuvent voir quelque soit le matériel utilisé. Je me demande donc si c'est correct de faire ça. N'est-ce pas une manière bête et méchante de contourner la validation ?

Personnellement, je pense que non. Puis que l'on applique des effets à du matériel spécifique donc ceux n'utilisant pas ledit matériel spécifique ne peuvent de toute façon pas afficher les effets souhaités et ne sont pas perturbés par des propriétés invalides que leur matériel ne saurait interpréter.

Une précision : par cette technique, je souhaite uniquement appliquer des effets gadgets/décoratifs comme le moz-border-radius. Je ne souhaite pas appliquer des propriétés css nécéssaires à la consultation du document.

Notez que cela peut être une alternative intéressante aux hacks css qui rendent souvent eux-aussi les css invalides parce que l'on peut bien entendu rajouter des conditions PHP à ce code pour appliquer une css à d'autres moeteurs que gecko. Ceci permetterait de corriger d'éventuels bugs de navigateurs n'ayant pas de systèmes de commentaires conditionnels comme IE.

Justement, je pense qu'il ne sert à rien d'utiliser ce code pour IE. Pour ce dernier, la solution la plus fiable à mon avis reste les commentaires conditionnels...

Alors, qu'en pensez-vous :

- Pour l'utilisation de propriétés invalides ?
- Pour corriger d'éventuels bugs de navigateurs ?

Merci d'avance !

PS : ne rigolez pas en voyant les commentaires dans le code PHP. Je sais c'est un petit code, mais je préfère le signer et le mettre en GPL.
Modifié par deejay-bee (07 Aug 2007 - 14:22)

Petit up! pour ne pas tomber dans l'oubli !

Hello,

A mon avis, ta solution n'est pas très utile, notamment parce que la détection du navigateur à partir du User-Agent a toujours été extrêmement peu fiable.

Dans le cas de l'utilisation de propriétés invalides, ce n'est de toute façon pas très grave étant donné que les parseurs CSS doivent ignorer les propriétés qu'ils ne connaissent pas. En ce qui concerne la validation, tu peux toujours regrouper ces propriétés dans un fichier et valider les autres.

Pour un équivalent des commentaires conditionnels adapté aux autres navigateurs, je n'en sais pas assez pour me prononcer. Peut-être que ça peut être utile dans certains cas particuliers.

Ha bon ce n'est pas fiable par l'agent utilisateur ? J'ai bien une idée : certains navigateurs utilisent l'agent d'un autre navigateur pour x raisons, ça me rappelle opéra dans le temps (qui, en passant, utilise sont agent utilisateur maintenant).

Lorsque j'ai fait ce petit script, je suis cependant tombé sur quelque chose dont je ne m'attendais pas : IE s'identifie comme Mozilla Compatible MSIE. J'avais mis Mozilla à la place de Gecko et la feuille de style était envoyée aussi à IE.

C'est pour ces raisons que tu dis que la détection des agents utilisateurs n'est pas fiable ?

Julien Royer a écrit :
Dans le cas de l'utilisation de propriétés invalides, ce n'est de toute façon pas très grave étant donné que les parseurs CSS doivent ignorer les propriétés qu'ils ne connaissent pas. En ce qui concerne la validation, tu peux toujours regrouper ces propriétés dans un fichier et valider les autres.

Pas bête. Mais mon intention est de faire un site valide de base puis injecter du code spécial pour certains navigateurs.

Merci pour ta réponse

Si quelqu'un à envie de se prononcer je suis à l'écoute

Merci

Bonjour,

La motivation principale était d'éviter que le validateur CSS ne retourne des erreurs? Si c'est le cas, tu t'es embêté pour rien.

Je rappelle juste que la validation n'est pas un but en soi (sauf contexte particulier où la validité parfaite du code est exigée par un acteur: client, organisme de labélisation...). La validation est un outil.

C'est à dire que si le validateur te retourne dix fois «la propriété -moz-border-radius n'existe pas», et que tu sais pertinemment à quoi correspond cette propriété (implémentation de test dans le moteur de rendu Gecko) et quelles sont les conséquences de son utilisation dans la feuille de style, tu peux ignorer l'erreur.

Maintenant, la solution proposée par Julien est intéressante: séparer les implémentations propriétaires dans une feuille de styles à part, une feuille bonus.css par exemple.
Cela permettra de valider la ou les feuilles de style principale(s). Mais là encore, il ne s'agit pas de valider pour valider, mais juste d'éviter de mélanger dans une même page de résultats les erreurs attendues et maitrisées (comme le signalement de -moz-border-radius) et les erreurs problématiques, à corriger. C'est donc uniquement une question de méthodologie.

Pour ce qui est de l'utilisation de la détection de l'agent utilisateur, elle n'est pas fiable, et donc à éviter, sauf peut-être face à des contraintes très précises.

deejay-bee a écrit :
'est pour ces raisons que tu dis que la détection des agents utilisateurs n'est pas fiable ?

Oui.

Cet en-tête peut également parfois être altéré par un intermédiaire entre le navigateur et le serveur (proxy par exemple).

Florent V. a écrit :
Maintenant, la solution proposée par Julien est intéressante: séparer les implémentations propriétaires dans une feuille de styles à part, une feuille bonus.css par exemple.
Cela permettra de valider la ou les feuilles de style principale(s). Mais là encore, il ne s'agit pas de valider pour valider, mais juste d'éviter de mélanger dans une même page de résultats les erreurs attendues et maitrisées (comme le signalement de -moz-border-radius) et les erreurs problématiques, à corriger. C'est donc uniquement une question de méthodologie.

En fait ce qu'il propose c'est la même chose que moi. Sauf qu'au lieu de détecter le navigateur et lui envoyer la feuille "bonus" le fait de coder en dur l'import de la feuille envoie cette dernière à tout le monde.

Donc si tu dis que son idée est intéressante, la mienne doit l'être tout autant. Sauf qu'il y a la détection de l'agent utilisateur qui fait tâche.

En fait ma manière de penser n'était pas bonne, mais dans le fond, tu as raison et je trouve ta reflexion intéressante : la 2e feuille de style "bonus" permet de ne pas se mélanger les pattes entre les erreurs que l'on provoque vonlontairement dans le css bonns et celles que l'on pourrait rencontrer dans le CSS principal (donc vitales pour l'affichage du site) et qui donc pourraient compromettre l'affichage, la compatibilité etc...

Florent V. a écrit :
Pour ce qui est de l'utilisation de la détection de l'agent utilisateur, elle n'est pas fiable, et donc à éviter, sauf peut-être face à des contraintes très précises.

Je suis d'accord. Si par exemple demain firefox ou un autre était victime d'un bug css ou xhtml, cela permetterait de corriger le tir.

Donc en conclusion :

- Pour IE : commentaires conditionnels.

- Pour des propriétés spécifiques ou "bonus" n'entravant pas l'affichage sur les autres navigateurs ne reconnaissant pas la propriété (ex: moz-border-radius) : feuille de style codée en dur affichée à tous les navigateurs car pas de détection navigateur car pas fiable. Ceux qui reconnaissent les propriétés les utilisent dans le cas contraire : ils les ignorent.

- Dans les rares cas où un navigateur (autre que IE) aurait un bug d'affichage, ou si l'on souhaite effectuer un calage spécifique pour un navigateur, on peut utiliser mon script de détection pour n'afficher la css qu'au navigateur en faute sans perturber les autres. Ce n'est sans doute pas la solution merveille, mais s'il n'y a pas d'autres alternatives...

- hack css : interdits (du moins dans le css principal) ! pour ie il y a les commentaires conditionnels, et pour les autres, il y a les deux solutions précédentes !

Toute fois on peut combiner la technique de la css bonnus et y inclure des hacks. Ainsi, les erreurs de validation dûes à ces hacks sont maitrisées tout comme l'est moz-border-radius par exemple !

Merci à tous pour vos réponses

Si quelqu'un d'autre à un avis à formuler, je suis à l'écoute. Merci

Ok je pense avoir eu ma réponse. Je vous remercie tous pour votre participation.

Si toute fois quelqu'un a encore un avis, le topic est ouvert

En effet le User Agent n'est pas fiable puisque Konqueror propose de le modifier.

Pour Opera il me semble qu'il y a un moyen de lui attribuer une feuille de style à lui seul.