Mes notes personnelles sur le développement Web

Les blocs CSS

La construction d'une feuille de style induit la définition de nombreuses règles, il peut exister des conflits entre deux ou plusieurs règles associées à un même élément. Un navigateur doit dont disposer de mécanismes pour choisir la règle à appliquer pour mettre en forme un document. Il y a trois facteurs à prendre en compte ; la liste suivante les définit par ordre croissant d'importance :

1. Importance.
2. Spécificité.
3. Ordre d'apparition dans la feuille de styles.

Cascade, spécificité & héritage

La cascade est un mécanisme qui prescrit de sélectionner la dernière règle déclarée lorsque plusieurs règles sont en conflit (ce mécanisme peut être assimilé à une pile de règles), ce mécanisme signifie que l'ordre d'apparation des règles dans la feuille de styles à une importance. En d'autres termes, lorsque deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme. Une illustration de ce mécanisme est fournie dans l'exemple sur les mécanismes l'affichage du titre <h1>.

La règle précédente permet d'éviter des répétitions dans la feuille de styles. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Une illustration de ce mécanisme est fournie dans l'exemple de surcharge en cascade sur l'affichage du titre <h2>.

Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisir celle qui a la plus grande spécificité. La spécificité mesure donc la précision d'une règle, elle est caractérisée par un score. A ttire d'exemple, un sélecteur d'éléments est peu spécifique (il cibles tous les éléments de même type) alors qu'un sélecteur de classe est plus spécifique (il ne cible que les éléments dont l'attribut class a la valeur choisie. Une illustration de ce mécanisme est fournie dans l'exemple sur les mécanismes l'affichage du titre <h2>.

L'héritage est particulier pour la notation CSS car il ne s'applique qu'à quelques propriétés. Par exemple, si une couleur ou une famille de police sont définies dans un élément alors tout élément contenu dans le premier sera mise en forme avec la même couleur et la même police. Par contre, certaines propriétés ne se transmettent pas (bordure, largeur, etc.). D'après certains auteurs, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles sont celles qui ne se transmettent pas. Une illustration de ce mécanisme est fournie dans l'exemple sur les mécanismes l'affichage du titre <div> et <span>.

CSS propose quatre valeurs spéciales pour contrôler l'héritage ; ces valeurs sont applicables à toute propriété CSS :

• inherit : la propriété prend la valeur dans l'élément parent (activation de l'héritage). Ce mot-clé n'est nécessaire que pour surcharger une autre règle. L'héritage provient toujours de l'élément parent par rapport à l'ardre du document, même si cet élément n'est pas le bloc englobant. Une illustration de ce mécanisme est fournie dans l'exemple sur les mécanismes l'affichage du titre <h1>.
• initial : la propriété prend la valeur par défaut définie dans le feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage, la propriété est redéfinie à inherit. Une illustration de ce mécanisme est fournie dans l'exemple sur les mécanismes l'affichage du titre <h2>.
• unset : la propriété prend sa valeur naturelle. Si la propriété est transmise par héritage, le comportement est identique à inherit, sinon il est identique à initial. Une illustration de ce mécanisme est fournie dans l'exemple sur les mécanismes l'affichage du titre <h3>.
• revert : la propriété permet de remonter la cascade afin que la propriété puisse prendre la valeur qui aurait été utilisée sans mise en forme particulière. Si la propriété hérite de son parent, elle prend la valeur héritée si la valeur par défaut. Le mot-clé revert fonctionne comme unset pour de nombreux cas. Les seules différences observables se produisent quand les valeurs sont définies par le navigateur ou dans une feuille de style utilisateur. Une illustration de ce mécanisme est fournie dans l'exemple sur les mécanismes l'affichage du titre <section>.

La propriété all peut être utilisée pour appliquer une des valeurs spéciales à l'ensemble des propriétés CSS.

• all: initial : toutes propriétés prennent les valeurs par défaut
• all: inherit : toutes propriétés prennent les valeurs héritées.
• all: unset : toutes propriétés prennent les valeurs par défaut.

Sélecteurs CSS :

Dans CSS, les sélecteurs sont utilisés pour cibler les éléments HTML à mettre en forme. Comme précisé dans l'anatomie d'une règle, il existe plusieurs types de sélecteur offrant une précision très fine dans la façon de cibler les éléments :

• Type: Sélection de tous les éléments d'un type donné. Par exemple p sélectionne tous les paragraphes <p>.
• Identifiant (ID) : Sélection de l'élément d'une page qui possède l'ID fourni. Pour une page HTML donnée, il ne peut exister d'un seul élément pour un ID donné ce qui rend ce sélecteur très précis. Par exemple, #mon-id sélectionne l'élément <p id = "mon-id> OU exclusif <a id = "mon-id>.
• Classe : Sélection des éléments de la page qui sont de la classe donnée ; il est possible d'avoir plusieurs éléments qui partagent la même classe. Par exemple .ma-classe sélectionne <p class="ma-classe"> ET <a class="ma-classe">.
• Attribut : Sélection des éléments de la classe qui possèdent l'attribut donné. Par exemple img[src] sélectionne <img src="mon-image.png"> mais pas <img>.
• Pseudo-classe : Sélection des éléments qui sont dans un certain état. Par exemple, a:hover sélectionne <a> uniquement quand le pointeur de la souris est au-dessus du lien.
• Pseudo-élément : Sélection des éléments qui sont définis par un pseudo-élément. Par exemple, .lettre::first-letter sélectionne la première lettre des éléments de classe lettre.
• * (sélecteur universel) : Sélection tout dans le document ou à l'intérieur d'un élément parent s'il est enchaîné à un autre élément et un combinateur descendant.

