28172 sujets

CSS et mise en forme, CSS3

Comment gérer l'appel de mes feuilles de style ?

Bonjour à tous,

Je me pose quelques questions sur la façon dont le HTML appelle et lit les feuilles css liées.
Je m'explique:
"L'ensemble de mes fichiers CSS est dans un répertoire spécifique nommé avec originalité 'css' Smiley cligne . Dans ce répertoire on peut distinguer 2 catégories de feuilles de style, celles qui gèrent le style général du site (ce qui s'applique à l'ensemble des pages), et celles qui sont spécifiques à quelques pages seulement.

J'ai choisis une méthode différente pour appeler les css des 2 catégories.

Pour le style général j'utilise un include (en php donc) qui m'évite d'avoir à faire un link par feuille associée (avec le risque d'en oublier une)
Voici le contenu de mon fichier css.inc.html qui regroupe les feuilles :
	<link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/css/grille.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="/css/formulaire.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="/css/calendrier.css" media="screen" />


Pour les feuilles de style supplémentaires j'effectue un link. (voir le code ci-dessous)
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>{page.titre}</title>
    {FILE "include/css.inc.html"}
    {FILE "include/js.inc.html"}
    <script type="text/javascript" src="include/js/page_003.js"></script>
    [b]<link rel="stylesheet" type="text/css" href="/css/page_003.css" media="screen" />[/b]
</head>


Est-ce que cette technique est la bonne?

Je pensais au début ne faire qu'un dossier en include où je mettais tous mes feuilles mais je crois que le navigateur va toute les lire dans ce cas même celles qui ne servent pas pour une page HTML donnée.

Je ne sais pas s'il existe d'autres méthodes pour alléger la charge du navigateur au chargement des CSS?

Merci

edit - dsl le texte était incomplet, j'ai appuyé sur 'Entrée' pendant la rédaction.
Modifié par General_Batton (10 Apr 2012 - 16:32)
Désolé le texte était incomplet, j'ai appuyé sur 'Entrée' pendant la rédaction. Cela doit être plus compréhensible maintenant. Smiley lol
Pourquoi ne regroupes-tu pas toutes tes feuilles de style en une seule ? Ce sera à la fois plus simple et mieux en termes de performances (une seule requête HTTP contre 5 ou 6 avec ta façon de procéder). Autrement dit, n'ajoute de feuilles de style supplémentaires que s'il s'agit de feuilles de styles conditionnelles destinées à IE (ou à telles versions d'IE).

Soit dit en passant, ce que je dis pour les feuilles de style est également valable pour les fichiers JavaScript (vu que tu dois procéder de la même manière, si je comprends bien la logique de ton code).
Modifié par Victor BRITO (10 Apr 2012 - 17:06)
Bonjour Victor,

a écrit :
Pourquoi ne regroupes-tu pas toutes tes feuilles de style en une seule ?


Peut-être en effet que c'est meilleur en termes de performances, je n'avais jamais réfléchis à ça. Mais ça voudrait dire que je vais avoir une feuille CSS par type de page différente. Par contre ça doit vite devenir illisible pour le développeur, ça risque de faire beaucoup de lignes.

Mais ta réflexion m'a donner une idée : créer un petit outil qui me permet de scanner une page html et qui récupère tous les attributs 'class' et 'id' et n'ajoute qu'eux dans le fichier css. Cela permettrait d'avoir un fichier le plus léger possible et ce de manière automatique.

Bref à creuser...
General_Batton a écrit :
Par contre ça doit vite devenir illisible pour le développeur, ça risque de faire beaucoup de lignes.

Tu peux, heureusement, commenter tes CSS. Quant au nombre de lignes, ça dépend : en factorisant le plus possible, on parvient à limiter le nombre de lignes de code.
General_Batton a écrit :
Mais ta réflexion m'a donner une idée : créer un petit outil qui me permet de scanner une page html et qui récupère tous les attributs 'class' et 'id' et n'ajoute qu'eux dans le fichier css. Cela permettrait d'avoir un fichier le plus léger possible et ce de manière automatique.

Bref à creuser...

À ta place, je ne me casserais pas la tête.
Oui je vais essayer de commenter le plus possible mon CSS pour m'y retrouver plus tard.

a écrit :
À ta place, je ne me casserais pas la tête.


Ce n'est pas pour le plaisir de me casser la tête, mais je suis encore en formation et une telle application agrémenterait bien mon rapport de projet pour la partie VB. Smiley cligne

Et puis un tel outil pourrait me servir tout le temps après. Suis sûr que ça va plaire à mes formateurs.
Sujet clos
Aller à