Les Super-Sélecteurs !

Par Andy Clarke et James Edwards

Andy Clarke et James Edwards reprennent le principe du sélecteur de style popularisé par Paul Sowden, tout en parvenant à le simplifier et à le rendre plus souple et efficace. Cet article explique comment un site bien conçu saura facilement s'adapter aux besoins de ses utilisateurs.

Dès sa sortie en 2001, le Sélecteur de Feuilles de Style de Paul Sowden a commencé à être téléchargé et utilisé par des milliers de designers et de développeurs, et a ouvert la voie à de nombreuses adaptations côté-client et côté-serveur.

Comme j'avais déjà utilisé le script de Paul sur beaucoup de projets, je me suis demandé comment étendre le système de sélection de style pour donner aux utilisateurs encore plus de choix, ou encore plus d'options d'accessibilité, donc je me suis dirigé vers mon vieux copain Brothercake pour mettre tout ça en forme, et c'est ainsi que le Super-Sélecteur est né.

La version originale

Bien que merveilleusement simple dans son implémentation, le script original de Paul n'était pas sans défaut.

La plupart des ancres qui lancent les fonctions de sélection sont présentes dans le balisage, ce qui pose problème si le Javascript n'est pas activé, sans compter que les ancres # qu'on trouve partout sont agaçantes et inutiles.

<a href="/traduction/lessuperselecteurs#" 

onclick="lancerFeuilleStyleActive('defaut');

return false;">Sélecteur</a>

La solution originale se basait aussi sur de multiples feuilles de style, utilisant des éléments <link/> et une approche sémantique du type "style_principal" / "style_alternatif" (ce qui accroît la charge sur le serveur), mais surtout, elle ne permettait pas de sélectionner différents styles pour différents supports, indépendamment les uns des autres.

Ne serait-il pas génial de pouvoir obtenir tout cela sans aucun balisage physique, rien qu'en utilisant un mélange de Javascript et de CSS ? Ne serait-il pas encore plus génial de pouvoir viser différents types de supports séparément, et de proposer aux utilisateurs une simple UI (User Interface en anglais ou Interface Utilisateur en français) à partir de laquelle ils choisiraient leurs préférences, qui seraient toutes enregistrées dans un cookie jusqu'à nouvel ordre ?

Eh bien c'est aujourd'hui possible : bienvenue dans le monde des Super-Sélecteurs !

Le concept

Le Super-Sélecteur est extensible à l'infini, il peut gérer n'importe quelle quantité d'options et de types de supports, et le tout à partir d'une seule source Javascript et CSS. Le principe est d'ajouter au moins un nom de class unique à la balise <body> de la page ; puis de définir les styles en utilisant les sélecteurs descendants.

Bien sûr, c'est une approche qui exige d'abandonner les sémantiques conventionnelles de « feuille de style » et de « feuille de style alternative », mais cela ne me dérange pas puisque :

  1. Beaucoup de navigateurs n'implémentent pas nativement de mécanisme de sélection de style.
  2. Ceux qui le font n'appliquent pas de manière permanente la sélection d'un style alternatif.

Création du menu

Avant de démarrer, jetons un œil au résultat final.

Si vous téléchargez les fichiers tout de suite, vous pourrez vous y référer au fur et à mesure de l'analyse de leur contenu.

Le code XHTML

Commencez par insérer des conteneurs de sélection vides, ici j'ai utilisé une <div> pour contenir le sélecteur.

<div id="selecteur-affichage"></div>

Pour chaque nouveau sélecteur, on peut ajouter un conteneur supplémentaire. Par exemple, un autre sélecteur pour les styles d'impression :

<div id="selecteur-affichage"></div>
<div id="selecteur-impression"></div>

...ou même pour les styles de projection.

<div id="selecteur-affichage"></div>
<div id="selecteur-impression"></div>
<div id="selecteur-projection"></div>

Les outils de sélection sont créés dans ces conteneurs uniquement si le Javascript est activé ; dans le cas contraire il ne restera que des conteneurs vides et sémantiquement neutres.

Le script

Il est très facile de personnaliser le script. Créez d'abord un nouveau formulaire de sélection, en définissant l'identité de son conteneur et le texte à afficher.

