J’ai eu le plaisir de recevoir dernièrement le livre « CSS 3 Flexbox, Plongez dans les CSS modernes » publié chez Eyrolles. Un ouvrage entier sur une seule propriété ? Et oui, Raphaël Goetter a choisi de consacrer près de 130 pages (en couleurs, s’il vous plait) à une seule propriété CSS, à savoir, Flexbox. Il faut dire qu’il y a matière, car les specs sont complexes et les possibilités infinies (et au-delà) ! →
CSS évolue mais pas assez vite semble-t-il aux yeux de certains, ce qui explique l’apparition des préprocesseurs comme Less ou Sass qui ont ajouté les variables, les sélecteurs imbriqués, les calculs, etc. Sass et Compass sont des gemmes Ruby qui s’utilisent habituellement en ligne de commande. Toutefois, il existe des logiciels permettant de compiler des fichiers Sass et Compass en CSS. Ces logiciels peuvent être utiles, dans un premier temps, pour aplanir la courbe d’apprentissage : Scout pour sa simplicité rassurante et Prepros pour la richesse de ses options (en plus de sa capacité à compiler une foultitude d’autres langages). Je terminerai bien évidemment avec l’utilisation de la ligne de commande, bien plus efficace sur le moyen et long terme (même si on utilise Windows 8.1). →
Le monde des CSS est agité par des questions existentielles. Dernier débat à la mode : on reproche à CSS de ne pas être un langage de programmation. Ce qui gêne dans CSS ? Une broutille ! Principalement le « C » de cascade et le « S » de stylesheet, reste le style. Il est vrai que la cascade est un mécanisme puissant qui peut poser des problèmes de prédictibilité sur les styles d’un éléments donné. Pas facile, en effet, de prédire le destin d’un élément situé en bout de chaine une fois qu’il est sous la cascade. Voici un résumé du débat en question. →
La mise en page des sites web en colonnes est passée par les affres de l’élément HTML <table> qui a laissé la place à la propriété CSS float, en passant très brièvement par display:table. Aujourd’hui, C’est au tour du module CSS Flexbox de faire parler de lui en permettant pratiquement tout ce que l’on peut imaginer en terme de mise en page fluide et flexible. Voici un florilège de ressources en français et en anglais pour découvrir ce module et apprendre à l’utiliser. Au menu, près de 30 liens pour se faire la main. →
Le meilleur moyen pour rendre son site internet responsive consiste à utiliser des valeurs en pourcentage, tandis que le meilleur moyen de mettre en place une maquette, passe souvent par les pixels. Pour mettre tout le monde d’accord, il existe un mode de calcul aussi simple qu’efficace pour passer des pixels aux pourcentages : cible ÷ contexte = résultat. En d’autres termes, on prend la valeur de la cible en pixel, on la divise par le contexte (la valeur en pixel de l’élément parent) pour obtenir un ratio qu’il suffira de multiplier par 100 pour avoir les précieux pourcentages. →
CSS Selectors — Si comme moi vous avez parfois des difficultés à distinguer la portée de certains sélecteurs CSS, ce site vous sera très utile. il suffit de sélectionner un sélecteur dans la liste et de regarder les éléments qui sont mis en évidence dans le marquage HTML qui sert d’exemple. Cerise sur le gâteau, la page précise les navigateurs compatibles et affiche la règle CSS en cours. →
Soyez cohérent. C’est la conclusion que nous propose Google dans ce guide des bonnes pratiques de codage à l’usage des développeurs web et autres intégrateurs HTML et CSS. Lorsque vous reprenez du code, il est important de tenir compte du style d’écriture d’origine. Si votre prédécesseur utilise des espaces de part et d’autre des opérateurs arithmétiques, faites de même. Si les commentaires sont encadrés de symboles pour dessiner un bloc, faites de même aussi. Soyez cohérent. →
ColorZilla, connu pour ses extensions couleur pour Mozilla et Chrome, met à notre disposition Ultimate CSS Gradient Generator. C’est un générateur de dégradés CSS3 en ligne qui reprend grosso modo l’interface utilisateur de Photoshop pour fournir les déclarations CSS pour l’ensemble des préfixes propriétaires -moz-, -webkit-, -o-, -ms-. Pour Internet explorer 6 à 8, l’outil génère la propriété filter ; pour les versions IE9 et au-delà il y a même le commentaire conditionnel à ajouter pour annuler filter et basculer sur la génération du dégradé via SVG en base 64. →
Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site : →
Les classes CSS sont probablement le meilleur ami de l’intégrateur web, mais peuvent vite devenir un cauchemar si la réflexion ne précède pas l’action. Au-delà des conventions de nommage plus ou moins sémantiques, il existe de nombreuses stratégies pour mettre en place une architecture CSS modulable et évolutive. Un temps décriées au profit des identifiants uniques pour de viles questions de performances, les classes reprennent du poil de la bête. Sans forcément tomber dans la «classite» aiguë, voyons rapidement différentes manières d’organiser nos feuilles de style CSS. →
