[résolu] N'utilisez pas @import

Suite à cet article, j'ai cru comprendre qu'utiliser @import était déconseillé car il ne permet pas de charger simultanément les feuilles de style.

Néanmoins, je vois encore pas mal de site de "bons" webmaster qui utilisent @import.

Au final? vous utilisés "link" ou "@import"?


Merci

Lepote
Modifié par Lepote (11 Jan 2010 - 13:15)

Lepote a écrit :
Suite à cet article, j'ai cru comprendre qu'utiliser @import était déconseillé car il ne permet pas de charger simultanément les feuilles de style.

En fait la situation dépend du navigateur. Il n'y a rien qui, dans l'absolu, empêche de traiter @import aussi efficacement que link (sauf @import dans un fichier CSS, là il faut charger le CSS avant de pouvoir charger les feuilles de styles importées). C'est surtout que les implémentations actuelles (dans IE notamment) posent problème, et donc les experts en performances côté client déconseillent d'utiliser @import.

Lepote a écrit :
Néanmoins, je vois encore pas mal de site de "bons" webmaster qui utilisent @import.

Les essais sur le sujet, par Steve Souders, sont assez récents (mi-2009, de mémoire). Donc forcément il y a plein de sites qui utilisent @import. De plus, tout le monde n'est pas au courant des moindres détails d'optimisation front end. L'expertise en optimisation front end, c'est un métier à part, même si tout bon intégrateur web devrait avoir les bases et même un peu plus.

Lepote a écrit :
Au final? vous utilisés "link" ou "@import"?

@import en développement, link en production. En concaténant les feuilles de styles dans un seul fichier.

En développement, j'ai en général un fichier profile-all.css comme ceci:

/* =======================
   WEBSITE OR PROJECT NAME
   CSS profile: all styles
   ======================= */

/* Note:
  This profile provides the list of CSS files to be concatenated and minified
  in one single CSS file. The profile stylesheet should be named
  `profile-<token>.css`, while the production-ready stylesheet should be
  simply `<token>.css`.
*/

@import "base.css";
@import "global.css";
@import "content-generic.css";
@import "content-specific.css";

Tant que je ne suis pas prêt à passer en production, je fais un lien symbolique de all.css vers profile-all.css (ou une copie simple de profile-all.css, renommée all.css). Pour le passage en production, je concatène les fichiers mentionnés dans profile-all.css, en respectant l'ordre donné, et je passe le tout à la moulinette de YUI Compressor, essentiellement pour retirer les commentaires (avec option un bloc de déclarations par ligne), ce qui me donne mon fichier all.css optimisé.

Côté HTML, j'ai simplement:

<link rel="stylesheet" href="all.css">

(syntaxe HTML5, pour info).

Il y a bien sûr d'autres manières de faire.
Modifié par Florent V. (09 Jan 2010 - 15:42)

Florent V. a écrit :

Côté HTML, j'ai simplement:

<link rel="stylesheet" href="all.css">

(syntaxe HTML5, pour info).

Pas de media spécifié? De mémoire, je pense que tu le fais depuis la feuille de styles. Personnellement, je favorise la distinction dès l'import, quitte à faire un base.css regroupant les styles communs aux différentes feuilles.

Benjamin D.C. a écrit :
Pas de media spécifié?

Pour des sites avec essentiellement des styles screen et un peu de styles print, non, je préfère garder les styles ensemble:

#nav {...}
@media screen {
  #nav {...}
}
@media print {
  #nav {...}
}

Ça évite de jongler entre plusieurs feuilles de styles pour styler un même élément, et ça évite les oublis lors de la maintenance (genre je modifie les styles screen en prodondeur et je zappe complètement les styles print).

De plus, si tu veux pouvoir concaténer tous les styles ensemble, ben tu es obligé de gérer les déclarations de média dans la feuille de styles elle-même avec des @media, et pas dans les syntaxes d'appel (link ou @import).

À noter enfin que même si certaines feuilles de styles sont appelées pour un media print, ou handheld, ou screen avec conditions (media queries) qui ne s'appliquent pas au mode de restitution actuel... eh bien le navigateur va charger ces fichiers quand même. Donc aucun gain à séparer les médias, au contraire.

Merci pour toutes ces précisions

Lepote