décembre 2011
25 billets
2 tags
L'incontournable Bilan annuel 2011
Il fallait bien s’y attendre, l’année 2011 se termine tranquillement et on n’a jamais été aussi proche de 2012.
Comme beaucoup, c’est l’heure de faire le bilan de ce que je vais retenir professionnellement de l’année passée. Et il faut avouer qu’elle aura été exceptionnelle sur de nombreux points.
Aboutissement de nombreux mois de compilation, de...
fredericguerrier:
OpenData : Google Public Data Explorer http://ow.ly/8eyTX
2 tags
Requêtes, parallélisation et mobiles
En 2009, Steve Souders, un expert dans le domaine de la performance web, avait annoncé qu’il ne fallait pas utiliser @import pour appeler ses feuilles de styles CSS.
L’explication est simple : plusieurs fichiers CSS appelés via <link> peuvent être “parallélisés”, c’est à dire chargés en même temps; ce qui n’est pas le cas de fichiers appelés via...
4 tags
Think Mobile First !
Le courant de pensée “Think Mobile First” (penser mobile d’abord) prend de plus en plus d’essor pour de multiples raisons, notamment :
L’utilisation de mobile explose
Le Web mobile va à l’essentiel
Le Web mobile permet bien plus
Think Mobile First, c’est quoi ?
Cette philosophie est pour le moins séduisante puisqu’elle nous oblige à repenser nos...
Inspiration : 10 Incredible Examples of Responsive WebDesign http://www.webdesigndev.com/web-development/10-incredible-examples-of-responsive-web-design
(avec des vrais morceaux d’Alsacreations dedans !)
via fredericguerrier
1 tag
CSS3create →
Une ressource francophone exclusivement dédiée à CSS3
1 tag
Un fil d'Ariane en CSS3 sans images
Même si ce n’est pas d’une utilité flagrante, je me suis amusé récemment à réaliser un fil d’Ariane sans images, en utilisant des fonctionnalités de CSS3 : coins arrondis, dégradés circulaires, rotations.
Le résultat est visible à cette adresse : http://www.ie7nomore.com/fun/breadcrumb/
Note : il est également possible d’exploiter les caractères...
2 tags
Gradient generator de Colorzilla →
Un éditeur de dégradés linéaires (et radiaux) CSS3 très intuitif.
2 tags
Ordonnez vos déclarations CSS
S’y retrouver au sein d’un fichier CSS de plusieurs centaines de lignes de déclarations est souvent fastidieux, notamment dans le cadre d’un projet web collaboratif et quand vos collègues ont d’autres habitudes d’écriture que les vôtres.
Par expérience, j’ai pu constater que l’un des moyens pour améliorer rapidement la lisibilité du code CSS est de systématiquement faire apparaître les...
3 tags
Des images sans images
Afin d’optimiser les performances des navigateurs, de nombreuses techniques permettent d’éviter des requêtes excessives et de charger des fichiers trop imposants.
Voici quelques solutions pour afficher des images ou pictogrammes sur ses pages web… sans images. Le tout dans un but de performance et de facilitation des mises à jour et des adaptations graphiques (élargissement,...
3 tags
Le tableau HTML, ce grand incompris
Diabolisé depuis des années pour ses problèmes de sémantique, d’accessibilité et de performances notamment, le tableau HTML de mise en page est aujourd’hui le vilain canard de la conception web, tant et si bien qu’on n’ose même plus l’employer pour ce dont il est fait : des données tabulaires.
(C’est aussi un peu pour ça que je me suis amusé à présenter...
Support de @font-face dans les clients mail →
kaelig:
Aujourd’hui j’ai reçu une maquette de newsletter à intégrer. Ses titres étaient habillés d’une police qui n’appartient pas à la famille des websafe fonts. Seule alternative : passer par @font-face. Dans un e-mailing, ce n’est pas possible.
Quand quelque chose n’est pas techniquement intégrable, on renvoie la maquette au graphiste avec des explications.
Avant de faire un retour à...
1 tag
Dabblet, un bac à sable CSS interactif →
3 tags
Performances : toutes les feuilles de styles sont...
La performance dans le Web mobile est une notion capitale : il est crucial de prendre en compte le poids des éléments, les temps de chargement, les requêtes superflues, sous peine de grosses désillusions selon les projets.
J’ai lu récemment qu’une feuille de style CSS dédiée “mobile” était chargée par le navigateur même si elle n’était pas applicable (par...
inline-block n'est PAS inline !
Je vois de plus en plus de personnes se jeter sur display: inline-block simplement pour aligner des éléments de liste par exemple.
Pour rappel, la valeur inline-block est très pratique mais assez particulière. Elle est surtout assez mal supportée par IE6-IE7, contrairement à inline, a des inconvénients et nécessite généralement des bidouilles pour être interprétée.
Pour résumer, inline-block...
2 tags
CSS Tricks →
Une communauté très active dans le domaine des CSS avancés
1 tag
IECSS.com - valeurs CSS par défaut des éléments →
IECSS.com affiche toutes les propriétés CSS appliquées par défaut sur les éléments HTML par les différentes versions d’Internet Explorer
2 tags
Chérie, ça va couper !
Les spécifications CSS3 apportent leur lot de propriétés et techniques pour gérer les césures et coupures des mots longs.
Certaines de ces propriétés sont déjà reconnues par les navigateurs actuels et par conséquent tout à fait utilisables en production. Intéressons-nous à deux d’entre-elles : word-wrap et hyphens
Word-wrap : la césure “barbare”
Word-wrap est une...
1 tag
Bricss: Using an icon font as a web font –... →
bricss:
A technique that hasn’t been researched and used enough in my opinion, is the use of an icon font as a web font. There are many advantages to this approach, rather than using images. You can: infinitely scale a font, because they’re just vectors
use whatever color you like – even gradients in…
Emailology - La bible de l'intégration d’e-mails →
3 tags
Pourquoi on n'apprend pas CSS ?
“Moi je viens ici pour reprendre les bases, pour remettre de l’ordre dans les connaissances et techniques que j’ai apprises sur le tas”. C’est généralement ainsi que se présentent la plupart des stagiaires présents aux formations CSS que je dispense.
Et pour cause : on n’apprend pas CSS, on se sert de CSS.
CSS c’est trop simple
“CSS,...
2 tags
Simurai →
Un super ninja CSS, dont certaines ressources sont époustouflantes
2 tags
InstaCSS →
Une documentation très complète et rapide (description, compatibilités, exemples pratiques)