Vous êtes à : Accueil > Nos techniques > Personnaliser avec css

Passer le menu Aller au pied de page

Licences Joueb English version Accessibilité

Les technique de css de micr0lab

Cette page technique cite les sources et astuces de micr0lab concernant le C.S.S.

Sommaire : Comment vous faîtes ?CSStidy et les media queriesspritesPop-upTechniques passées

Et le css de ce site, il est conçu comment ?

Il est rédigé en less et compilé vers du css à l’aide de lessphp. Il est ensuite nettoyé et compressé avec CSSTidy (dont vous pouvez trouver l’équivalent en ligne à http://www.cleancss.com/) puis « corrigé et commenté » avant sa mise en ligne.

Il contient une large partie de l’incroyable feuille « reset.css » de Eric Meyer et de « normalize.css » de Nicolas Gallagher, facilement integré grâce à une feuille less qui les regroupe.

Il a grandement bénéficié de la lecture de CSS avancées, vers HTML5 et CSS3 de R. Goetter. Les conseils du W3QC, le service de validation du W3C et une table des support des principaux sélecteurs sont d’excellents outils recommandés. Enfin, Holmes vous signale si votre css est mal rédigé d’une façon toute à fait magique !

Cette feuille principale est enrichie par les media queries, qui permettent de spécifier des règles pour l’impression, suivant les bons conseils d’alsacréations, et quelques modifications pour les petits écrans.

Ce css est presque valide et n’emploie aucun presque aucun hack, même pas pour les beaux yeux de Internet Explorer.

Enfin, le md5 du fichier css est automatiquement ajouté lors de son appel à l’aide de la fonction md5_file de PHP, comme suggéré sur ce blogue. Cela permet de forcer le rechargement du fichier css si celui-ci a été modifié.

Remplacer et commenter le code pour corriger les erreurs de CSStidy

CSStidy – pour une raison assez mystérieuse – remplace

@media screen and ( max-height : 620px){

par

@media screen and max-height 620px{

Ce qui fait que la media query n’est pas appliquée. Il ne semble pas exister de paramètre pouvant corriger ce comportement, aussi avons nous pris parti d’effectuer une subsitution au moyen de sed après le passage de CSStidy pour rétablir les deux-points et le parenthésage.

sed 's/@media \([a-Z]*\) and \([a-Z\-]*\) \([0-9]*\)px/@media \1 and (\2:\3px)/' avant_sed.css > style.css

Deux mots d’explication :

Et puisque nous y sommes, nous ajoutons également un commentaire sympathique donnant quelques informations à notre feuille :

sed -i '1i/* ***************************** \n* Voilà une feuille de style de micr0lab !\n* Infos sur le css à http://micr0lab.org/tech/css/ \n* Infos sur less à http://micr0lab.org/tech/less/\n* Pour voir le fichier %e.css sans compression, rendez-vous à %e_sans_tidy.css \n* Pour voir la source en .less de %e.css, rendez-vous à %f\n* Code le plus souvent sous licence art libre, infos à http://micr0lab.org/rouage/droits/#d_site\n* ***************************** */' style.css

C’est ici difficilement lisible, mais les \n sont remplacés par des retours à la ligne, vous pouvez aller regarder le résultat par là.

Notez bien que des alternative à CSStidy existent : clean-css et CSSTidy

Les sprites

Quelle utilité ont les sprites ? En combinant les images d’illustration de votre site (comme les boutons, le menu, etc.) vous allégez votre site et rendez son chargement plus rapide, car le visiteur n’a pas besoin de multiplier les requêtes. L’un des sprite utilisé par ce site ? Facile :

L’un des sprites de micr0lab.

Oui, oui, ce n’est bien qu’une seule image, vous reconaissez son utilité ?

Internet regorge de tutoriels permettant une compréhension avancée et précise des sprites, nous mentionnos ici celui d’alsacreations et celui de smashing magazine, qui a la bonne idée d’automatiser une partie du travail avec less.

Signalons en complément qu’une large part du travail peut être automatisé grâce à spriteme ou à deux autres excellents sites.

Les pop-up

Les pop-up sont inspirés d’une astuce de Soh Tanaka traduite par Didier Mouronval sur developpez.com.

Cependant ceux-ci n’étaient pas valides en l’état pour cause de balise rel="telechargement". Le docteur html5 nous a prodigué ses bons conseils et nous avions adapté cette technique pour employer les HTML5 Custom Data Attributes. Le tutoriel de Didier Mouronval a depuis été adapté et emploie également les data-* de HTML5.

Nous vous livrons ci-dessous le code jQuery employé ainsi que le html nécessaire pour la mise en place d’un pop-up.

<script type="text/javascript">
jQuery(function($){
	//Lorsque vous cliquez sur un lien de la classe poplight
	$('a.poplight').on('click', function() {
		var popID = $(this).data('rel'); //Trouver la pop-up correspondante
		var popWidth = $(this).data('width'); //Trouver la largeur

		//Faire apparaitre la pop-up et ajouter le bouton de fermeture
		$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer la fenêtre." alt="Fermer." /></a>');

		//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;

		//Apply Margin to Popup
		$('#' + popID).css({
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});

		//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
		$('body').append('<div id="fade"></div>');
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

		return false;
	});


	//Close Popups and Fade Layer
	$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();
	}); //...ils disparaissent ensemble

		return false;
	});
});
</script>
<p id="popup_demo">
<a href="#" data-width="600" data-rel="demo" class="poplight" title="Une démonstration ?">Voilà un pop-up&nbsp;!</a>
</p>
<div id="demo" class="popup_block">
	<h2>Démonstration</h2>
	<p>On peut styler ce cadre et y inclure tout ce qu’on souhaite !</p>
