BROADCASTS.com

Published: Feb. 14, 2016, 2:45 p.m.

b'

Bonjour, bienvenue pour l\\u2019\\xe9pisode 4 !

\\n\\n

Beaucoup de gens y compris des devs exp\\xe9riment\\xe9s ont des soucis de CSS.\\nIl y a l\\u2019attitude d\\xe9faitiste qui dit que vous n\\u2019y arriverez jamais,\\nil y a l\\u2019attitude \\u201cpas mon probl\\xe8me\\u201d qui refile le b\\xe9b\\xe9 \\xe0 quelqu\\u2019un d\\u2019autre,\\net il y a l\\u2019attitude snob qui m\\xe9prise carr\\xe9ment le probl\\xe8me.\\n\\u2026 et bien s\\xfbr il y a l\\u2019attitude qui consiste \\xe0 tester, \\xe0 apprendre, et \\xe0 livrer de la valeur \\xe0 ses utilisateurs et ses clients :)

\\n\\n

OK, c\\u2019est dur

\\n\\n

C\\u2019est vrai que ce n\\u2019est pas simple.\\nDe mani\\xe8re g\\xe9n\\xe9rale, HTML et CSS c\\u2019est dur.

\\n\\n

Il y a eu des tas de normes qui s\\u2019empilent les unes sur les autres,\\nmais le vrai souci \\xe9tait la vari\\xe9t\\xe9 des navigateurs qui ne g\\xe8raient\\npas tout pareil.

\\n\\n

\\xc7a va un peu mieux et \\xe7a va me permettre de ne pas vous parler des\\nastuces IE6, difficiles \\xe0 contourner mais qu\\u2019on connaissait bien, ou\\nIE7, un peu mieux a priori mais que finalement on connaissait moins.

\\n\\n

Pourquoi c\\u2019est dur ?

\\n\\n

L\\u2019intention est louable : on veut s\\xe9parer la forme et le fond.

\\n\\n

Vous avez un contenu HTML, que j\\u2019aime visualiser comme des bo\\xeetes dans\\ndes bo\\xeetes dans des bo\\xeetes\\u2026 etc.

\\n\\n

On souhaite garder les informations d\\u2019affichage \\xe0 c\\xf4t\\xe9 pour pouvoir\\nchanger de design sans changer le code, et vice-versa.

\\n\\n

On veut alors ajouter des informations sur ce que repr\\xe9sentent ces\\nbo\\xeetes, essentiellement son tag, sa classe, et son identifiant.

\\n\\n

\\xc0 partir de tout cela, vous faites un autre fichier, une CSS pour\\nCascading Style Sheets, Feuille de Style qui s\\u2019appliquent en Cascade\\n(pour une fois qu\\u2019on a un nom explicite !) qui contient une liste de\\nr\\xe8gles, des directives CSS.

\\n\\n

Elles sont toutes \\xe0 prendre en compte, mais pas aussi s\\xe9quentiellement\\nque du code o\\xf9 il y a un ordre pr\\xe9cis, mais plut\\xf4t \\u201ctoutes ensembles\\u201d.

\\n\\n

C\\u2019est comme si tout le monde venait parler en m\\xeame temps dans une conversation !

\\n\\n

Du coup la moindre r\\xe8gle modifie les autres, ce que l\\u2019on appelle des\\n\\u201ceffets de bord\\u201d, et c\\u2019est exactement ce qu\\u2019on essaie d\\u2019\\xe9viter de\\nfaire quand on code.

\\n\\n

Comment faire du sens dans ce bruit ?

\\n\\n

Dans la vraie vie, quand vous avez des gens qui parlent ensemble,\\nquand vous avez plusieurs consignes au travail qui semblent en conflit,\\nvous rangez aussi par priorit\\xe9s.

\\n\\n

Imaginez : on vous dit un jour de traiter tous les dossiers d\\u2019une\\ncertaine mani\\xe8re, mais s\\u2019ils sont bleus d\\u2019une autre.\\nOn vous dit que si un dossier tra\\xeene depuis trop longtemps, il est prioritaire.\\nQue si le client est VIP, c\\u2019est prioritaire.\\nQue si le patron le veut de suite, c\\u2019est ultra prioritaire.

