18073 sujets

Questions générales et questions de débutants

Délai d'application de la css

(Re) Bonjour,

Je suis plutôt novice dans le développement web et tout particulièrement concernant les CSS.

J'ai parcouru les forums de ce site, j'ai acheter le bouquin 'CCS 2 Pratique du desi...', enfin bref, j'apprends !

Ma question est la suivante :

J'ai développé une page d'accueil pour un site en cours de construction. Pour cette page d'accueil j'ai écrit ma toute première css et lorsque l'on visite cette page il y a un delai (court) avant l'application du style, le text s'affiche d'abord de façon "brute".

En entête il y a le chargement d'une animation flash (méthode Satay) mais cette animation n'est pas volumineuse du tout, d'ailleur j'ai fait le test en la supprimant et rien n'y fait.

QQ'un connaît-il ce problème et surtout sa solution ?

Merci bcp.

Laurent
Modifié par Laurent65 (15 Jul 2005 - 12:38)
Non, la feuille de style est incluse via un "LINK" mais dans une fonction javascript par un "document.write()" (css fonction de la résulotion d'écran client).

En ce qui concerne @import, j'ai essayé mais dans ce cas, la feuille de style n'est pas du tout chargée et je dois bien avouer que je ne sais pas du tout pourquoi, il me semble pourtant que ma synthaxe est correcte.

Le problème se produit effectivement dans IE.

Je vais donc regarder du coté de FOUC...

Merci pour l'info.
Non, la feuille de style est incluse via un "LINK" mais dans une fonction javascript par un "document.write()" (css fonction de la résolution d'écran client).

Faut, je me suis trompé, voici la fonction JavaScript :

function LoadStyle()
{
var s;

s=document.createElement('LINK');
s.rel='stylesheet';
if (screen.width<=800)
{
s.href='style800.css'
}
else
{
s.href='style1024.css';
}
document.getElementsByTagName('HEAD')[0].appendChild(s);
}
Modifié par Laurent65 (15 Jul 2005 - 14:02)
Pas de javascript = pas de feuille de style ?

L'utilisateur qui ouvre ton site dans une fenetre de taille reduite va charger la CSS pour petite resolution meme s'il decide d'agrandir la fenetre en plein ecran par la suite.

C'est en gros les choix que tu imposes a tes visiteurs Smiley decu
Oui j'impose ce choix car le but de ce site est de présenter un programme spécialisé pour l'aviation.

Il y aura donc des "Screen Shots" du programme et si je ne prévois pas des résolutions différentes, ce sera un peu le bor... sur le site si le client n'est pas adapté à la résolution, ces " screen shots" occupant une grande place dans le browser pour les rendres lisibles.

J'ai regardé du coté du problème FOUC mais cela ne résoud pas mon problème...
Modifié par Laurent65 (15 Jul 2005 - 14:35)
Bonjour,

Plutôt que de dépendre de javascript et de ses nombreux aléas prévisibles sur cette histoire, ne peux-tu pas présenter ds vignettes lien vers tes Screen Shots, assortis d'un bref avertissement sur la taille affichée des images cibles ?
Au départ, c'était l'idée que j'avais envisagée.

Mais les impositions du "Boss" sont là, notement par le fait qu'un des "screen shots" est en fait en "mapping" d'images survolées permettant de naviguer sur les différentes zone du programme afin de pouvoir aller chercher plus de détails sur cette zone.

Je ne sais pas si je suis très claire, mais en gros le "screen shot" est divisé en 7 zones réactives (images survolées) donnant un lien vers une page spécifique explicative de cette zone.

Si je passe par l'intermédiaire de vignettes, je crois que le cheminement pour arriver aux pages explicatves définitives vont décourager le visiteur... chose à éviter bien entendu.

Mais toutes ces considérationsi ne résolvent pas mon probléme de départ...
Modifié par Laurent65 (15 Jul 2005 - 15:42)
Laurent65 a écrit :

Mais les impositions du "Boss" sont là, notement par le fait qu'un des "screen shots" est en fait en "mapping" d'images survolées permettant de naviguer sur les différentes zone du programme afin de pouvoir aller chercher plus de détails sur cette zone.

Je ne sais pas si je suis très claire, mais en gros le "screen shot" est divisé en 7 zones réactives (images survolées) donnant un lien vers une page spécifique explicative de cette zone.


Aïe. J'ai mal à mon accessibilité, là Smiley cligne les images MAP (côté client, j'espère) ne sont pas des plus faciles à rendre accessibles. Mais tu n'as apparemment pas le choix, en effet.

Laurent65 a écrit :

Mais toutes ces considérationsi ne résolvent pas mon probléme de départ...


Ma foi, il n'y a pas de solution, si on reprends l'ordre dans lequel le navigateur traite un document, sauf erreur de ma part :
- il commence à charger le HTML,
- il traite le HTML, commence à charger les divers autres fichiers, dont les CSS qui sont liées normalement (ici, il n'y en a pas)
- il finit de traiter HTML et CSS "normales", en affichant au fur et à mesure (Opera) ou quand c'est prêt (FireFox)
- il finit de charger les autres bidules type images, objets flash, etc.
- il traite enfin ton javascript qui lui fait appliquer dynamiquement une CSS qu'il doit appeler et charger à ce stade.

Je ne vois pas comment empêcher le délai dans ces conditions Smiley ohwell

A moins que nos experts DOM aient une idée ?
Modifié par Laurent Denis (15 Jul 2005 - 16:05)
Effectivement, la feuille de style est chargée par :
<body onLoad="LoadStyle();">

Je viens de faire le test en imposant la CSS directement entre les balises HEAD et là, tout est OK...Mais parcette méthode, pas moyen de choisir la CSS=fct(Resolution écran).

N'y a-t-il pas un moyen d'empécher l'affichage avant que tout ne soit chargé ?

Coté accessibilité, je suis d'accord, c'est pas gégé, mais bon, comment faire autrement ? les liens textes ne sont pas assez "explicites" ni conviviaux, dixite le Bo..

Merci pour les explications.
Modifié par Laurent65 (15 Jul 2005 - 16:21)
Laurent65 a écrit :
Coté accessibilité, je suis d'accord, c'est pas gégé, mais bon, comment faire autrement ?


Assure-toi que tu respectes les critères d'accessibilité des images map, ce sera déjà un pas essentiel. Voir les critères 1.5, 1.6 et 1.7 du référentiel Accessiweb ( http://www.accessiweb.org/fr/Label_Accessibilite/criteres_accessiweb/92_accessiweb_lineaire/ )
et l'excellente page de l'IBM Accessibility Center sur les images maps ( http://www-306.ibm.com/able/guidelines/web/webmaps.html )
Administrateur
Puisqu'on parle aviation et que "les handicapés on s'en fout, ils volent pas" Smiley tired (air facilement adaptable Smiley confus Smiley sweatdrop ), quelques liens vers une pilote qui a plus d'idées, de compétences et de ténacité que la moyenne:
Dorine Bourneton en 2 lignes - FR3 Faut pas rêver
(2002) Présentation de cette pilote handicapée (Tour de France des jeune spilotes, parcours de l'Aeropostale Paris-St-Louis du Sénégal 5x, ...)
Sa probable activité professionnelle actuelle

Merci du mal que tu te donnes Smiley cligne
Bon bah vu que tu peu pas faire autrement que de detecter avec javascript la résolution client,
voici ce que je ferais a ta place.

Une page "simple" contenant uniquement un javascript.
Ce javascript detecte la reso, puis il redirige
soit a la page "truc.php?r=1024" ou a "truc.php?r=800"

Cette variable dans l'url, recuperer avec PHP ($_GET['r']) suffira a mettre la simple balise de fichier CSS externe, selon la resolution.
Pour eviter de se trimbaler la variable dans l'url a chaque page tu peu aussi la mettre dans une session.

Comme la feuille de style sera choisi coté serveur, il n'y aura aucun probleme d'affichage.

Si tu as besoin d'aide pour cree le code PHP, n'hesite pas.

De plus cette technique apporte un avantage, si le client na pas javascript, des la page de detection, tu pourra le rediriger vers "truc.php?r=800" (dans le doute choisir 800) !
(avec un lien Smiley murf vu qu'il na pas javascript Smiley ravi )
Sujet clos
Aller à