Lilapuce
 

exercices (lundi 19 novembre 2007)

Html - Css [6]

Étape 6 : ah ! ces navigateurs

Résumé de l’étape précédente :

- après avoir découvert les « sélecteurs de type » (balises HTML sémantiques) puis les « sélecteurs de pseudo-classe » (liens), nous sommes passés aux « sélecteurs d’ID » ; ces derniers permettant de définir des styles personnalisés à n’utiliser qu’une seule fois dans la page.

- <div> est une balise qui ne correspond à aucun contenu sémantique prédéfini (contrairement à h1 ou à ul, par exemple). Cette balise est très souvent utilisée pour définir un bloc dans une page HTML. Par exemple, nous avons eu recours à une balise <div id="global"> pour centrer notre page dans la fenêtre du navigateur.

- nous savons désormais que les navigateurs interprètent différemment les instructions CSS. Pour contourner cette difficulté, nous avons dû faire appel à quelques vieilles ruses de sioux. Nous avons paramétré les marges à zéro sur les sélecteurs de type afin d’obtenir le même résultat sur les deux principaux navigateurs.

Nous nous en étions donc là :

Il va maintenant falloir modifier ces marges réglées à « zéro ».

Je laisse de côté, pour l’instant, le titre de niveau 1 (h1). Par contre je commence à modifier les marges externes (margin) de la balise h2 et de la balise h3.

Plutôt que de déclarer les unes après les autres les valeurs de marges (haute, droite, basse, gauche), je décide de faire appel à une notation plus compacte. Par exemple, pour le sélecteur h2, cela donne :

margin: 0.5em 0 0.8em 0;

Ce code est rigoureusement équivalent à :

margin-top: 0.5em;

margin-right: 0;

margin-bottom: 0.8em;

margin-left: 0;

Remarquez que la notation compacte doit respecter un ordre : on commence toujours par la marge supérieure et on descend dans les sens des aiguilles d’une montre.

J’en profite pour modifier la taille des caractères. Je continue d’utiliser des valeurs relatives em (voir support).

J’enregistre, je charge les navigateurs.

Disons que cela convient pour les titres :

Passons maintenant à la liste. Contrairement à ce que l’on pourrait penser, une bonne partie des instructions CSS, concernant les listes, se définissent sur le sélecteur ul. Il en est ainsi pour les marges :

Ensuite, je souhaiterai modifier l’apparence par défaut des puces. Dans TopStyle, je sélectionne les déclarations concernant ul et, sur le volet de droite, je clique sur la propriété list-type-type pour choisir disc.

Je modifie, à présent, le titre de niveau 1 : il doit être centré en largeur…

Vérifions :

- la liste

- le titre de niveau un

Oui, ça ira… En tous cas, j’ai le même résultat sur les deux navigateurs, c’est l’essentiel.

Les réglages plus fins de tel ou tel élément pourront être réalisés dans un second temps. Si, par exemple, il faut changer les couleurs ou la taille de caractères du titre de niveau 3, je pourrai le faire quand j’aurai terminé de construire l’organisation générale de la page.

Pour l’instant, réservons notre énergie pour améliorer la maquette d’un point de vue structurel, justement ; car il y a encore d’importantes modifications à apporter de ce côté :

Dans la pratique, il est rare, de nos jours, de trouver des sites Web (blogs ou non) qui ne comportent pas au moins deux colonnes. Par exemple, il est d’usage que tout site Web soit organisé au moins en deux espaces verticaux côte à côte : le menu (pour les rubriques) et le contenu principal.

Imaginons, que nous voudrions, à présent, quelque chose qui ressemble à ça :

L’objectif est donc de construire une nouvelle zone à droite, pour placer un menu de navigation (ici, provisoirement en vert).

Très important : pour cela, je suis obligé de construire, non pas un nouveau bloc, mais deux nouveaux blocs : celui de droite et celui de gauche.

Un petit schéma vaut mieux qu’un long discours :

CSS permet de réaliser cela à l’aide des blocs flottants.

Autrement dit, il va falloir que ces deux nouvelles zones (gauche et droite) soient construites à partir de conteneurs div (non typés d’un point de vue sémantique) et flottants.

Dans le fichier CSS, je crée donc un nouveau bloc gauche :

#gauche {

}

Dans lequel j’insère la propriété flottant de la façon suivante :

float : left;

Cela indique que ce nouveau bloc #gauche est flottant et aligné à gauche.

J’en profite pour ajouter d’autres propriétés, lesquelles – selon la règle d’héritage - seront indiquées en proportion du bloc parent immédiat (global) :