</div>

Vous obtiendrez en théorie en appliquant ce code (sur une page ayant chargé la bibliothèque jQuery) :

Divers

Le style appliqué aux balises kbd est inspiré de http://www.noshade.net/tutoriel-css-36-les-balises-kbd.php.

Un caractère html inséré grâce à au css content ? Insérer sa valeur en code ASCII ! Vous pouvez trouver une table de conversion chez evotech.net (archive, code source).

Techniques passées

Un effet de zoom en css

Démonstration

Une technique trouvée sur http://www.studiomoh.com/fun/csslightbox/, retrouvez-y le code source.

Une démonstration (cliquez sur l’image ci-contre) vous fera sans doute vous rendre compte de tous les inconvénients de cette technique : le fond n’occupe qu’une partie de la page si celle-ci dépasse en hauteur la taille de votre écran, cliquer sur l’image vous ramène en haut de la page, etc.

Les images sont désormais zoomées avec fancybox. Une autre technique — séduisante — permettant de zoomer l’image au cœur du texte peut être testée chez http://dev.herr-schuessler.de/jquery/popeye/.

Un aperçu en css

Une technique d’aperçu géré en css fût utilisé sur ce site (mais je ne retrouve plus la source de cette technique). Un peu sale, elle consiste à entourer d'une balise a avec un attribut href vide le texte qui apparaît, puis dans une balise span le texte à afficher au survol.

a.apercu {
position:relative;
text-decoration:none;
}

a.apercu:hover {
z-index:25;
}

a.apercu span {
display:none;
}

a.apercu:hover span {
display:block;
position:absolute;
right:1em;
left:-20em;
width:500px;
border:1px solid #99998A;
padding:1em;
background-color:#DCDCC6;
color:#1f2322;
}
<a href="" class="apercu">Notice<span>Le texte de votre choix, que vous pouvez styliser !</span></a>

Cette technique n’est pas très bien venue : risque de débordement de la page, le curseur reste une main sur la notice, il faut créer une nouvelle classe si l’on veut une nouvelle dimension d’aperçu, etc. Une démonstration : NoticeLe texte de votre choix, que vous pouvez styliser !

Contact :

oh man

Contact Plan Lettre F.a.q. C.G.U.