Code excel.
… et en moins de 10 lignes de code.

Mon problème était de rendre simple l’export de données stockés dans un outil web (SQL + PHP + JS) en fichier Excel.
Au départ, j’avais proposé une production de code CSV, que l’utilisateur devait copier-coller dans Excel, puis fait quelques manips pour qu’Excel ne voie pas une plâtrée de texte, mais du CSV (chose que LibreOffice fait tout seul).

Mais c’était trop compliqué.

Le mieux que j’ai trouvé ensuite, c’est de produire un tableau dans la page web, en HTML, puis sélectionner le contenu, le copier, et prier pour qu’Excel détecte ça comme un tableau et redistribue ça dans les bonnes cellules.

Mais c’était ni assez simple, ni suffisamment fiable.

Du coup j’ai pondu un système avec un bouton : on clique dessus et ça ouvre Excel (.xls) directement avec le contenu du tableau.

Bien plus simple.

Prérequis

Le tableau de données doit être produit en tant que tableau HTML. Le tableau n’a pas besoin d’être dans la page. Cela peut être un objet DOM quelque part.
L’astuce ici fonctionne donc que le tableau soit dans la page, en mémoire, ou bien produit à la volée à partir des données brutes au moment du clic.

Le fait de l’afficher dans la page permet cependant de montrer le tableau avant de le proposer au téléchargement.

Fonctionnement

Un fichier Excel reste du simple XML. Il suffit de prendre les entêtes d’un fichier .xls et de mettre le tableau HTML en dessous. Ensuite, on récupère tout ça sous forme de base64, on force le navigateur à télécharger ça.

Code

Le HTML


<button type="button" onclick="tableToExcel(ID_TABLEAU)">Export to Excel</button>

<table id="ID_TABLEAU">
    …
    …
</table>

Le JS :


function tableToExcel(table_ID) {
	var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Worksheet</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
	var table = document.getElementById(table_ID).innerHTML;
	var xml_table = template.replace(/{table}/g, table);
	var base64_xml_table = window.btoa(unescape(encodeURIComponent(xml_table)));
	window.location.href = 'data:application/vnd.ms-excel;base64,' + base64_xml_table;
}

Je n’ai pas dit que c’était propre, mais ça marche.

Petite amélioration

Ici, le nom du fichier est plus ou moins une chaîne aléatoire. On peut changer ça, en utilisant un lien plutôt qu’un bouton : le bouton modifie l’URL de la page, mais avec un lien on peut actionner le téléchargement directement, avec l’attribut download.

Et si on veut juste garder l’apparence du bouton, on peut simplement mettre le lien autour du bouton :

<a href="#" download="tableau.xls"  onclick="tableToExcel(this, 'ID_TABLEAU')"><button>Export to Excel</button></a>

<table id="ID_TABLEAU">
    …
    …
</table>
function tableToExcel(link, table_ID) {
	var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Worksheet</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
	var table = document.getElementById(table_ID).innerHTML;
	var xml_table = template.replace(/{table}/g, table);
	var base64_xml_table = window.btoa(unescape(encodeURIComponent(xml_table)));
	link.href = 'data:application/vnd.ms-excel;base64,' + base64_xml_table;
}

Exemples

Exemple sur Codepen.io.

Notes et limites

Une des limites est que les styles ne sont pas forcément pris en compte. Les dispositions des cellules (rowspan et colspan) semblent bien fonctionner systématiquement, du moment que le tableau est en HTML et pas reconstitué avec du CSS (display: table-cell, ou encore avec des grid), mais les couleurs et autres formatages ne sont pas garanties.

Un autre problème peut survenir quand les tableaux sont vraiment très grands. Je ne sais pas si les navigateurs mettent une limite sur le contenu d’un href, mais ce n’est pas exclu non plus.

Image d’en-tête produite par Bing AI

Le plus souvent quand on fait un thème sombre et un thème clair pour son site, on a déjà l’un des deux et on fait en sorte d’ajouter un « patch » qui va ajouter le support de l’autre.

Dans ce qui suit, je ferais comme si on avait un thème clair, et qu’on veut l’adapter (le patcher) pour avoir un thème sombre.

Introduction et méthode

Idéalement, le on ne touchera pas du tout au thème de base. C’est le patch qui va alors écraser certains styles du thème de base.

En pratique, le CSS qui concerne l’agencement des éléments n’est pas modifié : position, margin, padding, display, etc. ne changeront pas.
Seules quelques déclarations esthétiques vont être réécrites : color, background, *-shadow, border

Ceci rend extrêmement simple la création d’un thème sombre à partir d’un thème clair.

Typiquement, pour un site initialement en noir sur blanc, on va faire en sorte qu’il soit en blanc sur noir avec le thème sombre.

Par exemple, si le thème initial est ça :

body {
    color: black;
    background-color: white;
    margin: 20px;
    font-size: 3em;
}

p {
   text-align: center;
}

Le patch pourrait être tout simplement :

body {
    color: white;
    background-color: black;
}

On mettra alors ceci comme patch dans le CSS destiné uniquement au thème sombre :

@media (prefers-color-scheme: dark) {
    body {
        color: white;
        background-color: black;
    }
}

Seul le CSS qui change est redéfini. Inutile de faire une duplication complète du thème.

Bien-sûr, ça fait un peu plus de CSS, mais l’avantage est qu’il contiendra les deux variantes en même temps. Ceci est pratique si c’est le navigateur qui choisi lequel appliquer, selon la politique thème clair/sombre du système et donc de l’utilisateur (politique que je vous conseille d’appliquer). Rappelons que le thème sombre/clair peut changer au cours de la journée sur certains systèmes (iOS le fait très bien par exemple).

On peut mettre le thème sombre (ou son patch) dans un fichier à part, et le navigateur ne le chargera qu’à sa discrétion, avec l’utilisation d’un élément LINK dédiée :

