Journal Feuilles de style linufr

Posté par  .
Étiquettes :
23
3
juil.
2009
Bonjour à tous,

J'ai voulu créer une feuille de style pour le site linuxfr, basée sur kaïska, que j'utilise normalement. Cela me prends plus longtemps que prévu, mais même si c'est encore expérimental, les premiers résultats sont assez encourageants.

Le but initial était d'obtenir quelque chose de maintenable et de modifiable facilement pour permettre à d'autres de créer d'autres thèmes. Pour cela, j'ai tout d'abord "éclaté" la grosse feuille de style en plusieurs, plus cohérentes, en utilisant @import.

Ça facilite la lecture, et on voit facilement les erreurs HTML.

Globalement, je n'ai pas obtenu de grosses difficultés, même si J'ai parfois du utiliser quelques techniques CSS pour pallier certaines incohérences du code HTML généré. Mais ces techniques ne fonctionne généralement qu'avec un navigateur moderne. (exit IE6) ( je n'ai testé au'avec Firefox 3.0 )

J'ai toutefois rencontré quelques limitations qui ne pourront être résolues que par des petits changement s côté serveur. Voici donc quelques remarques, par ordre d'importance, pour les mainteneurs du site linuxfr.

La balise "p" est souvent utilisée pour créer des barres d'outils (e.g page d'accueil). J'ai essayé d'utiliser quelques techniques CSS qui fonctionnent par exemple sur la page d'accueil, mais qui forcément ne sont pas infaillibles, et ont des effets de bord sur d'autres pages (le pire étant les formulaires). Dans ces cas là, un simple 'class="toolbar" serait appréciable.

Les balises br,hr, etc ne sont pas vraiment utiles. Pas plus que les crochets, chevrons, etc pour produire des effets de style. Les styles en lignes ne sont pas vraiment utiles, mais heureusement contournables.
Pour résumer, merci de supprimer les "-" des listes, les ">" avant les liens, les "·" dans les formulaires, etc. Il y a CSS pour ça.

Parfois, une balise div contient directement du texte, et là, pour arriver à séparer les éléments, c'est cauchemardesque. Dans ces cas là, c'est très difficile d'obtenir quelque chose de cohérent. Donc, si une balise "div" contient du texte, merci de le mettre dans une balise "p" ou "span"

Un identifiant de classe dans la balise div.main serait utile pour appliquer des feuilles de style en fonction de la page: 'div class="main" id="polls", ou id="stats" ou id="forums", etc...

Il y a par exemple des fois où j'ai voulu créer des feuilles de style pour certains tableaux, et je n'y suis pas arrivé. Cela me permettrait d'appliquer des styles différents aux tables ou listes, comme les listes sur la page "plan du site".

J'ai fait quelques essais de coloriage des "threads" dans les commentaires. C'est vraiment expérimental, mais assez utile pour aller de thread en thread... Ici, une boucle dans les thread serait appréciable 'class="thread1", 'class="thread2", 'class="thread3", puis de nouveau 'class="thread1", 'class="thread2", etc...

Je ne suis pas arrivé à supprimer le cadre rouge autour des nouveaux threads. ( Je suis fatigué )

J'ai essayé d'accorder moins d'importance aux scores des journaux, nouvelles, etc. Mais encore une fois, tout est facilement accessible, et l'on devrait pouvoir créer une feuille de style alternative sans grosses difficultés.

Je n'ai pas eu le temps de personnaliser les formulaires.

Pour info, la feuille de style est actuellement hébergée sur mon petit serveur perso, mais j'aimerais qu'elle soit hébergée sur Linuxfr ou un autre site plus professionnel, au moins le temps du développement. URL: http://sagso.homeip.net/css/linuxfr.css

Une fois ces quelques petites améliorations corrigées, je pourrais simplifier certains sélecteurs CSS, et rendre les feuilles de styles plus simples, et universellement reconnues avec les autres navigateurs internet.

