Firefox 57 : placer la barre personnelle verticalement - Le Hollandais Volant

#16711

Hop, et voilà comment on se passe d’une extension qui ne fonctionne plus : Firefox permet aussi de modifier l’interface, en CSS.

On peut tout modifier et ici j’utilise les transformations CSS pour tourner la barre de favoris sur le côté (+90°), puis de redresser les icônes individuelles (−90°).

Le tout est correctement assaisonné pour que ça s’affiche bien.

https://lehollandaisvolant.net/?d=2017/08/20/03/18/31-firefox-57-placer-la-barre-personnelle-verticalement

image - 788x810px

#16710

Firefox Nightly est super, mais ça y est : les extensions legacy ne marchent plus là… Y compris GreaseMonkey.

Du coup j’essaye de trouver des alternatives. Pour les scripts qui me servaient à modifier le CSS, il semble que le fichier /chrome/userContent.css fonctionne encore (c’est dans le dossier de profil de Firefox, et non, le dossier n’a rien à voir avec le navigateur Chrome).

Dans ce fichier on peut mettre le CSS qu’on veut pour cibler diverses pages/sites.

Par exemple, sur la capture (mon lien), j’ai mis en rouge les liens vers les pages anglaises, françaises et allemandes sur la liste des langues d’une page Wikipédia.

Si je suis une page Wiki en français, ça me highlight tout de suite le lien vers la page en anglais/allemand, et vice-versa (et sur les pages en d’autres langues, les trois langues sont surlignées).

Voilà le code dans l’userContent.css :

@-moz-document domain(wikipedia.org) {

	#p-lang a[hreflang="en"],
	#p-lang a[hreflang="de"],
	#p-lang a[hreflang="fr"] {
		font-weight: bold!important;
		color: red!important;
	}

}

Ajoutez toutes les langues que vous voulez, et tout le CSS que vous voulez aussi (n’oubliez pas le « !important » à mettre partout : le fichier userContent.css a la priorité la plus base du CSS).

Si j’étais moins fainéant, j’ajouterais des petites icônes de drapeau (en base64 ou webfont ou whatever) avec le ::after.

Firefox: break-word doesn't work inside flex items · Issue #39 · philipwalton/flexbugs · GitHub

#16690

Rhaa®, faut que j’arrive à retenir ça, je perds un temps fou à chaque fois avec les break-word.

En CSS, break-work permet de dire au navigateur qu’il doit couper les mots quand ils dépassent de leur conteneur. Voir là : https://developer.mozilla.org/fr/docs/Web/CSS/overflow-wrap (btw la propriété a changé de nom depuis 5 ans).

==

Je sais que sur Firefox, pour que ceci fonctionne également avec PRE et CODE, il faut le spécifier directement sur ces éléments (dont les styles internes sont en conflit avec break-word) :

 pre { white-space: pre-wrap; }

