J’utilise Firefox Nightly (57). Cette version est diablement plus rapide que Firefox 55 (la version actuellement stable, avant que la 57 soit définitivement adoptée, en novembre prochain), mais elle vient avec un gros hic : Mozilla est en train de tout refaire la mécanique interne du navigateur (la raison pour laquelle les performances sont si exceptionnelles), mais du coup les extensions actuelles ne fonctionnent plus. Il faut que les éditeurs des extensions mettent à jour les extensions et ceci va prendre du temps (seules quelques extensions sont aujourd’hui transposées sur le nouveau système).

Une extension que j’utilisais permettait d’avoir la barre des marques pages verticalement sur le côté droit : ça permet de gagner de la place à l’écran, ne fonctionne plus !

Pour obtenir le même résultat, on peut soi-même bricoler l’interface de Firefox. Ceci est rendu possible grâce au fichier userChrome.css : c’est un fichier CSS qui permet de manipuler les éléments de l’interface en CSS.

Ce fichier se trouve dans le dossier chrome/ du dossier de profil de Firefox.
Pour trouver le dossier du profile, copiez ceci dans la barre d’adresse et ça vous donnera le chemin vers le dossier du profile : about:profiles. Allez dans ce dossier, puis allez dans le sous-dossier chrome (s’il ne s’y trouve pas, créez-le).

Créez ensuite un fichier userChrome.css (attention : c’est un fichier .css, il ne faut pas qu’il y ait le .txt à la fin).

Et copiez-y le code suivant :

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* ne garde plus que les icône, pas les étiquettes */
#personal-bookmarks .toolbarbutton-text {display:none!important}

#PersonalToolbar {
	position: fixed!important;
	 /* own width of bookmark-bars */
	right: 35px!important;
	/* hight of url-bar + menu bar (top:0 corresponds of very top of firefox's interface) */
	top: 100px!important;
	height: 35px!important;
	/* turns the personnalToolbar on its side (from top-right, 90° CCW */
	transform-origin: top right!important;
	transform: rotate(-90deg)!important;
	padding: 0!important;
	margin: 0!important;
}

#personal-bookmarks {
	height: 100%!important;
	width: 100%!important;
	padding: 0!important;
	margin: 0!important;
	/* to have the icons in the previous listing order, rotate the list-of bookmarks 180° CW */
	transform: rotate(180deg)!important;
	transform-origin: 50% 50%!important;
}
#personal-bookmarks .bookmark-item {
	/* Icons are on theire side due to the 90° + 180° rotation. Put them back with a rotation, 90° CCW */
	transform: rotate(-90deg)!important;
	height: 100%!important;
	width: 25px!important;
}

/* this is to make room for the toolbar besides the browsing area of Firefox */
#browser,
#browser-bottombox {
    margin-right: 35px!important;
}

Et voilà le résultat :

capture d’écran de Firefox avec la barre de favoris verticale sur la droite
Bien-sûr, en modifiant quelques trucs, on peut aussi l’afficher sur la gauche de la page.

Oh et en cas de soucis avec mon code, supprimez le code du fichier, ou bien supprimez le fichier, puis relancez Firefox. Ce fichier permet de grandes choses, mais ce n’est pas un fichier critique.

ÉDIT : Malah me signale que cette astuce fonctionne également avec Firefox 55.

ÉDIT2 : Il y a un petit bug avec mon astuce : l’espace blanc sur le côté droit (celui qui décale la partie "page web" pour donner de la place à la barre) se retrouve présente également en plein écran. Si je trouve une solution, je la publierai, mais c’est pour moi un soucis minime donc n’attendez pas que je planche dessus dans l’immédiat.

Après mon premier article sur les astuces en CSS, puis le second, une autre astuce pour des menus responsives (incluse sur cette page), un autre post sur les choses à éviter ainsi que sur les préfixes devenues inutiles, quelques idées comme les couleurs relatives et quelques autres, voici le temps d’un autre article sur le sujet.

Cacher un élément avec une animation

Le but ici est d’avoir un élément HTML (un popup par exemple) et de le cacher après quelques instants en l’animant. Le principal problème étant que les propriétés « display: none » et « visibility: hidden » sont impossibles à animer, et il faut donc contourner tout ça. Mon astuce est inspirée de cette page.

On va se servir de l’opacité de l’élément. Le problème, c’est que si on n’utilise que ça, l’élément sera toujours là mais juste invisible : il occupera toujours de la place et masquera ce qui se trouve dessous (si c’est un formulaire ou un lien qui se trouve en dessous, ils seront inaccessible). On va donc réduire la hauteur de l’élément à zéro et masquer tout ce qui dépasse : l’élément ne mesurera plus rien.

L’élément à cacher est ici le « #popup ». Il se cachera après 3 secondes et l’animation durera 1 seconde.

Code CSS :

#popup {
    animation: disapear 1s 3s;
    animation-fill-mode: forwards;
    height: 100px;
    opacity: 1;
    overflow: hidden;
}

@keyframes disapear {  
    100% {
        height: 0;
        opacity: 0;
    }
}

Le fonctionnement des animations est simple : on dit qu’un élément HTML doit être animée avec une animation bien précise, et plus loin dans le code on va déclarer ladite animation : c’est le rôle du « @keyframes disapear », où on décrit l’avancement de l’animation. Ici, seul l’avancement à 100% est déclarée : l’état à 0% correspond au CSS déclaré « normalement », mais il est possible de déclarer des états intermédiaires pour chaque pourcentage.

