Archives de la catégorie : HTML & CSS

Pas encore de description pour la catégorie HTML & CSS. Suggérez à l'administrateur du site de la remplir.

Faut-il sauver le soldat CSS ?

Les styles en ligne, c'est de la marde

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.

Module CSS3 Flexbox : Flex for Fantasy

Flexbox We Can Do It

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. 

Flexible Math — Convertir des pixels en pourcentages

flexible-math-rwd-featured

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 — Visualiser les sélecteurs CSS de manière interactive

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.

Guide de bonnes pratiques HTML & CSS par Google

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.

Editeur de dégradés CSS3 à la mode de Photoshop

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.

Optimiser les images PNG, JPG, GIF

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 :

Lutte des classes CSS !

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.

Tutoriels pour apprendre HTML & CSS

Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux.

Media queries et téléchargement des images par les mobiles

A l’heure où l’on parle beaucoup de Responsive Webdesign via notamment les propriétés CSS3 Media Queries, il est important de s’interroger sur la manière dont les différents périphériques mobiles se comportent au moment de télécharger les images. Disons que vous affichez une image en tant “normal” et que vous décidez de lui appliquer display: none si max-width: 600px. L’idéal serait que le périphérique ciblé ne demande pas l’image afin d’épargner la bande passante.