Différentes versions d'une feuille de style .css

Question

Ilnovo

5 Aug 2009 à 17:49

Bonjour,

Je suis nouveau sur le forum et je souhaite vous faire part d'une réflexion qui me trotte dans la tête depuis quelques jours et à laquelle je n'arrive pas à trouver une solution.

Je programme un site pour une entreprise qui souhaite que ce site soit accessible depuis tous les navigateurs du marché :
- IE6,IE7,IE8
- FF
- Chrome
- Opera
- Netscape
- Safari

Comme tout le sait, ils interprent tous le css différemment et j'ai donc une feuille de style principale et des feuille "plugin" qui me permettent de corriger les petits bugs d'alignement rencontrés sur chacun des navigateurs.

Aujourd'hui, je fait cela grâce à un script js qui détecte le navigateur et qui fait un document.write('<link rel="" href=""></link>'); makheureusement, pour les 8-9% d'utilisateurs qui n'utilisent pas javascript il y a un problème.

Ma question est donc (et oui enfin ...), Ya-t-il un moyen de le faire via php en créant une feuille de style php et en détectant le navigateur coté serveur pour éviter les problèmes?

Quelle est la méthode la plus rapide?

Merci d'avance de vos réponses

Il novo
[code]

fvsch

5 Aug 2009 à 18:28

Bonjour,

Ilnovo a écrit :
Je programme un site pour une entreprise qui souhaite que ce site soit accessible depuis tous les navigateurs du marché :
- IE6,IE7,IE8
- FF
- Chrome
- Opera
- Netscape
- Safari

Netscape n'est plus vraiment un navigateur du marché. Net Applications le donne à 0,6% de parts de marché mondiales (il s'agit pour l'essentiel de Netscape 6.0), d'autres bien en dessous. Pour le marché européen et notamment français, Netscape est aujourd'hui (et depuis un certain temps...) négligeable.

Ilnovo a écrit :
Comme tout le sait, ils interprent tous le css différemment

Ah bon, depuis quand? Le support de CSS 2.1 est assez largement complet dans IE8, Firefox 2+, Safari 2+, Chrome, Opera 9+. Il laisse à désirer dans Internet Explorer 6 et 7, qui sont à priori les deux seuls navigateurs à nécessiter (parfois) des correctifs CSS.

Ilnovo a écrit :
et j'ai donc une feuille de style principale et des feuille "plugin" qui me permettent de corriger les petits bugs d'alignement rencontrés sur chacun des navigateurs.

À priori, tu t'embêtes pour rien en ce qui concerne Firefox, Opera, Safari, Chrome et IE8.
Pour IE6 et IE7, il y a des techniques possibles pour placer les quelques correctifs CSS nécessaires dans les feuilles de styles «normales», ce qui évite d'éclater les styles d'un même élément dans plein de fichiers CSS différents.

Ilnovo a écrit :
Ya-t-il un moyen de le faire via php

Oui. C'est moins fiable qu'une détection bien fichue en JavaScript, mais ça marche même si JS est désactivé. Attention aux proxy d'entreprises, par contre...

Ilnovo a écrit :
Quelle est la méthode la plus rapide?

Faire le moins possible de styles spécifiques à tel ou tel navigateur. De préférence, n'en faire aucun. Éventuellement, en faire juste pour IE6 et IE7 (pour les autres ce n'est généralement pas nécessaire), et utiliser les commentaires conditionnels pour viser les bonnes versions d'IE de manière fiable.

Ilnovo

6 Aug 2009 à 13:53

Je susi en train de développer un menu jquery qui nécessite un position:relative et position:absolute et je me trouve face à plusieurs problèmes dans différents navigateurs donc je ne suis pas très d'accord avec le fait que la plupart des navigateurs respectent les normes css 2.1

Voici un test effectué dans Safari 3 Opera 9 FF2 et CHROME Z :

Le résultat est différent pour chacun des navigateurs


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr"xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
#corpstop {
margin-left : auto;
margin-top : 2%;
margin-right : auto;
width : 995px;
background-color:#143a9a;
height : 150px;
margin-bottom : 0px;
bottom : 0px;
}
#corps {
padding:-2px;
top:0px;
margin-left : auto;
margin-top : 0px;
margin-right : auto;
background-color:pink;
width : 995px;
background-repeat : repeat-y;
}
#corpsbottom {
margin-left : auto;
margin-right : auto;
background-color:black;
background-position : 0 0;
height : 65px;
}

#menu {
margin-left : 16px;
margin-right : auto;
background-color : #01243f;
width : 960px;
height : 45px;
height : 35px;
margin-left : 16px;
margin-bottom : 30px;
}