La ligne « animation-fill-mode: forwards; » est très importante : sans elle, l’animation une fois terminée replacera l’élément dans son état initial. Ne pas mettre cette ligne permet de faire des animations dont les effets ne durent pas.

Les démos de codes sont ici :

Mettre une ligne de texte sur une seule ligne et masquer ce qui dépasse

Ici, on veut qu’une ligne de texte ne retourne pas à la ligne. On souhaite également masquer ce qui dépasse. Bien-sûr, on connaît la méthode classique avec seulement deux propriétés :

#element {
    white-space: nowrap;
    overflow: hidden;
}

Sauf que la coupure n’est pas belle. L’astuce ici est d’ajouter la propriété CSS3 « text-overflow », qui permet de choisir ce qui se passe à la coupure. Je choisis toujours « ellipsis », qui va ajouter des points de suspensions avant de couper la ligne.

Notez qu’il faut appliquer le « overflow: hidden » à un élément qui possède une taille définie (ici, je l’applique au bloc parent, dans lequel on met un bloc enfant).

On obtient alors :

#parent-block {
    overflow: hidden;
    text-overflow: ellipsis;
}

#block {
    white-space: nowrap;
}

Par ailleurs, pour que ça marche également sur les éléments <pre> et <code> et dans Firefox, ajoutez ceci : pre, code { white-space: pre-wrap; }.
Aussi, faites attention car cet effet masque du texte. Si c’est un résumé suivi d’un lien « lire la suite » ce n’est pas grave. Mais si c’est une ligne de code à copier, ça devient embêtant.

Ceci peut devenir très intéressant avec les flexbox, où les éléments ont une taille variable, et si l'on veut par exemple que les éléments (de liste par exemple) restent sur une seule ligne.

(source & liens)

Il y a quelques temps, je vous montrais une petite astuce pour faire des icônes « propres » sur mobile et desktop, puis une astuce pour faire un formulaire avec des icônes pouvant bénéficier de la première méthode

Depuis j’ai essayé de voir les autres techniques pour faire des icônes dans une page web.
Aujourd’hui, principalement 3 méthodes sont possibles :

  • prendre une image PNG (comme celle-ci) avec plein d’icônes dedans et utiliser la méthode des fenêtres coulissantes.
  • prendre la même image, mais au format SVG, donc vectorielle
  • utiliser les icon-fonts, des polices d’écriture avec des icônes dedans

Les PNG

La première technique avec les images de fond en PNG, tout le monde la connaît : c’est la plus utilisée, la plus supportée par les navigateurs, la plus simple… mais c’est aussi la moins malléable !
En effet, si ont veut afficher une icône plus grande, on peut le faire, mais l’image sera floue et pixelisée. Même chose si on veut afficher les icônes sur un écran où la densité de pixels est plus grande (écrans « Retina® », par exemple, mais Apple et ses Mac Book sont loin d’être un cas isolé aujourd’hui).
On peut créer plusieurs images avec différentes résolutions pour plusieurs types d’écran, mais ce n’est pas pratique.

Le second problème c’est si on veut changer la couleur de son thème graphique : les icônes doivent être adaptées aussi. Or pour ça, on ne peut pas faire grand chose : pour changer la couleur des icônes, il faut modifier l’image, ou là encore créer des images différentes pour chaque thème…

Les SVG

Les SVG permettent d’avoir des images nettes quelque soit la taille : c’est très pratique lors du zoom, ou lorsque votre site est susceptible d’être affiché sur un mobile (où la densité de pixels est bien plus grande que sur un écran d’ordinateur).
On peut obtenir le même effet avec du PNG, mais il faut pour cela partir d’icônes à haute résolution, et donc d’images très lourdes, ce qui va poser problème lors du chargement de la page, particulièrement sur mobile et surtout avec des connexions pourries. Le SVG, lui, reste précis avec le même fichier.

Le seul problème ici c’est que si on a toujours besoin de faire plusieurs images si on veut changer la couleur du thème. On peut faire ça en JavaScript (je fais cela dans cet exemple), mais pour le thème en CSS, ce n’est pas pratique.

Les Icon-fonts

Alors ici on conserve la netteté du SVG lors de la mise à l’échelle, mais on a en plus l’avantage très important de pouvoir colorier les icônes comme on veut !

En effet, tout se fait en simple CSS : on dit que l’on veut afficher tel ou tel caractère contenu dans la webfont et ensuite c’est du simple texte : on peut l’agrandir (avec font-size), la colorier (avec color), ajouter une ombre CSS (avec text-shadow), etc. C’est la méthode la plus pratique pour le designer final.

Pour créer un fichier de police avec les icônes dedans, il faut disposer d’icônes initiales (PNG ou SVG) et utiliser un programme pour transformer ça en une police. Je n’ai pas trouvé d’outil facile pour faire ça en local, mais cet outil en ligne fonctionne bien : IcoMoon.io.
Ensuite il suffit d’utiliser la police d’écriture comme c’est fait dans le fichier demo.html fourni au téléchargement.