<link type="text/css" rel="stylesheet" media="(prefers-color-scheme: dark)" href="styles/style-dark.css" />

Plus votre thème est bien pensé, plus il sera rapide de l’adapter. Si vous aviez mis des color à chaque élément, il faudra tous les réécrire. Mais si vous n’avez mis qu’une couleur initiale, qui est héritée sur tous les éléments de la page, changer le thème sera rapide.

Approche avec les variables

Une autre approche qui existe, et que je conseille pour les thèmes nouveaux que vous créez est de faire un « template de thème » avec des variables, qui va convenir au clair, comme au sombre, et dont les couleurs sont contenues dans des variables qui eux dépendront du thème choisi.

C’est une méthode moderne, mais qui ne marchera pas sur les vieux navigateurs (sans support du prefered-color-scheme, ou des variables).

L’idée est de faire ça :

/* Définition des variables couleurs thème clair */
@media (prefers-color-scheme: light) {
body {
    --couleur-text: black;
    --couleur-fond: white;
}

/* Définition des variables couleurs thème sombre */
@media (prefers-color-scheme: dark) {
body {
    --couleur-text: white;
    --couleur-fond: black;
}

/* CSS normal */
body {
    color: var(--couleur-text);
    background-color: var(--couleur-fond);
}

Bien-sûr, ces variables sont globales et peuvent être utilisées partout où l’on souhaite mettre cette couleur. Donc pour le texte, mais aussi des bordures ou des couleurs d’ombres par exemple :

table, td {
    border: 1px solid var(--couleur-text);
}

(Même si pour cet exemple spécifique, il serait bien plus judicieux de mettre border: 1px solid currentColor; qui est une valeur CSS existante depuis très longtemps).

Le thème clair/sombre contiendra alors seulement une série de variables. On pourra, de même, ajouter des thèmes rouges, bleu, inversé… bref c’est plus libre.

Dans ce qui suit, quelques astuces en vrac, car les différences entre un thème sombre et un thème clair ne se limitent pas qu’à changer du noir-sur-blanc en blanc-sur-noir.

Astuces diverses

Certains éléments peuvent changer de couleur (au hover, au focus…) même dans le seul thème clair. D’autres éléments ont des couleurs par défaut du système, qu’il faudra réécrire si l’utilisateur choisit un thème web sombre sans un thème système sombre.
Il faudra tester intensivement son CSS pour vérifier que les couleurs soient assez lisibles.

Il faut aussi s’assurer que toutes les couleurs soient cohérentes (sinon ça sera moche) : donc le texte et les fonds, mais aussi la couleur :

  • des bordures ;
  • des ombres (boîtes, texte) ;
  • des images de fond (préférez ceux avec un canal alpha) ;
  • des images de contenu (rien de pire qu’un schéma tout blanc sur un écran noir) ;
  • des couleurs des liens : visités ou non-visités ;
  • des éléments de l’interface (contrôles, icônes, menus, bulles de listes…) ;
  • d’éventuellement du pointeur de souris, si vous le modifiez ;
  • du ::placeholder d’un champ texte (s’il est gris il devra être lisible à la fois sur fond clair et sombre).

Pour les images, il faut faire attention :

  • une image de fond claire avec du texte noir positionné par dessus, oui ! Mais garder le même fond en ayant changé le texte en blanc, non !
  • inversement : si vous avez une image transparente avec du texte noir posé sur une page blanche : bien ! Mais si le fond de page change et que l’image reste identique, donc en texte noir, on aura du texte noir (sur l’image) sur un fond noir (la page) : pas bien !

Assombrir les images en CSS sans changer la couleur

L’idée ici est de prendre une PNG transparente avec, par exemple, du texte écrit en noir. Si le fond de la page est clair, pas de soucis. Si le fond de la page est noir, l’image sera illisible.

On peut utiliser ce CSS :

@media (prefers-color-scheme: dark) {
	img[src$=".png"] {
		filter: invert(1);
	}
}

Cela inversera la luminosité des couleurs (le blanc devient noir, le noir devient blanc, et le gris 50 % reste tel qu’il est.
Problème : cela inverse également le sens du cercle chromatique : le rouge deviendra vert, le bleu deviendra jaune, etc. Ce n’est pas idéal.

Pour conserver les teintes des couleurs, il faut retourner le cercler de 180° : hue-rotate(180deg). Ainsi, le rouge redevient rouge, le vert redevient vert. C’est juste que le rouge foncé deviendra rouge clair, etc.

Personnellement, j’ajoute également un saturate(3) afin d’ajuster l’ensemble. Le CSS final :

@media (prefers-color-scheme: dark) {
	img[src$=".png"] {
		filter: invert(1) hue-rotate(180deg) saturate(3);
	}
}

Le résultat :

Exemple d’application des filtres CSS.
Avec le filtre, les couleurs sombres dans l’image transparente restent lisibles.

Cette méthode n’est pas parfaite (le bleu semble un peu terne par exemple), mais il a l’avantage d’inverser la luminosité pour que ça reste lisible quel que soit le fond, et de conserver les teintes (le rouge reste rouge, le vert reste vert).

Évitez les ombres

La seconde astuce dans la confection d’un thème sombre concerne les ombres (text-shadow, box-shadow).

Les ombres, c’est joli sur un thème clair car ça ajoute de la profondeur et permet de définir la hauteur d’un élément sur l’axe Z. Ça permet de voir quel élément est littéralement à l’avant-plan. L’ombre fonctionne donc exactement comme dans la vie réelle : si elle est large est diffuse, l’objet est plus haut que si l’ombre est petite et sombre.

En thème sombre, si vous mettez une ombre claire, on perd la relation avec la vie réelle, car les ombres claires ça n’existe pas ! Conserver la relation avec la vie réelle est un des fondements du design en Material Design, par exemple.

Il faut donc éviter les ombres dans un thème sombre : ça n’a pas de sens. Préférez jouer sur la couleur de fond. En particulier pour ce qui est du :focus ou du :hover. Il faut toujours que l’interaction soit visible par l’utilisateur. En faisant ça on retrouve un parallèle avec la vie réelle : si on éclaire un élément sous une faible luminosité, les éléments en avant seront plus clairs que ceux en arrière plans.

Voici un exemple, avec un champ texte qui est ombré dans le thème clair et coloré dans le thème sombre :

Champ texte en clair VS sombre
Ici, lors du focus, le thème sombre joue sur la couleur de fond, alors que le thème clair joue sur l’ombre.

En material design, c’est ce qu’il faut faire. D’autres design utilisent autre méthodes.

Évitez les bordures

De même que les ombres, en thème sombre, les bordures n’ont pas la même signification.

Sur un thème clair, les bordures délimitent les éléments un peu comme dans la réalité, car la lumière se diffuse à cet endroit. En thème sombre, si on veut que ça se voit, on met un bord clair, mais on perd là aussi le rapprochement avec la réalité. Préférez donc là aussi de jouer plutôt sur les couleurs de fond.

Si vous voulez tout de même une bordure, il y a une petite astuce qui consiste à utiliser des bordures grises transparentes (avec RGBA). Ainsi, la bordure sera toujours visible quel que soit le thème de fond (même gris) car sa couleur sera sa propre couleur transparente additionnée à la couleur de fond.

Essayez par exemple :

border: 1px solid rgba(0, 0, 0, .15)

Du gris plutôt que du blanc

Quand je parle plus haut d’utiliser du blanc sur du noir, c’est une caricature. Le blanc sur du noir, principalement sur des écrans à fort contraste, comme les écrans OLED, cela pique les yeux : le contraste est trop fort.

Préférez donc du gris clair sur du gris foncé. Au besoin, en plus d’un thème sombre, vous pouvez proposer un thème « noir ». Ici, un fond noir et du texte gris clair donnera un rendu particulièrement appréciable sur des écrans OLED, où les noirs sont absolus.

Faites attention à tout

Je le répète, mais testez bien votre code. Certains éléments de page tirent toujours leurs couleurs des styles système (les menus ou les éléments de formulaire notamment, telles que les optgroup ou select).
Si le thème système est clair, mais que vous voulez forcer un thème sombre, alors le système mettra un texte sombre et vous un fond sombre : ça sera illisible. Le mieux, je le recommande, c’est de se conformer au thème du système de vos visiteurs.

Au pire, mettez un bouton pour permettre à l’utilisateur de choisir.

Concernant l’accessibilité

Faites attention à tout… y compris à l’accessibilité ! Généralement les contrastes sont moins bons sur les thèmes sombres. À titre d’exemple, on peut facilement constater que les textes en gras sont plus difficiles à repérer sur un thème sombre. Une astuce couramment utilisée pour ça, si votre texte est en gris clair sur noir, c’est de mettre le gras en blanc (en plus de le mettre en gras) pour le faire ressortir d’autant plus.

Notez également que même si le thème sombre est là pour reposer vos yeux dans un environnement faiblement éclairé, il semblerait qu’il fatigue beaucoup plus au contraire (source et source) !

Safari sur iOS (et sur Mac) n’utilisent pas Blink, mais Webkit. Apple est parti de son côté avec Webkit et du coup fait un peu n’importe quoi. Ayant désormais un iPhone, je me retrouve à corriger mes sites et outils pour iOS.

Voici quelques trucs et astuces. Cet article sera emmené à être étendu avec le temps.

Zoom lors du tap sur un champ texte

Safari nous zoom la page quand on tape sur un champ texte. Ça part d’une bonne intention, mais premièrement ça déforme la page, et ensuite, quand on sort du champ texte, ça ne dézoome pas. C’est stupide.

La solution qui marche, sans toutefois interdire le zoom à l’utilisateur (ça c’est très important), c’est mettre ce HTML dans votre <head> :

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes"/>

La magie vient du « maximum-scale ». Notez bien qu’il s’agit de l’échelle automatique. Le user-scalable="yes" assure que le zoom à deux doigts reste possible. Si vous mettez « user-scalable="no" », je n’aurais que deux mots : au bûcher !!

Le :hover sur iOS

Sur Vivaldi comme Firefox mobile (android), le :hover est activé lors du tap. Sur iOS il n’en est rien (enfin pas toujours). Ça se résout en ajoutant l’attribut « onclick » sur l’élément. Juste l’attribut, pas de valeur. iOS considère en effet que si l’on click, le hover s’active. Ici on clique, ça n’a pas d’effet directement, mais ça déclenche tout de même le hover.

Alternativement, et en mieux, on peut mettre dans son JS :

document.addEventListener("click", function() { });

Ce qui rend la correction plus rapide que d’ajouter onclick="" partout dans la page.

Certains parlent de mettre un « cursor: pointer » en CSS. Ça aurait été tout à fait pertinent que iOS active le :hover sur un élément dont le curseur est un pointeur (la petite main qui clique), mais malheureusement cette solution ne semble pas fonctionner.

Pour le parsage des dates en JS

La plupart des navigateurs, en JS, quand on leur donne un texte représentatif d’une date, essayent de parser ça comme ils peuvent. C’est censé marcher même quand on leur donne une date en langage naturel, comme « vendredi 4 mars 2022 », qu’ils traduiront en le bon objet de date.

Perso j’utilisais une chaîne de date-heure égale à « 2022-03-04 18:30:59 ». Firefox et Chrome n’ont pas de problèmes pour parser ça. Safari exige qu’on mette un « T » entre la date et l’heure : « 2022-03-04T18:30:59 », sinon il renvoie une erreur.

Safari a raison : le T pour « time » provient de l’ISO 8601 étendue et il faudrait l’inclure tout le temps.
Ceci est donc un rappel que ce n’est pas parce que ça marche sans le T que c’est une bonne pratique.

Placeholder sur [type=date]

Si vous avez un input de type date sans placeholder, alors Firefox et Chrome (blink) mettront une date vide : « jj / mm / aaaa ».

Safari (sur Mac) mettra la date du jour… mais en placeholder, donnant l’illusion que la date est remplie, alors que ce n’est pas le cas. Vérifiez bien que ça soit effectivement le cas dans vos app.

Étrangement, sur iOS, je n’ai pas ce souci, mais il est bien réel sur certaines versions de Safari sur Mac que j’ai pu voir (pas pu regarder plus en détail, désolé).

Les événements load, beforeunload, unload

Ces événements sont dépréciés sur iOS, et ne sont pas forcément fiables ailleurs. En effet, le comportement des utilisateurs sur mobile est de changer d’appli ou d’onglet sans fermer la page, donc sans « unload ». Le problème se pose aussi sur Android, même sur iOS, ces fonctions ne semblent plus fonctionner du tout, ce qui pose effectivement problème dans le cas où l’on ferme l’onglet en cours.

À la place, il est préférable d’utiliser l’événement « visibilitychange » (qui se lance quand on change d’application ou d’onglet) et « pagehide », qui est lancée à la fois quand on change la visibilité de l’onglet et juste avant qu’on le ferme. Dans les faits, pensez à utiliser les deux car le premier agit sur mobile et le second sur desktop. De plus, un bug sur Webkit fait que le « pageHide » n’est pas déclenché quand on change de page lors qu’on clique sur un lien dans celui-ci.

Plus d’information ici (avec un tableau de compatibilité). Et voyez sur les événements supportés par iOS.

Enfin, il en va de même pour l’événement « load », qu’il faudrait remplacer par « pageshow ».

Code de programmation.
J’ai déjà fait un article sur Pourquoi mettre le JavaScript à la fin et le CSS au début ?, et je vous invite à le lire.

Les astuces ici sont en plus.

Utiliser preload pour précharger les ressources utiles

Bien que l’on puisse mettre le CSS dans l’entête, il faut se souvenir que dans le CSS, on peut lier d’autres CSS, avec les @import, ou même des polices, des images (avec background-image). Cela peut ralentir l’affichage.

Si les fichiers sont petits, il est préférable de les précharger : le téléchargement en parallèle est alors avantageux sur le téléchargement en série des fichiers.

Pour ça, dans le head de la page HTML, on peut utiliser ça :

<link rel="stylesheet preload" href="style/style.css" as="style" />
<link rel="preload" href="fonts/font.woff2" as="font" type="font/woff2" crossorigin />

Cela permet de précharger les ressources en même temps que la page.

Quelques remarques :

  • pour le CSS, j’ai mis stylesheet et preload. Certains mettent juste preload, puis utilisent JS pour changer le preload en stylesheet quand la page est chargée, avec onload. Perso je vois pas l’intérêt d’utiliser JS pour ça : ça ne fait que retarder le rendu.
  • pour le fichier woff2 (police), j’ai ajouté un crossorigin. Je ne sais pas pourquoi, les navigateurs en ont besoin (à la fois Firefox et Chrome), sinon il préchargent le fichier, le jettent, et le rechargent quand la requête réelle est demandée…
  • on utilise preload et non prefetch. Prefetch sert à précharger des pages sur lequel vos lecteurs vont cliquer, afin de gagner du temps lors de la navigation entre plusieurs pages. Preload sert à charger des ressources pour la page courante.

Ne charger les scripts que quand ils sont utiles

Ensuite, les scripts doivent être mis à la fin (voir mon article lié plus haut).

Sauf que certains scripts dépendent du contenu d’une page.
Par exemple, sur Couleur-Science, les équations dans certains articles utilisent KaTeX (il existe un standard HTML pour afficher des équations (MathML), mais il n’est supporté que par Firefox, donc pour l’instant, on passe par une lib JS).

Certains de mes articles n’ont pas d’équations. Dans ce cas, pourquoi télécharger 150 ko de JS ?
Chez KaTeX, on identifie une équation en le plaçant entre des signes « $ ». Comme ça : « $ equation $ ».

Je fais donc un test : si le contenu de l’article contient un signe $, je charge Katex. Autrement, je ne le charge pas.

Ah et je fais ça seulement quand le reste de la page a fini de charger : rappelez-vous, si vous initiez le chargement d’un script, le rendu de la page se bloque.

Je fais donc ça :

document.addEventListener("DOMContentLoaded", function() {
	var contenuDom = document.getElementById('contenu').textContent;
	if (contenuDom.indexOf('$') !== -1) {

		// only if Katex needed is it added
		var newLink = document.createElement('link');
		newLink.rel = 'stylesheet';
		newLink.type = 'text/css';
		newLink.href = 'katex/katex.min.css';
		document.head.appendChild(newLink);

		var katexRes = document.createElement('script');
		katexRes.src = 'katex/katex.min.js';
		document.head.appendChild(katexRes);

		setTimeout(function() {
			renderMathInElement(
				document.getElementById('contenu'),
				{
					delimiters: [
						{left: "$$", right: "$$", display: true},
						{left: "$", right: "$", display: false},
					]
				}
			);
		}, 1000);
	}
});

Explications :

  • j’attends le chargement de la page.
  • ensuite, je regarde si le #contenu contient un « $ ». Si oui, j’initie le téléchargement du CSS de Katex, puis du Script de Katex.
  • Enfin, j’attends un instant (1 s) et je dis à Katex d’afficher les équations qu’il trouve dans la page.
    Si je mets le renderMathInElement() dans un katexRes.onload(), ça ne marche pas. En effet, onload() se déclenche quand le fichier a fini de télécharger, pas quand il a fini d’être parsé. Il faut que le code dans le fichier soit parsé, pas juste téléchargé.

Pas de base64 pour le SVG inclus dans le CSS

Si l’image est très légère, une requête sera plus longue que le téléchargement, il est alors préférable de l’inclure directement dans la source. Quand on veut mettre des images très légères directement dans le CSS, on les inclut en Base64 : le fichier image se met sous une forme textuelle et on la copie-colle dans le CSS.

Inconvénient : le Base64 pèse 33 % plus lourd.

Si notre image est en SVG, tout ceci est inutile : le SVG est lui-même du texte. On peut dont le placer directement dans le code. Il suffit de dire que le format est du SVG :

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><path d='M10.5 15l7.5 7.5 7.5-7.5z' /></svg>");

En prime, le SVG reste lisible. Il faut juste faire attention à correctement échapper les caractères (quotes, doublequotes…).

Pour les polices d’icônes

Concernant les petites images/icônes, j’utilise une police qui contient les glyphes. Les icônes que j’utilise sont les icônes de Google Material Design. Il y en a plus de 1 000 différentes.

Si vous n’utilisez que 10 icônes, il ne sert à rien de toutes les intégrer. Dans ce cas, on peut n’intégrer que les polices nécessaires.

Pour cela, j’utilise personnellement Icomoon, un outil en ligne. On peut lui donner ses propres SVG (ceux de Google Material par exemple) et produire une police en .woff ou un autre format.
Seul problème : il ne produit pas de .woff2 (dont la taille de fichier est moitié moindre). Il faudra donc utiliser un autre convertisseur pour transformer le .woff en .woff2.

Là aussi, si nécessaire, utilisez un préload pour ce fichier, ou bien incluez le directement dans le CSS en Base64.

Enfin, n’oubliez pas qu’il faut peut-être autoriser la mise en cache avec .htaccess (les formats .woff et .woff2 ne sont pas forcément pris en charge nativement dans ce fichier) :

<IfModule mod_expires.c>
  AddType application/x-font-woff .woff
  AddType application/x-font-woff2 .woff2
  ExpiresActive On
  ExpiresDefault "access plus 1800 seconds"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-woff2 "access plus 1 year"
</IfModule>

D’autres liens

J’espère que les quelques astuces ci-dessus seront utiles.
Ci-dessous, quelques autres astuces accumulées depuis les années :

Enfin, pour des astuces plus générales :

  • pensez à utiliser break/continue
  • rappelez-vous : ce qui compte, c’est la vitesse perçue ; dans cet exemple du lecteur RSS, il est inutile que tous les flux soient téléchargés immédiatement. L’internaute ne lira qu’après 1 ou 2 secondes, le temps qu’il choisisse quoi lire. Récupérez donc d’abord les titres des articles, puis, pendant qu’il choisit les titres qu’il va lire, on télécharge le contenu des posts. C’est comme quand vous êtes au restaurant : le cuistot ne prépare pas tous les plats en avance, mais commence par proposer le menu et proposer à boire. Comme ça, pendant que les gens boivent, il prépare le plat.
  • utilisez les JPEG progressifs
  • pour le JSON, utilisez type="application/json". Ça sera *beaucoup* plus rapide à parser
  • et voyez tout ça

Passer en HTTP2

Enfin, et c’est probablement le plus gros gain que vous aurez, mais il faut que ça soit mis en place au niveau du serveur (ce qui peut ne pas dépendre de vous) : passez en HTTP2.

Voir ces liens : 1 , 2 , 3 , 4 .

(merci Thibault pour celui-ci)

Résultat

Résultat satisfaisant (pour ce que ça vaut, mais ça donne une idée) :

Score PageSpeed Insight Google.
Donc non, il n’est pas nécessaire d’avoir un design ultra-flat tout blanc et noir si l’on veut qu’elles soient rapides.

image d’en-tête de Lucas Bravo

Il y a quelques années, j’avais fait un article pour expliquer comment mettre la barre de signets verticalement dans Vivaldi. Cette méthode n’est plus d’actualité et était de toute façon remise à zéro lors des mises à jour du navigateur.

La nouvelle méthode est elle persistante, et même si elle semble similaire, elle utilise des options qui n’étaient pas là dans Vivaldi avant.

Activer les modifs CSS de l’interface

Pour commencer, il faut activer 2-3 trucs dans les options du navigateur, y compris des options expérimentales.

Premièrement, activez les mods CSS. Pour ça, allez sur l’adresse vivaldi://experiments/ puis cochez la case « Allow for using CSS modifications ». Relancez le navigateur.

Rendez-vous ensuite dans les paramètres, et cherchez « CSS ». Vous devez alors voir apparaître une option qui permet de spécifier un dossier :

Paramètre de CSS de Vivaldi
Mettez-y un dossier de votre choix. Je vous conseille de choisir un sous dossier nommé « userChrome » dans le dossier de profil de Vivaldi. Sous GNU/Linux, le dossier de profil se trouve dans ~/.config/vivaldi/.

Ce dossier « userChrome » va contenir des fichiers CSS contenant le code CSS correspondant aux modifs de l’interface du navigateur.

Activer la barre de signets

Ensuite, dans les paramètres, toujours, assurez-vous que la barre de signets soit en haut, que les signets soient affichés sous formes d’icônes seulement :

Afficher les signets sous forme d’icônes.

Utiliser du CSS pour mettre cette barre verticalement sur la droite

Ce que mon code CSS va faire maintenant, c’est :

  • pivoter la barre 90° dans le sens horaire (la barre se trouve alors à gauche et les icônes sur le côté)
  • déplacer cette barre (sur la gauche) vers l’autre côté, à droite
  • faire pivoter les icônes de −90° pour les remettre dans le bon sens.
  • faire en sorte que la barre n’empiète pas sur la fenêtre principale du navigateur (la partie où s’affichent les pages)

Le code en question :

/* Bookmarkbar : turning it on the side, placing it on the right */
#app #browser #main .bookmark-bar {
	transform: rotate(90deg) scale(1, 1)!important;
	transform-origin: 0% 0%!important;
	position: relative!important;
	left: 100%;
	height: 34px;
}

/* flip back the individual icons */
#app #browser #main .bookmark-bar button {
	transform: rotate(-90deg)!important;
}

/* gives margins to the main frame */
#app #browser #main .inner {
	margin-right: 35px!important; /* gives place to the new bars position */
	margin-top: -35px!important; /* claims the place from its old position */
}