\\n\\n

Qu\\u2019est-ce que vous faites ? Comme tout le monde : quand tout est\\nprioritaire, rien n\\u2019est prioritaire, et vous tentez de retrouver un\\nordre d\\xe9cent dans tout cela.

\\n\\n

(D\\u2019ailleurs petite parenth\\xe8se : c\\u2019est pour cela que je refuse\\nd\\u2019utiliser la directive CSS !important et que je ne la recommande pas.)

\\n\\n

On s\\u2019arr\\xeate, on r\\xe9fl\\xe9chit, et on d\\xe9cide qu\\u2019on traitera le dossier du\\npatron en premier, puis les VIP, puis les anciens, puis les dossiers\\nnormaux, qui passent en bas de la pile.

\\n\\n

La r\\xe8gle de priorisation CSS marche pareil : qui le dit, quand est-ce\\nqu\\u2019on le dit, mais surtout \\xe0 propos de quoi on le dit.

\\n\\n

Qui parle quand ?

\\n\\n

Certaines pages Web n\\u2019ont pas d\\u2019information CSS.\\nElles sont tr\\xe8s rares, mais il y a bien une information qui existe :

\\n\\n

\\n
• quand vous \\xe9crivez une page HTML pure avec des titres H1 et H2, ils sont grands et en gras
\\n
• quand vous mettez une liste OL ou UL, ses \\xe9l\\xe9ments sont en retrait et avec un chiffre ou une puce
\\n
• quand vous utilisez une balise P pour paragraphe, il y a un espace vide autour (padding)
\\n
• les liens non visit\\xe9s sont bleus, les visit\\xe9s sont violets
\\n

\\n\\n

On voit qu\\u2019il existe une CSS par d\\xe9faut du navigateur, mais c\\u2019est la moins importante de toutes.

\\n\\n

Ensuite, vous pouvez utiliser des CSS que vous importez via @import, link, ou dans le header,\\nou en ouvrant des balises

\\n\\n

Enfin, vous pouvez utiliser le style \\u201cinline\\u201d (\\xe9crit directement dans\\nle HTML sur l\\u2019attribut style de l\\u2019\\xe9l\\xe9ment, mais ce n\\u2019est vraiment pas\\npropre) : c\\u2019est le dernier \\xe0 parler, il est exactement l\\xe0 o\\xf9 vous\\nvoulez l\\u2019appliquer, on consid\\xe8re que c\\u2019est celui qui \\xe9crase tout le\\nreste et qui aura raison au final.

\\n\\n

Qui parle de quoi ?

\\n\\n

On a cinq mani\\xe8re d\\u2019identifier des \\xe9l\\xe9ments HTML, cinq s\\xe9lecteurs\\ndisponibles dans nos r\\xe8gles CSS :

\\n\\n

\\n
• l\\u2019\\xe9l\\xe9ment, ou le tag, c\\u2019est le type de bo\\xeete HTML (DIV par exemple)
\\n
• la classe, pr\\xe9c\\xe9d\\xe9e par un point, quelque chose que vous pouvez ajouter pour noter la\\nsimilarit\\xe9 entre plusieurs \\xe9l\\xe9ments (sur mes dossiers, la couleur\\nrouge ou bleu, \\xe9crit au marqueur ou au stylo, le fait que ce soit un\\nclient VIP\\u2026)
\\n
• \\n

  l\\u2019identifiant, pr\\xe9c\\xe9d\\xe9 par un di\\xe8se, quand le dossier est nomm\\xe9 (le cas de Mr Tartempion)

  \\n
\\n
• des pseudo-s\\xe9lecteurs, avec des symboles \\u201cdeux points\\u201d
\\n
• et des s\\xe9lecteurs par attributs (avec des crochets) depuis CSS3
\\n

\\n\\n