Il y a quand même quelques inconvénients. J’en ai noté deux principaux :

  • une fois qu’on a généré notre police, il est difficile de la modifier : pour ajouter une icône, il faut régénérer la police (comme si on la recompilait à partir des icônes initiales), ce qui peut éventuellement changer les codes des icônes (chaque icône est accessible avec un code à utiliser dans le CSS).
  • le fonctionnement de l’usage des Icon-fonts fait qu’il ne sont utilisables que dans la propriété content de CSS. Or content ne peut être utilisée que sur les pseudo-éléments (::after et ::before), qui elles-mêmes ne sont utilisables que sur les éléments HTML non-autofermantes (donc toutes sauf les input, img, br, hr…). On peut donc utiliser les Icon-fonts partout sauf sur les input, les images…

Si vous voulez quand-même utiliser une icône sur un input, il faut ruser, et l’appliquer par exemple sur un label qui est rendu invisible.

L’usage des Icon-fonts est assez simple. Comme je l’ai dit, on utilise un code pour accéder à un caractère en particulier dans la police. Le CSS se charge d’afficher ce caractère à l’écran grâce à la propriété content :

.icon::before {
    content: "\1a02";
}

Ce que l’on fait parfois, c’est qu’on place ce code directement dans un attribut de l’élément HTML, puis le CSS affiche le contenu de cet attribut dans le content (oui, on peut faire tout ça :D) :

<span data-icon="&#x1a02;">Text</span>
[
@font-face {
    font-family: "icons";
    src: url("icons.woff") format("woff");
}

data-icon]::before {
    font-family: icons;
    content: attr(data-icon);
}

Et on peut changer la couleur, etc :

[data-icon]::before {
   [ …]
    color: red;
    font-size: 3em;
}

Bref, une fois qu’on a créé notre fichier d’icônes, l’usage est très simple, les possibilités sont énormes (couleurs, taille, ombres, animations — y compris sur la couleur, donc pour faire des couleurs arc-en-ciel \o/ — etc.), c’est supporté par les bon navigateurs récents (y compris mobiles).

Et concernant la lourdeur et le poids, je trouve que ça va tranquillement : mon fichier d’Icon-fonts fait 48 ko et contient 400 icônes différentes. Mon fichier PNG avant contenait environ 60 icônes pour 25 ko (certaines étaient en doubles pour pouvoir avoir des couleurs différentes).

Le titre n’est pas très clair, je sais.
Vous vous souvenez qu’il faut utiliser des tailles de polices relatives (em, %, en…) plutôt qu’absolues (px, pt, pc…) ? Ceci permet de conserver les échelles de taille de police quand on zoom (deux polices de taille différentes conserveront leur différence de taille quelque soit le zoom).

Ici il s’agit de faire pareil pour les couleurs. Cette astuce va permettre de modifier la couleur principale d’un thème beaucoup plus rapidement.

Imaginons que l’on ait un menu au fond blanc et au texte gris foncé, avec un effet de survol. Au survol, un élément devient gris. Le problème, c’est que le gris rend le texte (déjà grisé) moins lisible :

the font is barely readable on hover
#menu {
	background: white;
}
#menu li {
	color: #888;
}

#menu li:hover {
	background-color: #aaa;
}

Vous me direz qu’on n’a qu’à ajouter une couleur de texte au survol, aussi, ça résoudrait le problème :

#menu li:hover {
	background-color: #aaa;
	color: #333;
}

Oui, ça marche bien.
Mais que se passe t-il si je veux changer la couleur du menu, par exemple passer d’un thème blanc et clair à quelque chose de plus coloré comme du bleu :

changing the background alone is not enough
Ici, je n’ai modifié que la couleur de fond du menu, mais le hover reste gris et ça fait moche. Pour bien faire, il faudrait modifier 4 couleurs : la couleur de fond du menu, la couleur de fond lors du survol, la couleur de la police et la couleur de la police lors du survol.
On a donc 4 choses à modifier simplement pour changer la couleur principale du thème : ce n’est pas pratique.

Il y a pourtant un moyen de gagner du temps : on peut faire en sorte de modifier seulement la couleur de fond pour répercuter le changement de couleur et de contraste sur toute la chaîne des couleurs.
L’idée c’est d’utiliser des polices et des couleurs non pas grises, mais noires semi-transparentes. Comme ça, si le fond change et devient plus foncé, alors une partie de ce changement sera également répercuté sur la couleur de la police, qui deviendra également plus foncée :

hover enhanced lisibility
#menu {
	background: white;
}
#menu li {
	color: rgba(0, 0, 0, .4);
}

#menu li:hover {
	background-color: rgba(0, 0, 0, .3);
}

Et maintenant, il ne suffit de changer que la couleur de fond du menu, et l’ensemble restera toujours lisible et la couleur du hover sera toujours la même que celle du fond, mais en plus foncée. L’ensemble reste donc cohérent :

hover with good colors
On a donc des couleurs qui ne font que changer de luminosité, en conservant la teinte ainsi que la différence de luminosité. Les couleurs de la police et du hover sont donc relatives à la couleur principale.
Tout ceci fonctionne très bien avec les couleurs pas trop saturées (typiques du material design ou du flat design) et claires.

Si vous préférez un thème sombre, et un effet de survol qui éclaircit au lieu d’assombrir, vous pouvez utiliser des non pas du noir semi-transparent, mais du blanc semi-opaque.

Le même principe peut être appliqué aux ombres portées, dégradés, bordures…

