Sommaire
Bonjour à tous,
Bon, je me suis rendu compte que cela faisait pas loin de huit ans que j'avais sorti Springtime et avec, entre autres, la sortie de Firefox 57 Quantum Render, c'était une bonne occasion pour explorer un peu les facilités offertes par les CSS 3.
La voici donc. Elle s'appelle « Steelblue » et est disponible sur la page de sélection des feuilles de styles.
En l'état actuel des choses, elle fonctionne sans problème avec Firefox 57, ainsi qu'avec Safari sous iOS. Par contre, elle rame avec Google Chrome… :-(
L'idée générale, cette fois-ci, était de produire une CSS exhaustive, qui s'applique également aux sections administratives du site et également de se réhabituer à la disposition générale des éléments HTML et c'était un travail beaucoup plus vaste que prévu. Il s'agit donc d'une CSS sombre, grise et bleue, ce qui n'est pas tout-à-fait un hasard non plus : l'une des difficultés rencontrées avec les feuilles de styles précédentes était justement le rendu des couleurs en fonction des moniteurs et lorsque l'on utilise des tons un peu trop pastels, les à-plats gris ont tendance à apparaître bleutés. Et même si depuis la dernière, j'ai acquis d'autres viewports, c'est une bonne façon d'obtenir quelque chose dont le rendu sera à peu près le même partout.
Feuille non exhaustive
La dernière fois, j'avais estimé la durée de rédaction de Springtime à environ 80 heures, un peu moins pour Nightgrey. Cette fois-ci, j'ai entamé la chose au mois de novembre et j'ai arrêté de compter depuis. Je m'étais arbitrairement imposé une première deadline en décembre avec l'espoir de la soumettre pour Noël, mais elle n'était franchement pas prête à cette date et j'ai préféré la reporter à une date raisonnable plutôt que proposer quelque chose qui soit difficilement utilisable et qui soit décevante en première impression.
En revanche, il était temps de la soumettre ce mois-ci plutôt qu'essayer d'atteindre la perfection, et également pour pouvoir me recentrer sur d'autres tâches. Elle pourrait donc être encore grandement améliorée et l'idéal serait bien sûr de faire cela en fonction des retours des utilisateurs. Je suis donc friand de vos commentaires. :)
En particulier, la CSS n'utilise actuellement aucun graphisme, à part les icônes inline en SVG utilisés pour les formats de contenus et pour le bouton de développement d'un fil dans les commentaires. Outre le temps passé, la principale raison à cela est que je suis mauvais graphiste. :) Si certains d'entre vous s'en sentent l'âme et peuvent la décorer, si possible en SVG, j'en serai ravi !
En ce qui concerne ces icônes, elles ont été écrites à la main en SVG+XML sous VIM, optimisées au maximum et intégrées à la feuille en base64. Les icônes Markdown et ePub ont été reprises des logos officiels, puis optimisées et adaptées de la même façon.
Responsive
La feuille n'en a pas forcément l'air au premier coup d'œil mais elle est faite pour être adaptative. Via des règles générales dans un premier temps, puis avec des clauses particulières en descendant en dessous de certaines limites, notamment pour changer la taille des fonte dans certains cas. Cela fonctionne, mais pourrait être également amélioré aussi.
En particulier, j'ai essayé de faire un rendu propre sur smartphone tenu verticalement, mais je n'ai pas eu le temps de le finaliser et ce n'est pas encore utilisable en l'état. Mais la feuille a vocation à le devenir dans un futur (plus ou moins) proche.
Patches
L'une des caractéristiques de cette feuille est qu'elle est accompagnée d'un certain nombre de modifications portées au code du site, le tout étant fourni dans une pull request de 24 commits présentée ici. Un grand merci à Bruno Michel qui y a répondu et l'a intégrée en moins de 24 heures !
En principe, altérer le code pour adapter le style est presque un sacrilège :) Et au contraire, c'est même un exercice de montrer que l'on peut faire l'impensable avec de longs sélecteurs CSS mais la difficulté a justement commencé à venir des sections des pages qui ne contenaient pas assez de balises.
Du coup, je me suis résolu à écrire des patches pour ajouter ce qui était nécessaire, et en profiter pour faire quelques corrections de bugs et des petites améliorations. Ce fut par exemple le cas des méta-informations des articles telles que « Posté par, modéré par » qui étaient toutes présentées en une seule phrase. Elles ont bénéficié d'un encadrement span pour faciliter leur mise en page.
Pour faire cela, il a bien sûr fallu récupérer le code source du site, mettre en place (et à niveau) le framework Ruby associé, corriger quelques gems qui ne voulaient pas compiler correctement, démarrer le site en local avec une adresse visible du réseau local (donc autre que 127.0.0.x) et remplir ce site avec un contenu minimum pour pouvoir travailler en situation réelle. En parallèle, j'ai utilisé un script Greasemonkey maintenu en parallèle pour appliquer en temps réel les modifications portées à la branche de développement sur les pages servies par le site réel, et pouvoir avoir un rendu en grandeur nature.
Évidemment, toute la difficulté a consisté à faire en sorte de n'introduire aucun effet de bord, et surtout aucune régression avec les autres CSS, en particulier la CSS par défaut ! Globalement, cela s'est passé sans trop de heurts, mais il faut tout de même faire attention à la manière dont les éléments sont ciblés. Par exemple, il est fréquent d'utiliser un lien de parenté direct avec « > » dans une CSS, pour éviter d'inclure toute la descendance si l'élément ciblé n'est pas doté d'un identifiant ou d'une classe spécifique. Or, le simple fait d'encadrer les différentes sections dans des div distinctes peut briser ce lien de parenté…
L'une des sections les plus problématiques était paradoxalement celle des statistiques, qui contient beaucoup de sous-sections. Certaines tables émulent des barres de progression et il était délicat de remplacer tous les styles inline. D'autres mettent en place des blocs dont le nombre de cellules par ligne n'était pas constant (à cause de rowspans) et le nombre de lignes par bloc non plus, ce qui a fini par donner lieu à l'usage de sélecteurs tels que tr > td:not([rowspan]):first-child > div. Le fait de ne PLUS pouvoir cibler ces blocs au delà d'une certaine limite a aussi été une motivation pour y ajouter des repères particuliers, comme des classes cycliques telles que "odd"/"even" que l'on retrouve dans d'autres sections.
Il y a donc un certain nombre de petites options qui sont invisibles a priori. Par exemple, il y a désormais un nom de classe sur le bloc entier d'un commentaire pour lequel on a voté « pertinent » ou « inutile » et qui peut d'ores et déjà être utilisé par toute autre feuille de style. Je m'en sers personnellement pour afficher les flèches 🡩 et 🡫 associées à ces votes. D'ailleurs, même s'il s'agit de simples caractères UTF-8, il est apparu que c'était plus subtil que prévu : les choisir trop fines ou trop épaisses changent assez notablement la perception du rendu.
J'ai essayé de suivre à peu près les règles de développement du noyau Linux dans la composition de ces patchs, en produisant des commits de petite taille et surtout regroupés par thème, pour les rendre faciles à parcourir et indépendants entre eux (pour pouvoir éventuellement rejetés au cas par cas) même si la CSS elle-même a besoin de chacun d'eux et est livrée dans le dernier commit.
Une dernière motivation à ces patches a été, enfin, d'essayer de se débarrasser des styles inline dans le corps des balises (l'attribut style="…") pour éviter d'avoir à recourir à !important et laisser le dernier mot aux CSS.
Fontes et images
La feuille utilise globalement un Helvetica générique (résolu en « Nimbus Sans L » sur Fedora 25) mais aussi, plus particulièrement, la jolie fonte Linux Libertine, déclinée ici en « Linux Libertine O », pour le grand titre de l'article mis en phare sur la page d'accueil.
Elle utilise aussi deux Google Fonts : Dhurjati et Raleway. La première sert uniquement au logo en tête de page, à gauche, la seconde est la fonte arrondie qui sert au titre des articles. Si c'est un problème, elles sont importées en une fois à la ligne 24 de la feuille de style et la clause peut être modifiée, notamment pour faire référence à des fontes hébergées sur le site.
Côté images, je me suis rendu compte que certains articles ici publient des images « pleine page » (corps de publications papier) ou en haute résolution, ce qui m'a permis de penser à fixer une taille maximum 100%. Et les récentes failles Meltdown et Spectre ont aussi mis en évidence le fait que les images vectorielles SVG n'ont pas de taille implicite si elles ne la précisent pas elles-mêmes, ce qui a pour effet de provoquer des affichages démesurés, en pleine page, du moindre petit symbole. Les images dont le nom de fichier se termine en *.svg voient donc leur largeur fixée arbitrairement au tiers de la largeur de la boîte de l'article.
Une légère ombre a également été ajoutée aux bannières sous l'article principal en page d'accueil. Toutefois, là encore, il y a des exceptions. La bannière de soutien à l'April, par exemple, est dessinée avec un effet de drapé et est doté de sa propre ombre. Du coup, on ajoute une dispense basée sur le nom de son fichier et on en profite pour prévoir une classe « shadowed » pour désactiver l'ombre au cas par cas.
Tribune libre
Il y a une petite surprise sur la page de la Tribune. :) Je vous laisse voir laquelle, mais cette particularité fera probablement l'objet d'un prochain patch qui la retirera de la CSS et qui en fera une fonctionnalité disponible plus globalement.
Tags
Pour finir, j'ai fait une petite refonte de l'apparence des sélecteurs de tags en tête des articles pour leur donner l'apparence d'un slide button. Il se trouve que ces boutons sont réalisés en CSS pure sans graphique bitmap ou SVG, pas même inline. Même si ceux-là sont rendus par mon propre code, on trouve beaucoup d'exemples en ligne pour en réaliser les mêmes. Seulement, il se trouve que le bouton lui-même et son habillage sont en fait une décoration d'un couple form + button :). Du coup, il faut bien cliquer sur la petite bille à l'intérieur pour que cela fonctionne.
C'était rigolo pour le principe, mais on refera quelque chose de plus utilisable si c'est gênant sur le long terme.
Voila, voila. J'espère qu'elle vous plaira, même si elle ne sera probablement pas consensuelle.
Merci d'avance à tous pour vos avis et vos retours.
# clavier qui se blo
Posté par freem . Évalué à 4.
Clavier bloqué?
Sinon, pour les fontes, ce qui est à priori des flèches ( "les flèches 🡩 et 🡫 associées" ), ici, ça me fait juste des carrés avec le thème par défaut. C'est normal?
[^] # Re: clavier qui se blo
Posté par freem . Évalué à 7.
Et sinon, on fait comment pour la tester? Parce que quand je vais les styles, je vois… une longue liste de capture d'écrans, sans nom. J'avais déjà un peu regardé mais de manière générale je les ais toujours trouvées moins accessibles que la feuille par défaut, voire parfois inexploitables (j'avais cherché un style sombre qui me plaise pour éviter d'avoir les yeux en choux-fleur quand je bascule de mon rxvt à linuxfr, sans succès).
Note: c'est chiant, "vous ne passerez pas", au moment de valider les modifs du message… il n'y aurait pas moyen de ne faire cette vérification qu'au moment ou l'on accède à la page de modification, et non de validation?
[^] # Re: clavier qui se blo
Posté par Obsidian . Évalué à 3.
Salut et merci pour tes remarques.
Il fallait bien sûr lire « d'ores et déjà être utilisé par toute autre feuille ». J'ai eu un problème d'édition cette nuit avec le corps du journal dupliqué en plein milieu de mon texte…
Pour les flèches, ce sont des caractères UTF-8 et effectivement, c'est toujours un problème si les fontes installées ne les prennent pas en charge. C'est le cas aussi de la flèche pour « remonter au commentaire parent » à gauche du bouton « # » dans le titre des commentaires. Si ça passe mal, il faudra effectivement passer au SVG.
En fait, ça, c'est une fonctionnalité du site lui-même, qui présente les feuilles de style sous forme de capture d'écran, en « randomisant » l'ordre d'affichage des captures pour éviter d'en favoriser certaines. Celle qui est présentée ici affiche un gros « Steelblue » vertical sur la gauche de la capture.
[^] # Re: clavier qui se blo
Posté par Benoît Sibaud (site web personnel) . Évalué à 4.
Corrigé, merci.
# Vraiment joli.
Posté par Anthony Jaguenaud . Évalué à 3.
Je trouve ça vraiment très beau. Je vais probablement remplacer ma CSS actuelle.
Il y a deux détails :
Comme je ne sais pas vraiment ce qu’on peu faire, je ne pense pas être pertinent pour proposer des améliorations, encore moins les réalisés.
[^] # Re: Vraiment joli.
Posté par freem . Évalué à 5.
Perso, ma 1ère impression:
Pour moi, les principaux défauts à corriger, c'est la fluidité et l'espace perdu, le reste on peut encore s'en accommoder (je viens de remarquer que les boutons de visualisation et de publication sont plus petits que la barre d'outils… c'est un comble).
[^] # Re: Vraiment joli.
Posté par Obsidian . Évalué à 2.
Oui, c'est effectivement une déception. Pour info, quel navigateur utilises-tu ?
La CSS a été principalement développée avec Firefox 57 sur Fedora en essayant d'écrire des règles globalement propres, puis en adaptant ce qui relève vraiment des particularités du navigateur et pas des imprécisions des règles. Est donc vite arrivé le temps de le confronter à d'autres navigateurs et quand je me suis rendu compte qu'il rame avec Chrome là où on s'attendait à ce qu'il soit toujours le navigateur le plus rapide, c'était trop tard pour revenir en arrière.
Pour le reste, tu pourrais me faire des screenshots ? Y a probablement pas mal de choses à corriger mais il y a aussi beaucoup de choses que tu nous signales et qui ne devraient pas se produire…
[^] # Re: Vraiment joli.
Posté par freem . Évalué à 2.
Vivaldi, qui est basé sur chromium. Pas comme si on avait vraiment le choix du moteur de rendu: c'est soit Firefox, soit IE, soit chromium… ah, j'oubliais le truc d'apple, je sais même plus le nom :)
Bref.
L'un des problèmes est vraiment typique de vivaldi («nouveaux commentaires» qui se déplace de zone partiellement) du au fait que vivaldi à réellement une interface adaptable, sans plug-ins, et je me prive pas de m'en servir :)
Ah, aussi, je trouve que la barre d'outil n'est pas très parlante (les boutons Im et Ln… ça cause pas des masses, et la boîte qui apparait indique juste "javascript de linuxfr.org" ici).
Je veux bien poster des screen, mais je dois reconnaître que je ne suis pas coutumier d'upload des images, et du coup, je connais pas «pastebin» pour ce type de contenu?
[^] # Re: Vraiment joli.
Posté par Obsidian . Évalué à 2.
Ouais, il est clair que ce n'est pas utilisable en l'état mais l'une des motivations à écrire cette CSS était justement l'utilisation des fonctionnalités CSS 3 dans la limite du raisonnable. En ce sens, j'estimais que tout ce qui passait fluidement sur ma machine (Un Core 2 Quad de fin 2008, qui marche très bien au demeurant) et avec Firefox pouvait être considéré comme raisonnable.
Je pense que ce sont les dégradés qui font ramer la chose, obligeant le navigateur à recalculer les couleurs de fond au scroll, là où d'autres navigateurs font un rendu global, plus rapide à parcourir mais plus coûteux en mémoire.
Oui, ça fait partie aussi des choses à optimiser. En fait, il me fallait dès le départ des caractères, disons, « les moins obscurs » possibles et qui soient affichés par défaut. Autant les puces et le style (gras, italique…) sont relativement clairs, autant les suivants nécessitent des icônes SVG en plus mais là encore, j'ai décidé de reléguer ça à la « deuxième étape » avec retours des utilisateurs parce qu'autrement, on a vite fait de faire encore plus obscur. Heureusement, il reste les infobulles pour lever les ambiguïtés.
Ça par contre, ce n'est pas moi. :)
[^] # Re: Vraiment joli.
Posté par freem . Évalué à 4.
J'ai failli oublier les captures.
J'ai essayé de mettre en valeur les points que je pense qu'il serait sympa d'améliorer, et sur la 1ère, ce qui est à gauche du site c'est la «sidebar» de vivaldi, qui permets de consulter les favoris, les notes, l'historique, les téléchargements, etc.
C'est elle qui peut causer le problème mis en exergue sur «nouveau commentaire». Honnêtement, je pense que c'est un bug de vivaldi, qui n'utilise pas la bonne valeur de largeur de page quand cette barre est présente, ce qui peux casser les CSS.
Ok (je vais pas dire que je sais, puisque je ne sais pas si on peut custom ce genre de trucs via un style) mais dans le thème classique ce n'est pas un problème puisque les icônes sont parlantes ;)
[^] # Re: Vraiment joli.
Posté par freem . Évalué à 5.
Un autre point dont je viens de m'apercevoir en répondant dans un forum: les commandes «one-liner» genre
echo hello worldsont peu distinctes du reste du texte, j'ai l'impression que la seule chose qui change c'est la fonte qui deviens monospace. Le fait que ça soit encadré ou avec un fond distinct du vrai texte, par exemple, ajoute un vrai plus à la lecture. On pourrait aussi imaginer changer la couleur du texte lui-même, à la rigueur.[^] # Et les maths ?
Posté par Thomas Douillard . Évalué à 4.
Ce qui est au dessus est une citation du post précédent
Je testerai bien ce que ça donne avec
des maths en ligne.
Et pourquoi pas avec
une formule de maths un peu costaud, hors ligne ?
et même encore des maths
[^] # Re: Et les maths ?
Posté par freem . Évalué à 2.
Et voici le rendu chez moi du message précédent (navigateur vivaldi, qui est basé sur chromium).
[^] # Re: Vraiment joli.
Posté par Obsidian . Évalué à 1.
En fait, l'idée était d'avoir globalement une « feuille de commentaires » la plus « plate » possible par défaut mais si effectivement, la fonte monospace n'est pas suffisante, on va essayer de trouver quelque chose de joli pour la décorer également.
[^] # Re: Vraiment joli.
Posté par freem . Évalué à 2.
Ça explique donc. Il est vrai que j'ai du mal avec le «flat design» justement pour ce type de raisons: difficile à mon avis dans cette mode de distinguer les différences, du coup on est obligé de lire attentivement là ou l'on peut avoir l'habitude de «scanner». Mais, ça reste un avis personnel, et comme dis dans la news: «ça va pas plaire à tout le monde» (sincèrement, si y'a que le code inline qui me gêne, je pense que je l'adopterais quand même, je trouve ce style autrement plus classe et moins douloureux pour les yeux (moins blanc, moins lumineux) que celui par défaut).
[^] # Re: Vraiment joli.
Posté par Sufflope (site web personnel) . Évalué à 6.
Au contraire, le flat design encourage le contraste et les couleurs vives. Là, avec du skeuomorphisme d'un côté (les dégradés "métalliques" par exemple) et aucun contraste saisissant dans le flux de texte, on est aux antipodes.
# une dépêche
Posté par ZeroHeure (site web personnel) . Évalué à 4. Dernière modification le 24 janvier 2018 à 13:41.
Comme le suggérais Bruno en suivi, ton journal est proposé en dépêche… à compléter.
Petit bug :
Sous Firefox Nightly (future version 60) les norloges de tribioune (modération, rédaction, …) ne s'illuminent pas : en passant sur une norloge, celles qui portent la même heure s'illuminent avec la CSS par défaut). Sur la tribune libre ça marche.
"La liberté est à l'homme ce que les ailes sont à l'oiseau" Jean-Pierre Rosnay
[^] # Re: une dépêche
Posté par Obsidian . Évalué à 3.
Merci beaucoup, du coup ça me met un peu la pression parce qu'il reste beaucoup à faire avec le retour des utilisateurs, surtout que les choix graphiques sont encore loins de faire l'unanimité (ce qui était assumé) et que les difficultés d'affichage sur les navigateur Chrome-based sont un problème sur lequel il faut se pencher.
L'avantage est que ce n'est pas une dépêche noyau. On va donc prendre le temps qu'il faut pour rédiger un article de qualité.
Je vais effectivement retravailler les horloges tribune.
[^] # Re: une dépêche
Posté par freem . Évalué à 4.
D'un autre côté: Release Early, Release Often: pas obligé d'avoir un truc 100% fonctionnel pour annoncer que tu bosses dessus. Tu pourras avoir plus de retours comme ça ;)
Bon courage en tout cas, ce style me plaît assez pour finir par défaut sur mon profil.
# Trucs qui vont pas
Posté par Thomas Douillard . Évalué à 6.
Hello, merci pour cette contribution ! Il y a des trucs sympas, même si je ne pense pas l’adopter, principalement à cause de la palette de couleur qui ne me plaît pas trop.
Quelques ptits bugs (qui sont pas forcément spécifiques à cette CSS ci) :
* la barre de navigation (nouveaux commentaires etc.) est trop transparente, du coup quand wa se superpose à du texte c’est complètement illisible.
* elle disparaît quand la largeur du navigateur est petite, ça me pose perso problème.
* l’indentation des longs threads est problématique en petite largeur, le texte finit par commencer à gauche du cadre des commentaires. C’est pas la seule CSS qui fait ça, mais certaines ont bien réussi à corriger le tir.
(en passant, rien à voir avec cette CSS mais j’en profite : les boutons «<» et «>» pour naviguer dans les nouveaux commentaires sont trop petits dans certaines CSS pour être utilisé digitalement)
[^] # Re: Trucs qui vont pas
Posté par freem . Évalué à 4.
Serait-ce…. le 1er usage correct de digital que je lise sur le net dans un sujet ayant rapport à l'informatique? Je pense que je vais prendre un screen pour mon écran de veille!
[^] # Re: Trucs qui vont pas
Posté par Thomas Douillard . Évalué à 4.
Malheureusement non, le correcteur orthographique ne connaît pas le mot « digitalement » qui est un néologisme :) M’enfin je m’en suis accordé la licence.
[^] # Re: Trucs qui vont pas
Posté par Obsidian . Évalué à 4.
Salut,
Oui, en effet, comme dit plus haut, j'ai choisi de partir sur cette palette parce que ce genre de style me plaît en soi, mais aussi et surtout parce que ça représentait beaucoup plus de boulot que prévu et que je ne pouvais pas tout mener de front. Faire la mise en page, adapter les textes, les marges, etc. et faire les graphismes.
Et comme ça représente beaucoup de travail, c'était soi repartir sur encore trois mois en attendant de voir ce que j'aurais pu faire, soit la sortir en « version bêta » et la raffiner tranquillement ensuite. Mais je pense qu'une fois finalisée, je m'appuierai dessus pour refaire la même en blanc et en un peu plus « flat », pour coller à la mode actuelle.
La barre de navigation devient opaque quand on la survole. Pour le reste, j'ai voulu faire un effet de « verre » qui rend bien quand on scrolle mais à l'usage, c'est gênant. Je vais arranger ça aussi, donc.
Il faut vraiment que la largeur du navigateur soit très très petite pour qu'elle disparaisse mais en fait, c'était une première tentative pour l'adapter aux smartphones, et que je n'ai pas fini parce que je n'ai pas réussi à les cibler proprement avec les @media queries. C'est sur la liste aussi.
« À gauche » ? C'est étonnant. C'est vrai que je me suis préoccupé des longs fils mais entretemps, j'en ai trouvé d'encore plus longs et les problèmes réapparaissent. On va corriger ça aussi.
[^] # Re: Trucs qui vont pas
Posté par Thomas Douillard . Évalué à 4.
Effectivement c’est plutôt à droite /o/
# largeur
Posté par Nicolas Boulay (site web personnel) . Évalué à 5.
Merci pour ce boulot, je commençais à me lasser sérieusement de l'ancienne CSS. Cela manque toujours un peu d'image mais bon.
Une remarque tout de même, je regarde beaucoup linuxfr sur mon desktop (vous savez le machin qui a écran de 24") et les colonnes sont trop large pour être lisible. Limite cela serait top de faire 2 colonnes pour éviter les grands espaces vide de l'ancienne CSS.
"La première sécurité est la liberté"
[^] # Re: largeur
Posté par Obsidian . Évalué à 2.
Salut et merci pour ces remarques.
Tout-à-fait, et ça ne s'arrange pas puisque dans la version actuelle, j'ai même éliminé le logo sans l'avoir (encore) remplacé par quelque chose de différent. Comme exposé plus haut, elle mérite d'être beaucoup travaillée mais je suis mauvais graphiste, et il m'aurait fallu beaucoup trop de temps pour produire quelque chose de potable, mais elle a assurément besoin d'être décorée.
Je pense que je vais aussi faire la même en blanc en parallèle de celle-ci, avec une approche beaucoup moins « SF » et beaucoup plus sobre, mais en se basant sur le même canevas.
Puis-je te demander également quel navigateur tu utilises, parce que je m'aperçois sur les screenshots qu'on a eu l'amabilité de mettre en ligne un peu plus haut que même les icônes des boutons des commentaires que je pensais avoir correctement alignés partout ressortent de travers sur certains d'entre eux.
Euh, d'accord, mais j'ai du mal à voir de quoi tu parles en particulier. Peux-tu préciser un peu ?
Merci.
[^] # Re: largeur
Posté par Nicolas Boulay (site web personnel) . Évalué à 4.
J'utilise firefox sous linux.
Sur les sites "modernes", il y a en général, un grand texte mono-colonne au milieu et plus grand chose sur les cotés("mobile first"). Sur un écran large, c'est horrible, cela fait perdre plein de place. L'ancienne CSS me laisse des grands vides sur les cotés.
Pour la nouvelle CSS, la mono-colonne est très large, cela fait moins de place gâchée, mais la lecture est rendue plus complexe. Je proposais de tenter de transformer les blocs de textes d'une "certaine largeur" en 2 colonnes, pour toujours gagner de la place tout en facilitant la lecture.
"La première sécurité est la liberté"
[^] # Re: largeur
Posté par Obsidian . Évalué à 2.
D'accord ;)
Effectivement, la manchette latérale gauche a une taille fixe (environ 15em en l'état) et le reste de l'écran est alloué au contenu, et cela reste comme cela en rétrécissant l'écran jusqu'à un certain point où
C'est une bonne idée mais c'est difficilement applicable aux commentaires, qui sont organisés en fil et sur la page desquelles il n'y a structurellement qu'un seul article (dépêche, journal ou entrée de forum). Ce serait faisable en revanche sur les pages d'accueil de chacune des grandes sections qui présentent tous les articles en liste.
J'utilise actuellement un moniteur SyncMaster T200 de neuf ans d'âge mais qui a de très bons contrastes et rendu des couleurs mais qui est toujours en 1680×1050. C'est grosso-modo le format d'un A3 allongé, ça me donne une vue panoramique mais ce n'est pas géantissime non plus, même si ça permet déjà de voir l'allongement des lignes par rapport à des choses plus petites.
Il faudrait que j'essaie sur quelque chose qui ait les dimensions de l'écran d'un Mac Pro, par exemple, pour voir à partir de quel stade il est intéressant de répartir les boîtes. Mais à titre indicatif, c'est déjà ce qui se passe sur la page des dépêches en cours de rédaction, en plus petit.
[^] # Re: largeur
Posté par Nicolas Boulay (site web personnel) . Évalué à 3.
Ce n'est pas possible de faire chaque commentaire sur 2 colonnes ? Faire les colonnes dans une boite et non des boites sur 2 colonnes ?
"La première sécurité est la liberté"
# utilisateur avec compte uniquement
Posté par steph1978 . Évalué à 4.
Pour tester "Activer cette feuille de style uniquement pour la session en cours", j'ouvre le site sur un autre navigateur. Oh déception, on ne peut pas utiliser une feuille de style alternative pour une session de surf sans être authentifié.
J'ai commis un ticket de suivi pour tester la popularité de cette demande.
[^] # Re: utilisateur avec compte uniquement
Posté par freem . Évalué à 2.
Effectivement, pourvoir passer une feuille de style par l'URI serait sympa. Je vais regarder ton entrée de ce pas et éventuellement ajouter mon caillou au dos des développeurs si possible :) (ceci est une blague, je ne pense pas que les retours utilisateurs soient des poids, au contraire)
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.