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 ?spritesPop-upTechniques passées

 

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

Il est rédigé en less et compilé vers css à l’aide de lessc. 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 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 :

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&#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) :

 

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

 

Contact :

oh man

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