Ça fait des années que je fais du CSS. Je suis un grand adepte du full-CSS et de l’usage des dernières technologies CSS. L’une d’elle c’est le modèle d’affichage de boîtes flexibles : FlexBox.
Ce concept en CSS existe depuis plusieurs années mais les spécifications n’ont pas cessées de changer (il y a au moins 3 spécifications différentes… par navigateur) mais il peut actuellement être considéré comme stable : les navigateurs à jour actuellement implémentent tous la même spécification.

Si je vous en parle en particulier c’est que plus je l’utilise, plus elle me facilite la vie.

Vous désirez centrer un élément ? L’étirer ? Changer l’ordre de plusieurs éléments ? Orienter des menus ? Faire des colonnes égales ? Le tout sans vous faire casser la tête ?
FlexBox est fait pour ça, et c’est relativement simple.

Flexbox fonctionne un peu sur le même principe que le duo ul/li ou le trio table/table-row/table-cell, à savoir une relation bloc-parent/blocs-enfants : il y a ainsi un parent en « display: flex » et c’est avec les blocs enfants qu’on bricole. Si vous avez compris tout ça, vous avez compris 80% de flexbox.

Ici je vous propose quelques exemples de ce que permet FlexBox.
En revanche, cet article n’est pas un tuto qui vous apprend tout ce qu’il faut savoir. Il s’agit plus d’un mémo illustré de code et de démos pour accomplir de choses précises qu’on avait l’habitude de faire autrement. Pour des tutos ou cours complets, j’ai mis quelques liens en bas de l’article.


Centrer

Centrer un élément horizontalement en simple CSS est très simple. Centrer verticalement relève d’avantage du casse-tête : il faut jongler avec line-height, position, display, margin et parfois du JavaScript
Avec flex, c’est plus simple :

En prenant le premier code HTML ci-dessus, pour centrer un bloc dans l’autre sur les deux axes :

#parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

#enfant {
}

centrer verticalement et horizontalement en CSS
(Démonstration)


Ici :
  • justify-content permet de placer les éléments sur l’axe principal (horizontal, par défaut) : soit au début, soit espacés, soit à la fin, soit centré comme ici.
  • align-items permet de placer les éléments sur l’axe secondaire (vertical, par défaut) de la même façon que justify-content.

Bien-sûr, les éléments sont centrés même si on ajoute des marges, des bordures ou des tailles en %.
Par contre, si vous voulez centrer une image ou une vidéo, ces dernières ayant une dimension et une proportion propre (contrairement à du texte), je conseille cette méthode (flexbox ne sera pas adapté, car une image n’est pas flexible si elle doit conserver ses proportions).


Colonnes de même hauteur

Un autre problème ancestral en CSS, c’est celui des colonnes de même hauteur. Avant il fallait des images ou des tableaux (et si utiliser les tableaux était un crime, « display: table-cell; » reste un délit).

Ici, le code est simple à comprendre également : on va utiliser un #parent et deux .enfants.
Sur les enfants, le premier est de taille fixe et le second prend tout le reste de l’espace disponible horizontalement.
Enfin, on dit que les enfants doivent occuper toute la place sur l’axe vertical.

#parent {
	display: flex;
	align-items: stretch;
}

.enfant:first-child {
	flex: 0 0 200px;
}

.enfant:last-child {
	flex: 1 1 auto;
}

faire des colonnes avec flex
(Démonstration)


  • Le align-items:stretch sur le parent signifie que les éléments sont étirés sur l’axe vertical, donc les deux seront de la taille de l’élément le plus grand (le principe des colonnes de même hauteur).
  • flex: 0 0 200px sur le premier enfant : il y a 3 valeurs pour flex. Les deux premières sont pour la flexibilité : 0 pour la flexibilité en rétrécissement et 0 pour la flexibilité en agrandissement et une largeur initiale de 200px. Pas de flexibilité signifie donc que la colonne est de largeur fixe.
  • flex: 1 1 auto du second (et dernier) enfant : il est donc entièrement flexible (en rétrécissement comme en agrandissement) et il n’a pas de largeur précise.

Vous pouvez ainsi faire plus de 2 colonnes aussi : une centrale large avec deux petites sur chaque côté, comme dans cet exemple.

Ayez en tête par contre que si vous utilisez des blocs flexibles, les autres types de positionnement (display, float…) ne marchent plus : c’est l’affichage en mode « flex » qui prend le dessus. Aussi, si vous déclarez une largeur de base avec flex: 1 1 200px par exemple, alors la propriété width ne donnera pas non plus le comportement attendu.

L’avantage de cette méthode sur une colonne flottante, c’est que le bloc flottant pouvait passer au dessus du reste de la page.

Étirer

Flex, vous commencez à le voir, permet non seulement de jouer sur le placement et l’étirement vertical, mais aussi l’étirement horizontal. À l’image de ce que float permet, vous pouvez ici placer un élément sur un côté ou l’autre, mais tout en le conservant dans le flux de la page.

C’est ce qui est utilisé dans mon astuce pour placer les icônes à côté des formulaires : l’icône est de largeur fixe et le champ du formulaire est flexible et peut s’agrandir librement, tout en restant bien à côté de l’icône. Flexbox apporte, en plus des flottants, tous les avantages du centrage et de l’étirement.

C’est ici la propriété flex: 1; appliqué sur le bloc à étirer qui se charge de faire tout ça.
Cette idée peut être utilisée sur les champs de formulaire, donc, mais aussi sur les titres-icônes, les menus et tout ce que vous voulez en fait.


