Mes impressions sur le web, les standards et autres…


Jeudi 13 novembre 2003

Sélecteurs et CSS3

Ahh, les feuilles de style de niveau 3… La majorité d’entre nous piaffe d’impatience dans l’attente de leur passage en tant que recommandation officielle du W3C. Malheureusement, il reste encore beaucoup de travail et ce n’est donc pas pour tout de suite, et je ne parle même pas après cela de leur intégration rapide dans les navigateurs (suivez mon regard).

Par chance, il existe un navigateur à la pointe du respect des standards, et qui a même déja intégré quelques fonctionnalités des CSS3, ce qui me permet d’en profiter honteusement, quitte à ce que mes feuilles de style ne soient pas valides. Ce navigateur, vous l’aurez deviné, est Mozilla.

Parmi ces possibilités offertes en prime-time, on trouve les sélecteurs. Cette partie des CSS3 est à l’état de Candidate Recommendation, ce qui signifie qu’on peut considérer son contenu comme définitif. Ce qui m’interesse en l’occurence, ce sont les nouvelles possibilités offertes avec le sélecteur d’attribut. On connaissait déja les sélecteurs d’attribut : E[foo] pour cibler un élément E ayant un attribut foo, [att~=val] et [att|=val] (personnellement, je n’ai jamais trouvé ces deux là très utiles dans le contexte d’un document (X)HTML). Avec les CSS3, nous en aurons quelques uns de plus, et franchement plus utiles : Substring matching attribute selectors (je trouve pas la bonne traduction). Je vous invite à aller lire le lien donné, mais en gros, il sera possible de cibler un élément dont l’attribut att commence par une valeur val, contient la valeur val (sans besoin de séparation par des espaces ou autre) ou se termine par une valeur val. J’utilise déja ces possibilités dans ma feuille de style de base, pour ajouter l’icône d’enveloppe après un lien vers une adresse en mailto et ajouter une icône de dossier zip après les liens pointant sur une archive zip :

a[href^="mailto:"]:after  { content: " " url("/Icones/email"); }
a[type$="zip"]:after      { content: " " url("/Icones/zip"); }

Franchement excellent, et je regrette presque qu’ils ne soient pas allés plus loin dans l’utilisation des expressions régulières, enfin il est vrai qu’il faut bien trouver une juste limite entre l’ajout de possibilité et le besoin de garder un fonctionnement relativement simple des feuilles de style.

Publié à 18h25

Catégorie :

Vos réactions, opinions, insultes…

Rétroliens

Faire un rétrolien sur ce billet : [xxxxxxxx]

Commentaires

Pas de commentaire actuellement

Un ch’tit biscuit ?
  • Les champs email et site sont facultatifs
  • Les URLs commençant par [protocole]://[protocole] correspond à http, https, news, irc, ftp, … sont rendues activables automatiquement. Votre adresse email ainsi que d’éventuelles adresses email présentes dans le corps du commentaire sont également rendues activables et encodées pour tromper les aspirateurs d’adresse email.
  • Pour spécifier une URL locale au site, vous pouvez utiliser local comme protocole à mettre à la place de http et omettre le nom de domaine dans l’URL.
    Exemple : local://2005/08/22/Nom-de-billet/.
  • Usez et abusez de la possibilité de prévisualiser votre commentaire pour vérifier qu’il est correctement rédigé et contient le moins possible de fautes d’orthographe. Évitez en outre le style SMS, merci d’avance. Prévisualiser votre commentaire peut également vous permettre de voir si de nouveaux commentaires sont apparus entre temps.
  • Si vous spécifiez l’adresse de votre site dans le champs texte prévu à cet effet, le script se chargera automatiquement d’aller récupérer sur votre site la langue utilisée dans vos pages, soit via l’en-tête HTTP Content-Language, soit en récupérant le contenu de l’attribut xml:lang ou lang sur l’élément html. Vous n’avez indiqué d’aucune façon la langue utilisée dans vos pages ? Corrigez ça nom di diou !
  • Des options de mise en forme des commentaires feront peut-être un jour leur apparition.


Site créé et maintenu par Aurélien Maille aka Bobe. Toutes les heures sont au format CEST.
Revenir à l’accueil – Zone de développement – Informations et accessibilité – CC licensed CC Licensed