Y a-t-il quelques conseils pour mon CSS ?

Bonsoir à tous,

Je sais très bien que ce webdesign n'est optimisé que sous Firefox, sous tous les autres navigateurs ça s'affiche mal.

Bien que ça s'affiche correctement sous Firefox mais j'ai l'impression que je code encore en "brouillon" dans le CSS, c'est pourquoi que je voudrais (non, j'aimerais bien) que vous regardiez (mon fichier CSS afin de me citer quelques points principaux que je devrais améliorer, optimiser mon fichier CSS (sans pour autant optimiser comme un malade ^^) avant d'attaquer la comptabilité d'affichage sous tous les navigateurs.

En vous remerciant par avance de vos suggestions, je vous souhaite une agréable soirée

Une remarque rapide :

font-family: DokChampa

Je doute que DokChampa soit une police répandue, il va falloir utiliser @font-face pour l'intégrer, sinon elle sera remplacée par la police par défaut (de mon côté Times New Roman) chez les autres visiteurs.

Tu pourrais te servir d'outils comme Cleancss.com!

Bonsoir à vous deux

@dew, en effet, va falloir que je regardes un peu au niveau de la police

@Technologix, pas mal ton lien, je l'ajouté dans mes favoris ^^

Merci.

D'autres remarques ?

quelques remarques en vrac :

- déjà il manque plein de ";" (même si c'est à la fin prends l'habitude de toujours les mettre).

- sur les liens du topmenu l'arrondissement des coins du hover parait étrange et pas forcément réussi ... après j'aime bien la symétrie c'est peut être juste une question de gout. Et peut être il serait plus judicieux de mettre le background arrondi tout le temps et de juste changer sa couleur au hover..et pense aussi au focus (navigation au clavier).

- Pour les liens de sous menu essaye de les styler avec moins d'importance au hover que ceux du dessus vu qu'ils sont moins important dans la hiérarchie de ton menu.

-ensuite pour le bloc de contenu, la largeur automatique allonge beaucoup les lignes de texte dans les hautes résolutions d'écran (x 1920). Donc peut être un max-width en pixel faciliterai la lecture (bloc de texte moins large) associé à un margin auto à ton body ou wrapper pour que tout reste centré dans la page.

- tu souligne les liens à l'intérieur des articles du contenu avec border-bottom je suppose car très éloigné du texte... essaye d'aligner ton texte en baseline (vertical-align:baseline;) ou de mettre juste un text-decoration underlined (souligné) vu que c'est une bordure pleine (solid)


Et pour finir tu devrai à mon sens plus structurer ton code.. après c'est peut être personnel aussi ça

Par exemple moi je commence mes css par un reset personnalisé (=remise à 0 pour retirer les css de base du navigateur). Ensuite je m'occupe du positionnement de tous les blocs en m'aidant si besoin de faux background-color pour bien voir la structure du site. Et enfin je m'occupe des polices/couleurs/images/fond/liens/ et autres détails...

Voilà en espérant que ça serve et que je ne dise pas trop de bêtises ...
Et bon courage pour IE !

ah et encore un truc le webkit-border-radius & compagnie rend ton code css invalide donc évite de mettre les icônes en bas xhtml et css validé (en plus ça fait amateur ces vieilles icônes )...

Et télécharge l'extension firefox 'Web Developper' très utile pour faire des sites web!

Bonjour,

oliviadox a écrit :
ah et encore un truc le webkit-border-radius & compagnie rend ton code css invalide donc évite de mettre les icônes en bas xhtml et css validé (en plus ça fait amateur ces vieilles icônes )...

Les préfixes propriétaires tels que -webkit-, -moz-, -khtml-, -ms-, -o- sont prévus par CSS 2.1, c'est écrit noir sur blanc dans la doc du W3C.
Le validateur du W3C a TORT, le code EST valide quand on utilise ces extensions propriétaires.

Je te rejoins sur l'inutilité de ces icônes la plupart du temps.

Pour ce qui est du sujet :
- les tailles de police sont indiquées en point (pt). C'est (très) mal pour une feuille de style destinée aux moniteurs (screen et projection) mais ce serait OK pour une CSS print par contre.
À peine moins pire il y a le pixel mais le mieux est d'utiliser l'unité em. Si tu sais diviser par 10 et faire avec 2-3 contraintes, voir http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html de Florent V.
- Je vois la propriété float un coup en fin de règle, un coup au début, entre autres. Tu t'y retrouveras mieux en respectant un ordre des propriétés à l'intérieur de chaque bloc de règle ; par exemple d'abord le positionnement (display, float, position, ...) puis margin/padding puis couleurs puis ... ou l'ordre alphabétique si ça te chante. Ca devient important si tu travailles à plusieurs (en interne ou avec un client) mais déjà pour déboguer et intégrer seul tu gagnes du temps à pas chercher dans 5-15 lignes si tu as déjà une propriété donnée ou pas, à pas te demander pourquoi une propriété n'a pas d'effet (parce qu'elle apparait deux fois dans le bloc et que la dernière l'emporte bien entendu)

Bonjour,

Je suis bien content et vous remercie beaucoup pour tous vos remarques concernant mon fichier CSS.



Je vais commencer à répondre une petite partie :

oliviadox a écrit :
- déjà il manque plein de ";" (même si c'est à la fin prends l'habitude de toujours les mettre).

>> Des oubliettes ^^" et il me semblait que ce n'est pas obligatoire non ?

oliviadox a écrit :
-ensuite pour le bloc de contenu, la largeur automatique allonge beaucoup les lignes de texte dans les hautes résolutions d'écran (x 1920). Donc peut être un max-width en pixel faciliterai la lecture (bloc de texte moins large) associé à un margin auto à ton body ou wrapper pour que tout reste centré dans la page.

>> En étant sous 1920x1080, l'affichage me paraît correct et c'était voulu d'avoir une grande espace dans le container. Mais en effet, ça allonge beaucoup de lignes et les yeux se fatigueront bien plus vite qu'en lisant des des lignes un petit peu plus courtes... Il va falloir que je réfléchisse ... (et du coup pour l'instant je le laisse comme ça, temps de m'occuper à optimiser le code et l'adaptation avec tous les navigateurs)

oliviadox a écrit :
- tu souligne les liens à l'intérieur des articles du contenu avec border-bottom je suppose car très éloigné du texte... essaye d'aligner ton texte en baseline (vertical-align:baseline;) ou de mettre juste un text-decoration underlined (souligné) vu que c'est une bordure pleine (solid)

>> Si je mets "border-bottom" sur la propriété #container a:hover, c'est simplement parce que je n'ai pas réussi à colorer un autre couleur le trait souligné en utilisant "text-decoration: underlined";

oliviadox a écrit :
Et pour finir tu devrai à mon sens plus structurer ton code.. après c'est peut être personnel aussi ça

>> Que veux-tu dire par ici structurer ?

oliviadox a écrit :
Par exemple moi je commence mes css par un reset personnalisé (=remise à 0 pour retirer les css de base du navigateur). Ensuite je m'occupe du positionnement de tous les blocs en m'aidant si besoin de faux background-color pour bien voir la structure du site. Et enfin je m'occupe des polices/couleurs/images/fond/liens/ et autres détails...

>> Je ne connaissais pas cette technique, je vais y jeter un coup d'oeil...

oliviadox a écrit :
ah et encore un truc le webkit-border-radius & compagnie rend ton code css invalide donc évite de mettre les icônes en bas xhtml et css validé (en plus ça fait amateur ces vieilles icônes )...

Selon le validateur W3C, mon fichier CSS est valide CSS v2.1 , tu aurais pu cliquer pour vérifier avant de dire cette bétise ^^
Bref, si j'ai mis ces 2 icones, c'est pour me faciliter le passage au validateur... (je n'ai qu'à cliquer dedans et hop au validateur), une fois webdesign bien optimisé et sous tous les navigateurs, je les retirai

Felipe a écrit :
- les tailles de police sont indiquées en point (pt). C'est (très) mal pour une feuille de style destinée aux moniteurs (screen et projection) mais ce serait OK pour une CSS print par contre.

>> D'accord, je vais m'appliquer d'utiliser l'unité em.

Felipe a écrit :
- Je vois la propriété float un coup en fin de règle, un coup au début, entre autres. Tu t'y retrouveras mieux en respectant un ordre des propriétés à l'intérieur de chaque bloc de règle

>> Je reconnais qu'il y a un joli bazar à ce niveau , je vais m'y atteler pour mettre un peu d'ordre.



Bon va falloir que j'arrête, temps d'aller me doucher pour bien commencer ma journée
Merci encore pour vos remarques.

Très bonne journée à vous tous et à tout l'heure sûrement

OOps ouais pour le coup des border-radius je croyais que c'était du css 3 sur le coup...

En fait ton code css est valide. Web developper m'a juste trouvé quelques erreurs de syntaxe sur les couleurs (j'ai vérifié seulement après ) par exemple #red au lieu de red tout court (rappel le # seulement pour les couleurs en hexadécimal).

Et pour la structure du code c'était ce dont parlait Felipe à savoir mieux t'organiser dans les déclarations de tes propriétés css pour t'y retrouver plus facilement en choisissant un ordre pour les insérer ce qui rend ton code + clair et plus compréhensible et facilite la maintenance / évolution du style de ta page.

Et +1 pour les tailles de polices fixes. Les unités relatives (em ou %) sont mieux en termes d'accessibilité (ah là ça fait bien pour un 2eme post sur alsacréationS ) car les gens qui ont par exemple des difficultés à lire du texte en petit corps pourront agrandir le texte facilement en réglant les propriétés de leur navigateur.
C'est un peu (à peine) plus compliquée à gérer au début. Attention quand même à l'héritage des tailles en em / %, si tu spécifies par ex: ul 1.3 em et après ul li 1.3em les tailles de la polices vont s'ajouter (ou se multiplier ?) enfin tu n'auras pas pareil que si tu mets juste une seule fois font-size :1.3em.

Voilà et pour les ";" c'est pas obligatoire à la fin juste avant l'accolade fermante mais le jour où tu chercheras pendant des plombes pourquoi ton background:yellow ne marche pas et que tu te rendras compte que c'est un cause d'un simple ";" tu comprendras ... c'est juste une bonne habitude de programmation / syntaxe à prendre pour si un jour tu te mets au php ou javascript là où les micro-erreurs de syntaxe ne pardonnent pas.

Et pour les icônes de validation encore une fois télécharge l'extension web developper pour mozilla, comme ça tu as tout le temps 3 minis icônes en haut à droite du navigateur qui te disent si le site où tu te trouves est valide (html, css et javascript)... ainsi que plein d'autres outils très pratiques pour créer un site web (redimensionner la page pour voir comment ton site rendra sur de plus petits écrans ou remplir automatiquement les formulaires pour les tester etc.)

Sur ce, bonne soirée

Et petit HS: Felipe lol pour ta signature, ça m'a bien fait rire tout comme les "citations du jour" d'ailleurs

Du coup j'ai envie de tout balancer et recommencer proprement à zéro ^^.

- Déjà, rien qu'en changeant la police par "Lucida Sans", "Trebuchet MS", Verdana, Arial; parce que DokChaman n'existe pas dans quelques version Windows, ni chez Linux et non plus chez Mac, ça foire l'affichage si on n'a pas cette police.

- Le passage du font-size pt à em me pose quelques problèmes au niveau d'affichage

- Et bien d'autres...

lol

Sans tout balancer tu peux toujours faire "enregistrer sous" pour garder ton code actuel et recommencer dans une nouvelle css en copiant et collant le code au fur et à mesure de manière plus optimisée et mieux organisée. Comme ça, pas vraiment besoin de tout recommencer et de tout retaper mais juste de copier-coller les propriétés css au fur et à mesure en vérifiant le résultat dans ton navigateur en parallèle, ça t'aidera quand même à comprendre ce que tu fais... De toutes façon il n'y a pas de secrets... Pour y arriver il faut s'entrainer

Une petite maxime de mon arrière grand mère pour t'encourager : Faire et Défaire c'est toujours du travail! (pour elle c'était la couture lol)

Pour la font le mieux c'est quand tu recopies ton nouveau fichier repris de l'ancien CSS tu ne copie-colle aucunes des propriétés css parlant de font.
Et ensuite tu retapes les propriétés qui te paraissent les plus justifiées (déjà par ex font-family/font-size en général pour tout le body) et enfin tu ajustes pour certains éléments spécifiques par exemple pour la liste à puce de ton menu.

Allez bon courage !

je le saiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii ^^"

Très sympa de ton encouragement

Merci