Mélanger

Une des avancées importantes apportée par flexbox, c’est que l’on peut déplacer des blocs au sein de la page sans avoir à toucher au code HTML.
Si le code HTML contient trois éléments enfants dans un ordre précis (A, B, C), on peut les ordonner autrement : A, C, B, ou B, A, C par exemple :

.enfant {
	flex: 1;
}
#enfant-A {
	order: 3;
}
#enfant-B {
	order: 1;
}
#enfant-C {
	order: 2;
}

Ici, les éléments sont tous flexibles et on a modifié leur ordre d’affichage : si dans le code HTML l’ordre est A, B, C, à l’affichage flexbox changera ça en B, C, A :

changer l’ordre des éléments html avec flexbox
(Démonstration)


Bien-sûr, vous pouvez combiner l’ordre des éléments avec toutes les autres fonctionnalités de flexbox.


Orienter

Une autre innovation est la possibilité d’orienter les éléments avec une simple propriété : si on a une collection d’éléments enfant, on peut les placer sur une ligne ou sur une colonne :

Pour mettre en ligne (par défaut) :
#parent {
	flex-direction: row;
}

Et en colonne :
#parent {
	flex-direction: column;
}

orientation flexbox
(Démonstration)


Là aussi, il peut être intéressant de mélanger l’orientation avec les autres propriétés de flexbox.

Notez qu’au dessus j’ai parlé d’axe « principal » et « secondaire ». Le flex-direction permet d’inverser les deux axes en fait. Par défaut, l’axe principal est horizontal (les éléments sont placés sur une ligne) et l’axe secondaire est vertical (les éléments occupent une section de la ligne, mais peuvent être en haut, au centre ou en bas de leur sections respectives).


Aérer

Encore un effet attendu de flexbox : pouvoir disperser des éléments sur une ligne, en distribuant l’espace vide entre chaque élément. Ceci est particulièrement pratique pour les menus : avec ce code, inutile de diviser la largeur de l’écran par 5 et donner à chaque élément 1/5 de la largeur (et vous embêter avec les marges et les bordures) : flexbox peut distribuer les éléments sur toute la ligne de façon fluide.

#parent {
	justify-content: space-between;
}

Les éléments aux extrémités restent à chaque bout et les autres éléments sont espacés sur toute la ligne :

flexbox spacing
(Démonstration)



Ressources


Pour des choses plus évoluées encore, sachez que vous pouvez faire des blocs flexibles et imbriqués : un élément enfant flexible peut lui-même être en display:flex et avoir des enfants flexibles eux aussi, comme sur cette démo, avec leur propre orientation et effets.

(oui encore une astuce CSS, je suis en plein dedans, c’est pour ça :p)

Quand vous faites un bouton avec une icône, dans mon cas de 48px de côté, il s’affichera très bien sur l’ordi :
icônes sur l’ordinateur
Sur mobile en revanche, l’image sera toute pixelisée et moche :
icônes sur le téléphone (ne vous fiez pas à la taille des captures d’écran : la première est zoomée 3 fois et la seconde seulement 2 fois ; sans interpolation dans les deux pas. C’est la pixellisation qu’il faut regarder).

Pourquoi ? Parce qu’un écran de mobile en full-HD mesure 12 cm, alors qu’un écran full-HD d’ordi mesure 40 cm : la densité de pixels (pixel-ratio) est plus grande sur mobile.

Pour contrer ça, les navigateurs mobiles doublent les pixels : un pixel sur l’ordinateur correspond à 4 pixels sur mobile afin de respecter les tailles d’affichage.
Si cela concerne une image, l’image de 48px est étirée sur le double : 96px, et on se retrouve avec un effet de pixellisation désagréable.

CSS et JS offrent des solutions pour détecter le pixel-ratio et fournir une image plus détaillée pour les écrans les plus denses.
On trouve des articles sur ça avec du code et des exemples :

Mais je trouve ça vachement lourd. Il y a en effet beaucoup plus simple : utiliser une image avec une grande résolution et la rétrécir sur les écrans les moins denses.
Le résultat visuel est sans appel :

icônes améliorées sur mobile et ordinateur
Dans les deux cas, j’ai fait deux boutons : celui du haut avec une image de 48px affichée dans un bouton de 48px, et celui du bas est une image de 96px affichée dans un bouton de 48px et dont la taille est rapportée à 48px.

À gauche c’est sur mon ordinateur : on ne voit pas de différences entre les deux. À droite, c’est sur mobile : la différence est très visible : une icône de 96px réduite à 48px est bien plus nette !

Le code CSS est très simple et elle tient en un seul mot : background-size.


#bouton-48 {
    width: 48px;
    height: 48px;
    background: url(icon96.png) no-repeat 
    background-position: 0px 0px;
    background-size: 48px 48px;
}

L’image mesure bien 96 pixels de côté, mais elle est réduite à la taille de l’icône, donc ici d’un facteur 2.

La démonstration en temps réel est disponible sur cette page : affichez la sur l’ordi, puis sur mobile et vous verrez.

Avec la méthode des portes coulissantes, si vous savez disons deux icônes de 96px côté à côte, votre image fait 192px de large sur 96px de haut. Vous devrez donc utiliser ceci :
    background-size: 96px 48px;

