Link ou @import ?

élucubrations XHTML, CSS
et Standards web

Recherche par mot-clés

CSS · XHTML · Standards W3C · Webdesign · Accessibilité · Référencement · JavaScript · PHP · Humour

AlsaQuiz

A retenir

Syndication

Rédacteurs du blog

Partenaires

Poster

Vaut-il mieux lier sa feuille de style avec la balise LINK ou utiliser la règle @IMPORT ?

C'est une question fréquemment posée...

La balise Link :

Link est une balise HTML qui n'est pas uniquement prévue pour lier des feuilles de styles.
Elle s'accompagne des propriétés et valeurs suivantes dans le cas d'une liaison CSS : "rel='stylesheet'"et "type='text/css'", "media= le type de média souhaité", voire de "title" dans le cas de feuilles de style persistantes et alternatives.

Exemple :

<link rel="stylesheet" href="/styles/habillage.css" type="text/css" media="screen" />

La règle @import :

@import est une propriété CSS2 qui doit être suivie de l'URL d'un fichier qui contiendra des styles à appliquer en plus de la feuille de style en cours. On peut ajouter, de façon optionnelle, une liste de médias.

Exemple :

<style type="text/css">
  @import url(/styles/habillage.css);
</style>

ou :

<style type="text/css" media="print">
  @import url(impression.css);
</style>

Cette propriété permet en outre d'importer des feuilles de style dans d'autres feuilles de style. Cela offre des possibilités pour créer des feuilles de style dynamiques sans avoir à recopier plusieurs fois le meme code.

En pratique

En pratique, le résultat est exactement le même (après avoir testé sur plusieurs sites), mais il y'a une petite subtilité qui peut se révéler intéressante...

En effet, @import (CSS2) n'est pas reconnu par les très vieux navigateurs qui ne sont pas encore aux normes au niveau des CSS (par exemple Netscape 4).

Par conséquent, en important sa feuille de style avec @import, les styles seront appliqués partout sauf sur ces navigateurs dinosaures.

Quel intérêt ? Tout simplement de permettre aux utilisateurs de ces dinosaures de consulter le site sans trop de problème. En effet, sans feuille de style le site reste mieux visible qu'avec des styles interprêtés n'importe comment.

En clair, avec @import, un Netscape 4 aura une page "brute", sans style, plutôt qu'une horreur illisible. C'est donc une technique recommandée pour l'interopérabilité et la compatibilité ascendante.

Par contre, je n'ai pas encore trouvé un moyen de spécifier des feuilles de styles alternatives avec la règle @import...

Par Raphael GOETTER - samedi 25 septembre 2004 à 17:39

Astuces - #64 - Lu 28580 fois - Intérêt du billet: 3.27(37) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le samedi 25 septembre 2004 à 18:23, par docLegi :: #

On peut utiliser la règle @import dans une feuille de style, comme tu l'indiques. Donc si tu utilises la balise link dans ta page pour lier les feuilles de style, qui ne contiennent rien d'autre que des règles @import, tu pourras mettre en place des styles alternatifs, mais ils ne seront quand même pas reconnus par Netscape 4. C'est une technique qui est notamment utilisé sur Wired News ( www.wired.com/ ), avec des styles alternatifs pour la taille du texte.

Le samedi 25 septembre 2004 à 18:59, par Fabrice Bonny :: #

J'utilise le tag link avec un stylage du body minimal pour NC 4 et autres vieilleries et tout le reste entre @media ... {}. Beaucoup plus souple: permet de virer l'ignoble fond gris de NC 4, par exemple.

Le samedi 25 septembre 2004 à 20:20, par Laurent Denis :: #

Il y a un autre aspect de @import et de <link> qui devrait être évoqué ici, je crois : l'attribut title qui différencie les feuilles de styles permanentes ou non (c'est à dire appliquée en plus d'un style alternatif ou ignoré lors de l'application de celui-ci, par exemple).

Le samedi 25 septembre 2004 à 20:22, par Laurent Denis :: #

Ah, encore un de mes remords : faut-il signaler aussi en XHTML la feuille de style appliquée avec <?xml-stylesheet type="text/css" href="..." ?> ?

Le samedi 25 septembre 2004 à 21:40, par Raphael :: site :: #

@Fabrice > L'idée du @media est intéressante en effet. Il faudra m'expliquer pour cette histoire de fond gris NS4.