Encore une fois, vu la complexité des feuilles de style, je ne pense pas que ce soit portable à d'autres navigateurs, mais cela permet au moins d'avoir un aperçu des possibilités offertes par CSS.

Par habitude, les commentaires dans les feuilles de styles sont en anglais, mais c'est assez simple.

Par manque de temps, je ne pense pas pouvoir maintenir ces feuilles de style très longtemps.

PS: Désolé pour ce journal sans doute (trop) long...

  • # euh comment dire ?

    Posté par  . Évalué à -10.

    arrogant ?
    tu trouves pas que te pointer comme ça avec des "merci de faire ceci, merci de faire cela" c'est complètement déplacé ? Tu as sans doute fait un gros boulot, et c'est bien.

    Mais pourquoi ne pas envoyer un message aux mainteneurs du site, avec des tournures du genre "Pensez vous qu'il serait possible de ?" plutôt que d'en faire un journal publique, genre "regardez comme moi je sais bien faire des css ?"

    • [^] # Re: euh comment dire ?

      Posté par  . Évalué à 10.

      Tu as sans doute raison sur la forme que j'ai employé vers la fin du document.

      Loin de moi l'idée d'être arrogant, c'est juste que je viens de finir, et je dois être une peu fatigué :-).

      Ensuite, comme la feuille de style est expérimentale, j'ai écris un journal parce que je veux faire participer le plus de monde possible, pour récolter le plus d'avis possibles.

      • [^] # Re: euh comment dire ?

        Posté par  . Évalué à 10.

        d'autant plus que les remarques sont pertinentes (textes dans des balises p, noms de classes adaptés, suppression des caractères décoratifs, etc...)

  • # Baptème ?

    Posté par  . Évalué à 3.

    Sympatique, ta C.S.S., et il y a effectivement beaucoup de travail derrière. Mais il faudrait lui trouver un petit nom ...

    • [^] # Re: Baptème ?

      Posté par  . Évalué à 2.

      Merci du compliment,

      Je ne sais pas encore pour le nom, mais bon, la nuit porte conseil...

    • [^] # Re: Baptème ?

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

      Je propose le nom Arrogance

      L'avantage de ce journal est de pointer le petits problèmes que les autres contributeurs de css ont pu trouver.

      j'ai eu le même genre de difficultés en voulant me refaire une css sur mon site perso. (en plus j'y connaissais rien en css)

      merci pour ce journal

      • [^] # Re: Baptème ?

        Posté par  . Évalué à 9.

        "Je propose le nom Arrogance"
        La vache, ça donne envie de proposer sa css un accueil comme ça...

        • [^] # Re: Baptème ?

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

          C'est vrai ça, il manquerait plus que des gens appliquent l'esprit du logiciel libre, et sur LinuxFR.org en plus de ça... !

          Merci à l'auteur de journal pour son travail, et ne fait pas attention aux esprits chagrins qui se disent pro-Libre et viennent critiquer quand quelqu'un applique les principes du Libre.

      • [^] # Re: Baptème ?

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

        Donc si je résume, tu trouves arrogant que le monsieur pointe publiquement les problèmes que tout le monde finit par découvrir ? J'imagine que tu trouves ça mieux que chacun perde plein de temps à tout refaire (ce qui ne serait que justice, puisqu'après tout, tu as du en passer par là, ce salaud d'André Rodier n'avait pas encore posté de journal à l'époque).

        • [^] # Re: Baptème ?

          Posté par  . Évalué à 2.

          Euh, pointer publiquement c'est une chose et je n'ai rien contre. Mais il y a un tracker pour ça non ?

          m'enfin, le fait que ce soit un journal c'est pas si grave, le truc qui m'a choqué, c'est le ton utilisé : je me mets à la place d'un mec qui bosse depuis des années pour maintenir linuxfr, et qui vient se faire donner une leçon en publique, avec des tournures du genre "Merci de".

          Désolé mais moi c'est mon chef qui me parle comme ça, pas le premier quidam, ou alors je l'envoi bouler. D'ailleurs, je n'ai pas vu de réaction d'un mainteneur, ils en pensent quoi ?

      • [^] # Re: Baptème ?

        Posté par  . Évalué à 8.

        Moi, j'aime bien, Arrogance. Ça fait un peu destroyer impérial.

      • [^] # Re: Baptème ?

        Posté par  . Évalué à 2.

        rolex ou rololex... ou bling-bling.css \o/

      • [^] # Re: Baptème ?

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

        Est-ce que c'était de l'humour en réaction au tout premier commentaire ? Parce que je l'ai compris comme ça mais vu la façon dont tu t'es fait moinsser, j'ai l'impression d'être le seul...

  • # La suite...

    Posté par  . Évalué à 7.

    Bon,

    Je vais continuer de développer les feuilles de style. J'ai de quoi tester avec Firefox 3/3.5, Chrome 2, IE (>6). Concernant IE6, je ne pense pas qu'il y ait de gros défauts, il y aura surtout des subtilités non prises en charge.

    J'ai remarqué quelques bugs que je corrigerais dès que j'aurais un peu de temps.

    Concernant les "problèmes" listés ci dessus, c'est plus selon moi des petits détails facile à corriger qui permettront à l'avenir de créer plus facilement des feuilles de styles pour Linuxfr. Le fait de les avoir listés devrait permettre de les corriger un par un. De plus, si l'on tient compte de la quantité de code HTML généré sur le site, cela représente une infime part...

    Concernant le nom, je n'ai toujours pas choisi, même si "Arrogance" me tente, de plus que la bannière en haut du site a été choisie assez vite, je voulais quelque chose avec un fond blanc. (Je n'aurais pas l'outrecuidance de demander un div “banner” en haut du site...)

    J'espère surtout que ces feuilles de style seront utiles à d'autres.

    Les premiers tests avec chrome sont concluants.

    • [^] # Re: La suite...

      Posté par  . Évalué à 5.

      Permet moi de te faire une critique (constructive ;-) )

      C'est trop blanc, ca fait mal aux yeux.

      Ce n'est pas assez contrasté, le contenu est difficile à discerner.

      Sinon, il y a 2, 3 idées sympa.

      • [^] # Re: La suite...

        Posté par  . Évalué à 2.

        Effectivement, ça fait mal aux yeux.

        Ça allait impeccable sur mon portable, et au boulot, c'est trop blanc.

        Je ne sais pas encore comment faire, mais je veux rester dans le schéma classique noir/blanc. Je vais voir ce que je peux faire.

    • [^] # Re: La suite...

      Posté par  . Évalué à 2.

      Bonjour,

      Les premiers tests avec chrome sont concluants.
      Sous chrome la barre d'outil ne s'affiche plus après avoir activée la CSS.

    • [^] # Re: La suite...

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

      Concernant les "problèmes" listés ci dessus, c'est plus selon moi des petits détails facile à corriger qui permettront à l'avenir de créer plus facilement des feuilles de styles pour Linuxfr. Le fait de les avoir listés devrait permettre de les corriger un par un.

      Avoir lister les problèmes dans un journal, ça va surtout permettre de ne pas les rendre visibles au mainteneur quand ils voudront les corriger.

      À mon avis, si tu veux avoir une petite chance que ce soit traités, il vaudrait mieux ajouter une entrée dans le tracker : https://linuxfr.org/tracker/

      Si tu veux emplir de joie les mainteneurs, en plus d'une entrée dans le tracker, tu plonges dans https://linuxfr.org/linuxfr-snapshot.tar.bz2 et tu proposes un patch ;-)

  • # Quelques problèmes

    Posté par  . Évalué à 5.

    Je suis avec Firefox 3.0.11 sous Ubuntu Jaunty (thème Human), avec un écran 1280x800.

    * Quand je me ballade en https : Firefox me met "Vous allez accéder à une page chiffrée qui contient des informations non sécurisées !", génant à la longue.
    * la bannière n'est pas cliquable

    Très subjectif, tout ce qui suit ne regarde que moi, ne le prend pas comme avis général :
    * Le fond blanc partout fait mal aux yeux (au miens en tout cas)
    * le haut est un grand vide blanc, avec à gauche un énorme logo old-fashion, violet, effet 3D, dégradés...
    * je crois t'aime bien le violet ^^ : la date en gros, utile ?, la recherche énorme, toujours avec du violet
    * avec ce header, ca fait que le contenu est décalé à fond vers le bas, or je préfére que le contenu soit mis en avant plutôt qu'un header creux
    * le petit coup de javascript pour montrer/cacher la boîte perso : je sais pas si ca vient de toi, mais c'est trop brutal, et déjà qu'il y a peu d'informations sur la gauche, alors si tu en enléve...
    * les couleurs pour les commentaires (fond, et lignes) sont trop prononcées (je sais ca dépend de l'écran), et une barre plus fine serait mieux, pour suivre sans être déconcentré

    Je n'ai regardé que ta page de journal.
    Mais il y a de bonnes attentions, et ca se voit que tu as travaillé dérrière.

    « En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll

  • # Quelques éléments de réponse

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

    Je ne suis ni responsable du site ni mainteneur mais j'ai fait une feuille css. Voici quelques infos en rapport avec tes remarques. Je précise qu'au delà des éléments strictement factuels, les opinions n'engage que moi et non Linuxfr.

    - Concernant l'hébergement de la feuille: contacte directement l'équipe, ce sera plus facile.

    - Concernant l'absence de maintenance: la maintenance ne prend que peu de temps puisque les modifications sur les templates de page sont faites à minima. On peut te remercier pour ton honnèteté mais il est difficile de demander des modifications importantes sans que tu suives un minimum le bébé après. Je ne suis pas sûr que les mainteneurs de LinuxFr aient envie de vivre l'expérience de l'intégration de ReiserFs subie par les mainteneurs du noyau Linux...

    - Concernant la compatibilité Firefox: à mon avis, il aurait été préférable de viser plutôt une certaine compatibilité avec la norme .

    - Concernant les modification du code: il faut voir qu'il y a des contraintes, en particulier de compatibilité avec les anciennes feuilles, si on veut limiter les régressions sur ces dernières.

    Je ne suis pas d'accord sur le fait que hr soit considéré comme inutile. C'est un séparateur dont le rendu peut être modifié, donc je ne vois pas le problème.

    Concernant la 'class="toolbar" pour le menu: en fait, ça devrait être une liste avec un rendu horizontal par css. Là, le problème de la compatibilité ascendante joue.

    >si une balise "div" contient du texte, merci de le mettre dans une balise "p" ou "span"
    à mon avis, il faudrait plutôt définir un nom pour ce rendu et qu'il finisse proprement dans la feuille CSS plutôt que juste faciliter un bricolage.

    Concernant les '-' dans les listes: si c'est une référence à l'agenda du libre, ce n'est pas possible, car la liste est générée automatiquement (à partir d'un flux RSS si je me souviens bien).

    Pour résumer, je pense qu'il a des choses qui sont faisables (poste les éléments sur le tracker), d'autres non. Sauf à proposer au moins un patch du code (template et/ou moteur) du site à mon avis.

    • [^] # Re: Quelques éléments de réponse

      Posté par  . Évalué à 3.

      Pour ajouter mon grain de sel, quand j'ai écrit nightgrey.css, j'ai été confronté aux mêmes problèmes et les admins ont quand même fait quelques modifications. Je leur en suis d'ailleurs reconnaissant.

      Le mieux à faire dans un premier temps est de placer des commentaires dans ta C.S.S., avec un résumé en début de fichier et le détail à côté de chaque bloc pour lequel le HTML pose problème. C'est le moyen le plus facile pour toi comme pour les tierces parties de t'y référer, surtout a posteriori, et d'éliminer les bugs un par un, en garantissant autant que faire se peut la non-régression.

      Ensuite, le nettoyage du code XHtml est déjà dans le tracker. Le problème est qu'il est très difficile de participer collectivement à cette tâche.

Suivre le flux des commentaires

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