Les valeurs dans le background-position ne sont pas à modifier.

Notez qu’il y a un seul inconvénient à ceci : l’image de fond est plus grande, donc aussi plus lourde.
Je pense que ça vaut le coup quand même : si la gestion du cache est correcte, l’image restera dans le cache du navigateur.
De plus, si vous utilisez des images multi-icônes avec la méthode des portes coulissantes, le poids de l’image ne sera pas excessif non plus.

Enfin, vous pouvez utiliser SVG, mais je pense que ça ne vaut pas le coup en terme de poids des images si petites.

firefox logo Pour les utilisateurs de Firefox, voici quelques idées qui peuvent le rendre plus pratiques. Il y en a un peu pour tous les goûts.

Les extensions

Mes extensions du moment sont, pour la vie privée et la sécurité :
  • Web of trust : pour un web plus sûr et vous avertir des sites dangereux ;
  • µBlock Origin : pour un web sans pub, plus rapide et plus sûr. (Tous les autres sont passés du côté obscure et sans un bloqueur, la navigation est juste impossible) ;
  • Click to Play per-element : permet de rendre les éléments Flash silencieuses jusqu’à ce qu’on les active par un clic. Ça empêche certaines pub, les onglets bruyants et ça allège la navigation de façon générale.

Pour les fonctionnalités supplémentaires :
  • Flash Video Downloader : télécharger des vidéos flash (Youtube). L’un des rares qui fonctionne assez bien.
  • Textarea Cache : qui enregistre ce qu’on tape dans les formulaires pour éviter de perdre ce qu’on tape en cas de session expirée. Il est beaucoup plus léger que Lazarus car son interface est plus sobre et surtout parce qu’il peut supprimer les vieilles données à chaque session ;
  • Greasemonkey : pour modifier tout et n’importe quoi dans les sites web (voir plus bas pour quelques uns de mes scripts).
  • Stylish : le Greasemonkey du CSS. On pourrait s’en passer et n’utiliser que Greasemonkey, mais ce module est bien plus rapide. Si vous utilisez Twitter, vous pouvez essayer mon tweak-twitter.

Pour l’interface :
  • Vertical Toolbar : pour avoir la barre de favoris sur le côté et gagner de la place en hauteur, ma précédente astuce ne marche plus depuis un moment ;
  • Tab Wheel Scroll : pour passer d’un onglet à un autre avec la molette de la souris (comme dans Chrome) ;
  • GNotifier : si vous êtes sous Linux, permet à Firefox d’utiliser le système de notification du système comme le joli Notify OSD d’Ubuntu, par exemple pour les téléchargement qui se terminent.

Dans About:config


  • ui.SpellCheckerUnderlineStyle : mettez-le à 3 pour que les mots mal orthographiés soient soulignés en rouge d’un trait plutôt qu’une vague. La lisibilité n’en est que meilleure ;
  • accessibility.tabfocus : mettez-le là aussi à 3 (au lieu de 7) pour que seuls les champs de saisie soient concernés par la touche de tabulation. Le « 7 » permet d’activer les liens en plus des champs de saisie ;
  • security.dialog_enable_delay : supprime le délaie de trois secondes lors de l’installation d’un module ou d’un téléchargement ;
  • browser.urlbar.trimURLs : passez-le à false avec un double clic pour que Firefox cesse de masquer des parties de l’URL ;
  • media.peerconnection.enabled : mettez à false pour désactiver WebRTC et du même coup la faille qui montre votre vraie IP même derrière un proxy (source).
  • layout.css.filters.enabled : activez ça pour avoir accès aux Filtres CSS3. Ce n’est pas activé par défaut, et ça permet d’utiliser cet outil.
  • places.history.expiration.max_pages : mettez un nombre entier ici pour limiter le nombre de pages dans l’historique de Firefox. Perso j’ai mis 4000. La clé places.history.expiration.transient_current_max_pages doit également être changée (mais elle est liée à la précédente).
  • browser.pocket.enabled : mettez à false pour désactiver Pocket dans Firefox 38+.
  • j’active tout ce qui est sur cette page pour profiter du HTML5 en fullHD sur Youtube (attention : ça active les DRM-html5 et les codecs proprio).
  • xpinstall.signatures.required : à mettre à false pour autoriser l’installation de modules complémentaires non signés.
  • network.http.speculative-parallel-limit : à mettre à 0 pour que Firefox ne fasse pas des requêtes simplement lorsqu’on passe la souris au dessus d’un lien.
  • browser.backspace_action : mettre ça à 0 fait que le touche « backspace » retourne d’une page dans l’historique (équivalent du bouton « précédent »). Mettre à 1 permet de faire comme une scroll-up.


Des moteurs de recherche personnalisés


C’est sûrement la truc le plus pratique disponible dans tous les navigateurs. Ce sont les « !bang » directement dans le champ de l’URL (sans passer par DDG ou Google). N’importe quel champ de recherche peut être lié à un raccourcis « !bang ».

Personnellement j’ai ainsi Wikipédia (w), Youtube (y), Google (g), Google Image (i), Google Image recherche par URL (ii), Flickr Recherche d’images en CC (fcc)…

Il suffit de faire un clic droit dans un champ de recherche et faire « ajouter un mot clé pour cette recherche ». Ajoutez ainsi un mot clé en face du champ « mot clé », par exemple « w » pour le champ de recherche de Wikipédia et il vous suffira ensuite de taper « w le hollandais volant » pour afficher la page Wikipédia sur le Hollandais Volant.


