Question théorique : rapport taille CSS / Temps de chargement

Bonjour à tous,

Je ne suis pas certaine que mon intitulé soit très protocolaire, mais il s'agit d'une pure question théorique (de fait) donc sans urgence, et relevant plus de la curiosité que d'un problème immédiat à résoudre.

La complexité / la longueur d'une feuille de style a-t-elle une influence notable sur la rapidité de chargement / la fluidité, d'un site ?
Pour prendre un exemple précis, je suis en train d'essayer de virer les Javascripts d'un site (que je ne faisais que copier bêtement, n'entendant pas grand-chose à ce langage) en n'ayant recours qu'à la feuille de style pour suppléer à ce que faisaient les applets Java.
Il s'agit ici d'images réactives en CSS, avec deux images, servant de lien vers d'autres pages du site.

Ca fonctionne très bien.
Mais, l'une des pages contient 12 titres-images faisant offices de liens (c'est une page "d'accueil"). 12 images différentes ; dans ce cas de figure, est-il vraiment conseillé de passer par la feuille de style (où il faut donc paramétrer 12 fois le principe du roll-over) ou est-il préférable de conserver les applets Java pour gérer ça ?

C'est vraiment une question théorique, dans le sens où j'ai déjà opté pour les CSS de toutes façons (au moins, là, je comprends ce que je programme ). Mais dans l'absolu je me demande quelle est la solution à privilégier, et si l'alourdissement d'une feuille de style a un impact sur l'affichage final du site qui lui est lié.

Merci pour vos avis , et bonne continuation,

Natacha

Bonjour,

A mon humble avis, le "pourcentage principal" est le chargement des images, pour le reste du JS ou CSS n'influe d'après moi sur une portion néglideable du temps de chargement. La différence sera en somme toute minime !!
Tant qu'à faire je préférere le CSS où j'ai au moins l'impression de maîtriser ..."

reste que plus érudits que moi sauront faire la différence ...

Salut

Natacha a écrit :
Pour prendre un exemple précis, je suis en train d'essayer de virer les Javascripts d'un site (que je ne faisais que copier bêtement, n'entendant pas grand-chose à ce langage) en n'ayant recours qu'à la feuille de style pour suppléer à ce que faisaient les applets Java.
Il s'agit ici d'images réactives en CSS, avec deux images, servant de lien vers d'autres pages du site.

Attention de ne pas confondre Java et Javascript, ce sont deux choses différentes

Effectivement, le poids de la feuille de style est en général réduit par rapport à celui des images ... En particulier lorsqu'on a bien pensé et optimisé son code. Je n'en dirais pas autant à propos de JS, quand on voit le poids de certaines librairies à la mode (prototype & dérivés ...). En ce qui concerne la complexité de la feuille de style, ça ne posera pas de problème d'interprétation aux navigateurs. Par contre, plus c'est compliqué, plus il y a d'occasions de faire une bourde

Par contre, il y a quelque chose qui m'inquiète un peu dans ton message :

Natacha a écrit :
l'une des pages contient 12 titres-images faisant offices de liens (c'est une page "d'accueil"). 12 images différentes ; dans ce cas de figure, est-il vraiment conseillé de passer par la feuille de style

* ça n'a rien à voir avec la question que tu as posée, mais comment se présente ton code html ? Parce que si les images font office de liens, elles devraient se trouver dans le code html, et pas en arrière-plan dans la feuille de style ... Et dans ce cas-là, l'effet de rollover s'obtient à l'aide d'un petit bout de Javascript.
* je ne vois pas en quoi avoir 12 images différentes oblige à "paramétrer" 12 fois le rollover. Il doit y avoir moyen d'utiliser une classe pour réduire au minimum le code dédié pour chaque image.

Aloha,

ghost a écrit :

Tant qu'à faire je préférere le CSS où j'ai au moins l'impression de maîtriser ..."

Voui, c'est mon cas également

Sopo a écrit :


Attention de ne pas confondre Java et Javascript, ce sont deux choses différentes

Oups, je te crois volontiers

Sopo a écrit :
Effectivement, le poids de la feuille de style est en général réduit par rapport à celui des images ... En particulier lorsqu'on a bien pensé et optimisé son code. Je n'en dirais pas autant à propos de JS, quand on voit le poids de certaines librairies à la mode (prototype & dérivés ...). En ce qui concerne la complexité de la feuille de style, ça ne posera pas de problème d'interprétation aux navigateurs.

Hum, ok... c'est la question que je me posais.

Sopo a écrit :
Par contre, il y a quelque chose qui m'inquiète un peu dans ton message : * ça n'a rien à voir avec la question que tu as posée, mais comment se présente ton code html ? Parce que si les images font office de liens, elles devraient se trouver dans le code html, et pas en arrière-plan dans la feuille de style ... Et dans ce cas-là, l'effet de rollover s'obtient à l'aide d'un petit bout de Javascript.

