HTML/CSS

Guide ultime des images responsives & retina ready

La « technologie » Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevée pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité, pour ne pas que tout paraisse minuscule, la valeur en pixel de chaque élément est démultipliée. 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.

À de telles résolutions, autant dire que vos images peuvent vite paraître pour le moins pixelisées. Il faut donc penser aux différentes tailles d’écrans, mais aussi aux différentes densités d’écans. Un 22″ HD (1920×1080) n’aura pas besoin de la même qualité d’image qu’un 22″ en 4k (4096×2016). Voyons comment penser nos images pour qu’elles soient éclatantes en toute situation.

(suite…)

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

Customiser le template de commentaires de WordPress

WordPress est souvent utilisé comme base pour des solutions sur mesure. La création de thème est dans l’ensemble bien documentée. Cependant, lorsque l’on développe un thème de A à Z, il n’est pas toujours évident de personnaliser les commentaires. Voyons comment arriver à nos fins.

(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 ! 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…)