Sur l’interface


Pour l’interface, j’ai déjà la barre personnelle affichée verticalement sur le côté, mais j’ai aussi supprimé le champ de recherche (la barre d’URL remplissant cette fonction).
Mes icônes d’extensions sont aussi sur la barre des personnel.

Avec l’extension ClassicThemeRestorer je peux modifier beaucoup plus de choses dans Firefox. Je remet ainsi l’icône de rafraîchissement de la page à gauche de la barre d’adresse.

Scripts GreaseMonkey


GreaseMonkey permet de faire des scripts pour modifier des pages à la volée.
J’ai ainsi quelques scripts pour supprimer systématiquement les paramètres de tracking « UTM_* » dans les URL, ou pour réactiver les suggestions et le redimensionnement des champs de saisie.

J’ai aussi un script pour Youtube, me permettant d’avoir des URL Youtube propres (sans les « featured » ou « source »), ce qui est pratique pour les partager, voir là.

Pour Wikipédia, je lis principalement les pages en Français et en Anglais. Voici un script qui va mettre en rouge les liens sur la gauche de la page (celle pour voir un article dans les autres langues). Ça permet de gagner du temps quand on cherche à trouve le lien « English » dans la liste des 200 langues disponibles.


UserChrome.css


C’est le fichier dans le dossier ~/.mozilla/firefox/<le dossier du profile>/chrome/userChrome.css.

Ce fichier CSS permet de modifier l’interface de Firefox, en CSS. À une époque je l’utilisais énormément, mais avec les changements tout le temps depuis la version 3.5, je n’ai jamais tout mis à jour.
Le code suivant fonctionne cependant toujours très bien et il permet de diminuer la largeur des onglets et des onglets quand ils sont épinglés. Plus de place de gagné permet d’épingler plus d’onglets :

.tabbrowser-tab[fadein]:not([pinned]) {
	min-width: 20px !important;
	max-width: 180px !important;
}

.tabbrowser-tab[pinned] {
	width: 24px!important;
	min-width: 20px !important;
	max-width: 24px !important;
}

Et vu que j’utilise l’add-on Vertical Bookmarks, avec la barre de favoris sur le côté droit de l’écran, je réduis là aussi la taille des favoris à leurs favicon :

#personal-bookmarks {
	width: 24px;
}

Quelques raccourcis clavier utiles


Les raccourcis clavier que j’utilise le plus souvent sont :

  • CtrlShiftI : ouvre les options de développement ;
  • CtrlShiftM : toujours pour le dév, ouvre l’outil de redimensionnement des pages ;
  • CtrlL : place le curseur dans la barre d’adresse ;
  • CtrlT : ouvre un nouvel onglet ;
  • CtrlW : ferme l’onglet en cours ;
  • Tab : permet de passer au champ suivant dans un formulaire ;
  • CtrlTab : permet de passer d’un onglet à l’autre (ajoutez Shift à la combinaison pour aller dans l’autre sens)

Dans ce tutoriel, je vous montre comment faire des champs de saisie avec une icône de façon plutôt simple :

form
L’avantage du code qui suit, c’est qu’il est relativement propre, pure-CSS, accessible, très simple à comprendre et totalement flexible : l’ensemble reste manipulable avec vos propres styles sans tout foutre en l’air.
À ce jour, il est également très bien supporté par la majorité des navigateurs récents.

Commençons !

En HTML, un champ <input> devrait toujours être accompagnée de son étiquette <label> :

<label for="pseudo">Votre pseudo :</label>
<input id="pseudo" />

Plaçons l’ensemble dans un conteneur :

<div class="input-container">
    <label for="pseudo">Votre pseudo :</label>
    <input id="pseudo" />
</div>

Maintenant, il suffit d’utiliser les flex box pour les aligner côte à côte et de donner une hauteur au conteneur :

.input-container {
    display: flex;
    height: 24px;
}

input-container > input {
    flex: 1;
}

On veut une icône à la place du label. Très bien : on va placer en fond sur ce dernier.
Pour ne pas afficher le texte qu’il contient, on va également lui donner une largeur définie (celle de l’icône), masquer ce qui se dépasse (avec overflow) et faire en sorte que le texte soit entièrement sorti du champ de vision du label (avec box-sizing et padding).

Le CSS devient alors :

.input-container {
    display: flex;
}

input-container > input {
    flex: 1;
}

input-container > label {
    width: 24px;
    padding-left: 24px;
    box-sizing: border-box;
    overflow: hidden;
    background: url(icone.png);
}


Et c’est tout !
Vous n’avez pas besoin de vous occuper du centrage vertical (flex le fait pour vous), ni de la taille relative du champ et de son label (flex le fait tout seul aussi).
Vous n’avez pas non plus à souffrir en manipulant les ::before, le positionnement ou les flottants.

En plus de ça, vous pouvez évidemment ajouter vos propres styles, y compris des bordures et des marges : ça restera centré et aligné (merci flex !).
Cerise sur le gâteau : non seulement votre icône est cliquable comme doit l’être un bon label, mais si vous désactivez le CSS le formulaire reste entièrement accessible : le texte du label redevient alors visible :

formulaire sans css

(Inspiré de l’astuce ici)

