Discussion :

[JefReb]

Bonjour,
Après avoir parcouru les tutoriels CSS, je n'ai pas trouvé la réponse sur la façon la moins gourmande en ressource pour lier une feuille de style.
En l'occurrence, je désire faire un reset CSS avec la feuille de style d'Eric Meyer plutôt que celle par défaut que l'on trouve sur le net.

3 solutions possibles (peut être plus ...):

1) faire un link dans la page web

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<link rel="stylesheet" type="text/css" href="/css/default-meyer.css" />
<link rel="stylesheet" type="text/css" href="/css/mon-style-a-moi.css" />

2) Dans le code CSS de mon-style-a-moi.css, et en première ligne:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
@import "default-meyer.css";
...
... mon code css
...

3) Directement à la suite de la feuille de style d'Eric, mettre mon propre style css, et ne lier qu'une seule feuille de style externe.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
...
...
/* fin de la feuille de style d'Eric */
...
...
ICI mon style 
...
...

Juste un petit commentaire pour m'éclairer sur ce qu'il faut faire ou ne pas faire pour améliorer ou plomber les performances.
Jef

[elfamine]

Pour gagner en performance... le principe en gros est de réduire le nombre de requêtes; soit le nombre de fichiers. Concrètement au lieu de demander à ce qu'on récupère "default-meyer.css" et "mon-style-a-moi.css" l'ideal serait de les regrouper dans un seul fichier disant..."main.css" et compresser ce main.css ne serait pas une mauvaise idée; enlever les espaces et les sauts de ligne et les commentaires (il me semble qu'il y a des outils en ligne qui permettent de compresser ses fichier css et javascript d'ailleurs).

Moi j'opterais pour la solution 3

[JefReb]

Merci Elfamine, Je prends note et j'attends d'autres avis.
Pour ma part, je penchais pour la solution 3 aussi.
Jef

[Muchos]

Et pourquoi ne pas modifier le code original?

[JefReb]

Le code original??
Je ne comprends pas cette réponse. Il s'agit de faire un reset du css de façon à ce qu'il n'y ait pas de surprise en fonction des navigateurs utilisés.
Ainsi, par exemple la suppression d'un retrait à gauche en utilisant un margin-left:0; ne marche pas forcément si le navigateur utilise padding au lieu de margin.

Le reset du CSS se place donc avant son propre style.
On peut ne pas faire de reset, mais je ne comprends pas la réponse de Muchos, désolé.

[NoSmoking]

Bonjour,
il faut bien dire que dans le fichier "reset" dont tu parles il y aura bien plus de la moitié des balises "resetées" que tu n'utilisera peut être jamais.

L'idée est donc de mettre en place ton propre "reset" en fonction de ta demande et de le mettre dans ta feuille de style principale.

D'un autre coté je dois avouer que 1135 octets de plus c'est peanuts par rapport à des images intégrées dans pas mal de documents sans être optimisées ou qui sont redimensionnées.

C'est peut être une question à se poser mais est ce la principale?