Si vous utilisez ces deux derniers vous savez un peu comment \\xe7a\\nmarche, alors je vais me concentrer sur les bases : \\xe9l\\xe9ment, classe,\\nidentifiant. En plus, on peut les encha\\xeener : tous les dossiers bleus\\n\\xe0 condition qu\\u2019ils soient dans une armoire, voire express\\xe9ment les\\ndossiers bleus dans une armoire bleue.

\\n\\n

L\\u2019\\xe9l\\xe9ment vaut un point : UL LI A vaut alors trois points.\\nUne classe vaut dix points : UL.menu ou .menu LI valent onze points.\\nL\\u2019identifiant vaut cent points.

\\n\\n

On donne ainsi une \\u201cprime \\xe0 la pr\\xe9cision\\u201d : plus le s\\xe9lecteur est pr\\xe9cis,\\nplus votre r\\xe8gle monte en priorit\\xe9, et plus c\\u2019est elle qui aura raison.

\\n\\n

Qui dit quoi ?

\\n\\n

Enfin, on sait de quoi vous parler, mais il faut savoir quoi faire dessus.\\nVous listez des propri\\xe9t\\xe9s CSS que vous voulez appliquer.

\\n\\n

Certaines s\\u2019appliqueront \\xe0 tous ses enfants (toutes les bo\\xeetes dans\\ncette bo\\xeete), d\\u2019autres non. Et tout finit par s\\u2019appliquer en m\\xeame\\ntemps ! Dans la vraie vie, un humain l\\u2019oublierait probablement, mais\\npas un ordinateur : si une r\\xe8gle tr\\xe8s peu prioritaire dit d\\u2019\\xe9crire en vert\\net toutes les r\\xe8gles plus prioritaires ne changent que la taille et les bordures\\nde l\\u2019\\xe9l\\xe9ment, le texte est toujours vert.

\\n\\n

Si vous voulez changer cela, vous allez r\\xe9\\xe9crire cette propri\\xe9t\\xe9 plus\\ntard, prendre la pr\\xe9c\\xe9dence sur ce qui a \\xe9t\\xe9 dit avant.

\\n\\n

On dit que le droit est le m\\xe9tier des exceptions, mais le\\nd\\xe9veloppement aussi : je vous demande de faire un certain traitement,\\nsauf dans tel cas, mais sauf dans tel cas encore plus pr\\xe9cis, auquel\\ncas on r\\xe9\\xe9crit encore par dessus les deux r\\xe8gles moins importantes.

\\n\\n

Boni

\\n\\n

On vient de voir que c\\u2019est un sujet complexe. Il y a de plus en plus\\nd\\u2019outils pour vous aider, c\\u2019est bien, et de pratiques \\xe0 apprendre, ce\\nqui peut porter \\xe0 confusion et ajoute \\xe0 la complexit\\xe9 ambiante. Je\\nvoulais garder l\\u2019\\xe9pisode \\u201clow-tech\\u201d pour ne perdre personne et parce\\nque je crois qu\\u2019il y a de la valeur dans les bases et l\\u2019historique.

\\n\\n

J\\u2019avais parl\\xe9 d\\u2019un \\xe9pisode philosophique, l\\u2019\\xe9criture n\\u2019est pas venue\\naussi naturellement que je pensais, je le garde au chaud pour plus tard.\\nDe m\\xeame j\\u2019h\\xe9site \\xe0 faire des \\xe9pisodes business, ce qui sort clairement\\nde la ligne annonc\\xe9e mais qui a \\xe9galement beaucoup de valeur.

\\n\\n

De plus, \\xe0 mon sens, on ne peut se contenter de faire son job,\\nil y a toujours de vastes consid\\xe9rations \\xe0 prendre en compte autour\\nde votre p\\xe9rim\\xe8tre pr\\xe9cis, que ce soit pour progresser, pour maximiser\\nles opportunit\\xe9s, ou pour deviner ce qui va vous tomber dessus et\\nanticiper un peu.

\\n\\n

Bref, n\\u2019h\\xe9sitez pas, je suis ouvert aux commentaires sur Twitter @zen_m4 :)

\\n\\n

Merci et \\xe0 bient\\xf4t !

'