Hier, Sitepoint a rappelé un petit truc bien pratique dans Firebug pour inspecter les styles :active et :hover d’une balise. Il suffit de cliquer sur la flèche de l’onglet « Style » dans Firebug, et de sélectionner l’état voulu.
Hasard du calendrier, un type sur Reddit a annoncé que la même fonctionnalité est présente dans la version actuellement en dev de Chrome.
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
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;
J’adore CSS3. Chaque jour, j’en découvre un peu plus, et chaque jour, je suis surpris par de nouvelles utilisations intelligentes et un peu détournées des propriétés. Je suis retombé récemment sur cet article expliquant comment simuler un effet de flou gaussien sur du texte. Avant de passer aux explications, regardez un peu ce que ça donne appliqué sur cette page.
Je suis sympa, vous pouvez recliquer sur le même lien pour désactiver le flou. Maintenant, pour arriver à ça, il vous suffit tout simplement dans votre CSS de mettre la couleur de vos textes en transparent, et d’appliquer une ombre sur le texte à l’aide de la propriété text-shadow. Pour appliquer cet effet à toutes vos balises <p>, vous pouvez ainsi écrire le code suivant.
p
{
color:transparent;
text-shadow:0 0 5px #333;
}
Vous pouvez régler les 4 valeurs de la propriété text-shadow selon vos besoins. Elles correspondent dans l’ordre à la position horizontale de l’ombre, la position verticale de l’ombre, la taille/floutage de l’ombre, et la couleur de l’ombre.
Comme d’habitude, cette propriété n’est supportée par aucune version d’Internet Explorer (même pas IE9, non non). Vous pouvez donc ajouter les lignes suivantes.
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";
En bonus, vous pouvez créer une transition CSS3 pour donner un effet de flou progressif pour les navigateurs WebKit et Firefox 4 en ajoutant les déclarations suivantes dans votre règle CSS de floutage.
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
TA-DAM ! A vous la gloire avec ce magnifique effet de flou. Pour un exemple d’utilisation concret, l’auteur initial de cet effet proposait un exemple de floutage du texte derrière une lightbox. Ou sinon vous pouvez activer l’effet de flou sur cette page, et essayer de rédiger un commentaire sans faire de fautes.
La semaine dernière, j’ai mis à jour la présentation des commentaires de ce blog en affichant en plus un avatar. Ça fait joli, et ça me permet surtout de reconnaître tout de suite les gens que je connais ou que je suis sur Twitter. Pour faire ça, WordPress est bien fait puisqu’il inclut par défaut le système de Gravatar. Le principe est simple : vous créez un compte chez Gravatar, vous configurez une ou plusieurs adresses e-mails et y associez un avatar. Ensuite, les sites qui le souhaitent iront chercher automatiquement votre avatar pour l’afficher. Par défaut, on peut afficher une image pour les gens qui n’ont pas de compte chez Gravatar. C’est sympa, sauf que ça peut faire vite répétitif si plusieurs de vos lecteurs n’utilisent pas le système. Du coup, j’ai fait une petite fonction PHP qui va retourner une image aléatoirement. Voici un petit tutoriel tout simple pour faire ça. Lire la suite du tutoriel