Nos feuilles de styles par défaut

Bonjour,

Il me semblait avoir déjà croisé des sujets au moins similaires mais après quelques recherches on dirait que non
J'espère pas ^^' enfin bref, voilà celui-ci
C'est tout simplement un topic sur le CSS qui parlerait de Nos feuilles de styles par défaut (dans du HTML ou ailleurs)
Qu'importe la version du css ou du html mais expliquer un peu pourquoi prendre certains risques d'incompatibilité, en tout cas expliquer un minimum les raisons de vos valeurs qui vous sont devenues indispensables.
Donc en gros, un topic où chaque post pourrait
- apporter une critique sur les précédentes feuilles de styles
et/ou
- proposer sa feuille de styles plus sûre ou plus adaptée selon vous ou même pour un contexte précis

Ma feuille de styles par défaut (j'ai volontairement essayé qu'elle compte le moins de lignes possibles, sans que ça devienne trop illisible)

* {cursor:default;font-family:"Calibri","Trebuchet MS",sans-serif;font-size:12px;}
body {padding:0;margin:0;border-width:0;background-color:#efefef;color:#0f0f0f;}
img {border-width:0;}
a {outline:none;cursor:pointer;text-decoration:underline;color:#5fbfff;}
a:hover {text-decoration:none;}
form {padding:0;margin:0;}
button {margin:0;cursor:pointer;}
textarea,.inputtext {margin:0;cursor:text;}
label {margin:0;cursor:pointer;}
.monospace {font-family:"Bitstream Vera Sans Mono","Lucida Console",monospace;}

Pour ce qui est des fonts, j'aime moyen la plupart des serif donc je fais tout en sans-serif. Dont ma préférée "Calibri" qui n'est pas inclue dans les Window XP, suivie de ma préférée dans XP (en tout cas SP3) "Trebuchet MS" et je tiens à mettre l'unité du font-size en px par la force de l'habitude... (Mes mesures sont d'ailleurs toutes en px ^^')
Puis, une font de type monospace (donc chaque caractère avec une même largeur) pour éclaircir certains tableaux de tri.

Sinon j'essaie au maximum d'enlever les margin et padding qui sont pour moi 2 de nos pires énemis pour la compatibilité et certains affichages.

En ce qui concerne les éléments cliquables je laisse comprendre le visiteur avec moins d'indications sans que ça devienne un menu DVD avec des liens cachés lol
Enfin, j'essaie que la page n'insiste pas trop sur le fonctionnement en enlevant le maximum d'indicateurs en double, voir plus defois.

Enfin pour les couleurs, je préfère amener la luminosité des couleurs à paraître moins stricte, moins brutale pour nos yeux. ("ef" étant les 15/16 et "0f" 1/16 des 256 valeurs)

Voilà, n'hésitez pas à partager aussi vos connaissances et votre sens du style
Modifié par chachu (10 Sep 2011 - 21:05)

Bonjour,

L'outline:none; sur les liens, c'est génial... Ça pourri à lui tout seul l'accessibilité au clavier d'un site.

Personnellement, je ne vois pas d'intérêt aux reset CSS.

Voir l'astuce de Knarf à ce sujet : Reset CSS et outline : attention
et en détail le Critère 10.7 (Bronze) Dans chaque page Web, pour chaque élément recevant le focus, la prise de focus est-elle visible ? (les techniques WCAG 2.0 et l'équivalent RGAA sont à la fin du critère, genre Understanding 'Focus visible')

edit: le sélecteur universel * doit être évité pour des raisons de performance puisque chaque élément se voit alors appliqué les instructions, utiles ou pas. Voir les billets de blog d'E. Meyer expliquant sa démarche pour son Reset CSS (ça doit dater de 2007) et pourquoi il ne tient pas en 3 lignes genre

 * { /*3-4 instructions et c'est fini */ } 

ou bien voir les critères de performance de Google Page Speed ou de YSlow!
Modifié par Felipe (11 Sep 2011 - 12:26)

Bonjour à vous deux,

Laurie-Anne a écrit :
L'outline:none; sur les liens, c'est génial... Ça pourri à lui tout seul l'accessibilité au clavier d'un site.

Personnellement, je ne vois pas d'intérêt aux reset CSS.

Felipe a écrit :
Voir l'astuce de Knarf à ce sujet : Reset CSS et outline : attention
et en détail le Critère 10.7 (Bronze) Dans chaque page Web, pour chaque élément recevant le focus, la prise de focus est-elle visible ? (les techniques WCAG 2.0 et l'équivalent RGAA sont à la fin du critère, genre Understanding 'Focus visible')

Donc le "outline:none", maintenant que vous en parlez, je suis d'accord avec vous. Il a pas à être placé par défaut oui.
Mais si j'ai bien suivi votre position il est même vivement conseillé de le bannir. Et pourtant le choix est à faire entre les soucis du TAB au clavier ou utiliser il me semble l'unique solution pour se débarasser de ces pointillés.
Si c'est bien entre ces 2 choix qu'il faut trancher et si j'ai rien oublié alors je dirais que la décision peut être un peu plus discutable.

Pour ma part, je dois avouer que je comprends pas bien le besoin d'utiliser le TAB...
Si c'est pour les navigateurs sur mobiles je comprends mais j'aurais tendance à ignorer ceux qui naviguent sans le curseur au jour d'aujourd'hui.

Enfin je me dis que j'ai du sauter un détail si c'est bien ça le problème.

Felipe a écrit :
edit: le sélecteur universel * doit être évité pour des raisons de performance puisque chaque élément se voit alors appliqué les instructions, utiles ou pas. Voir les billets de blog d'E. Meyer expliquant sa démarche pour son Reset CSS (ça doit dater de 2007) et pourquoi il ne tient pas en 3 lignes genre

* { /*3-4 instructions et c'est fini */ }

ou bien voir les critères de performance de Google Page Speed ou de YSlow!

Par contre, oui j'aime bien l'idée d'aider les sites web à charger plus vite et je savais pas du tout que ce "*" passait de toute façon par tous les éléments, même ceux non-utilisés dans le code. C'est bon à savoir.
Modifié par chachu (11 Sep 2011 - 17:15)

chachu a écrit :
Pour ma part, je dois avouer que je comprends pas bien le besoin d'utiliser le TAB...

Dites moi que c'est un troll !

Laurie-Anne a écrit :

Dites moi que c'est un troll !

Ce n'est pas impossible...

Hmmm et ben merci...
C'est pas l'ambiance de tous les jours, rassurez-moi :o
Enfin en gros, soit je suis trop bête pour comprendre le sujet, soit je fais mon troll en faisant semblant de pas comprendre... charmant ^^
A part ça tu fais l'alarmiste en t'appuyant sur des imprécisions mais c'est moi le troll... Désolé de ma sincérité mais t'es quand même bien cullotée franchement

Enfin bref... je tente quand même de revenir au sujet lol
Donc tu donnais ton opininon sur ce "outline:none" et donc tu t'arrêtes sur le fait qu'on navigue assez au clavier sur la balise <a></a> pour oublier cette méthode.
Enfin donne moi un minimum d'infos de ce qui confirmerait ça. Sincèrement, ça me suprendrait beaucoup que naviguer comme ça soit si répendue.
Si ça se prouve, au contraire, j'aurais apprit grâce à toi à avoir un css mieux pensé.
Modifié par chachu (11 Sep 2011 - 19:20)

Salut,

a écrit :
Sincèrement, ça me suprendrait beaucoup que naviguer comme ça soit si répendue.

Qui peut bien naviguer au clavier ? Liste non-exhaustive :
- Une personne dont les tremblements rendent la souris inutilisable ;
- Une personne à mobilité réduire qui ne peut être précis avec une souris (à boutons ou boule) ;
- Une personne comme moi qui préfère cela au touchpad ;
- Une personne qui préfère comme ça, parce qu'il le vaut bien...

Quelle que soit la raison de la navigation au clavier, c'est carrément impossible sans le moindre repère visuel. Et les pointillés ne sont pas une fatalité : rien n'interdit de personnaliser la prise de focus.

Merci d'avoir donné ton avis boulaneige.
Donc sur les résultats Google de jouer avec les TAB et SHIFT+TAB pour tomber sur la bonne sélection c'est finalement une méthode répendue alors. Sincèrement je pensais vraiment pas ^^'
Enfin Google cible bien sûr tout publique mais justement la question sous-entendait le "site moyen". Il me semble que c'était comprit comme ça.

Donc, est-ce que le "site moyen" se devrait à chaque fois de ne pas oublier les repères pointillés aussi strictement que ça ?
Ben c'est là où je dis que ça reste discutable.

C'est tout simplement dire qu'un web-designer n'aurait raison de faire avec ou sans que s'il fait le bon compromis selon son site. Affichage-compatibilité.
Et qu'en aucun cas, le "outline:none" devrait être retiré du CSS comme apparement c'était plus ou moins soutenu au début.

Si tu n'es pas un troll, alors je me demande ce que tu viens faire sur ce forum qui défend, entre autres, l'accessibilité.

Supprimer l'outline:none sur les liens, parce que le pointillé, c'est pas jolie c'est une des pire pratiques anti-accessible. Personnellement, je suis totalement (enfin preque) valide et je navigue régulièrement au tab : parce que dans la main droite j'ai un stylo (ou un sandwitch, ou mon téléphone...).

Le genre de remarques que tu fait est du même ordre que : "toute façon, ça sert à rien de rendre mon site accessible aux aveugles, ils visitent pas mon site". Outre démontrer un grande méconnaissance de l'Internet, c'est totalement idiot (comment savoir qu'un visiteur est aveugle ?).

Le seul comprimis vis-à-vis de l'outline, c'est quand il est remplacé par un mécanisme tout aussi efficace au focus sur les liens.



ps. : y a pas tellement de monde qui trouve ça inesthétique (à part les designer "print" ou qui ne connaissent rien au web).

Désolé que t'ai mal pris ma remarque alors...

Défendre entre autres ou non à tout bout de champs la compatibilité c'est justement (pour moi) affreux. J'ai pas pris un temps pour me rendre compte que ce forum était dans cette philosophie, je m'en excuse...

a écrit :
Supprimer l'outline:none sur les liens, parce que le pointillé, c'est pas jolie c'est une des pire pratiques anti-accessible.

"une des pires" "anti-accessible" oui je vois ^^

a écrit :
"toute façon, ça sert à rien de rendre mon site accessible aux aveugles, ils visitent pas mon site"

Ah je deteste ces gens, moi aussi. Mais merci de me mettre dans le lot hein lol
Je soutiens bien sûr que des concepts tels que Google puissent être au plus universel.
Mais c'est justement de nous donner des affirmations telles que "de placer ce outline:none c'est stupide, qu'importe le concept du site" aussi catégoriquement qui pour moi peuvent polluer l'information
Modifié par chachu (11 Sep 2011 - 21:14)

chachu a écrit :
J'ai pas pris un temps pour me rendre compte que ce forum était dans cette philosophie, je m'en excuse...

Avant d'intégrer une communauté, on regarde les idées et on adhère non? J'ai pas compris là.

chachu a écrit :

c'est justement de nous donner des affirmations telles que "de placer ce outline:none c'est stupide, qu'importe le concept du site" aussi catégoriquement qui pour moi peuvent polluer l'information

Ce qui signifie?

jmlapam a écrit :
Avant d'intégrer une communauté, on regarde les idées et on adhère non? J'ai pas compris là.

Non mais c'est pas possible mdr tu passais par là et donc voilà...
au passage t'excentres de nouveau le sujet du topic, enfin j'imagine qu'en adhérant ici il faut savoir s'y habituer ?
Je venais tout simplement amener un sujet avec de bonnes intentions d'aider le CSS, comme vous, à s'éclairer. J'ai voulu faire une recherche avec sérieux pour vérifier que ce sujet n'existait pas. Je m'inscris sans mater la charte (désolé si c'est trop violent pour toi :x) mais je vois AlsaCréations comme un des forums Fr le plus actifs sur le CSS. Je vois pas en quoi j'aurais dû me renseigner si le AlsaCréations était aussi buté à obtenir la compatiblité suprême en laissant l'affichage impérativement derrière ?!

(SVP veuillez noter quand même que j'ai pas pris le côté le plus simple à défendre xD et que j'ai été plutôt patient face à votre bizutage lol)

chachu a écrit :

c'est justement de nous donner des affirmations telles que "de placer ce outline:none c'est stupide, qu'importe le concept du site" aussi catégoriquement qui pour moi peuvent polluer l'information

jmlapam a écrit :
Ce qui signifie?

Ce qui signifie... qu'en laissant les affirmations s'installer j'aurais à mon tour amené à devoir s'agenouiller face au même sujet "tutorialisé".
J'ai toujours trouvé dangeureux de certifier des informations imprécises (ou imprécisées), qu'importe le sujet.
Modifié par chachu (12 Sep 2011 - 02:02)

chachu a écrit :
mdr tu passais par là et donc voilà...

Faut revoir le principe du blog
et c'est pas une question de violence, tu fais ce que bon te semble,

chachu a écrit :
si le AlsaCréations était aussi buté

Chaque communauté, en particulier sur le web a sa philosophie. Pourquoi tu viens au juste, pour la révélation? Les mecs de ce site ont une petite réputation quand même, ils savent ce qu'ils font. Ils ne t'ont pas attendu.

chachu a écrit :
j'ai été plutôt patient face à votre bizutage

j'ai jamais vu cela ici, en général les modos viennent tempérer direct.
Non c'est juste que ton sujet comporte des erreurs majeures.
Mais y a rien de grave. D'ailleurs les modos te l'ont fait comprendre gentillement je trouve.
Modifié par jmlapam (12 Sep 2011 - 02:47)

jmlapam a écrit :
Faut revoir le principe du blog

Non mais là ça faisait un peu beaucoup, comprends au moins ça quand même...

jmlapam a écrit :
Chaque communauté, en particulier sur le web a sa philosophie. Pourquoi tu viens au juste, pour la révélation? Les mecs de ce site ont une petite réputation quand même, ils savent ce qu'ils font. Ils ne t'ont pas attendu.

Je sais bien t'inquiètes mais justement regarde stp
Où est le mal de vouloir adapter une feuille de styles moins compatible s'il est préférable par exemple pour tel site de ne pas accueillir tout support ? (Si tu me dis que ces sites n'existent pas, j'abandonne... lol)
Moi quand j'entends une mauvaise information, et justement en particulier si elle a de quoi être accentué par une réputation, je préfère dire quand je suis pas d'accord et qu'importe si je viens de m'inscrire ou si je dois porter le mauvais rôle.
J'espère que tu vois pas de mal à ça encore ?

jmlapam a écrit :
D'ailleurs les modos te l'ont fait comprendre gentillement je trouve.

d'accord ok bonne blague lol

@Chachu -> Ça vaut pas vraiment la peine de perdre ton temps avec Jmlapam, il poste partout pour ne rien dire.

Pour revenir au sujet, tu as déjà eu quelques mises en garde quant à des techniques à proscrire de ta feuille de Reset actuelle.

Personnellement, je t'inviterais à jeter un coup d'oeil sur la dernière version de la feuille de Reset CSS d'Eric Meyer (que j'ai longtemps utilisé), et à la feuille de style de base (pas totalement un Reset) du projet HTML5 Boilerplate de Paul Irish (que j'utilise présentement).

<hs>En tout cas je perdrai pas mon temps à répondre à tes provocations...
Par contre j'ai une question dans le forum "question générale", si tu peux m'aider ce serait sympa vaxilart.

@chachu: j'ai jamais dit que tu ne devais pas t'exprimer, un blog c'est fait pour cela. C'est pas une secte non plus

mais c'est vrai que parfois y a des posts plus ou moins pertinent: exemple avec le précédent bonne continuation sur Alsa</hs>
Modifié par jmlapam (12 Sep 2011 - 06:37)