HTeuMeuLeu

L’ordre d’écriture des propriétés en CSS n’a quasiment aucune importance. Du coup, ça relève en général de choix personnel, de l’ordre alphabétique ou d’un hasard total. Pourtant, quand on travaille en équipe, il est vite important d’établir quelques règles afin que tout le monde code de la même façon, sous peine de se retrouver avec un beau patchwork de styles. Voici l’ordre dans lequel je range mes propriétés CSS. Lire la suite de « L’ordre des propriétés CSS »

La question vient d’être posée il y a quelques instants sur par p0ulpe sur Twitter : vous êtes plutôt « margin-left:10px » ou « margin:0 0 0 10px » ? A ma grande surprise, la réponse qui l’a emporté « haut la main » est la première. Ca fait bien longtemps que je n’utilise plus que l’écriture raccourcie de la propriété « margin » en CSS, et voici pourquoi.

Premièrement, l’écriture raccourcie est bien meilleure pour la maintenance d’un site. Si on doit ajouter une marge sur un autre côté de sa balise, on n’a plus qu’à placer la bonne valeur au bon endroit. En utilisant la version longue, si on doit ajouter une nouvelle marge, on va soit être tenté d’utiliser à nouveau une version longue, ce qui va considérablement rallonger le code, ou alors (si on a un peu d’amour propre) on va modifier le code et perdre du temps à ré-écrire les marges avec l’écriture raccourcie de margin.

Deuxièmement, l’écriture raccourcie est, comme son nom l’indique, plus courte. Enfin, presque. C’est vrai pour la valeur bottom uniquement (on gagne 3 caractères \o/). On a une égalité pour les valeurs top et right. Mais on perds 1 caractère pour la valeur left.

margin-left:5px; /* 16 caractères */
margin:0 0 0 5px; /* 17 caractères */
margin-right:5px; /* 17 caractères */
margin:0 5px 0 0; /* 17 caractères */
margin-top:5px; /* 15 caractères */
margin:5px 0 0; /* 15 caractères */
margin-bottom:5px; /* 18 caractères */
margin:0 0 5px; /* 15 caractères */


C’est certes une optimisation minime, mais combinée à l’amélioration de la maintenance du site, c’est à mon avis 2 points importants qui vont faire la différence. La seule raison pour laquelle j’utilise « margin-left », c’est pour surcharger cette valeur uniquement.

La seule autre raison que je peux imaginer qui puisse pousser certains à utiliser systématiquement cette écriture, c’est la facilité de lecture pour un débutant. Très souvent, j’ai vu des intégrateurs novices lutter à se souvenir de l’ordre des valeurs de la propriété « margin ». Un bon moyen mnémotechnique pour se souvenir de l’ordre des valeurs et leurs côtés correspondant est de penser à une horloge. Les 4 valeurs de la propriété « margin » se lisent dans le sens des aiguilles d’une montre : top, right, bottom et left.

margin:12px 3px 6px 9px;

Chaque nouvelle technologie voit arriver son lot de bonnes et mauvaises utilisations, et c’est particulièrement vrai sur le web. La dernière lubie en date qui m’agace particulièrement, c’est l’utilisation de Media Queries à tout va. Et ce qui m’a fait sortir de mes gonds, c’est cette liste de 20 sites « amazings » utilisant les Media Queries. Et surtout, c’est le récent tutoriel de l’habituellement excellent WebdesignerWall sur « Le Design Mobile et Adaptatif en CSS3 avec les Media Queries« . Allez-y, essayez leur démo. Attendez, prenez un sac à vomi avant.

Lire la suite de « Faut arrêter avec les Media Queries ! »

« 3 Dreams Of Black« , le clip en 3D super impressionnant présenté aux Google I/O est sorti cette nuit. Réalisé par Chris Milk et Aaron Koblin (et aussi l’aide de MrDoob),  la démo sert de support à la chanson du même nom du groupe ROME (collectif composé entre autres de Jack White des feu White Stripes, et Norah Jones). Mélangeant vidéo, animation traditionnelle et 3D, la démo utilise les dernières technologies du web (WebGL, HTML5 vidéo, Canvas, …). Pour rappel, les deux compères avaient déjà réalisé le clip/démo « The Wilderness Downtown » pour Arcade Fire l’année dernière.

Courrez donc vite expérimenter ce clip. Après ça, regardez le making-of et amusez-vous avec le Model Viewer des différents modèles et animations 3D utilisées dans la démo, ou les différents exemples d’effets en WebGL en bas de page. Enfin, vous pourrez utiliser l’éditeur 3D pour construire votre propre objet et l’ajouter à une galerie collective.