var selecteurAffichage =
  new selecteur(
  'selecteur-affichage',
  'Sélecteur d'affichage'
);

Puis vous rajoutez autant de class que vous le souhaitez, sans oublier leurs intitulés, qui s'appliqueront à ce sélecteur.

selecteurAffichage.defineClass('normal','Contraste normal');
selecteurAffichage.defineClass('renforce','Contraste renforce');

Ajout de nouveaux types de supports

Pour laisser à l'utilsateur le choix entre différents styles d'impression sans affecter la présentation à l'écran, ajoutez des options d'impression au script.

var selecteurImpression =
  new selecteur(
    'selecteur-impression',
    'Styles d'impression'
  );
selecteurImpression.defineClass(
  'normal','Normal'
);
selecteurImpression.defineClass(
  'reduit-sans','Réduit, sans serif'
);
selecteurImpression.defineClass(
  'agrandi-serif','Agrandi, serif'
);

D'autres types de supports peuvent aussi être ajoutés, par exemple pour les systèmes de projection ou pour les écrans miniatures des ordinateurs de poche.

var selecteurProjection =
  new selecteur(
    'selecteur-projection',
    'Styles pour projection'
  );
etc.

var selecteurMiniEcran =
  new selecteur(
    'selecteur-miniecran',
    'Styles pour écrans miniatures'
  );
etc.

La seule contrainte est que chaque nom de class doit être unique, même lorsqu'ils s'appliquent à différents types de supports.

La feuille de style

Une seule feuille de style peut contenir toutes les options et tous les types de supports sélectionnables par l'utilisateur. On peut appliquer n'importe quelle règle CSS à cette feuille de style, tout simplement en utilisant les sélecteurs descendants provenant des class dont nous avons parlé précédemment.

Exemple de styles d'affichage

@media screen
{
body {
background : #fff;
color : #666;
}

body.renforce {
color : #000;
}

body.hautevisibilite {
background : #000;
color : #ff0;
}
}

Exemple de styles d'impression

@media print
{
body {
font: 100% "Lucida Sans Unicode",verdana,sans-serif;
}

body.reduit-sans {
font: 80% "Lucida Sans Unicode",verdana,sans-serif;
}

body.agrandi-serif {
font: 120% "Times New Roman",times,serif;
}
}

D'autres styles peuvent être ajoutés en fonction des supports :

@media projection {
etc.
}

@media handheld {
etc.
}

Mise en forme des menus de sélection

Les menus sont construits à l'aide de balisage sémantique et accessible, et on peut leur attribuer les styles que l'on souhaite pour convenir au design du site. Voici à quoi le HTML ressemble pour chaque menu, et je vous laisse appliquer le style que vous voulez.

<form action="">
<fieldset>
<label for="selecteur-affichage">
<span>Styles pour affichage</span>
<select id="selecteur-affichage">
<option value="normal">Contraste normal</option>
<option value="renforce">Contraste renforcé</option>
<option value="hautevisibilite">Haute visibilité</option>
</select>
</label>
</fieldset>
</form>

C'est à peu près tout

Voilà ! Jetez encore un œil au résultat final : un sélecteur de feuille de style moderne, permettant la sélection indépendante de différents types de supports, et qui donne aux utilisateurs beaucoup plus de maîtrise sur le rendu de vos pages Web.

Ce principe peut s'étendre à l'infini, vous pouvez affiner les préférences individuelles en termes de polices, de couleurs, de mise en page ou d'orientation.

Une petite restriction

Le Super-Sélecteur ne fonctionne pas sous IE5 pour Mac (mais la page reste fonctionnelle).


Translated with the permission of A List Apart and the author[s].

Fiche technique

À propos de l'auteur

Andy Clarke alias Malarkey a une expérience de publicitaire et a créé en 1998 l’agence de design Stuff and Nonsense. En dehors des studios, Andy écrit aussi sur son site personnel, And All That Malarkey, et est aussi membre du jury des Web Standards Awards.

James Edwards alias Brothercake est un développeur web freelance basé au Royaume-Uni, et spécialisé dans les programmations DHTML avancées, ainsi que dans le développement de sites web accessibles. A la fois avocat passioné et sobre modérateur, il est aussi l’auteur du premier menu accessible.

Article du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Intermédiaire

Accessibilité

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site