28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous ! Smiley smile

Je suis novice dans le domaine du codage HTML/CSS. J'apprends à manipuler ces langages via Alsacréation, Openclassroom et Code Academy. Aujourd'hui j'ai découvert les outils CodePen et CSS Lint. CSS Lint me signale dix "warnings" dans mon code CSS d'où le fait que je passe le pas et que je vous écrive...

Avançant pas à pas dans mon apprentissage, je parviens visuellement à retomber approximativement sur mes pattes entre ma structure HTML et mon code CSS. En effet peut-être qu'en cherchant à juxtaposer des propriétés CSS, je crée plus d'erreurs que je ne pense...
A la vue des mises en garde de CSS Lint, j'aimerais savoir si vous utilisez des méthodes pour construire le code de vos sites, ou si vous tâtonnez jusqu'à obtenir un résultat satisfaisant ?

Le langage HTML ne me pose pas de problème. C'est avec CSS que j'ai un peu plus de difficultés. Comment bien choisir et appliquer chaque style à une division (header, article, section, div, footer...) ?

J'utilise l'outil Web Developper de Mozilla Firefox qui me permet de cerner l'emplacement d'un bloc et de connaître ses propriétés stylistiques (CSS), cela m'a permis de comprendre certaines propriétés de CSS.
Existe-t-il un moyen pour visualiser entièrement la feuille de style d'un site, tout comme on peut visualiser un code source (HTML)?

Je travaille sur l'agencement d'un site de généalogie avec ma mère. Nous avons une idée précise du rendu que nous voulons obtenir mais le mise en pratique de cette idée n'est pas toujours satisfaisante d'un point de vue graphique.
Si je pose ces questions c'est parce la théorie apprise sur les sites cités précédemment me pose quelques petits problèmes d'ajustement sur ma propre page.
J'observe alors d'autres sites comme celui d'Eyrolles pour comprendre comment il est agencé de manière fluide. Certaines subtilités comme la taille des divisions (header trop large par rapport au corps principal) me posent problème sur ma propre page.

C'est pourquoi j'aimerais savoir si vous avez des astuces ou des sites pour tout comprendre !

D'avance merci ! =)
Emonie
Administrateur
Bonsoir,

Effectivement, les conseils de CSSlint - même s'ils heurtent parfois notre sensibilité - sont généralement excellents, surtout dans un contexte de production "industrielle" des CSS.

Chez Alsacréations, nous utilisons fréquemment des plugins CSSlint pour nos éditeurs HTML et nous nous efforçons de les appliquer, sans être des ayatollah non plus.

Autre outil que nous employons à chaque projet : notre "framework CSS" interne, KNACSS (http://knacss.com/), dans lequel nous avons intégré un grand nombre des bonnes pratiques que nous appliquons au quotidien.

Bonne chance Smiley smile
Administrateur
Bonjour,

http://alsacreation.com ? Smiley smile

Nous utilisons plutôt Firebug (ou équivalent : Inspect, DevTools) pour inspecter le code.
Pour la typo, extension CSS Viewer de Firefox (Firebug le fait aussi mais c'est moins rapide).

Puisqu'il s'agit de généalogie, s'il y a des organigrammes / arborescences, c'est extrêmement compliqué à faire en CSS dès qu'on essaie d'ajouter des contraintes. Le recours à du positionnement absolu est quasiment obligatoire et ensuite c'est super compliqué à modifier...
SVG ferait ça bien plus simplement mais la compatibilité et la facilité de création sont à évaluer avant de se lancer !

Il y a toujours 5 manières de faire les choses en CSS ; l'expérience est autant négative (je vais pas faire comme ça...) que positive (voilà la bonne manière de faire les choses...). Énormément de contraintes à évaluer et ensuite un choix à faire en en respectant certaines et en en "sacrifiant" d'autres.
Bonjour tous les deux !

Merci à tous les deux pour vos astuces, je vais les explorer de ce pas !

Les arborescences ne seront pas réalisées en CSS. L'arbre recense environ quinze générations. Il est donc impossible de matérialiser sur une seule page un nombre si important de personnes avec des données complémentaires sur leur vécu.

Bonne journée !
Emonie a écrit :
Bonjour à tous ! Smiley smile
J'utilise l'outil Web Developper de Mozilla Firefox qui me permet de cerner l'emplacement d'un bloc et de connaître ses propriétés stylistiques (CSS), cela m'a permis de comprendre certaines propriétés de CSS.
Existe-t-il un moyen pour visualiser entièrement la feuille de style d'un site, tout comme on peut visualiser un code source (HTML)?


Salut.

Dans l’outil Web Developper de Firefox (que je commence à découvrir) tu peux cliquer sur " Éditeur de s…" (avec l’icône d’édition : une feuille + un crayon). Tu verras alors la f2s (feuille de style) s’ouvrir dans ton volet avec à gauche la liste des autres f2s… Si tu es trop à l’étroit dans le volet, tu peux le détacher avec la 3ème icône de la barre d’outil.

Sinon, personnellement j’utilise aussi Firebug qui a un onglet CSS qui permet la même chose.

Enfin, un raccourci identique dans les 2 outils : quand tu inspectes ton code HTML avec la fenêtre de CSS à droite, dans cette fenêtre, pour chaque déclaration est donnée le nom de le f2s correspondante. Il s’agit d’un lien, cliquer dessus ouvre la f2s dans les zones mentionnées ci-dessus.