Transformer un CSS compacté en CSS étendu
Dans le CSS certains attributs ont une notation compactée et une notation étendue. On peut donc obtenir le même résultat en utilisant des écritures différentes.
Par exemple pour définir le fond d'un élément, il y a deux notations équivalentes:
background: url(http://idata.over-blog.com/0/00/74/30/degrade.jpg) repeat-x transparent top left;
équivaut à
background-image: url(http://idata.over-blog.com/0/00/74/30/degrade.jpg);
background-repeat: repeat-x;
background-color: transparent;
background-position: top left;
Les navigateurs utilisent généralement en interne le CSS sous forme étendue, l'utilisation de cette notation permet donc un affichage rapide.
Le convertisseur va transformer certaines expressions CSS dans leur formes étendues, supprimer les sélecteurs vides et mettre en forme la feuille de style :
| Avant | Après |
|---|---|
| color: #FFFFFF | color: rgb(255, 255, 255) |
| background: #FFFFFF url(mon_url) repeat scroll top | background-color: rgb(255, 255, 255); background-image: url(mon_url); background-repeat: repeat; background-attachement: scroll; background-position: top ; |
| padding: 0px; | padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; |
| margin: 0px 5px; | margin-top: 0px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; |
| border: 1px solid #CC3300 | border-width: 1px; border-style: solid; border-color: rgb(204, 51, 0); |
| border-bottom: 1px none #009933; | border-bottom-width: 1px; border-bottom-style: none; border-bottom-color: rgb(0, 153, 51); |
| td > .tclass { background: transparent } | td > .tclass { background-color: transparent; } |
| td , .tclass { background: transparent} | td { background-color: transparent; } .tclass { background-color: transparent; } |
| td {} | Supprimé |
Collez le contenu de votre feuille CSS dans le formulaire ci-dessous, et cliquez sur le bouton Convertir. Je vous recommande de sauvegarder votre fichier CSS original avant de le remplacer.