Il existe également plusieurs possibilités de combinaison des sélecteurs :

• Descendance : Sélection des éléments correspondant au second sélecteur uniquement si ceux-ci ont un ancêtre, quel que soit le niveau, qui correspond au premier sélecteur. Par exemple, ul.ma-classe li sélectionne les éléments <li> qui sont descendants d'un élément <ul class = "ma-classe">. De même, li li sélectionne le deuxième niveau d'indentation d'une liste. Une illustration de cette combinaison est fournie par l'exemple de descendance.
• Enfant : Sélection des éléments correspondant au second sélecteur uniquement si ceux-ci sont descendants directs  du premier sélecteur, la combinaison s'effectue par le symbole >. Par exemple, div > span sélectionne l'élément span dans le premier niveau d'imbrication de div. Une illustration de cette combinaison est fournie par l'exemple "enfant".
• Adjacent : Sélection des éléments correspondant au second sélecteur s'ils sont juste à côté (adjacent) du premier sélecteur et s'ils sont au même niveau de hiérarchie, la combinaison s'effectue par le symbole +. Par exemple, p + img sélectionne tous les éléments <img > qui viennent juste après un élément <p>. Une illustration de cette combinaison est fournie par l'exemple "adjacent".
• Frère : Sélection des éléments correspondant au second sélecteur qui sont au même niveau que celui du premier sélecteur, la combinaison s'effectue avec le symbole ~. Par exemple, p + img sélectionne tous les éléments <img> qui viennent n'importe après les éléments <p> (même niveau). Une illustration de cette combinaison est fournie par l'exemple "frère".

Modèle de boîte

En CSS, tout élément est inclus dans une boîte (box), la compréhension du fonctionnement de ces boîtes et de leur positionnement est essentielle à la maîtrise de la mise en page d'un site Web.

Les types de boîte :

Il existe deux types de boîtes, chacun des types définissant un comportement de la boîte dans la page :

• Boîte en bloc : ce type de boîte correspond au élément HTML de niveau bloc à moins de changer le type de boîte en ligne. Ces boîtes respectent les règles suivantes :
  • La boîte s'étend sur toute la largeur pour remplir totalement l'espace offert par son conteneur (100 %).
  • La boîte occupe sa propre nouvelle ligne et crée un retour à la ligne pour faire passer les éléments suivants à la ligne.
  • Les propriétés de largeur width et de hauteur height sont toujours respectées.
  • Les propriétés padding, margin et border ont pour effet de repousser les autres éléments.
• Boîte en ligne : ce type de boîte correspond au élément HTML de niveau en ligne à moins de changer le type de boîte en bloc.Ces boîtes respectent les règles suivantes :
  • La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.
  • Les propriétés de largeur width et de hauteur height ne s'appliquent pas toujours respectées.
  • Les propriétés padding, margin et border verticales sont appliquées mais ne provoquent pas de déplacement des éléments alentours.
  • Les propriétés padding, margin et border horizontales sont appliquées et provoquent le déplacement des éléments alentours.

Le type de boîte appliqué à un élément est défini par la valeur de la propriété display avec les valeurs block ou inline.

Positionnement intérieur et extérieur :

CSS distingue deux types de positionnement pour une boîte :

• extérieur : ce positionnement détermine si la boîte est en bloc ou en ligne
• intérieur : ce positionnement détermine le comportement de mise en page des éléments contenus dans la boîte. Par défault, les éléments sont affichés dans la Disposition normale mais ce comportement peut être modifié en utilisant la valeur flex de la propriété display.

Pour connaître le positionnement de la boîte dans une page il est important de connaître ses dismensions.

Par exemple :

.box {
    width: 350px;  /* Largeur du contenu */
    height: 150px; /* Hauteur du contenu */
    margin: 10px;  /* Marges extérieures : haut, bas, gauche, droite */
    padding: 25px; /* Marges intérieures : haut, bas, gauche, droite */
    border: 5px solid black; /* Largeur de la bordure : haut, bas, gauche, droite */
}

Cette boîte a pour largeur 410px (350 + 25 +25 (padding gauche et droite) + 5 +5 (bordure gauche et droite)) et pour hauteur 210px (150 + 25 +25 (padding gauche et droite) + 5 +5 (bordure gauche et droite)). Les marges ne sont pas comptabilisées car elles sont considérées comme étant extérieures à la boîte. L'attribut background-color définit la couleur de fond de la boîte largeur, hauteur et padding.

Remarques :

Ces remarques s'appliquent au modèle de boîte standard, il est toutefois possible de s'appuyer sur un modèle de boîte alternatif.