CSS hasn’t revolutionised web design. The reason lies not with the technology (which is revolutionary), but with the designers using it. Most designers have simply swapped the old technology (tables and font tags) for the new technology, without fully exploring what’s so completely new. Jeremy Keith
Chaque auteur de page web a une expérience du traitement de texte et éventuellement de dactylographe.
Ce qui a été l'occasion de prendre de mauvaises habitudes et de les perpétuer, même chez les pros (voir ci-dessus).
Le fond et la forme : on ne discutera pas de l'importance de l'une et de l'autre mais une chose est sûre, on ne doit pas concevoir une page en cherchant à faire joli d'emblée, quitte à remplir ensuite les espaces de texte laissés vides.
Autrement dit on procèdera dans cet ordre : on rédigera d'abord le contenu, on le balisera sémantiquement puis on écrira la feuille de style qui mettra les éléments en place.
Ceci est bien entendu un plaidoyer en faveur des CSS qui permettent de séparer le contenu de la présentation, qui doivent par conséquent faire renoncer à la mise en page par tableaux HTML et à l'interactivité Javascript (quand elle n'est pas indispensable).
Que signifie balisage sémantique ?
Eh bien au lieu de signaler un élément à distinguer par le style, par une balise relative à son aspect, on lui attribuera une balise en rapport à sa signification.
Ainsi au lieu de choisir <div class="titre_gras_rouge"> on préférera <div class="introduction">
La notion d'héritage simple en soi : les enfants adoptent les propriétés des parents, est plus ardue dans son application. En effet tout n'est pas héréditaire.
Ainsi une classe n'étant pas une propriété, elle ne se transmet pas. Mais certaines propriétés ne se transmettents pas comme le positionnement ainsi que clear et float. Margin et padding non plus.
Difficultés de mise en page : en HTML, les différentes parties d'un document sont affichées les unes à la suite des autres. C'est ce qu'on appelle le flot. La seule façon d'y échapper, c'est le tableau, la balise <table> dont on a usé abondamment.
En CSS, on peut placer un bloc grâce au positionnement. Malheureusement le vocabulaire employé est source de confusion.
Ainsi l'attribut position peut prendre la valeur fixed qui veut dire absolue, la valeur absolute qui veut dire relative, la valeur relative qui veut dire décalée et la valeur static qui n'a rien de statique. Je caricature à peine !
De plus les float qui ne traduit pas vraiment le flottement.
- Static signifie en fait pas de positionnement. Sert à annuler un positionnement hérité.
- Fixed signifie fixe dans la fenêtre, c'est-à-dire qui ne se déplace pas lorsqu'on scrolle.
- Absolute signifie bien absolu mais relativement à son conteneur (son parent). Par défaut (s'il n'y a pas de parent), c'est la page.
L'élément qualifié d'absolu échappe au flot HTML, autrement dit il est ignoré par les autres éléments qui peuvent donc le chevaucher.
- Relative : l'élément stylé ainsi fait toujours partie du flot mais se trouve à un autre endroit où il peut donc chevaucher d'autres éléments. Ceci permet de décaler un élément de la place qu'il occupe normalement : comme la puce d'une liste par exemple.
- Float permet à une image d'être habillée par le texte qui par conséquent coule autour. Cet attribut prend les valeurs left, right ou none.
- Clear s'applique à un élément block pour interdire le flottement. Prend les valeurs left, right, both ou none.