- la largeur (width), indispensable pour tout bloc flottant

- les marges internes (margin)

- les marges externes (padding)

La bordure rose et le fond coloré en beige ne sont appliqués qu’à titre provisoire, de façon à bien matérialiser ce nouveau bloc.

Récapitulons :

Côté fichier HTML, j’insère ma nouvelle balise, laquelle vient donc juste après le titre de niveau 1 (h1).

Puis je ferme immédiatement ce nouveau conteneur : </div>.

Je l’intercale juste devant la balise de fermeture du conteneur global, en n’oubliant pas le commentaire.

Vous constatez que j’ai indenté le code, de façon à le rendre plus lisible. L’éditeur Notepad++ ajoute des filets verticaux qui, en plus de la coloration syntaxique et de l’indentation, permettent de me repérer plus facilement.

J’enregistre le tout et je charge cette nouvelle version sur les navigateurs. Je commence par Internet Explorer.

Pas mal :

Voyons maintenant pour Firefox (ci-dessous)…

Mamma mia !!!

Le conteneur global (fond blanc) se limite désormais au titre de niveau 1. On dirait que le nouveau conteneur gauche est sorti de son conteneur parent. De plus l’image dépasse de ce conteneur. Humm les délices du CCS…

Eh oui, voilà un piège de plus que nous réserve les CSS.

En réalité, nous sommes donc en présence de deux problèmes distincts. Laissons de côté, pour l’instant, l’image qui dépasse du bloc et essayons de comprendre pourquoi le nouveau bloc gauche n’est plus intégré dans son bloc parent.

C’est une règle qu’il faut connaître : un bloc flottant sort du flux courant de la page (donc du bloc parent, dont il dépend). Il est donc tout à fait normal que le fond blanc du conteneur parent (global) n’apparaisse pas derrière le bloc gauche.

En fait, selon le standard CSS, c’est Internet Explorer le fautif. Le navigateur de Microsoft n’interprète pas correctement le code alors que Firefox se montre particulièrement respectueux des spécifications définies par le W3C (vous êtes content avec ça !)

Dans le doute, lorsque le navigateur affiche des résultats inattendus, il est toujours possible de masquer temporairement certaines instructions, plutôt que de supprimer ou modifier des portions de codes. Vous pouvez ainsi vérifier de façon réversible, ligne après ligne les « instructions fautives ».

Pour cela il suffit de mettre entre commentaire le code de la façon suivante.

En rechargeant la page on s’aperçoit que c’est bien ce bloc flottant qui pose problème.

Alors comment faire pour régler le problème du bloc flottant sortant du flux courant ?

On s’enfuie en courant ?

Non : on bidouille.

On va être obligé, à nouveau, de passer par un vieux truc tordu, lequel, cette fois-ci, est totalement dépendant de la logique interne des CSS.

Je vais créer un sélecteur spécial, qui me permettra de « nettoyer » la propriété du bloc flottant ; regardez le code (ci-dessous), à partir de la ligne 36.

Il y a beaucoup de choses nouvelles à observer :

- Puisque nous nous étions arrêtés là, commençons par indiquer la propriété qui permet de régler le problème du bloc flottant sortant du flux courant : clear: both (ligne 37). Cela signifie, à peu de chose près, « nettoyer tout ». Evidemment, la même instruction peut être utilisée dans d’autres contextes.

- Ce qui suit dépasse la portée du hack susmentionné : nous découvrons un nouveau sélecteur .spacer. Il s’agit, comme nous l’avons vu avec les sélecteurs d’ID, d’un sélecteur permettant de définir un style personnalisé. Je lai nommé spacer par convention (c’est son petit nom sur Internet). Cependant, contrairement au sélecteur d’ID, je pourrai utiliser ce type de sélecteur autant de fois que je le veux dans la page. C’est ce qu’on appelle un sélecteur de classe.

- Remarquez le point placé devant le sélecteur : (.spacer). C’est de cette façon-là qu’on déclare une classe dans un fichier CSS.

Afin de parer à tout risque de confusion, il me semble important de faire la précision suivante : Rappelons que le hack du bloc flottant se limite juste à l’instruction clear: both. Si nous utilisons ici un sélecteur de classe pour résoudre ce problème c’est uniquement parce qu’il pourra être employé plusieurs fois dans la page, notamment pour le bloc de gauche et pour celui de droite.

En fait les sélecteurs de classe sont utilisés de façon très courante en CSS, en dehors de ce contexte bloc flottant.

