La création d’une feuille de style alternative CSS est un moyen utile de répondre à de nombreux besoins différents de vos utilisateurs. Mieux encore, les intégrer dans votre page est aussi simple que d’ajouter un seul mot à une balise déjà familière.
Table des matières
Préféré, persistant et alternatif
Créer une feuille de style peut être un exercice amusant de créativité et de design. Ce qui est encore plus amusant, c’est lorsque vous créez une feuille de style différente pour le même site et découvrez à quel point il est facile de créer et de modifier l’apparence de votre page. Avec quelques commandes simples, vous pouvez utiliser cette flexibilité au profit de vos visiteurs.
Par exemple, vous voudrez peut-être avoir un look particulier pour votre site sur un navigateur Web, mais une mise en page totalement différente pour les utilisateurs d’iPhone afin que votre contenu soit plus lisible sur un petit écran. Parfois, les concepteurs souhaitent que les sites aient une apparence différente selon le pays où le site est consulté, ou même l’heure de la journée ou la météo. Vous pouvez simplement utiliser une feuille de style alternative CSS juste pour montrer vos talents de concepteur, comme les milliers de versions du site Web CSS Zen Garden.
Si vous allez ajouter une alternative à la feuille de style CSS fournie avec votre site, il y a trois mots à garder à l’esprit, comme décrit sur le blog de conception merveilleusement informatif AListApart:
Persistant: Ces styles sont ceux que vous souhaitez sur votre site quoi qu’il arrive. Il peut s’agir d’images de logo, de filigranes et d’informations de copyright, ou même d’une police particulière que vous aimez. Souvent, les marges et autres éléments de mise en page restent cohérents par l’ajout de styles «persistants». Le code d’une feuille de style « persistante » est très simple: c’est le code par défaut pour tout lien de feuille de style CSS:
<link rel="stylesheet"type="text/css" href="https://web-design.lovetoknow.com/persistent.css" />
Préféré: La feuille de style préférée est votre premier choix, comme son nom l’indique. À moins qu’un facteur extérieur tel que la plate-forme, le type de navigateur ou le choix du spectateur ne modifie le CSS, c’est celui qui est utilisé par le navigateur.
Le code pour désigner «préféré» n’est pas tout à fait intuitif. C’est la même chose que d’habitude, avec l’ajout de l’attribut « title »:
<link rel="stylesheet"type="text/css" href="https://web-design.lovetoknow.com/preferred.css"title="MyPrefSheet" />
Notez que le mot «préféré» n’est inclus que dans le nom de la feuille – il ne fait pas partie du code. En désignant le « lien rel » comme « feuille de style », cela devient le code préféré, et en lui donnant un « titre », vous autorisez le navigateur à le distinguer des autres choix de feuilles de style que vous êtes sur le point d’ajouter.
Alterner: Vous pouvez ajouter autant de feuilles de style alternatives que vous le souhaitez. Pour en désigner un, le code change légèrement:
<link rel="alternate stylesheet"type="text/css" href="https://web-design.lovetoknow.com/alternate01.css"title="FirstAltSheet" />
En fait, vous n’avez même pas besoin de les créer sous forme de feuilles complètement séparées. Tout style particulier peut recevoir la même balise «titre» et être regroupé lorsque la feuille de style change. La seule chose qui devra être précise est le « href », qui peut conduire à un fichier dans le même répertoire (comme indiqué dans ces exemples) mais pourrait en fait créer un lien vers n’importe quelle autre feuille de style n’importe où sur le Web.
Choisir une feuille de style alternative CSS
Si vous souhaitez que votre spectateur puisse modifier une feuille de style à tout moment, les choses se compliquent un peu. Le navigateur doit vérifier tous les liens de la page pour voir lesquels renvoient au CSS, puis quel CSS la page affiche actuellement, et enfin laisser le spectateur choisir d’implémenter un ensemble différent de styles et de les afficher. Parfois, cela implique le téléchargement (ou le préchargement) de plus d’images ou de contenu, et nécessite en général une bonne quantité de javascript.
A List Apart a un tutoriel très complet sur la façon de faire ce travail gratuitement. Vous pouvez également en savoir plus sur l’utilisation d’une feuille de style alternative CSS sur le site World Wide Web Consortium. Ce site contient également quatorze feuilles de style différentes. En utilisant ces ressources, vous pourrez ajouter la puissance du choix de style à votre propre site en un rien de temps.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
