Les technique de css de micr0lab

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

Il est rédigé en less et compilé vers css. 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: le détail de la compilation (et compression) est expliqué par là.

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 signalait si votre css était mal rédigé d’une façon toute à fait magique ! (mais le projet n’est plus mis à jour depuis plusieurs années.)

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é.

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 :

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>
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&#8239;!</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) :

Voilà un pop-up !

Divers

Le style appliqué aux balises kbd est inspiré de NoShade.net.

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 locale).