@Laurent : "Il y a un autre aspect de @import et de <link> qui devrait être évoqué ici, je crois : l'attribut title qui différencie les feuilles de styles permanentes ou non"
> Oui j'en parle justement à propos de la balise Link.

"<?xml-stylesheet type="text/css" href="..." ?>"
> Ne connaissant pas les tenants et aboutissants (avantages, inconvénients, compatibilités) de cette syntaxe, j'ai préféré ne pas l'évoquer.

Le dimanche 26 septembre 2004 à 08:46, par Laurent Denis :: #

Excuses-moi pour ma lecture un peu rapide, Raphael. En fait, tu ne mentionnes pas "title" pour <style ... >@import : il faudrait ajouter qu'il s'y utilise exactement comme pour <link>.

Le dimanche 26 septembre 2004 à 08:59, par Raphael :: site :: #

@Laurent > intéressant, c'est ce que je cherchais justement.
En pratique, où placer le title si on utilise @import et non Link ? Sur la balise <style> ?

Le dimanche 26 septembre 2004 à 11:43, par Laurent Denis :: #

Je le faisais dans mon précédent blog blog-and-blues.com/ où je m'étais amusé à multiplier les styles alternatifs:
<style type="text/css" media="screen" title="Petit Matin">@import url(/styles/blog7.css);</style>

Le dimanche 26 septembre 2004 à 18:58, par Raphael :: site :: #

@Laurent > ok, donc on est obligé d'ouvrir à chaque fois une balise <style> pour chaque style alternatif. C'est un peu dommage. Cela aurait été intéréssant directement dans la règle @import.

Le dimanche 26 septembre 2004 à 23:41, par Bobe :: #

La règle-at @import ne fait qu'importer (wha, je suis en forme ce soir :D), elle ne déclare pas une feuille de style. Il n'y a donc pas besoin de lui attribuer un titre (Elle dépendra du titre de la feuille parente).

Le lundi 27 septembre 2004 à 05:12, par Laurent Denis :: #

@Bobe > On ne parlait pas d'un @import placé dans une feuille de syle externe, mais dans un <style...>. C'est le <style> qui a un attribut title. Et c'est cet attribut qui en fait une feuille non persistante.

@Raphael > Va voir le code source de ma page ci-dessus : les feuilles alternatives ne peuvent être déclarées qu'avec <link>. Le title de la feuille par défaut en <style...>@import ne sert qu'à l'empêcher d'être persistante.
Voir devedge.netscape.com/view... pour les détails sur le rôle de title.

Le lundi 27 septembre 2004 à 12:11, par Groumphy :: #

Si j'ai tout bien suivis,

PAS BIEN :
[code]
<style type="text/css">
@import url(impression.css) print;
@import url(screen.css) screen;
/* etc .. */
</style>
[/code]
BIEN :
[code]
<style type="text/css" media="print">
@import url(/styles/impression.css);
</style>
<style type="text/css" media="screen">
@import url(/styles/screen.css);
</style>
[/code]

Ou alors j'ai rien compris du tout.

Le lundi 27 septembre 2004 à 12:51, par Bobe :: #

Laurent Denis: Oui, c'est bien ce que j'ai dit.
On a beau être dans un élément STYLE, ça n'en reste pas moins une importation. Le contenu de l'élément STYLE *est* une feuille de style. Et dans cette feuille de style (dans le cas dont on discute) est réalisé uniquement un import d'une autre feuille de style.
C'est valide, rien n'empèche de le faire et ça marchera, mais c'est pas très logique.

Le lundi 27 septembre 2004 à 16:09, par ElMoustiko :: site :: #

Je me posais une question, est ce qu'en utilisant @import la feuille de style se met dans le cache de la meme facon qu'avec link ?

Le lundi 27 septembre 2004 à 18:01, par Fabrice Bonny :: #

@Raphael > en fait, je fais un link tout à fait normal vers une CSS contenant un body {} définissant au moins les couleurs et la famille générique de police. Sous Linux, par exemple, mais je crois que certaines versions Windows sont concernées, on a du noir sur gris en police serif, ce qui n'est pas terrible. Tout le reste de la CSS est entre @media.

Le vendredi 7 janvier 2005 à 11:44, par Eric :: #

Une petite question concernant le chemin relatif.
J'essaie de lier une feuille de style qui se trouve à un niveau plus haut que mon fichier index.php mais sans succès (elle n'est pas prise en compte). Apparamment on ne peut que lier une feuille de style dans le même dossier (ou dans un sous-dossier) que là ou se trouve index.php.
Avez-vous des idées à ce sujet?