Ce code est à placer dans un fichier CSS dans le dossier créé précédemment. Donnez-lui le nom que vous voulez ; par exemple « vertical-bookmarks.css ».

Enregistrez ce fichier, puis redémarrez Vivaldi, et la barre devrait être vertical, à droite :

Vivaldi avec la barre de signets à droite.

Quelques notes

Ceci est testé avec Vivaldi 3.7.2218.58 (Stable channel) (64 bits) sous Linux Mint 20.
Le code CSS utilisé est le même que celui de mon astuce d’il y a quelques années.

Vivaldi le dit bien : l’option pour le CSS peut, un jour, être modifié ou retiré. Dans ce cas, ce mod ne fonctionnera plus : la barre de signets sera alors de nouveau en haut, horizontalement. Ça ne sera pas grave (aucune perte de données), mais il faudra alors trouver autre chose.

À l’époque d’Opera, il était possible de mettre la barre de signets verticalement d’une simple option dans les réglages. On peut espérer que cette option revienne un jour dans Vivaldi. En attendant, ce bricolage permet de dépanner.

Toute l’interface de Vivaldi est accessible en CSS. Pour en explorer les éléments, il faut lancer Vivaldi dans un mode spécial, avec la commande vivaldi --debug-packed-apps --silent-debugger-extension-api, et ensuite utiliser les outils de développeurs pour l’explorer et moder ça.

