Transformer un CSS compacté en CSS étendu

Publié le par Francisek

Qu'est-ce que c'est ?

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.

Qu'est-ce que ça fait ?

Le convertisseur va transformer certaines expressions CSS dans leur formes étendues, supprimer les sélecteurs vides et mettre en forme la feuille de style :

 

AvantAprè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é

Comment ça marche ?

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.

 

Publié dans CSS et Design

Commenter cet article

babochina 21/11/2005 06:13

Enormes merci
Grace a tes convertisseurs et simplifieurs et explications, j'ai pu modifier mon css (presque) comme je voulais,
Enormes reconnaissances

Francisek 23/11/2005 15:52

 ;-)

link $im@rd 17/10/2005 19:07

sa ne me sert pas trop..merci, mon css je le prefaire comme il est. Je vien regulierrement sur ton blog et je tien a te feliciter ! trop cool !

Del 09/10/2005 23:22

Hasard ou coïncidence !?! > NooooN ;-)
Tchào Francisek,
Merci pour mon design ( Big Jim, un blogueur m'y a pas mal aidé )
Pour mon blème d'affichage, c'est P.e.u.R. qui m'a donné la solution > supprimer : overflow:auto de .box-content
J'ai toujours tendance à m'affoler quand je n'arrive pas à faire ce que je veux & à poster partout pour avoir une solution :-? pas trés respectueux de ma part je crois _.
Merci pour ta réponse & visite chez moi.
A bientôt !

Del 09/10/2005 19:30

Salut Francisek,
Je viens poster ici car je n'arrive pas à trouver une solution à mon problème :-(
Ya le titre & contenu de mes box qui s'écrasent lorsque je fais défiler mon blog (sous FF surtout)
N'est-il pas fortement recommendé de supprimer toutes les "position:relative" dans le css ou ça vient d'ailleurs ?
Merci d'avance.
Francisek : Joli design que tu as là. Je n'ai rien décelé d'anormal dans l'affichage de ton blog, même pas sous FireFox. Le positonnement relatif ne semble donc pas en cause, as-tu toujours ce bug d'affichage après avoir vidé ton cache ?

sugi 10/09/2005 14:18

J'ai tester ça sur mon blog test...C'est génial tpn truc!^^ mais ca avait effacer mon image de fond...et curieusement mes polices étaient plus les mêmes^^
J'ai remis mon CSS ^^ Chez moi ca n'a pas supprimé mes commantaires!

merci pour tous ca francisek!^^

sugi