Journal Jouons un peu avec linuxfr et CSS3

Posté par  (site web personnel) . Licence CC By‑SA.
Étiquettes :
15
16
mar.
2024

De temps en temps, j'ai besoin de me détendre, et je joue un peu avec les tech du web, entre deux déploiements.

J'aime bien HTML5 et CSS, spécialement la version 3 et son lot de nouveautés. J'en ai profité du site de Linuxfr, pour tester et rafraîchir mes connaissances de ce côté.

Voici donc une feuille de style, certainement pas finie, mais en bonne progression, si vous voulez tester un peu.

De temps en temps, je me suis dit qu'il y avait des trucs qui ne servaient à rien, ou en tout cas, qui pouvaient attendre une heure plus raisonnable, et je les ai honteusement cachés (display: none;). Soit dans l'espoir d'y revenir plus tard, soit parce que la structure devrait, AMHA, être revue.

Bien sûr, vu l'historique du site, il y a quelques incohérences dans le code généré, notamment une surcharge de blocs imbriqués ou des tags qui manquent là où il en faudrait. Ce qui fait que parfois, je n'ai pu faire ce que je voulais.

J'ai aussi vu, du code qui utilise des caractères ASCII pour faire des boutons, du style [^], ou [+], etc…À ce stade, CSS ne peut (presque) rien faire, sinon changer la génération de code en elle-même.

Pour l'éditeur de texte pour les journaux, nouvelles, etc, je pense qu'un éditeur WYSIWYG moderne serait bienvenu, et j'avoue que vers la fin, j'étais trop fatigué pour écrire des styles pour une liste de liens de formatage markdown. D'ailleurs, pour l'aide-mémoire, la balise details serait appropriée.

Dans ce qui me manquait des feuilles de styles proposées, le basculement automatique du thème clair ou sombre, selon les préférences du système.

Ensuite, vu que CSS3 supporte les "nested styles", je n'ai pas eu envie d'utiliser les préprocesseurs habituels.

Finalement, pareil pour les "feuilles de styles conditionnelles importées", cela permet de découper ses feuilles de style en plusieurs fichiers. Cela n'a pas d'impact négatif sur les performances, comme j'ai pu entendre précédemment, au contraire :

  • les feuilles de styles peuvent être chargés en parallèle,
  • le navigateur ne charge que celles qui correspondent à la condition.
  • Lorsqu'une feuille de style modifiée, ce sera la seule rechargée du serveur.

Les avatars, j'ai pas encore fini, mais j'y reviendrais quand j'aurai un moment et un peu plus d'inspiration.

Sinon, les images de sections gagneraient à être harmonisées, il y a pêle-mêle des icônes PNG, des gifs 256 couleurs retaillées à l'emporte-pièce, et des images du web en jpeg, ce qui donne à la page section un aspect amateur.

Voilà, on est samedi, j'ai passé assez de temps dessus pour le moment, et j'y reviendrai plus tard. En attendant, on pourrait pousser ces styles sur un dépôt GitHub ou Linuxfr (je ne sais pas où est le dépôt git de Linuxfr).