.smalldiv {
width : 110px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-color:cyan;
}
.smalldivover {
width : 110px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-color:white;
}


#menu1 {
width : 103px;
position : relative;
z-index : 1600;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
}
#menu2 {
width : 130px;
padding-top : 8px;
padding-left : 38px;
font-size : 14px;
position : relative;
overflow : hidden;
z-index : 1900;
margin-left : -15px;
}
#menu3 {
width : 142px;
padding-top : 8px;
padding-left : 38px;
font-size : 14px;
position : relative;
z-index : 1800;
margin-left : -15px;
}
#menu4 {
width : 109px;
position : relative;
z-index : 1900;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
overflow : hidden;
}
#menu5 {
width : 100px;
position : relative;
z-index : 2000;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
}
#menu6 {
width : 85px;
position : relative;
z-index : 3000;
margin-left : -15px;
padding-top : 8px;
padding-left : 45px;
font-size : 14px;
}
#menu7 {
width : 140px;
position : relative;
z-index : 500;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-repeat : repeat-x;
background-color:yellow;
}

#ombre_menu {
clear:both;
background-color:green;
position : absolute;
width : 960px;
height : 10px;
margin-top:40px;
}



#toggle {
background-color:red;
width : 417px;
margin-top : 20px;
margin-left : 273px;
height : 100px;
position : relative;
z-index : 20000;

}
</style>
</head>

<body >
  <div id="corpstop" >
         <a href="#" name="hautdepage"></a>
  </div>

  <div id="corps" style="height:500px;">
			<div id="menu">

			<div class="smalldiv" id="menu1" > <a class="amenu" href="#">Accueil</a> </div>

			<div class="smalldiv" id="menu2" ><a class="amenu" href="#">Notre Societe</a></div>

			<div class="smalldiv" id="menu3" ><a class="amenu" href="#">Les Programmes</a></div>

			<div class="smalldiv" id="menu4" ><a class="amenu" href="#">Les lois</a></div>

			<div class="smalldiv" id="menu5" ><a class="amenu" href="#">Contact</a></div>

			<div class="smalldiv" id="menu6" ><a class="amenu" href="#">Actu</a></div>

			<div id="menu7" > 
			</div>

			<img  id="ombre_menu" width="960" height="10"  />

			<br />


			<div id="toggle">
			</div>
			</div>
   </div>


   <div id="corpsbottom"> 
   </div>

	

</body> 
</html>

Pourriez-vous s'il vous plait regarder si cela fonctionne chez vous et m'aider à comprendre quelles sont mes erreurs de développement.

Merci d'avance de la réponse que vous pourre apporter à mon problème

Eric VErlet
Modifié par Florent V. (06 Aug 2009 - 16:18)

Ilnovo

6 Aug 2009 à 14:40

QQ aurait-il un tuyau

fvsch

6 Aug 2009 à 16:36

Pour le rendu:

- J'ai le même rendu dans Firefox (3.5) et Midori (moteur de rendu Webkit, comme dans Chrome et Safari).
- J'ai une différence dans Opera.

Pour ce qui est bien fait:

- Un doctype correctement déclaré.
- Un code presque valide.

Et pour les erreurs:

- Côté validité, il y a une erreur dans les attributs de la balise <html> (il manque un espace entre deux attributs, ce qui provoque des erreurs de parsing à la validation), et l'élément TITLE est absent alors qu'il est requis.
- Même si ça n'impacte pas le rendu, ton code HTML n'est absolument pas sémantique. C'est un joli cas de divite aigüe. Il existe près de 80 éléments en HTML, ce n'est pas pour qu'on se limite à DIV et IMG. Smiley cligne

- Utilisation, pour dessiner une ombre, d'un élément IMG ne référençant aucune image (???), et auquel on a appliqué une couleur de fond en CSS et des dimensions en HTML. À virer complètement.
- Utilisation hasardeuse, pour cet élément, du positionnement absolu. Déclarer un position:absolute sans déclarer de coordonnées (left, top...), et sans avoir identifié pour l'élément positionné en absolu son référent, c'est chercher les ennuis. C'est dire au navigateur «tiens, je mets une position absolue mais je sais pas trop pourquoi, merci de te démerder avec». Smiley cligne

- J'avoue ne pas comprendre l'intérêt d'avoir un margin-left négatif pour les items du menu. Ça a l'air très bricolé.

- Pour terminer, une faute de gout sympathique: utilisation de la police Comic Sans. Smiley ohwell

Ilnovo

10 Aug 2009 à 16:55

Merci pour ces conseils

Sujet clos

CSS et mise en forme, CSS3

Différentes versions d'une feuille de style .css