(voir là : https://lehollandaisvolant.net/?id=20120930215732 )
==
Maintenant, et ça c’est le lien : tout ceci entre également en conflit avec les boîtes flexibles.

Quand on a une boîte est en "flex" (donc son parent en "display:flex;"), alors la boîte s’adapte à son contenu et à son contenant. Le contenant on s’en fout ici, mais si le contenu est un mot super-long qui risque de dépasse, alors tout ça ne marche plus : en effet, les spécifications CSS disent que la boîte doit avoir une largeur minimale égale au contenu.

Du coup, la boîte reste trop large et le mot trop long ne se coupe pas.

Pour contrer ça, il faut spécifier une largeur minimale de 0px à la boîte avec le "flex".

Du coup j’ai fait un codepen : https://codepen.io/lehollandaisvolant/pen/MvOYxp

https://github.com/philipwalton/flexbugs/issues/39

Vivement les variables CSS ! – HTeuMeuLeu

#16458

Les variables peuvent se déclarer dans le body, ou encore le ::root, mais également dans des .classes.

Dans ce cas ils agissent comme des variables locales : si une variable est déclarée sur le .red et le .blue, alors un élément .block pourra avoir le couleur selon sa classe, quand bien même la variable utilisée pour cette couleur soit la même (voir la dernier exemple en bas).

http://www.hteumeuleu.fr/vivement-les-variables-css/

Note : détecter un navigateur mobile en JS

#16322

Généralement j’ai besoin de savoir si je suis sur mobile ou pas à cause des différences d’interaction entre mobile et desktop (pas de drag-n-drop possible sur mobile par exemple).

Ma méthode c’est de tester une propriété CSS en JS.
Vu que j’utilise les mediaQueries en CSS, quand je suis sur mobile, le CSS appliqué est changé et je détecte ça en JS.


body {
    color: blue;
}
@media (max-width: 700px) {
    body {
        color: red;
    }
}

var isMobile = (window.getComputedStyle(document.body).color != 'red') ? true : false;

Il suffit soit de détecter une propriété dont on est sûre qu’elle sera appliquée sur mobile, soit d’appliquer spécifiquement un bout de CSS bidon sur un élément bidon en CSS, spécifiquement pour cet usage.

Par exemple comme ça :


html {
    color: red;
}
body {
    color: black;
}
@media (max-width: 700px) {
    html {
        color: blue;
    }
}

Ici la page sera toujours en noir, à cause du body, prioritaire sur le html. Mais la couleur sur le html joue le rôle d’un flag.
Bien-sûr, ceci n’est valable que pour la majorité des cas et reste une détection basée sur la taille de l’écran (ou du viewport plutôt).

Si vous avez un écran tactile de 15 pouces, c’est sûr que ça restera le même CSS que sur un écran de PC de 15 pouces alors qu’au fond l’UX sera différente.

On peut toujours détecter la taille de l’écran directement en JS, mais c’est parfois difficile à cause des pixel ratio qui sont intégrées ou non (suivant le nav) dans la taille de l’écran détecté en JS.
Regardez la taille de l’écran sur un mobile sur cette page, vous verrez que ça n’est pas toujours la taille réelle en pixels de votre écran.

Mais ça peut suffire dans la plupart des cas et c’est léger.

https://lehollandaisvolant.net/?mode=links&id=20170326164213

How to animate "box-shadow" with silky smooth performance | Tobias Ahlin

#16281

Les animations CSS sont cool, mais parfois gourmandes en ressources. Ici une astuce pour améliorer les performances quand on veut animer une box-shadow sur un bloc au :hover.

Au lieu de faire

#box {
    box-shadow: 4px 4px 4px transparent;
    transition: box-shadow 1s ease;
}

#box:hover {
    box-shadow: 4px 4px 4px silver;
}

Préférez d’ajouter un ::after sur le block, avec une ombre fixe.
Ensuite, mettez la transition sur l’opacité du ::after.

Le truc c’est que les moteurs de rendus ne calculent que l’opacité du ::after, et non l’ombre qui est bien plus lourde à produire et donc à animer (car elle dépend de plein de choses, dont les dimensions du bloc.

#box {
    position: relative;
}
#box::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0; left: 0; right: 0;
    box-shadow: 4px 4px 4px silver;
    opacity: 0;
    transition: box-shadow 1s ease;
}

#box::after:hover {
    opacity: 1;
}

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Do responsive sites have to be so tall on mobile? | Viget

#16269

Je suis d’accord : un truc que le responsive design fait, c’est qu’il réorganise à la vertical les éléments d’une page, faisant en sorte que la page est super longue, y compris simplement un article (juste par le fait des éléments qu’il contient).

Pour modifier ça, et mettre comme il propose, certains élements spéficique en ligne et d’autres en dessous en colonne, il faut utiliser du JS (pour déplacer physiquement les éléments au sein du HTML).

Une autre solution peut être le CSS avec Flex et Grid.
Le premier est largement supporté, mais le déplacement des éléments reste (selon moi) une fonctionnalité relativement secondaire des Flexbox (qui permet avant tout de faire des boîtes flexibles). Grid commence tout juste à pointer le bout de son nez, il n’est pas encore bien implémenté partout.

https://www.viget.com/articles/do-responsive-sites-have-to-be-so-tall-on-mobile

Simple Table-Of-Contents in JavaScript (enhanced)

#16262

J’ai publié ce pen avec du JS pour faire un sommaire (TOC) dans une page. Le TOC est totalement automatique.

Ici j’ai aussi ajouté mon astuce pour ajouter des numéros (le « 2.1 » sur le sous titre 1 du titre 2 de la page), à la fois dans le TOC et dans les h1, h2…
Ces numéros sont entièrement en CSS (avec la propriété counter — ancienne mais peu utilisée), c’est pour ça qu’ils ne sont pas sélectionnables.

J’utilise tout ça sur la plupart de mes pages depuis longtemps :
https://lehollandaisvolant.net/tuto/gpg/
https://lehollandaisvolant.net/linux/checklist/
https://lehollandaisvolant.net/tuto/tor/
https://lehollandaisvolant.net/tuto/pagespd/
https://lehollandaisvolant.net/tuto/bin/
etc.