On m’a demandé où était l’image pour faire la petite ligne de dégradé en bas de la page de mon site :

la ligne de dégradé en CSS en bas de la page de mon site

Il n’y a ni images, ni script, juste une ligne de CSS.

En fait, je mélange ici deux choses désormais largement supportés par les navigateurs :

  • les images multiples
  • les dégradés linear-gradient()

Le principe est le suivant : un dégradé, au niveau du navigateur se comporte comme une image de fond. On peut donc en mettre plusieurs et les décaler les un des autres :

background: linear-gradient(to right, transparent, red), linear-gradient(to right, blue, transparent);

Se comportera (presque) comme :

background: linear-gradient(to right, blue, red);


Après, les images sont décalées avec background-position.
C’est de là que vient mon astuce : il suffit de mettre un premier dégradé (la ligne noire), un deuxième (la ligne blanche) décalée de 1px vers le bas, et un troisième faux dégradé monochrome décalé de deux pixels vers le bas. Le faux dégradé n’a qu’une seule couleur, celle du fond du reste de la page.

Pour résumer, ça fait ça (où le rouge-bordeaux est en fait la couleur de fond du reste de la page, ne laissant alors apparaître que les deux lignes bleue et noire) :
images déclalé en CSS
Il suffit alors de remplacer les couleurs pleines par des dégradés avec 3 couleurs (le transparent sur le côté, une couleur pleine au centre).

Note importante quand même : dans la liste des 3 dégradés de fonds, c’est le premier qui est placé au dessus, les autres sont placés en dessous. Sur mon exemple ci-dessus, il faudra donc déclarer le rouge-bordeaux d’abord, le bleu ensuite et le noir en dernier.

Concernant la ligne de dégradé sur mon site, le code est là :

background: linear-gradient(to right, #212121, #212121) 0 2px no-repeat, linear-gradient(to right, #212121, #646464, #212121 ) 0 1px no-repeat, linear-gradient(to right, #212121, #010101, #212121 ) 0 0px no-repeat;

Remarquez que le premier dégradé est celui qui est unicolore et au-dessus, le second est le blanc et en dernier est la petite ligne noire du haut.

On vient de me faire remarquer — assez justement — que certaines parties du code source des pages de mon site (de BlogoText y compris) ne respectent pas les règles d’accessibilité.
La raison à ces remarque concerne la nécessité d’utiliser un navigateur graphique avec le CSS, le JavaScript et les Cookies activés pour pouvoir utiliser mon site à 100% de ses capacités.

Je passerai sur le fait que ces conditions sont remplies — ou peuvent l’être — sur environ 99,99% des postes informatiques et je vais uniquement me justifier sur mon droit et mon besoin en tant que webmaster/créateur du site d’utiliser ces technologies.

Déjà : si vous lisez mon site dans une console avec le navigateur Links, une partie sera inaccessible et le captcha ne marchera pas. Si vous désactivez le JavaScript, pareil : les boutons de formatage seront désactivés et (jusqu’à encore récemment) vous ne pouviez pas poster un commentaire sans activer les cookies pour l’ensemble de mon site.

Je suis désolé… Ou pas.

Les CSS, les Cookies ou le JavaScript sont des composants des langages utilisés dans l’affichage d’une page web : ce sont des standards très largement répandus et très largement supportés par la très vaste majorité des navigateurs (et parmi eux, la totalité des navigateurs graphiques).

Pourquoi je m’en priverai alors ?

Une page web devrait pouvoir s’afficher uniquement avec du HTML, et devrait être lisible et navigable : je suis d’accord.
Mais quand je veux offrir des fonctions comme les commentaires, le formatage de ces derniers et la protection de mon site contre le spam, le simple HTML ne suffit plus. C’est triste, mais c’est comme ça.

Concernant les commentaires, les cookies ne sont déjà plus nécessaires (j’ai trouvé une parade et ça marche), mais pour le formatage avec des boutons, le JavaScript est obligatoire (à moins de faire ça en Flash/Silverlight :O) et pour la captcha je préfère utiliser diverses astuces CSS/JavaScript qui fonctionneront sur 98% des ordinateurs qu’utiliser une image illisible avec un code à recopier (qui poussera 10% de mes lecteurs à la dépression nerveuse). À un moment il faut bien faire des compromis.

Je suis parfaitement conscient que certains sites abusent des cookies, des scripts, des plugins, des images pour vous espionner ou exécuter des fonctions malveillantes sur votre ordinateur, mais ce n’est pas le cas de tout le monde.
Et si on bloque les script ou les styles (ou même les images) dans les pages web, il faut bien assumer qu’on se prive d’une partie des possibilités offertes par ces pages web. Idem pour les publicités : les bloquer sur les sites qu’on aime, c’est assumer qu’on les réduit à leur perte (et les débloquer, c’est assumer que ce sont les sites qui nous poussent à notre perte, par la vente de renseignements sur nous).

Donc oui : je continuerais d’utiliser des astuces CSS, des scripts JavaScript, des cookies afin que mon site soit fonctionnel pour le plus grand nombre, tout en résistant au mieux aux attaques des spammeurs. Je peux aussi m’en passer, mais dans ce cas je devrai fermer les commentaires, ce n’est pas ce que je veux.

Tant pis pour ceux qui bloquent tout ça, désolé pour ceux qui utilisent un navigateur en mode texte.