Display:inline

L’adage veut que les outils les plus efficaces sont souvent les plus simples. Le site Primer CSS ne fait qu’une chose, mais il le fait bien : collez le code-source de votre page HTML dans le bloc prévu à cet effet, cliquez sur le bouton, et le site vous en extrait tous les id et les classes dans une feuille CSS qui n’attend plus que vous.

Simple, mais efficace

Ainsi, le code HTML suivant :

<div id="map">

	<div id="top-line">
		<div class="wrapper"></div>
	</div>

	<div id="header" class="wrapper">

		<div class="smallCol">

			<a name="top"></a>
			<ul id="keywords">
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
			</ul>

		</div>

	</div>

</div>

Vous donnera les sélecteurs css suivants :

/* CSS Generated by Primer - primercss.com */

div#map {

}

div#top-line {

}

div.wrapper {

}

div#header {

}

div.smallCol {

}

ul#keywords {

}

ul#keywords li {

}

Pas vraiment utile, me direz-vous ? Il est vrai qu’on construit souvent un site simultanément en HTML et en CSS – on a rarement un fichier HTML complet avec classes et ids sans CSS.

Mais cet outil peut se révéler fichtrement utile pour nettoyer les feuilles de style d’un site en place depuis un certain temps, dans lequel se côtoient les classes CSS disparues et les id manquant à l’appel… Un petit coup de Primer CSS, et hop, vous disposez d’une feuille de style propre dans laquelle recopier les seuls styles qui vous sont utiles.

Qui plus est, vos sélecteurs apparaîtront dans le même ordre que dans votre document HTML. Allez, il ne manque plus que l’indentation hiérarchique de ces sélecteurs, et ça sera parfait !

Dans le même genre

Pour nettoyer vos feuilles de styles de leurs sélecteurs inutilisés, vous pouvez également passer par l’extension Dust Me Selectors pour Firefox, qui vous permettra de les repérer d’un clic.

Il est même possible de tester un site dans son intégralité, afin de ne pas effacer les sélecteurs les moins usités par erreur.

Pas encore testé, mais ça a l’air efficace !

Be Sociable, Share!

•