11 Absolu et relatif

Comme vous l'avez vu dans les chapitres précédents, de nombreuses choses sont liées ou dépendantes les unes des autres. Un concept fondamental dans le développement du web est donc la distinction entre les choses qui sont relatives les unes aux autres ou absolues à la racine (niveau hiérarchique le plus élevé).

Analogie/Exemple

Voici à quoi ressemble la structure commune d'une famille :

Arrière-grands-parents Grands-parents Parents

Et vous voici

Donc, métaphoriquement parlant, vous êtes au bas de la hiérarchie. Si vous voulez maintenant poser une question à vos arrière-grands-parents, il y a deux possibilités :

1. tous les membres de la hiérarchie se comportent relativement les uns par rapport aux autres. Vous adressez votre question à vos parents, s'ils n'ont pas de réponse à la question, ils la posent à vos grands-parents. S'ils n'ont toujours pas de réponse à la question, ils la posent à vos arrière-grands-parents. Si vos arrière-grands-parents n'ont pas de réponse non plus, vous partez les mains vides, car dans notre exemple, il n'y a pas de niveau hiérarchique supérieur qui pourrait être interrogé. Vous avez donc atteint la racine (l'origine, la racine). 2.

2. vous vous comportez absolument et vous sautez donc les niveaux hiérarchiques. Vous posez donc votre question directement à vos arrière-grands-parents - à moins que quelqu'un dans la hiérarchie ne vous oblige à vous comporter relativement. Si personne ne le fait, votre question est toujours adressée au plus haut niveau de la hiérarchie, dans notre exemple vos arrière-grands-parents ou la racine.

En termes de HTML, de telles hiérarchies sont créées par l'imbrication d'éléments (nœuds DOM) les uns dans les autres. Donc un élément parent et un élément enfant. Chacun de ces éléments peut être fourni avec un contenu, des paramètres et d'autres éléments enfants. Ainsi, pour ce qui est de l'exemple, notre élément html serait vos arrière-grands-parents, head, main et footer seraient les grands-parents, etc.

Dans le CSS, les enfants peuvent hériter des valeurs et des paramètres de leurs parents. Semblable à la vie réelle. Héritage est le nom de ce concept. Par exemple, un enfant peut hériter des dimensions (largeur, hauteur) et des positions, de la police, de la couleur et de bien d'autres choses. En ce qui concerne notre exemple, cela signifie qu'un enfant pose toujours sa question au niveau hiérarchique supérieur parent jusqu'à ce qu'il reçoive une réponse avec laquelle il peut faire quelque chose ou jusqu'à ce qu'il reçoive des valeurs dont il peut hériter.

# Position du CSS

Une box, tout élément qui peut avoir une hauteur, une largeur et un espacement, se comporte de manière fondamentalement relative. Il fait attention aux hiérarchies et autres éléments présents et s'aligne en conséquence.

En CSS, cependant, vous pouvez également positionner une boîte de manière absolue. Cela le sort de son contexte et le repositionne. Si aucun autre niveau hiérarchique ne l'interdit (voir l'exemple ci-dessus), il s'aligne sur l'élément root. Il s'agit toujours de la balise html.

Dans le chapitre [Position & Transform], nous allons approfondir le positionnement des éléments avec le CSS.

# Chemins

Les chemins d'accès aux fichiers pour les structures de dossiers peuvent également être définis comme absolus ou relatifs. Un chemin absolu comprend généralement le chemin complet du répertoire root jusqu'au niveau hiérarchique le plus bas souhaité. Un chemin absolu est donc immuable.

/* Exemple pour un chemin d'accès absolu d'un site web */
https://google.com

/* Exemple de chemin absolu sur un ordinateur Windows */
C:\Documents\Jane\Portfolio\index.html	

Supposons que vous deviez construire toutes les images et tous les fichiers de votre portfolio avec des chemins d'accès absolus comme dans l'exemple (C:\Documents\Kilian\Portfolio\index.html). Votre portefeuille fonctionnerait donc exclusivement sur votre propre appareil, car ces dossiers ne sont également présents que sur votre propre appareil. Si vous le copiez sur l'appareil d'un collègue ou sur un serveur web, les autres appareils ne pourront pas trouver ce chemin.

Il est donc recommandé de travailler avec des chemins relatifs. Un cheminement relatif ne prend en compte que les niveaux hiérarchiques de son voisinage immédiat. Cela permet à tout ce qui se trouve en amont de la racine de changer sans détruire la façon dont il fonctionne.

    /* Exemple d'un chemin relatif qui suit toujours la position de l'index.html. */
    /img/about.jpg
    
    /* Exemple d'un chemin relatif qui est orienté vers le même répertoire où il se trouve. */
    img/about.jpg
    
    /* Exemple de chemin relatif basé sur le répertoire parent où il se trouve. */
    ../img/about.jpg
    
    /* Exemple d'un chemin relatif orienté à deux niveaux hiérarchiques (deux répertoires) vers le haut à partir de l'endroit où il se trouve. */
    ../../img/about.jpg

Unités de mesure

Les unités de mesure dans le CSS fonctionnent également avec le concept absolu et relatif. Par exemple, les valeurs absolues peuvent être utilisées avec px (pixel CSS) ou pt (point) pour spécifier les tailles. Ou des unités de mesure relatives telles que le % (pourcentage) ou celles basées sur l'écran ou la taille de la police.

Dans le chapitre suivant, nous aborderons plus en détail les différentes unités de mesure