Firefox peut se configurer dans les préférences, mais il y a des milliers de paramètres avancés qui sont cachés, certaines sont pourtant sympa : ce sont les paramètres dans le fameux « about:config ».

Ne faites pas n’importe quoi là-dedans (ça pourrait être problématique). Voici simplement mes réglages du moment (les anciennes listes pouvant être obsolètes).

Il n’y a pas spécialement d’ordre dans ce qui suit.

Le soulignement des mots mal orthographiés

ui.SpellCheckerUnderlineStyle



Mettez (ou créez) une clé de ce nom, de type « nombre » (ou « integer) et donnez-lui la valeur 3.

Firefox souligne les mots mal orthographiés avec de petites vaguelettes bien connues. Perso j’aime pas les vaguelettes. Je préfère un soulignement d’un seul trait, simple et plus net sur mon écran. Ce tweak permet d’avoir ça. On peut aussi obtenir un double trait, des pointillés, des points, etc. Essayez juste de changer le numéro.


Activez le correcteur orthographique dans tous les champs


layout.spellcheckDefault



Mettez cette clé, de type nombre à 2.

Par défaut, le correcteur orthographique n’est appliqué que sur les champs textes de plusieurs lignes (les textarea), pas sur les champs d’une seule ligne comme les champs de recherche, celui des pseudos, etc (les input type="text").
Ici on active ça dans tous les champs.


