Journal Entêtes gé(n)ants, restez en haut de la page !

Posté par  . Licence CC By‑SA.
Étiquettes :
29
6
déc.
2015

Vous en avez peut-être assez de cette nouvelle mode qui consiste à faire des entêtes énormes qui surgissent quand vous être en train de lire une page web et que vous la faîtes défiler vers le haut, ou alors qui restent carrément visibles et prennent une certaine place, voire une place certaine, en haut de votre écran, avec, bien entendu, une ombre qui donne l'impression à votre cerveau que l'entête est au dessus du contenu que vous souhaitez lire. Peut-être aspirez-vous à une lecture pendant laquelle la page entière ne se met pas à bouger au moindre mouvement.

En tout cas moi oui et j'ai donc commencé un style utilisateur de quelques lignes, Unfix Headers, pour forcer ces entêtes à rester sagement en haut de la page.

Le principe est simple: forcer position:absolute ou position:static sur les entêtes qui sont en position:fixed pour qu'elles ne suivent plus le défilement, et annuler les visibility:hidden, transform et autres margin-top négatifs qui servent à masquer les entêtes quand on descend la page.

Pour le moment, seul Firefox est pris en charge (testé avec l'extension Stylish) et très peu de sites sont gérés :
- speckyboy.com
- materialdesignblog.com
- www.wired.com
- medium.com
- forbes.com
- www.nytimes.com
- plus.google.com
- certains sites WordPress (testé sur le Washington Post. Il y a un saut désagréable en haut de la page quand on commence à défiler, mais ce saut est présent également sans le style, donc c'est un défaut du site)

Une mesure complémentaire peut être de bloquer JavaScript sur les pages que vous lisez, puisque JavaScript est utilisé pour détecter si le visiteur de la page défile, et modifier le style en conséquence.

Maintenant, pour accéder aux liens, barres de recherches et autres fonctionnalités présents dans l'entête, c'est simple, il suffit de revenir en haut de la page. Ça se fait en un clic sur la barre de défilement, en tout cas avec un ordinateur traditionnel avec un système d'exploitation confortable. Un clic de plus à faire, mais un cachet de calmant de moins à prendre, surtout qu'honnêtement, la plupart du temps je suis là pour lire l'article concerné et rien de plus, après je me tire (CTRL+W). Petite subtilité : alors qu'habituellement, un clic du milieu sur la barre de défilement mène à l'endroit pointé, ce n'est pas vrai avec GTK+3 (en tout cas avec Firefox GTK+3). Dans ce cas, c'est un clic gauche tout ce qui a de plus classique qu'il faut faire.

N'hésitez pas à modifier le style pour ajouter la prise en charge d'autres sites web, d'autres navigateurs ou à donner des exemples de pages qu'il faudrait gérer. Je n'aurai de toute façon jamais le temps de prendre en compte tout seul tous les sites de la planète.

Unfix Headers sur userstyles.org

  • # Mode reader

    Posté par  . Évalué à 8. Dernière modification le 06 décembre 2015 à 19:45.

    Sinon dans ces cas-là j'enclenche le mode "reader" qui débarrasse de tous ces trucs inutiles.
    https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages

    • [^] # Re: Mode reader

      Posté par  (site web personnel) . Évalué à 1.

      +1
      Je l'utilise de plus en plus souvent, même ici, dès que l'article est un peu long. Le seul regret c'est de ne pouvoir modifier la largeur de colonne.

      « Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes. »

    • [^] # Re: Mode reader

      Posté par  . Évalué à 1. Dernière modification le 08 décembre 2015 à 08:58.

      Oui, c'est vrai que le mode "reader" est intéressant. Pour ma part, je l'utilise pas. L'avantage du style utilisateur c'est qu'on garde quand même l'apparence du site, sans action de la part du visiteur, et couplé à plusieurs autres extensions (bloqueur de pub, de script, pourquoi pas de Web Fonts), on arrive à une page déjà plus légère, que ce soit techniquement ou visuellement.

      Le mode "reader" est une excellente idée ceci dit, et je pense que c'est bien qu'il soit intégré par défaut au navigateur. Y a-t-il un moyen de l'activer par défaut sur certains sites ?

  • # Collaboration

    Posté par  . Évalué à 2.

    Super idée! Tu devrais mettre le style sur Github ou autre pour pouvoir facilement collaborer dessus.

  • # Stylish

    Posté par  (site web personnel) . Évalué à 2.

    Il existe aussi l'extension greasemonkey avec laquelle on peut faire des merveilles ;-)

    kentoc'h mervel eget bezan saotred

    • [^] # Re: Stylish

      Posté par  . Évalué à 4. Dernière modification le 10 décembre 2015 à 00:16.

      Ouaip, d'ailleurs userstyle propose de télécharger le style sous forme de script greasemonkey. Si tu as des exemples concrets d'utilisation un peu dans le même cadre que ce journal et qui n'est ni couvert par stylish, ni par un bloqueur de pub ça m'intéresserait.

      J'étais tombé sur un bloqueur de bloqueur de bloqueur de pub (ah ah) qui tournait sur greasemonkey : Anti-Adblock Killer.
      Bientôt, un bloqueur de bloqueur de bloqueur de bloqueur de bloqueur de pub.

      Ça doit pouvoir se généraliser, définissons par exemple le bloqueur de bloqueur d'ordre n, avec le bloqueur de bloqueur d'ordre 1 un bloqueur de bloqueur de pub et le bloqueur de bloqueur d'ordre 2 un bloqueur de bloqueur de bloqueur de pub.

      Mais je digresse.

      • [^] # Re: Stylish

        Posté par  (site web personnel) . Évalué à 2.

        Si tu as des exemples concrets d'utilisation

        Le truc le plus bête du monde :
        Google me mettait sans cesse une bannière pour lire les nouvelles cgu ou un truc comme ça et même si j'acceptais ça revenais (sûrement à cause du cookie self-destructor)

        // ==UserScript==
// @name        fuck_google
// @namespace   https://www.google.fr/search
// @description remove the boring google window
// @version     1
// @grant       none
// ==/UserScript==
var elmDeleted = document.getElementById('dialog_uid_0');
elmDeleted.parentNode.removeChild(elmDeleted);

        avec ça je ne l'ai plus.

        kentoc'h mervel eget bezan saotred

        • [^] # Re: Stylish

          Posté par  . Évalué à 2. Dernière modification le 11 décembre 2015 à 00:06.

          Ah oui. Autre manière de le faire, en CSS :

          #dialog_uid_0 {
   display:none
}

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.