Chez momo-fr

Less CSS : simplifiez-vous les styles !

Less CSS : simplifiez-vous les styles

Les CSS évoluent, avec la dernière version 3 on trouve de nouvelles fonctionnalités.

Actuellement tous les navigateurs ne supportent pas les CSS3, Explorer 8 et 9 par exemple (le plus courant que le web) on est donc, comme toujours confronté à la portabilité des styles.

Une des fonctions les plus utilisée des CSS 3 est la notion de border radius (angle arrondi) mais elle est encore implémenté de manières différentes sur Mozilla, Safari, Opéra… de quoi ce dégouter des styles CSS3. Cela implique pour une seule fonctionnalité plusieurs styles avec préfixes selon le navigateur, par exemple :

-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;

A terme tous les navigateurs doivent supporter la règle standard mais ce n’est pas encore le cas. On cherche donc actuellement une solution pour synthétiser ces définitions sous une seule forme compréhensible par tous. C’est là qu’intervient Less CSS, ce langage permet de regrouper les attributs CSS dans un metalangage que l’on injecte dans les styles CSS, un exemple rapide (description Less + feuille de styles CSS) :

@the-border: 1px;
 @base-color: #111;
 .rounded-corners{
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     border-radius: 8px;
}
 #header {
     color: @base-color * 3;
     border-left: @the-border;
     border-right: @the-border * 2;
     .rounded-corners;
     a:link, a:visited{
         border-bottom: @the-border solid @base-color;
    }
}
 #footer {
     color: @base-color + #111;
     .rounded-corners 
}
 @the-border: 1px;
@base-color: #111;
 .rounded-corners{
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     border-radius: 8px;
}
 #header {
     color: @base-color * 3;
     border-left: @the-border;
     border-right: @the-border * 2;
     .rounded-corners;
     a:link, a:visited{
        border-bottom: @the-border solid @base-color;
    }
}
 #footer {
     color: @base-color + #111;
     .rounded-corners
}

Ce qui correspond en description standard CSS :

#header {
     color: #333;
     border-left: 1px;
     border-right: 2px;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     border-radius: 8px;
}
 #header a:link, #header a:visited{
     border-bottom: 1px solid #111;
}
 #footer {
     color: #222;
     moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     border-radius: 8px;
}

Lisez l’article complet sur Clerver Age à ce sujet.

Sources : Alsacréations, Clever Age, CSS3 Info

Vous aimerez aussi

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Plus de résultats...

Generic selectors
Corespondance exacte
Rechercher dans le titre
Rechercher dans le contenu
Post Type Selectors

Autres catégories du Blog

Partager cette publication