Chez Jérémie

Chez Jérémie, parfois c'est sérieux, parfois non !

Mot-clé : webdesign

Why are SVG Fonts so different?

Par jeremie, - Web

Une version française de cet article est disponible sur typographisme.net : Pourquoi les fontes SVG sont-elles différentes des autres ?

I’m sad to see that there are many misconception about SVG fonts. I’ve read a lot of articles and complains about the SVG font format and the last (but not the least) was an article from Alexander Limi explaining why Firefox will not pass the Acid3 test mainly due to a lack of SVG font support. All those complain are misplaced in many way because SVG fonts are misunderstood. Really? But in this case, what are SVG fonts made for? Let’s see that.

Lire la suite...

Arrétez de me casser les gonades avec border-radius

Par jeremie, - Web - 20 commentaires

Ç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.

Lire la suite...

:before et :after, des pseudo-éléments qui ont du style

Par jeremie, - Web - 11 commentaires

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 ;)

Lire la suite...

SVG et HTML5 font bon ménage avec Firefox

Par jeremie, - Web - 11 commentaires

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 ?

Lire la suite...

Introduction à SVG

Par jeremie, - Web - 7 commentaires

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 ;)

Lire la suite...

Améliorez vos liens avec la génération de contenu CSS

Par jeremie, - Web - un commentaire

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.

Lire la suite...

La propriété CSS display: inline-block

Par jeremie, - Web - 4 commentaires

La propriété CSS display reste sous-employée par les intégrateurs web. Ce n'est pas entièrement leur faute, les implémentations dans les navigateurs n'étant pas entièrement à la hauteur de la norme. Je reviens ici sur la valeur inline-block de cette propriété qui est désormais implémenté dans tous les navigateurs du marché et qui peut facilement nous aider à sortir de la sur-utilisation de la propriété float.

Lire la suite...

Le modèle de boite flexible en CSS 3

Par jeremie, - Web - un commentaire

La future norme CSS3 introduits plusieurs façons différentes d'appréhender la mise en page d'un document web. Il y a quelques temps, je vous ai parlé du module "Template Layout". Cette fois je vais vous présenter le module "Flexible Box Layout" qui est sans doute le plus prometteur de tous, d'autant plus qu'il commence déjà à être implémenté (non, pas dans IE, arrêtez de rêver !)

Update: Dear English readers, I've made an English version of this article available on hacks.mozilla.org.

Update 2: There's a Chinese version available... amazing!

Lire la suite...