Ça faisait longtemps que je ne m’était pas énervé et pour bien commencer la nouvelle année, sachez le, j’en ai un peu marre. Marre de quoi me diriez-vous ? J’en ai marre de ces intégrateurs qui se gargarisent avec border-radius, marre de ces gens qui ne jurent que par box-shadow, marre de ces crétins qui réduisent CSS3 au module “Border & Background”. Border-radius, c’est l’arbre qui cachent la forêt. CSS 3 est d’une richesse incroyable et pour l’instant, les constructeurs de navigateurs n’implémentent que de toutes petites choses, le gros reste à venir (et si vous prenez 5 minutes pour aller survoler les specs, même pas les lire, juste les survoler, vous verrez qu’il y a du lourd).

Soyons clairs, aujourd’hui, les seuls gars que je prend au sérieux à propos de CSS 3, ce sont ceux qui me parlent des sélecteurs et des Media Queries CSS 3 car c’est là que se cache la vraie puissance actuelle de CSS 3 (et pour le future les transformations 2D et 3D, les différents systèmes de positionnements et de mise en page, la génération de contenu, etc. autant dire que ça va être la fête du slip le jour où on aura tout ça dans nos boites à outils). Si vous voulez vous la péter avec le module “Border & Background”, c’est possible. Mais dans ce cas, c’est du coté de border-image qu’il faut aller fouiner et surtout, surtout, arrêtez de vous extasier sur border-radius et box-shadow qui ne sont que de la poudre au yeux.

En ces temps de buzz autour de CSS3, on en oublie les supers outils qui existent dans CSS2 et qui sont largement exploitables. Parmi ceux-ci, on trouve les pseudo-éléments :before et :after. Ces pseudo-éléments ont longtemps été négligés par les designers et intégrateurs Web pour deux raisons essentiellement : Premièrement, IE6 et IE7 ne les comprennent pas, donc à l’époque ou ces deux navigateur était dominant c’était inutilisable ; Deuxièmement, les ayatollahs de l’accessibilité stigmatisent assez volontiers ces deux pseudo-éléments (parfois à raison) ce qui a tendance à effrayer les designers et intégrateurs qui finalement s’y intéressent peu.

Pourtant, ces deux paravent masquent la puissance de ces outils. Le premier point est facilement contournable avec un peu de Javascript et le deuxième point est totalement injustifié dès lors qu’on utilise ces pseudo-éléments pour ce qu’ils sont : des aides à la mise en forme. Je vais donc vous montrer comment fonctionnent ces pseudo-éléments, vous allez voir, c’est génial

Depuis maintenant 2 ans que je tiens ce blog, il était grand temps de faire peau neuve. Je profite donc du CSS Summer refresh organisé par Alsacreations pour dire au revoir au gabarit par défaut de Dotclear et mettre en place un vraie gabarit utilisant HTML5 et CSS3.

Pour faire suite à mon précédent article sur SVG, je vous propose de partir explorer la révolution technique que représente la possibilité d'inclure du SVG directement dans un document HTML. Cette possibilité fait partie du futur standard HTML 5. C'est une fonctionnalité qui sera disponible dans Firefox 4 et Internet Explorer 9 dès leur sortie. Alors comment ça marche et qu'est-ce qu'on peut en faire ?

Dans les années à venir, le format d'image SVG (Scalable Vector Graphics) va devenir une technologie extrêmement commune sur le Web. Le décollage de cette technologie va se faire grâce à deux évènements d'importance dans le monde du Web. D'une part, avec l'arrivée du support de SVG par Internet Explorer 9, cette technologie sera désormais disponible nativement dans tous les navigateurs majeurs du marché. D'autre part, la norme HTML 5 va normaliser et simplifier la façon d'embarquer du SVG directement au sein des documents HTML. C'est le moment ou jamais de s'intéresser à cette technologie

Les liens hypertextes sont la colonne vertébrale du Web. La plus part du temps, ils se résument à un texte graphiquement mis en évidence (historiquement, bleu et souligné). Néanmoins, techniquement et sémantiquement parlant, les liens peuvent bénéficier de méta-données qui offrent un certain nombre d'informations qui pourraient être utile à l'utilisateur mais ne sont pas mises en évidence par les navigateurs. Par exemple, l'attribut target permet de définir dans quel fenêtre ou cadre va s'ouvrir le lien, ou l'attribut hreflang qui permet de connaitre la langue de la page où mène le lien et je ne vous parle même pas de l'attribut rel. Dans cet article je vais vous montrer comment utiliser la génération de contenu CSS pour afficher certaines de ces informations à l'utilisateur.

Quatrième et dernier jour à Londres. Programme toujours aussi intense pour cette dernière journée avec encore six conférences de prévus. Heureusement, cette fois-ci les choix ont été un peu moins dure à faire.

Troisième jour à Londres. Aujourd'hui, fini les ateliers, c'est le débuts des conférences. Le programmes est dense et le choix de chaque conférence a été difficile. L'évènement à lieu au Hall Queen Elizabeth à proximité de la gare de Waterloo. Le lieu est bien choisi, et malgré la présence d'au moins 300 participants, on ne se sent ni à l'étroit ni perdu au milieu du vide. La qualité de l'accueil est impeccable, mais ce qui compte vraiment ce sont les conférences

Deuxième jours à Londres. Cette fois-ci, j'assiste à l'atelier « Designing Social Interface » conduit par Christian Crumlish (et toujours des photos sur Flickr)

Cette année j'ai pu me rendre à @media (c'est comme Paris Web, mais à Londres et en plus chère ). Ce cycle de conférences comprend 2 jours d'ateliers (1 atelier = 1 journée... autant dire qu'on rentre sérieusement dans le détail) et 2 jours de conférences. Choisir entre les différents ateliers fut une vraie torture, mais finalement, pour le premier jours, j'ai opté pour l'atelier de Andy Clark sur le thème « Advanced CSS styling ».