Maintenant que les vieux Internet Explorer (<10) ont quasiment disparu de la surface du globe, on peut utiliser les placeholders sans la moindre ligne de JS. Et pour styler ça, rien de tel qu’une mixin SCSS.
Une mixin pour de bien jolis placeholders
css
Liens qui pointent nulle part : prévenez vos visiteurs
Enfin! Le moment tant attendu est arrivé: votre client vous a donné son « go » pour mettre en ligne son site. Problème: la plupart les pages contiennent du Lorem Ipsum. Pire: elles ne sont même pas encore créées et la plupart des liens du menu pointent sur #. Voici comment prévenir les internautes avant qu’ils cliquent, pour ne pas les frustrer.
Mixin: background size homothétique
Pour modifier la taille d’une background image en CSS, il y a plusieurs solutions, comme par exemple les valeurs contain ou cover de la propriété background-size. Mais celles-ci dépendent du wrapper. En pourcentage, même problème: on est dépendant du wrapper (et on risque de déformer l’image). En pixels il faut connaître la taille de l’image. Sass, vite.
Placeholder : Tout savoir sur cet Attribut HTML5
Le Placeholder est un nouvel attribut HTML5 qui a pour but de décrire brièvement un champs. La valeur du Placeholder s’affiche à l’intérieur du champs lorsque celui-ci est vide.
Voici ce que ça donne sur les principaux navigateurs :
Pour l’utiliser il suffit d’insérer l’attribut placeholder dans une balise input ou textarea. Cela fonctionne pour les champs de type text, password, mais aussi les nouveaux types d’input HTML 5 à savoir : search, url, tel, email. Lire la suite
Optimiser le chargement de ses images
Quand on parle d’optimiser le chargement de son site on pense généralement à son code ou à son serveur, mais un autre paramètre influe au niveau de l’affichage : les images. Il s’agit d’un critère important qu’il est possible d’améliorer grâce à deux techniques : réduire le nombre d’accès serveur & optimiser le poids de ses images.
Forcer le navigateur client à recharger son cache des fichiers CSS et JS
Aujourd’hui j’ai été confronté à un problème très connu mais assez rarement pointé du doigt dans un contexte de production. Pour ma part je n’avais jamais eu l’occasion de m’y confronter… mais il n’en reste pas moins que ce qui suit mérite vraiment que l’on s’y intéresse, quel que soit le projet.
Lors d’une mise à jour majeure de la homepage d’un client, CSS et JS, les visiteurs qui avaient visité le site la veille ont eu une drôle de surprise sur la nouvelle page d’accueil : leur navigateur ayant gardé en cache une partie des feuilles de style et javascript, la home ne ressemblait à RIEN, à moins de faire un Ctrl+F5. Le client était assez mécontent (on le comprend) et me demandait si une solution existait. Lire la suite
Empêcher vos rédacteurs de saisir des titres de premier niveau
Proposer à vos rédacteurs un WYSIWYG peut parfois être risqué: l’utilisation de balises non prévues ou non souhaitées peut bousiller votre design ou -pire- pénaliser le référencement de votre super blog. Lire la suite