28221 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Après différents essais et une première demande de validation sur ce forum, me voici de retour avec une nouvelle version de la page de garde de mon site (seule cette première page fonctionne ; il s'agit du squelette de base ; pour le moment, pas de version CSS1). Je l'ai vérifié sous :
- Win IE 5.01 ;
- Win IE 5.5 ;
- Win IE 6.0 ;
- Win Opera 7.54 ;
- Win Opera 7.11 ;
- Win Firefox 1.0 ;
- Win Phoenix .5 ;
- Win Netscape 7.01 ;
- Win Netscape 6.23.

Je n'ai pas testé d'autres navigateurs ni, surtout, d'autres OS. En particulier, il doit exister des problèmes sous Mac IE5.X et Safari. Enfin, je n'ai pas testé sous Lunix/Unix Konqueror.

Si certains d'entres vous peuvent me communiquer leurs résultats de consultations : le site est visible ici ; il doit ressembler à cela.

D'avance un grand merci...

GS.
Modifié le 20 Dec 2004 - 16:01
Il n'y aurait pas une petite bidouille côté serveur qui tounerait mal dans certains cas ?
Voici le code source que je reçois (quelque-soit le navigateur):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<!-- En tête -->
	<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
	<title>Institut Pierre Renouvin&nbsp;:: Centre de recherche en histoire des relations internationales</title>
	. | Browser :  | Major :  | Minor :  | CSS : 
	<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
	<style type='text/css'>
	</style>
	<!-- Fin En tête -->	
</head>
J'avoue que je n'en sais rien... J'ai tout simplement repris la balise de base donnée par DreamWeaver... Je ne me suis jamais penché sur ces questions.

Edit : Après avoir regardé sur OpenWeb, la réponse semble simple : je ne suis pas encore complètement en Html4.1 strict, mais bien en transitionnal. Donc la balise semble bonne.

...

Sinon ? Cela s'affiche correctement ?



GS.
Modifié le 20 Dec 2004 - 16:52
lol

"ça" s'affiche correctement, avec un code complet... si je désactive le brouillage de l'id des navigateurs dans mon firewall. En revanche, je n'ai aucune CSS et j'ai le code cité ci-dessus lorsque l'identité du navigateur est cachée...

<edit>Au cas où tu n'aurais pas remarqué, le code en question est invalide (bloc de texte anonyme dans <head>) et l'appel de CSS y est vide</edit>

Donc : il y a bien, côté serveur, un affreux script totalement inutile qui repose sur l'identification du navigateur Smiley cligne
Modifié le 20 Dec 2004 - 16:54
...

Je voudrais être sûr de bien comprendre : tu brouilles volontairement le user_agent de ton navigateur. C'est bien cela ? Effectivement, dans ce cas, mon entête ne pourra pas renvoyer les bonnes informations.

J'ai longtemps hésité pour cette solution. J'ai finalement adopter la détection du navigateur côté serveur pour renvoyer les bonnes CSS. Dans la mesure où je ne comprenais pas la moitié des hacks proposés ici et là. Quels seraient tes conseils ? Une feuille de style unique valable pour tous les navigateurs ?

...

GS.
Ouais... bon. C'est pas complètement faux. Mais, là, je suis coincé par la demande de mes propres collègues.

Qu'est-ce que tu améliorerais/changerais ?

GS.

Sinon ? Cela s'affiche correctement sur les navigateurs que tu utilisés ?
les couleurs sont pas top pour le menu
la recherche est minuscules
deux colonnes de texte sur fond blanc l'une à côté de l'autre ça nuit à la lisibilité...
donc un peu plus de contraste ça serait bien Smiley smile ou des cadres...
Modifié le 20 Dec 2004 - 17:08
L'éternel problème de l'adressage d'un contenu (ou d'une CSS) à partir de ce type d'identification du navigateur, c'est que:
- les scripts qu'on récupère ici et là sont le plus souvent mal écrits et ne savent pas exploiter correctement l'identification envoyée par les navigateurs.
- lorsque le navigateur ne s'identifie pas, ces scripts n'ont quasiment jamais de solution de repli (laquelle pourraient-ils avoir, d'ailleurs ?)
- un script de ce type doit être régulièrement actualisé, ad vitam eternam, pour tenir compte des nouveaux browers, des nouvelles versions, etc... Et encore, en supposant que l'auteur ait tenu compte au départ de toutes les possibilités existantes à ce moment.

Bref, c'est le pire des moyens en matières d'adaptation du contenu côté serveur.

Lorsque c'est nécessaire, il est beaucoup plus pertinent de tester l'implémentation de la fonctionalité dont on a besoin, et d'adresser le contenu en conséquence. Ce procédé est indifférent à l'identification du navigateur.

Mais plus simplement ici, rien n'empêche de faire une CSS unique pour tous les navigateurs Smiley cligne
Laurent ==> Je ne suis pas convaincu. En premier lieu, la fonction get_browser() sous php (que tu connais certainement) est très puissante et régulièrement mise à jour (chaque semaine, pour plus d'info cf. ici). Lorsque j'aurai terminé mes tests, je renverrai, dans tous les cas, une feuille par défaut (pas pour le moment, je rédige la CSS1). Ton navigateur, même "planqué" recevra donc une feuille de style Mozilla5-strict. Surtout, avec une feuille de style globale et quatre mini-feuilles de style annexe, plus besoin de s'embêter avec les hacks et autres bidouilles. La fonction majorover et minover de get_browser() permet, enfin, de tenir compte de l'évolution des navigateurs et des versions à venir.

De toutes les façons, dans la mesure où l'on ne sait pas, à l'avance, comment opéra 8, Firefox 2, ou IE7 fonctionneront, il faudra, à l'arrivée de ces nouveaux navigateurs tenir compte des différences d'affichage. Bref, que l'on détecte ou non le navigateur, il faut rester informer des nouvelles versions... et faire des tests. Pourquoi, dans ces conditions, se passer de la détection côté serveur. Reste le cas de ceux qui "planquent" leurs noms.

Poire ==> Merci des tuyaux.
1- La boite recherche ne me plait pas non plus. Elle sera remplacée par un simple <input> avec un "rechercher" dedans.
2- Pour les deux colonnes, là aussi, je suis coincé. Tu penses qu'avec un fond un peu plus "pastel" cela passerait ?

J'oubliais le plus important : je ne suis pas parvenu à faire une feuille de style unique ! J'y ai laissé trop de neuronnes.

...
Modifié le 20 Dec 2004 - 17:28
J'oubliais:

gsaunier a écrit :
...
Je voudrais être sûr de bien comprendre : tu brouilles volontairement le user_agent de ton navigateur. C'est bien cela ?


Oui.

Juste parce que c'est le meilleur moyen d'identifier immédiatement ce type de défaut de conception Smiley cligne


Sinon, d'une façon générale : il y a sans doute quelque chose qui m'a échappé. Mais il me semblait bien que le but du jeu du passage à CSS, plus ou moins, c'était aussi de ne plus avoir à discriminer son code selon les navigateurs, comme au bon vieux temps du "cross-browser" (puisse-t-il ne jamais revenir, celui-là !)
Modifié le 20 Dec 2004 - 17:31
Test sur MAC :
IE 5.2.3 : la css ne passe pas
Safari : les infos sur la détection ne s'affiche pas, mis à part cela le reste semble correcte. Il y a un "petit" espace blanc entre le menu et le formulaire de recherche
Firefox 1.0 : problème de font, j'ai une fonte avec empatements (je n'ai pas de feuille perso) Il y a un "grand" espace blanc entre le menu et le formulaire de recherche
Camino 0.8 : pb fonte idem Firefox + le bouton du formulaire de recherche "sort" du formulaire. Il y a un "grand" espace blanc entre le menu et le formulaire de recherche.
Opera 7.54 : plusieurs soucis, si je m'identifie comme ie 5.2.3, le formulaire de recherche n'apparaît pas, si je m'identifie comme opera ou mozilla 5, la css ne passe pas

Sur PC :
Opera 7.6 : le menu ne passe pas
Opera 6.06 : la css ne passe pas

il doit y avoir un pb au niveau de la détection...

Cordialement, Eric
les scripts de détection de navigateurs c'est lourd et la misère pour maintenir tes 40 feuilles de style.
quite à simplifier le design, une feuille qui passe partout c'est mal

comme l'a dit Laurent, le site ne valide pas.

pour les couleurs, désolé mais je ne suis pas graphiste (malheureusement :$ )

bon courage

@+