Le punnycode dans les url


network.IDN_show_punycode



Mettez cette clé, de type booléen à true.

Certains ont eu la bonne idée de pouvoir mettre de l’unicode dans les URL. Évidemment, il y a des tas de possibilités de phishing à cause de ça. L’encodage des caractères unicode dans les URL se fait avec le code « punnycode ». Cette manip permet de forcer Firefox à afficher ce code au lieu des caractères unicode, pour ne plus se faire avoir par un site vérolé.


Réafficher les URL complètes


browser.urlbar.trimURLs



Mettez cette clé, de type booléen à false.

Par défaut, Firefox (et les autres navigateurs) masquent une partie de l’URL (le « https:// », les paramètres « ?q=xxxx », l’ancre dans la page « #ancre »…). C’est d’une débilité sans nom et également source de confusion et de faille de sécurité de type « PEBKAC ». Ici on ré-affiche l’URL complète.


Autoriser le userChrome.css


toolkit.legacyUserProfileCustomizations.stylesheets



Mettez cette clé, de type booléen à true.

L’interface même de Firefox est elle-même en XML+CSS. Il est donc possible de le modifier comme une page web normale, en CSS. Le fichier CSS qui sert à cela est dans le dossier des préférences mais n’est pas activé par défaut. Cette modif permet de l’activer.
Ça vous sera par exemple utile si vous souhaitez avoir une barre personnelle verticale sur un des côtés de l’écran, par exemple.


Désactiver la touche de tabulation pour les liens


accessibility.tabfocus



Mettez cette clé, de type nombre à 3.

Par défaut la touche de tabulation utilisée dans une page web permet de passer d’un lien, d’un champ de texte, d’un bouton, à un autre. Si vous le mettez à 3, cela exclura les liens (les tabulations ne feront que passer d’un champ texte ou d’un bouton à l’autre (notez quand-même que la page web peut modifier l’ordre de ces tabulations, il faut le savoir quand on navigue essentiellement au clavier).


Désactivez la fermeture de Firefox au dernier onglet


browser.tabs.closeWindowWithLastTab



Mettez cette clé, de type booléen à false.

Firefox, comme tous les navigateurs désormais, fonctionnent par onglets. Quand on ferme de dernier onglet, ça ferme Firefox. Cette clé ici permet de faire en sorte que fermer le dernier onglet ne ferme que cet onglet et laisse un onglet vierge à la place, sans fermer le navigateur.


Réactiver le zoom sur les pages


browser.ui.zoom.force-user-scalable



Mettez cette clé, de type booléen à true.

Celle-ci est plutôt pour mobile (oui, les about:config fonctionne aussi sur Firefox Mobile !). Certains écervelés trouvent acceptables de désactiver le zoom sur leur page. Ceci permet de le réactiver. Merci Firefox.


Désactiver le rafraîchissement automatique de la page


accessibility.blockautorefresh



Mettez cette clé, de type booléen à true.

Certains sites publicitaires (ceux avec des encarts de presse, comme LePoint ou le Figaro) rechargent la page à intervalles réguliers, histoire de recharger les pubs et faire plus de fric sur votre dos. C’est chiant, mais ça consomme aussi des ressources système. Ici vous dites à Firefox d’empêcher le rechargement des pages.


Désactiver Pocket


extensions.pocket.enabled



Mettez cette clé, de type booléenne à false.

Pocket est un service tiers pour enregistrer des pages web pour une lecture ultérieure. Il vient pré-intégré dans Firefox, mais je n’utilise pas ça, je ne vois pas pourquoi je laisserais ça pomper mes ressources.


Activer le thème sombre


ui.systemUsesDarkTheme



Mettez cette clé, de type nombre à 1.

Certains sites ont un thème sombre en plus du thème normal. Idéalement, le système ferait passer l’interface en sombre à la tombée de la nuit. À moins d’être sur Mac OS, Windows et les systèmes Linux n’en sont pas encore là, et encore moins Firefox (généralement moins intégré que Edge ou Safari).
Firefox propose juste pour le moment de forcer le thème sombre – s’il existe – sur les pages web, avec cette clé.

Notez que le site web doit proposer ce thème et utiliser le mécanisme en CSS pour appliquer ça selon le choix du visiteur. Ils sont encore très rares à le faire (en fait je n’en connais aucun, mais peut-être que je le ferais sur mes sites). Si le site n’a pas ce qu’il faut, la page restera "normale" : ce n’est donc pas comme une extension qui assombrit toute la navigation.


Désactiver l’accès au presse-papier


dom.event.clipboardevents.enabled



Mettez cette clé, de type booléenne à false.

Certains sites veulent accéder à votre presse papier, par exemple pour copier un texte via un clic sur un bouton ou au contraire vous empêcher de copier quoi que ce soit. Ces règles intrusives et ridicules se contournent via cette clé (via).
Info : certains sites peuvent en planter complètement s’ils utilisent certains frameworks intrusifs (genre ReactJS, visiblement).


Désactiver le préfetch


network.prefetch-next



Mettez cette clé, de type booléenne à false.

Firefox peut choisir de pré-contacter un site web quand on passe le curseur au dessus d’un lien, en vue de charger la page plus rapidement quand quand on clique sur ce lien. Ceci peut accélérer un peu la navigation sur une connexion déjà rapide, mais ça peut la saturer si vous êtes toujours avec un réseau pourri en ADSL 8 Méga en pleine cambrousse (ou sur un réseau mobile en Edge).

En mettant à « false » on désactive ce pré-contact du site web.


Réduire la fréquence des sauvegardes de session


browser.sessionstore.interval



Mettez cette clé, de type nombre à 120000.

Firefox peut sauvegarder vos onglets au cas où le navigateur plante. Ça permet de ne pas perdre vos onglets, votre historique, etc. Par défaut, la session est enregistrée toutes les 15 secondes. Je trouve que ça fait quand-même beaucoup d’enregistrements (et donc beaucoup d’accès disques). Je mets cette valeur à 120 000, correspondant à 120 secondes (la valeur est en millisecondes), considérant qu’une sauvegarde toutes les deux minutes suffit amplement.


Augmenter le pixel-ratio


layout.css.devPixelsPerPx



Mettez cette clé, de type nombre à 1.2.

Perso, j’ai un écran 4K de 27 pouces. Les pixels sont minuscules et le texte peut sembler trop petit. En mettant 1.2 au lieu de -1 (valeur système), la taille d’affichage de Firefox est à 120 %. Contrairement au « zoom », cette propriété gère à la fois les pages web et l’interface de Firefox.
Je peux aussi modifier ça dans le système d’exploitation (Linux, Windows…) mais je préfère le faire juste pour Firefox, tous les programmes (notamment certains vieux jeux) ne gèrent pas tout ça très bien.

La valeur de 1.2 me va bien à moi : il est possible de mettre une autre valeur : 1.3, 1.4, etc. si vous désirez un zoom plus important.


Désactiver le popup lors du passage en plein écran


full-screen-api.warning.timeout



Mettez cette clé, de type nombre à 0.

Quand on passe en plein écran (vidéo plein écran, par exemple), Firefox affiche un petit popup qui indique le passage en plein écran avec l’astuce de la touche Échap pour en sortir.
Avec cette modif, le popup n’est pas affiché (à tester là, via le bouton « plein écran », avant et après la modif).

Merci à Guenhwyvar pour celle-ci !


Désactiver l’autoplay des vidéos/médias


media.autoplay.enabled.user-gestures-needed


Mettez cette clé, de type booléenne à true.

media.autoplay.allow-muted


Mettez (ou créez) cette clé, de type booléenne à false.

Ces deux clés remplacent l’ancienne clé media.autoplay.enabled.
La première clé permet d’autoriser les vidéos site par site via une permission (rangée au début de la barre d’adresse, comme les autres permissions).
La seconde clé désactive les vidéos sans son, qui sont lancées par défaut… mais qui consomme quand même des ressources système (CPU, mémoire, réseau).

Merci à Philippe pour cette astuce !



(Ci-dessous, dans les comms, je poste quelques autres tweaks qui peuvent servir, mais que je n’utilise pas présentement.)

i


  • 2020-01-26 : Mise à jour : cette page a été mise à jour pour Firefox 72.0.1 (le précédent était pour 71 et ne marchait plus).

C’est déjà la seconde fois que je fais un article pour cette astuce.
À chaque fois, je dois refaire ça car la mise à jour de Firefox casse le code précédent. Mais ce n’est pas trop grave.

Mon précédent article a un peu plus de deux ans et concernait Firefox 57.
L’astuce n’était pas parfaite, mais faisait son job. Ici, c’est une mise à jour du script.

Commencez par mettre toolkit.legacyUserProfileCustomizations.stylesheets à true dans le about:config.

Ensuite, voici le nouveau code, à placer dans le fichier userChrome.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).

Copiez-collez-y ce code à la fin :


#PersonalToolbar {
	position: fixed!important;
	right: 0px!important;
	top: 38px!important;
	height: 35px!important;
	transform-origin: bottom right!important;
	transform: rotate(-90deg)!important;
	z-index: 1200!important;
	display: inline-flex!important;
	width: 100%;
	flex-direction: row-reverse;
}