Grâce aux classes CSS, on peut modifier n’importe quelle balise HTML pour créer des styles personnalisés, y compris sur des éléments « sémantiques » tels que h1, table, ul, img… ; au risque, parfois, d’un splendide charabia visuel et sémantique, justement.

Voyons maintenant, côté HTML, comment déclarer une balise avec un sélecteur de classe (ligne 42) :

Après l’ouverture de la balise (dans ce cas, un paragraphe), je tape un espace, puis l’instruction class= et le nom de la classe entre guillemets.

Voyons, maintenant, comment fonctionne le bidouillage pour éviter que le bloc flottant sorte du flux courant :

Il suffit de placer immédiatement après un conteneur flottant (gauche, dans notre cas) un paragraphe faisant référence à cette classe « nettoyeuse » pour que ce bloc réintègre (visuellement) le flux de la page. Le code &nbsp; ne sert qu’à remplir ce paragraphe d’une espace insécable, histoire de remplacer le rien par de l’espace… Ne cherchez pas de logique là-dedans, c’est un bidouillage.

En tous cas ça marche (ci-dessous).

Je retrouve le fond blanc du conteneur global sur les deux navigateurs, mais, à droite sur Mozilla, l’image sort toujours du conteneur gauche. Aucune surprise : on savait que les deux problèmes n’étaient pas liés.

En agrandissant la fenêtre de Mozilla « plein pot » sur toute la largeur de l’écran, il est possible d’identifier d’où viens le problème.

J’avais spécifié (approximativement) que la largeur du bloc gauche soit réglée à 55% ; soit, 55% du bloc parent (global) ; la taille de ce dernier étant elle-même proportionnelle à son conteneur parent (85% du body).

Cette façon de paramétrer en valeur relative proportionnelle est idéal pour adapter l’affichage d’une maquette à différentes configurations d’affichage. Quelle que soit la résolution de l’écran, je garde les mêmes proportions (page dans l’écran, zone de gauche, marges, etc.)

Sur les images de ce support (par exemple, ci-dessus), j’ai volontairement réduit les fenêtres au minimum pour les afficher côte à côte. Ce qu’il est difficile de montrer sur ces vues (mais que vous pourrez vérifier sur l’archive ci-dessous) c’est que Firefox, contrairement à Internet Explorer, adapte la largeur des conteneurs uniquement en fonction de la taille indiquée par l’élément parent ou l’élément lui-même ; et non pas à partir de la dimension de l’élément enfant.

Donc, dans notre cas, si la largeur du bloc gauche est supérieure à la taille de l’image, cette dernière s’intègrera visuellement dans le fond, mais l’image dépassera du bloc si elle est plus large que le bloc. C’est exactement ce que voyons ici, lorsque je réduis manuellement la taille de la fenêtre.

Là encore, c’est Firefox qui respecte les spécifications du CSS ; alors qu’Internet Explorer adapte la largeur du bloc gauche pour faire rentrer un élément enfant (l’image).

Conclusion : si je veux éviter le désagrément de blocs qui se chevauchent, il faut vérifier que la largeur d’un élément à taille fixe (une image, par exemple) est inférieure à celle de son élément parent.

La règle, s’applique également pour la hauteur. C’est la raison pour laquelle il est déconseillé de paramétrer une hauteur de bloc conteneur en CSS ; car il est impossible de prévoir à l’avance quelle sera la quantité de contenu d’une page (en fait de toutes les pages). Plus exactement, il est possible d’indiquer une hauteur minimale, cette instruction existe en CSS ; mais là encore, elle n’est pas interprétée de façon unanime par tous les navigateurs et l’utilisation de cette propriété demande de faire appel à une multitude de recettes d’alchimistes, auprès de quoi notre pauvre bloc flottant sortant du flux courant ressemble à une tendre comptine d’enfant.

Je sais désormais que la question de l’image dépassant de son bloc conteneur n’est liée qu’à un problème de taille de bloc parent. Comme a priori, je n’ai pas l’intention que la page s’affiche, par défaut, dans une petite fenêtre de navigateur (le parent le plus haut), je considère que la question est réglée.

Afin de ne pas me laisser perturber par la vue de cette « image dépassante » sur l’un des deux navigateurs témoins, je cache momentanément le code de l’image dans le fichier HTML :

J’enregistre ces modifications. Je charge les pages sur les navigateurs.

Cela me permet de vérifier si les pages s’affichent à nouveau de façon identique.

La suite, pour le bloc de droite, sur un nouveau support.

 

Projet RECETTE [6]