Journal [CSS] spasibo.css : version petits écrans

Posté par  (site web personnel) . Licence CC By‑SA.
Étiquettes :
17
13
mar.
2011

Dans un journal précédent, j'avais présenté ma feuille de style spasibo.css orientée lecture pour personnaliser LinuxFR.

Je l'ai faite un peu évoluer depuis, corrigeant quelques anomalies par-ci par-là. Maintenant elle me va et ne devrait plus bouger. Les principaux changements sont :

  • Le badge pour nouveaux commentaires s'affiche à côté de la note au niveau du titre du contenu : Titre de l'image
  • La navigation entre nouveaux commentaires laisse s'afficher le titre alors qu'avant il était masqué par la barre de menu.

Ensuite j'ai fait une adaptation pour les écrans plus petits :

Le principe est simple : il y a une feuille de style qui surcharge la CSS principale pour l'adapter à des écrans de plus petite dimension. L'inclusion se fait sur une condition de dimension de l'écran, exemple pour spasibo-800.css :

@import "./spasibo.css" screen;
@import "./spasibo-mobile.css" screen and (max-width: 800px);

Ainsi si l'écran fait moins de 800px l'ensemble des règles contenues dans spasibo-mobile.css est appliqué. Cela permet d'utiliser la même feuille de style, que l'on soit sur un grand écran ou sur un petit. Facile à tester, il suffit de redimensionner la fenêtre de son navigateur pour atteindre la limite.

Le rendu donne cela : Titre de l'image