#personal-bookmarks {
	transform: rotate(180deg)!important;
	width: 100%!important;
}

.bookmark-item {
	transform: rotate(-90deg)!important;
}


#browser,
#browser-bottombox {
	margin-right: 35px!important;
}


#main-window[inFullscreen="true"] #PersonalToolbar {
	visibility: collapse !important;
}

#main-window[inFullscreen="true"] #browser,
#main-window[inFullscreen="true"] #browser-bottombox {
	margin-right: 0!important;
}

Le code pour le bug du plein écran provient de (merci à smokey desperado pour le lien).
Désormais, la barre ne sera plus visible ni en plein écran, ni avec une vidéo en plein écran.

Le résultat est comme le précédent, si vous utilisiez ça :

Capture d’écran de Firefox avec la barre de favoris verticale sur la droite.
Enjoy !


ÉDIT : si ça ne marche pas (en particulier sous Windows), vous pouvez voir ce fil : le code est tout ici (un grand merci, Amine !)

Mise à jour : cette astuce est désuète. La nouvelle version de l’astuce à utiliser se trouve là : Vivaldi : placer la barre de marque-pages verticalement (méthode 2021)


À l’image de ce que j’avais fait pour Firefox, et dans l’idée de gagner de la place verticale à l’écran, je souhaite avoir mes marques pages sur le côté de l’écran, à droite, plus précisément :