Voici le lien: https://rodier.me/lfr/css/index.css

  • # lister ?

    Posté par  (site web personnel) . Évalué à 6 (+3/-0).

    Il faudrait lister les modifs suggérés je suis sûr que les codeurs pourrait le faire au fur et à mesure.

    "La première sécurité est la liberté"

  • # Dépôt GitLab

    Posté par  (site web personnel) . Évalué à 2 (+0/-0).

    Voici l'adresse du dépôt sur GitLab: https://gitlab.com/arodier/linuxfr-css

    • [^] # Re: Dépôt GitLab

      Posté par  . Évalué à 6 (+4/-0).

      Un petit screenshot du résultat serait sympa à avoir dans le README, j'ai un peu la flemme de l'appliquer juste pour voir à quoi ça ressemble…

      • [^] # Re: Dépôt GitLab

        Posté par  (site web personnel) . Évalué à 3 (+1/-0).

        Ok, dès que j'ai un truc un peu plus stable, je rajoute une image.

      • [^] # Re: Dépôt GitLab

        Posté par  (site web personnel, Mastodon) . Évalué à 4 (+1/-0).

        Personnellement je ne saurais pas faire et j'aimerais effectivement voir à quoi ça ressemble.

        « Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.

        • [^] # Re: Dépôt GitLab

          Posté par  (site web personnel) . Évalué à 2 (+0/-0).

          Tu peux choisir une feuille de style personnalisée dans tes préférences.

          https://rodier.me/lfr/css/index.css

          Attention, c'est toujours en cours de développement. Dès que j'aurais quelque chose de complet, je soumettrai une PR.

          Un peu d'aide est toujours bienvenue, bien sûr.

          • [^] # Re: Dépôt GitLab

            Posté par  (site web personnel, Mastodon) . Évalué à 3 (+1/-1). Dernière modification le 19 mars 2024 à 13:30.

            Alors, j'ai essayé très rapidement, mais la barre de navigation en haut en colonne plutôt qu'en ligne (pas comme dans les captures d'écran ni comme dans la version ronronnement que j'utilise), c'est rédhibitoire. Il y a un truc qui cloche. Pareil pour les boutons en bas d'un contenu : en colonne.

            En image :

            capture

            « Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.

            • [^] # Re: Dépôt GitLab

              Posté par  (site web personnel) . Évalué à 2 (+0/-0).

              Oups, ça fait mal aux yeux…

              Comme expliqué plus bas, je vise Firefox 123, j'aurai sans-doute pu ajouter ceci dans le journal, mais j'ai oublié en le postant. En tout cas, c'est un choix que j'assume. Si quelqu'un veut faire une feuille de style compatible avec une version plus ancienne, je ne critiquerai pas.

              Cette feuille de style n'a pas pour ambition de devenir celle par défaut. C'est plus pour ceux qui utilisent un navigateur récent, sur le bureau ou le téléphone.

              Quand ce sera fini, avec un peu de chance, Firefox 123 sera dans Debian Stable. Si vraiment, vous voulez utiliser une version plus vielle de Firefox, il y a moyen de déplier les feuilles de styles imbriquées, mais ce n'est pas dans le design que j'ai choisi, et j'apprécie la clarté.

              En tout cas, ça marche avec mon téléphone Android, et j'apprécie spécialement le fait que le thème bascule automatiquement le thème clair et sombre.

              PS: Mozilla propose un dépôt Debian pour les dernières versions de Firefox: https://support.mozilla.org/en-US/kb/install-firefox-linux#w_install-firefox-deb-package-for-debian-based-distributions

              • [^] # Re: Dépôt GitLab

                Posté par  (site web personnel, Mastodon) . Évalué à 4 (+1/-0). Dernière modification le 19 mars 2024 à 14:22.

                Alors, effectivement, c'est beaucoup mieux sur mon ordiphone qui, lui, a la dernière version de Firefox.

                Mais, sur la version mobile de la css par défaut et de ses frangines, la tribune de modération qu'on a dans la colonne de gauche est moins longue, là j'ai trois réactions avec Ronronnement sur l'ordiphone, alors que ta CSS nous donne le même nombre de réactions que sur la version ordinateur, donc nettement plus et il faut donc bien descendre pour arriver au contenu. Et la gestion des dépêches en rédaction mérite d'être améliorée (j'imagine que cet aspect n'est pas du tout fini).

                « Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.

  • # au sujet de balisage

    Posté par  (site web personnel, Mastodon) . Évalué à 2 (+0/-0).

    D'ailleurs, pour l'aide-mémoire, la balise details serait appropriée.

    Tiens, spoil : la balise est suggérée pour une entrée de suivi

    J'ai aussi vu, du code qui utilise des caractères ASCII pour faire des boutons, du style [^], ou [+], etc…À ce stade, CSS ne peut (presque) rien faire, sinon changer la génération de code en elle-même.

    Mais pourquoi vois-tu cela comme des boutons ? Ce n’était peut-être pas pensé/imaginé ainsi (i.e. substitut de <button>…</button> Pourquoi ce ne serait pas juste des ancres ? ou des boutons radios pour rester dans les éléments de formulaires ?)

    “It is seldom that liberty of any kind is lost all at once.” ― David Hume

    • [^] # Re: au sujet de balisage

      Posté par  (site web personnel) . Évalué à 3 (+1/-0).

      Tiens, spoil : la balise est suggérée pour une entrée de suivi

      Je parle de l'aide mémoire markdown, dans le formulaire de création de contenu.

      Mais pourquoi vois-tu cela comme des boutons ?

      Le principal, c'est que les crochets, on pourrait les remplacer par des jolis emoticons, par exemple : 🔺 🔻 ⚓

      • [^] # Re: au sujet de balisage

        Posté par  (site web personnel, Mastodon) . Évalué à 2 (+1/-1).

        Oui, j’avais compris que c’était pour l’aide mémoire et je voulais dire qu’il y a plein d’autres contextes où la balise est bienvenue mais que son usage est écarté.

        Le premier problème des émojis est qu’il faut avoir la certitude que le plus grand nombre pourra l’afficher… Je lis par exemple que « red triangle pointing up » risque de ne pas s’afficher sur certains de mes appareils car le support a été introduit dans Android 4.3+ ; et je pense que l’interface du site me deviendra moins accessible quand je passe par ici avec Lynx.

        Le second problème va être d’en trouver qui ait la même signification pour tout le monde… Le survol indique « Remonter au commentaire parent » (va donc pour le triangle avec la pointe en haut) et « Cacher le fil de discussion » (ça par contre les deux autres n’évoquent aucunement cela…)
        Accessoirement il faut que ça puisse s’intégrer avec les autres styles/variantes (pourquoi imposer du rouge ?) et qu’on ne tombe pas dans d’autres problèmes (bah oui, on oublie souvent l’accessibilité pour les personnes ayant divers problèmes de vue, et ici les divers daltonismes vont pas dire merci.)

        “It is seldom that liberty of any kind is lost all at once.” ― David Hume

        • [^] # Re: au sujet de balisage

          Posté par  (site web personnel) . Évalué à 5 (+3/-0). Dernière modification le 17 mars 2024 à 08:09.

          risque de ne pas s’afficher sur certains de mes appareils car le support a été introduit dans Android 4.3+

          Pour information, Android 4.3 est sorti en 2013, donc ces emojis sont compatibles avec des périphériques de onze ans d'age, cela devrait suffire, je pense, et toi ?

          (pourquoi imposer du rouge ?)

          Les triangles rouges, c'était juste un exemple, je n'ai pas cherché plus de dix seconds, c'était pour illustrer mon propos. Il ne faut pas se focaliser dessus, sauf si on aime bien chercher la petite bête ;-). Tiens, en voici d'autres, en tant qu'exemple : ⏫ ⬆️ ↕ ➖ ➕.

          je pense que l’interface du site me deviendra moins accessible quand je passe par ici avec Lynx.

          Je viens d'essayer avec Lynx, et les emojis sont parfaitement affichés.

          • [^] # Re: au sujet de balisage

            Posté par  (site web personnel, Mastodon) . Évalué à 3 (+2/-1).

            Je sais, 2013 parait loin pour beaucoup de gens …sauf pour moi qui ai encore du matos bien plus ancien (je sais, c’est pas bien de ne pas renouveler quand ce n’est pas encore cassé et que je ne contribue pas assez au besoin de coltan.)

            Je ferai le test bien qu’ayant le souvenir d’avoir déjà vécu la situation.

            “It is seldom that liberty of any kind is lost all at once.” ― David Hume

  • # Cool ça

    Posté par  (site web personnel) . Évalué à 2 (+1/-0).

    Top !

    Dans ce qui me manquait des feuilles de styles proposées, le basculement automatique du thème clair ou sombre, selon les préférences du système.

    Pile ce que je voulais.

    Merci :)

  • # version de firefox

    Posté par  (site web personnel) . Évalué à 2 (+0/-0).

    Au fait, je visel les récentes versions de firefox. Lorsque j'aurai terminé, je pense qu'elle sera dans Servian stable (123).

  • # critique

    Posté par  (site web personnel) . Évalué à 5 (+2/-0).

    Le look est plus moderne mais je me perd un peu. Les séparations entre élement sont plus flou et j ai l impression qu'il y a beaucoup de texte souligné.

    "La première sécurité est la liberté"

    • [^] # Re: critique

      Posté par  (site web personnel) . Évalué à 4 (+2/-0). Dernière modification le 17 mars 2024 à 10:37.

      Merci du retour d'information, constructif et utile.

      Effectivement, je suis d'accord. Je vais essayer de séparer plus clairement les blocs, sans pour autant tomber dans une utilisation abusive des "borders" et autres joyeusetés des années 2000.

      Comme mentionné plus haut, c'est un projet en cours, pas encore fini.

      • [^] # Re: critique

        Posté par  . Évalué à 3 (+1/-0).

        Je trouve très sympa ta CSS, même si elle est encore pas finie.

        Tu préfère qu'on te fasse des retours ici ou sur gitlab ?

        En attendant je t'en fais ici :

        • hier je l'ai utilisé sur téléphone
          • quand on écris un commentaire, l'input text est trop long et casse la mise en page
          • tu n'a pas gardé la toolbar qui est très pratique pour naviguer dans les nouveaux commentaires
          • l'entête est vraiment grande et prend tout l'écran du téléphone alors que c'est pas l'important

        https://linuxfr.org/users/barmic/journaux/y-en-a-marre-de-ce-gros-troll

        • [^] # Re: critique

          Posté par  (site web personnel) . Évalué à 3 (+1/-0).

          Tu préfère qu'on te fasse des retours ici ou sur gitlab ?

          Je pense que ici, c'est bien pour les remarques, comme ça, tout le monde peut contribuer sans avoir à utiliser un compte GitLab.

          quand on écris un commentaire, l'input text est trop long et casse la mise en page
          tu n'a pas gardé la toolbar qui est très pratique pour naviguer dans les nouveaux commentaires
          l'entête est vraiment grande et prend tout l'écran du téléphone alors que c'est pas l'important

          Oui, tout cela est valide, je n'ai pas encore eu le temps de peaufiner. Honnêtement, je ne pensais pas y passer autant de temps.

          • [^] # Re: critique

            Posté par  . Évalué à 3 (+1/-0). Dernière modification le 19 mars 2024 à 14:48.

            Autre remarque, le bouton pour ajouter des étiquettes qui apparaît au survol fais bouger l'interface, si ça pouvait être évité en le faisant apparaître sur la même ligne, je pense que ça serait parfait.

            Ah et le "ajouter" en bleu sur noir dans les étiquettes manque de contrastes aussi à mon avis.

            https://linuxfr.org/users/barmic/journaux/y-en-a-marre-de-ce-gros-troll

      • [^] # Re: critique

        Posté par  (site web personnel) . Évalué à 4 (+1/-0).

        Je trouve que c'est un boulot nécessaire, l'interface de linuxfr n'a pas bougé depuis longtemps et aurait bien besoin d'un lifting.

        "La première sécurité est la liberté"

        • [^] # Re: critique

          Posté par  . Évalué à 4 (+1/-0).

          pourquoi casser un truc qui marche ?

          Blague à part, je trouve l'interface très correcte, belle et suffisante. Ranafout de la mode.

          Il ne faut pas décorner les boeufs avant d'avoir semé le vent

          • [^] # Re: critique

            Posté par  (site web personnel) . Évalué à 4 (+1/-0).

            Je trouve que l'on peut faire mieux. La CSS par défaut actuel est un peu trop "long" pour les téléphones et peu large pour les écrans de bureau.

            Et le coté vieillot n'aide pas à recruter de nouveaux lecteurs.

            "La première sécurité est la liberté"

          • [^] # Re: critique

            Posté par  (site web personnel, Mastodon) . Évalué à 4 (+1/-0).

            L’interface actuelle pose différents problèmes :

            • la prévisualisation des contenus (dépêches, journaux) ne permet pas de voir les notes,
            • il manque au niveau des icônes de mise en forme des trucs comme « mettre en guillemets » ce qui permettrait d’avoir des textes plus propres sur le plan typographique (et moins de corrections en modération),
            • on ne peut pas avoir de sommaire dans le wiki,
            • les étiquettes n’apparaissent pas dans les versions mobiles,
            • dans les versions mobiles, on ne voit pas la liste des nouveaux commentaires.

            Et je ne parle pas du fait que, quand on commente un contenu, on n’a pas accès au dit contenu le plus souvent.

            Sur le plan ergonomique, personnellement, je trouve que l’interface a besoin d’être pas mal améliorée. Et je ne parlerai pas de choses qui fâchent, comme la gestion des images, qui nécessitent un développement spécifique.

            « Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.

            • [^] # Re: critique

              Posté par  (site web personnel) . Évalué à 2 (+0/-0).

              la prévisualisation des contenus (dépêches, journaux) ne permet pas de voir les notes,

              moui, les notes de bas de page ce serait tout de même pratique… => ya des entrées de suivi à faire (je ne l'ai pas retrouvée)

              on ne peut pas avoir de sommaire dans le wiki

              Si, bien sûr, la preuve sur LinuxFr.org : il est généré à partir d'un certain nombre de caractères (2000 sans doute)

              les étiquettes n’apparaissent pas dans les versions mobiles,

              moui, ça me dérange aussi, ça faciliterait la navigation « transversale » sur des sujets connexes…

              dans les versions mobiles, on ne voit pas la liste des nouveaux commentaires

              la toolbar permet de naviguer de nouveau commentaire en nouveau commentaire dans un contenu, mais oui ça manque en bas de page…

            • [^] # Re: critique

              Posté par  (site web personnel, Mastodon) . Évalué à 3 (+1/-0).

              Tous ces problèmes ne sont pas liés à la feuille de style, mais au code. En tout cas pour : les sommaires, les icônes, la prévisualisation.

              Pour ce qui en dépend, c’est un choix… Je vois bien les étiquettes et la liste des nouveaux commentaires en utilisant un mobile et un autre style que celui par défaut (par exemple celui de OpenSuse —merci au commentaire par lequel j’ai fait la découverte.)

              “It is seldom that liberty of any kind is lost all at once.” ― David Hume

  • # Screenshot

    Posté par  (site web personnel, Mastodon) . Évalué à 2 (+2/-0).

    Une petite PR pour montrer à quoi cela ressemble :) https://gitlab.com/arodier/linuxfr-css/-/merge_requests/1

  • # Édition sur thème sombre

    Posté par  (site web personnel) . Évalué à 2 (+0/-0).

    J'ai fait quelques modifs, en copiant les styles de l'édition.

    Je n'ai pas trop le temps de continuer, mais je ferai quelques ajouts de temps en temps.

    En attendant, quelques remarques, si vous voulez participer.

    • J'ai cherché à faire la différence entre la disposition des éléments (layout-.css) et le style (styles-.css). Gros avantage: cela permet de réutiliser l'une indépendamment de l'autre. Il y a sans doute des éléments qui pourraient être placés ailleurs, mais bon, wip…
    • J'ai supprimé les background-color, pour pouvoir utiliser le thème sombre/clair automatique, il faut utiliser background-color: inherit.
    • Pareil pour les bordures, lorsqu'on utilise, par exemple #7775, le 5 correspond à la transparence. Cela permet d'avoir une bordure plus éclaircissante lorsque le fond est sombre, et inversement lorsque le thème est clair.
    • L'édition est maintenant possible avec le thème sombre. C'est bien pour les yeux le soir,

    Pour le thème de la barre d'outil, les icônes sont sans doute à revoir pour le thème sombre. Il y a sûrement des options CSS pour utiliser clair / sombre aussi. Je n'ai pas creusé. Je pensais qu'un éditeur un peu plus moderne pourrait être intégré.

    PS: Mon temps libre est limité, donc si vous voulez aider, bienvenue.

  • # Captures d'écran

    Posté par  (site web personnel) . Évalué à 3 (+1/-0).

    Bureau

    Theme clair

    Theme clair

    Theme sombre

    Theme sombre

    Telephone

    Theme clair

    Clair Sombre
    Theme clair Theme sombre

Envoyer un commentaire

Suivre le flux des commentaires

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