L'idée c'est de faire de gros boutons précédent et suivant sur le côté gauche pour facilement naviguer entre nouveaux commentaires. Le soucis c'est que tous les navigateurs mobiles ne supportent pas le position:fixed utilisé pour cela. En tout cas sur mon android 2.1 ça ne passe pas (à ce qu'il parait ce serait bon sur android 2.2, si il y a quelqu'un pour tester, ce serait gentil). Ensuite j'ai bien séparé les actions pertinent, inutile et répondre pour éviter les clics malencontreux. J'ai aussi augmenté les tailles des caractères.

  • # Bon boulot !

    Posté par  . Évalué à 2.

    Tout est dans le titre… Sauf : s/adnroid 2.2/android 2.2/ :-)

  • # Par défaut

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

    Où vote-t-on pour que cette feuille de style soit proposée avec celle du site, dans la page idoine ?

    • [^] # Re: Par défaut

      Posté par  . Évalué à 7.

      Ici → https://linuxfr.org/suivi/nouveau

      « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

    • [^] # Re: Par défaut

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

      Cette feuille de style est maintenant disponible avec les autres sur la page « Changer de style ».

      • [^] # Re: Par défaut

        Posté par  . Évalué à 4.

        si je peux me permettre d'insister lourdement, pourquoi ne pas proposer une fonctionnalité similaire à la CSS de base ? Le visiteur occasionnel sur linuxfr, ou non enregistré, ou qui n'a pas envie de changer de style, qui va venir depuis son téléphone aurait un rendu horrible, alors qu'il suffirait de faire une petite règle pour afficher le site correctement sur un petit écran.

        Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

  • # Espace entre les lettres

    Posté par  . Évalué à 4.

    Beau travail, pleins de bonnes idées d'agencement. Seulement, une chose m'intrigue: pourquoi avoir opté pour un espacement de 2 px entres les caractères ? Je trouve que cela rend la lecture plus difficile, même sur les petits écrans.

    • [^] # Re: Espace entre les lettres

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

      pourquoi avoir opté pour un espacement de 2 px entres les caractères ?

      Parce que c'est une vieille habitude et que j'aime bien et je trouve que cela rend la lecture plus facile, même sur petits écrans :) Ensuite, c'est très simple à changer, il suffit de faire une CSS qui intègre la version de base et surcharge letter-spacing dans body.

      Il y a une demande dans le suivi pour avoir un hébergement de CSS personnalisée sur linuxfr... Un commentaire propose d'avoir déjà un simple champ pour pouvoir surcharger certaines règles de la CSS courante, ça permettrait de faire simplement ce genre de manipulation !

      • [^] # Re: Espace entre les lettres

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

        Aïe ! Si je peux me permettre, c'est une très mauvaise habitude, trop répandu. Ca ne facilitera pas du tout la lecture, ça dézingue l'équilibre du gris typographique dans ton texte courant. Des types dont c'est le job se sont fait chier a caler au pixel près ta police. J'espère qeut tu as une bonne raison pour saloper leur boulot :)
        En théorie dans les règles de typographie old school, ormis certains cas précis, on ne touche jamais l'espace entre des caractères (les approches) sur du texte courant. Si il a un soucis de lecture, il est plutôt conseillé de grossir d'un corps la taille de ton texte ou de changer de police.

        Il y a plein de vieilles règles chiantes, de recettes bizzares, de conventions et d'habitudes (à la con, mais pas que) qui ont été mise en place au cours des siècles depuis l'écriture jusqu'à l'imprimerie et qui sont souvent massacrée par l'affichage digitale. Un bon sujet de geek, passionnant et insupportable ! (et vous la police ubuntu, vous en pensez-quoi ?)

        Comment faire des marges, des colonnes et des blancs harmonieux ? (astuce : nombre d'or) Quelle sont les bonnes longueurs de lignes selon les types de doc ? (une colonne : 56 signes un lecteur moyen la lit la ligne d'une traite) Quand utiliser du gras plutôt que de l'italique ? Quelles infos à mettre en avant et de quelle façon, couleur, taille, style ? Comment faire une belle liste ? etc...

        Pleins de trucs obsolètes ou pas forcément utile, mais aussi pleins d'astuces et de pistes intéressantes, instructives et applicable à leurs équivalents dans les technologies moderne pour faciliter, manipuler et jouer avec la lecture et l'accès à l'information. C'est pas inintéréssants par exemple, pour réfléchir à l'ergonomie d'une GUI, ou ne serait-ce que d'une CSS. Dans le fond, assembler des caractères en plombs ou les faire afficher sur un écran, c'est vraiment pas si différent...

        • [^] # Re: Espace entre les lettres

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

          Je dis pas... mais en même temps, si il est maintenant interdit de transgresser les règles et les bonnes pratiques... Ça va être triste. Non ?
          Bon, pour ne pas mourir idiot, j'ai fait une version de la 1024 sans letter-spacing : http://arliguy.info/css/spasibo-1024-nls.css et je vais la tester un peu, mais déjà je trouve cela trop compact. A cause de la police avec empattements ? J'essaye aussi avec une sans-serif : http://arliguy.info/css/spasibo-1024-nls-sans.css Avec la police Ubuntu par défaut en plus \o/

          Mais niveau équilibre et apparence - ce dont semble parler le gris typographique auquel tu fais référence - je trouve qu'avec un letter-spacing de 2px, c'est mieux... surtout que le fond est déjà gris.

  • # Et encore merci !

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

    Non seulement l'annonce de la conférence photo est bien visible sur la première page de LinuxFR mais également dans les journaux grâce à toi.

    Merci pour la publicité :-)

  • # Marche pô

    Posté par  . Évalué à 3.

    Encore une feuille de style qui ne fonctionne pas. Entre autres sur http://linuxfr.org/tableau-de-bord elle n'affiche pas les nouveaux commentaires.

    Cela dit... AUCUNE feuille de style ne le fait à part celle par défaut.
    suis-je le seul à utiliser cette fonctionnalité ?

    • [^] # Re: Marche pô

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

      suis-je le seul à utiliser cette fonctionnalité ?

      Il faut croire :) en tout cas merci d'avoir souligné cela, je l'ai ajouté. J'ai fait simple, j'ai changé la couleur de fond de la cellule qui affiche le nombre de commentaires en vert quand il y a la classe thread-new-comments

      Il y a peut être d'autres fonctionnalités qui peuvent manquer car je ne consulte jamais cette page et de plus je n'y ai pas grand chose.

  • # Tant qu'on y est

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

    http://bohwaz.net/static/dlfp-ror.css

    Basé (et importe) kaiska-new (donc on profite de ses améliorations s'il y en a), avec quelques additions (et oui le code est crade, osef) :

    • il faut survoler un commentaire pour voir l'avatar de l'auteur (donc pas de requête vers proutvatar par défaut)

    • les avatars par défaut ne sont pas affichés (css3 inside : opera 11, iceweasel 3.5+, IE2.0+)

    • suppression des bordures arrondies (quelle plaie cette mode)

    • les avatars dans la liste des journaux sont plus discrets (ça sert que dans les commentaires les avatars normalement)

    • les images dans les contenus sont affichées en petit par défaut, il faut maintenir cliqué pour voir l'image en max. 100% de la largeur

    • tout le texte dans les contenus est en taille normale, même les headers etc.[object Selection]

    • le footer est un poil plus petit

    • les tags ne sont pas affichés (à quoi ça peut bien servir ?)

    Bref ça rends le site un peu plus utilisable. Je vous encourage à faire votre propre copie / prendre les bouts de codes intéressants dedans, car je change parfois (genre avant j'affichai pas les avatars, mais ptet que les voir au survol ça va me gaver et les re-désactiver).

    « Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)

Suivre le flux des commentaires

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