Cette solution-là (---> image dans le code html + petit bouton Javascript), était ce que j'avais fait initialement. En utilisant un "prêt à programmer" (pour les nuls ) de Dreamweaver (en gros).
Quand j'ai commencé il y a trois jours à refaire mes pages de code html pour en faire du Xhtml, le validateur W3C me sortant des erreurs à répétition sur des lignes de code en Java (heuh... Javascript ? ), ça m'a pris le chou de voir que je n'arriverais jamais à corriger un code que je ne comprenais pas. D'où, recherche d'une solution avec les CSS.
Je me suis basée sur ce tutoriel : http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique, où l'image se trouve donc dans la feuille de style, et non dans le code html. Sauf qu'il ne s'agit pas ici d'un menu, mais d'images-titres, donc chacune est différente.

Sopo a écrit :
* je ne vois pas en quoi avoir 12 images différentes oblige à "paramétrer" 12 fois le rollover. Il doit y avoir moyen d'utiliser une classe pour réduire au minimum le code dédié pour chaque image.

Hum... je me suis posé la question...
J'ai procédé comme ça (attention, ça doit être un peu crade vu que je débute vraiment sur la question ) :

Au niveau du html (extrait) :

<h4 id="news"><a href="bianco_news.html">News</a></h4>
<h4 id="biblio"><a href="bianco_bibliographie.htm">Biblio</a></h4>

(etc.)

Au niveau de la feuille de style :

h4#news a
{
display: block ;
width: 238px ;
line-height: 55px ;
margin-left:110px;
color: #FFFFFF ;
text-decoration: none ;
font-size:10%;
background: url(Images/Bianco_bouton_news.gif) no-repeat 0 0 ;
}

h4#news a:hover
{
background: url(Images/Bianco_bouton_news.gif) no-repeat 0 -55px ;
}

h4#biblio a
{
display: block ;
width: 238px ;
line-height: 55px ;
margin-left:430px;
color: #FFFFFF ;
text-decoration: none ;
text-align:right;
font-size:10%;
background: url(Images/Bianco_bouton_biblio.gif) no-repeat 0 0 ;
}

h4#biblio a:hover
{
background: url(Images/Bianco_bouton_biblio.gif) no-repeat 0 -55px ;
}

(etc.)

En le relisant, là comme ça, je suppose que je dois pouvoir alléger les choses en définissant des valeurs générales pour <h4>.
Mais je me demandais surtout dans quelle mesure le fait qu'il y ait une multiplication de :

h4#news a
{...}
h4#biblio a
{...}
h4#le jardin de ma tante a
{...}

ne risquait pas d'être lourd à gérer / charger, au final.

Bonne soirée,

Natacha

Re.

Je suis rassuré L'image que tu utilises en CSS est bien un arrière-plan, elle ne remplace pas le texte dans la balise h4. Pas de problème, elle est à sa place dans la feuille de style.

Par contre, tu peux nettement alléger le code CSS :

h4 a {
   display: block;
   width: 238px;
   line-height: 55px;
   font-size: [b]10[/b]% /* C'est une faute de frappe ? */
   color: #fff;
   text-decoration: none;
}
h4 a:hover {
   background-position: 0 -55px;
}
#news a {
   background: url(Images/Bianco_bouton_news.gif) 0 0 no-repeat;
   margin-left: 110px;
}
#biblio a {
   background: url(Images/Bianco_bouton_biblio.gif) 0 0 no-repeat;
   margin-left: 430px;
}

Tu n'as besoin que de 2 lignes séparées par item du menu. Inutile de recopier les propriétés communes pour chaque élément du menu, il faut utiliser les règles de sélection CSS à bon escient. A priori, tu n'as besoin que de 2 lignes spécifiques par item.

Plus il y aura d'items, plus la différence de poids sera importante, évidemment.

Hop, hop :

Sopo a écrit :

Tu n'as besoin que de 2 lignes séparées par item du menu. Inutile de recopier les propriétés communes pour chaque élément du menu, il faut utiliser les règles de sélection CSS à bon escient. A priori, tu n'as besoin que de 2 lignes spécifiques par item.

Oui j'ai vu ça un peu tard . Merci pour le coup de patte (au passage), je vais résumer tout ceci de cette façon, ce sera bien mieux.
Pour le :

font-size: 10%;

Il s'agit d'un détail purement transitoire.
Je n'ai pas encore réussi à me décider sur la façon dont j'allais gérer les titres alternatifs à ces background-image , suite à mes lecture de l'article http://css.alsacreations.com/Accessibilite-du-Web/Remplacement-d-images-halte-au-display-none et du topic du forum Cacher du texte avec font-size et letter-spacing ?.
Pour le moment, le 10% suffit à dissimuler le texte dont la couleur est identique à celle d'une partie de l'image. Je peaufinerai ça quand le reste du site sera sur des rails acceptables .

a écrit :
Plus il y aura d'items, plus la différence de poids sera importante, évidemment.

Mais pas forcément plus qu'avec des applets Java, si j'ai bien compris.

Merci pour toutes ces précisions,

Natacha