HTML/CSS

Guide ultime de la typographie pour le web

Le web et les polices, ou fontes, c’est une histoire passionnelle. Avant le CSS3 et son @font-face, il n’était pas possible d’embarquer une police sur le web. On devait donc se contenter des polices sytème… Autant dire que le choix était limité, d’autant plus que tous les systèmes n’embarquent pas les mêmes jeux de polices.

Bref, ça, c’était avant. Aujourd’hui, deux questions se posent : quelle(s) police(s) choisir pour une expérience cohérente ? et comment garantir une expérience performante sur tous les devices ?

(suite…)

Utilisation des pseudo-classes CSS :valid et :invalid

Le HTML5 a permis d’assortir ses formulaires de contraintes. Elles permettent de valider le contenu directement en HTML, sans avoir forcement recourt au JavaScript. C’est supporté par la majorité des navigateurs depuis un bon moment.

Dans le même temps, deux nouvelles pseudo-classes CSS ont fait leur apparition. Elles offrent la possibilité d’appliquer des styles en fonction de la validation (ou non validation) du champ de formulaire. Voyons comment tout cela fonctionne !

(suite…)

Centrer une div à width variable

Ah le centrage en CSS, toute une histoire ! Quand la largeur d’une div est fixe – par exemple width: 400px – aucun problème, un petit coup de margin: auto et le tour est joué ; mais quand la div prend la largeur de son contenu, c’est une toute autre histoire… Chers amis, ne désespérez pas, à tout problème une (des ?!) solutions. Allez, à l’aventure !

(suite…)

101 balises HTML5 + exemples

Le HTML5 c’est plein de bonnes choses, des APIs Javascript, du CSS3, mais aussi et surtout des balises HTML ! Et cette nouvelle mouture d’HTML apporte son lot de nouveauté. Cette version du langage met en avant la sémantique, ainsi, de nombreuses balises permettent de remplacer les balises génériques div et span. Du layout à la citation, faisons le tour de tout ça, exemples à l’appui voulez-vous ?

(suite…)

CSS : div qui prend la taille de son contenu

J’ai récemment été confronté à un problème de CSS, lequel m’a mine de rien pris un petit bout de temps à résoudre. Comment faire prendre à un élément de type bloc la taille de son contenu (lequel pouvant varier). Il y a plusieurs solutions à cela, mais pour corser un peu le défis, j’utilisais Bootstrap, et certaines solutions n’étaient pas compatibles avec ce que je voulais. Bref, passons tout ça en revue.

(suite…)

3 outils HTML5 qui vous feront oublier powerpoint

On a toujours besoin, à un moment ou à un autre, de faire une présentation : un exposé, un brief, une conférence, bref à tous les niveaux et a tous les âges. Pour cela, on pense immédiatement à PowerPoint, les adeptes de la firme à la pomme utiliserons parfois Keynote et certains d’entre vous connaissent peut être Prezi.

Il existe cependant bien d’autres solutions, disponibles gratuitement, en open source et full html5. Alors pourquoi se priver et continuer à payer des licences pour des logiciels qui, au final, brident quelque peu notre créativité ?

(suite…)

Des icônes sans images avec unicode !

Dans une certaine mesure, il est possible de totalement éviter les images pour vos icônes ! Certaines icônes sont tout simplement disponible en unicode et html. C’est à dire que c’est du « texte-icône ». Certains caractères « spéciaux » tels que « ç, €, à, é, è, ê… » possèdent bien en html des codes ressemblant à ça : « &ccedil ». Il ne vous viendrait pas à l’esprit de mettre une image à la place du texte… Alors faisons pareil pour les icônes !

(suite…)

Styliser le input file en CSS

Chaque navigateur possède son propre champ de <input type="file">, ce dernier n’est pratiquement pas modifiable en CSS. C’est fort dommage car d’une part, chaque navigateur possède son propre design de ce type de input, ce qui ne permet pas d’avoir une homogénéité entre les navigateurs, et d’autre part, cette impossibilité de le modifier via CSS ne permet pas d’adapter ce dernier au design de notre site. Notre objectif est donc de palier à cette lacune.

(suite…)

Webdesign pour écrans Retina

La « technologie » Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevé pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité de pixels, pour ne pas que tout paraisse minuscule sur ces écrans, Apple a décidé de tout simplement doubler la valeur en pixel de chaque élément. Concrètement, cela signifie que dans votre feuille CSS, tout élément que vous définissez, par exemple, avec une width: 100px; fera en réalité 200px. Tout est multiplié par deux.

Les proportions sont conservées et dans l’ensemble ça ne défigurera pas votre site, à l’exception des images, qui risquent de paraître d’une bien piètre qualité. Autant s’adapter à cet usage, d’autant plus que de plus en plus de devices (tablettes smartphones et ordinateurs) vont adopter des écrans de haute résolution.

Voici donc un article (en anglais), qui explore les différente manière de faire un design compatible Retina, sans pour autant pénaliser les écrans « normaux ».

Insight sur les filtres CSS3

Exposons un cas concret : vous avez un site dynamique, et vous avez besoin de deux versions de la même image, l’originale, et une version floutée, plus sombre… que vous appliquerez par exemple au survol de la souris. Premièrement, ceci est une affaire de client-side ! Et celà a de multiples avantages :

  • Si les images sont ajoutées dynamiquement, on évite un traitement supplémentaire gourmand en ressource (flou, sépia…)
  • On évite de prendre plus de place sur le disque dur avec deux images alors qu’une seule peut suffire
  • On évite aussi la consommation de plus de bande passante et un temps de chargement supplémentaire pour le client

Enfin, vous comprenez qu’il n’y a que des avantages à déporter le traitement des images côté client. On pense évidemment à JavaScript pour faire ce boulot. Oui… pourquoi pas… Mais sachez que les filtres de CSS permettent d’en faire autant, le tout dans une extrême simplicité. Pour vous mettre l’eau à la bouche, voici les effets qu’il est possible d’appliquer :

  • flou,
  • luminosité,
  • saturation,
  • contraste,
  • teinte,
  • inversion,
  • nuances de gris,
  • sépia

Ça ouvre quand même pas mal de possibilités ! Pour en savoir plus, je vous invites à aller jetez un œil à la traduction de l’article de Johnny Simpson sur Développez.com.