Ce qui suit est mon bidouillage pour avoir la barre de signets verticalement sous Vivaldi :

vivaldi with vertical toolbar
C’est fait sous Linux Mint 19, avec Vivaldi 2.2.1388.37 (Stable, 64 bit).

Cette habitude m’est venu de l’époque où j’utilisais Opera 12.x, et qui offrait cette fonctionnalité nativement.
Pour obtenir la même chose sous Firefox, il s’agissait de bidouiller dans les styles interne du navigateur pour donner l’aspect souhaité aux éléments de l’interface (l’interface du navigateur — le chrome comme on l’appelle (rien à avoir avec Google Chrome) — est lui-même du HTML et il peut être modifié avec des CSS).

Dans Vivaldi, c’est plus ou moins la même chose : l’interface entière est juste un gros template HTML + CSS + JS.

Il suffit de lancer Vivaldi en mode « débugger » :

vivaldi --debug-packed-apps --silent-debugger-extension-api

Ainsi, on peut bidouiller l’interface « en direct » dans les outils de développeurs (en plus de pouvoir bidouiller le contenu de la page web dans l’onglet). Pour inspecter un élément de l’interface (barre d’adresse, onglet, …) il suffit de faire clic-droit dessus et « Inspecter ». Si sous connaissez les outils de développeurs, vous ne serez pas dépaysés.

