MoreCSS, demandez plus à vos feuilles de style

Les feuilles de style CSS offrent de nombreuses possibilités pour mettre en page votre code HTML. Mais quel développeur ne s’est jamais dit “Dommage qu’un tel attribut n’existe pas en CSS!”. C’est ce que propose MoreCSS, une librairie Javascript vous permettant de disposer de propriétés supplémentaires tels que des pop-ups, des valeurs par défaut ou encore des infobulles…

MoreCSS est disponible au téléchargement sur cette page. Une fois rapatrié sur votre machine ou votre serveur, incluez le fichier MoreCSS.js dans votre document HTML. A noter, il est nécessaire que votre feuille de style CSS soit inclue avant le fichier Javascript:

<link rel="MoreCSS" href="style.css" />
<script type="text/javascript" src="MoreCSS.js"></script>

Dès lors vous pourrez bénéficier des nombreuses “propriétés” supplémentaires proposées par MoreCSS. Notons en vrac: tooltip, target, execute, opacity…La liste complète des propriétés disponibles ainsi que leur usage se trouve sur le site du projet.

D’une manière générale, MoreCSS s’utilise entièrement dans la feuille de style. On est donc ici en plein Javascript non-intrusif, ce qui est une plutôt une bonne nouvelle.
Petit exemple avec la propriété target:

a:active {
    target: popup;
    target-width: 800px;
    target-height: 600px;
}

Ici, nous avons défini l’ouverture de tous les liens actifs dans une pop-up de 800*600. Il s’agit bien entendu d’un exemple, implémenter ceci sur votre site serait une très mauvaise idée

A noter également, il est conseillé, pour des questions de performance, d’utiliser des sélecteurs uniques (IDs) plutôt que des classes.

Je note toutefois un problème de taille à l’utilisation de cette lib: Vous vous doutez bien qu’une propriété définie par MoreCSS, comme target, n’est pas valide w3c et ne passe donc pas au validateur. Un bon compris serait de créer une feuille de style à part et d’y mettre uniquement les propriétés MoreCSS. A vous de voir!