Ensuite, il s’agit simplement de manipuler les éléments avec du CSS.

Une grosse difficulté m’a retardée cependant : quand on modifie la largeur de la barre des marques pages, le javascript s’en mêle et retire les icônes. Ils ne font alors plus partie de l’interface et impossible de les voir sans cliquer sur le bouton avec le chevron. Ceci m’empêche de donner une largeur fixe à la barre et de la positionner à droite.
J’ai dû ruser : à la place, je garde la barre comme elle est, je la fait pivoter avec transform: rotate(90deg) puis je la déplace avec position: relative;. C’est la seule solution pour que l’élément ne sorte pas du flux du document et conserve sa haute/largeur.

Bien-sûr, les icônes sont toutes de côté. Ce n’est pas grâce, il suffit de faire tourner les icônes individuellement dans le sens inverse : transform: rotate(-90deg).

Ensuite, sur le bloc qui contient la page web, on libère une petite marge à droite avec margin-right: 35px. Comme la barre est déplacé de façon relative, elle occupe toujours sa place en haut de l’écran (tout en étant à droite). On remonte donc la fenêtre de navigation : margin-top: -35px
Et… c’est tout.

Le CSS global est :

/* Bookmarkbar : turning it on the side, placing it on the right */
#app #browser #main .bookmark-bar {
	transform: rotate(90deg) scale(1, 1)!important;
	transform-origin: 0% 0%!important;
	position: relative!important;
	left: 100%;
	height: 34px;
}

/* flip back the individual icons */
#app #browser #main .bookmark-bar button {
	transform: rotate(-90deg)!important;
}

/* gives margins to the main frame */
#app #browser #main .inner {
	margin-right: 35px!important; /* gives place to the new bars position */
	margin-top: -35px!important; /* claims the place from its old position */
}

Enfin, il s’agit de sauvegarder ça dans les fichiers de style de Vivaldi, qui se trouve (sous Linux) là :

/opt/vivaldi/resources/vivaldi/style/common.css

C’est là que je ne sais pas si ce fichier sera un jour écrasé ou non par une mise à jour du navigateur. Il doit probablement y avoir un fichier CSS utilisateur pour Vivaldi, mais je ne l’ai pas trouvé.

ÉDIT : La réponse est "non" : le fichier sera écrasé à chaque mise à jour. Donc il faudra remettre ce code dans le fichier CSS à chaque fois (ça prend 10 secondes toutes les 6 semaines).

En tout cas, ça marche pour le moment.

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)