TCH056 - Programmation Web

<Chapitre 03> CSS

Anis Boubaker, Ph.D.
Prof. Enseignant en informatique

Plan du chapitre

CSS: Cascade Style Sheet

Feuille de style en cascade
Langage permettant de définir l'apparence (le style) des éléments d'un document HTML.
On s'intéresse à la présentation de la page WEB et non à son contenu/sémantique, ni à son comportement
Plusieurs styles (règles) peuvent s'appliquer "en cascade" au même élément HTML: l'algorithme de cascade lève l'ambiguïté

Découplage entre le contenu et le visuel

Naviguez vers le bas pour voir la démonstration du site csszengarden.com

Notion de règle (en général)

La programmation à base de règles est un des paradigmes de programmation.
Un programme est écrit sous la forme d'un ensemble de règles (la base de règles)
Une règle a deux parties: la partie gauche ou la condition, et la partie droite ou l'action:
Condition => Action
À un instant t, si la condition d'une règle est vérifiée, son action est alors exécutée.

Les règles CSS

Une règle CSS se compose de deux parties:

Le sélecteur: Qui identifie les éléments auxquels s'applique une règle
La déclaration: Qui définit le style à appliquer aux éléments sélectionnés

Exemple de règle CSS

Carvel

Carvel est un hameau en Alberta, dans le centre de la province.

Sa population est estimée à environ 19 habitants (recensement de 2019) et son indicatif régional est le 780.

Où placer le code CSS?

Trois possibilités, seule la dernière est recommandée:

Directement dans l'élément HTML concerné, via l'attribut style (pas de sélecteur)

Règles internes, dans une balise d'en-tête style
Dans un fichier .css séparé, inclus avec une balise link

Où placer le code CSS?

Trois possibilités, seule la dernière est recommandée:

Directement dans l'élément HTML concerné, via l'attribut style (pas de sélecteur)

Règles internes, dans une balise d'en-tête style

Dans un fichier .css séparé, inclus avec une balise link

Où placer le code CSS?

Trois possibilités, seule la dernière est recommandée:

Directement dans l'élément HTML concerné, via l'attribut style (pas de sélecteur)
Règles internes, dans une balise d'en-tête style

Dans un fichier .css séparé, inclus avec une balise link

Plan du chapitre

Rappel: Arborescence HTML

Le Document Object Model

Le navigateur stocke les éléments d'une page Web sous forme d'arborescence en mémoire
Cette représentation permet au navigateur d'analyser et de traiter le contenu la page en vue d'en faire le rendu à l'écran
Cette représentation mémoire de l'arborescence des éléments HTML d'une page est ce qu'on appelle le DOM (Document Object Model)
Le DOM est accessible aux développeu.rs.ses pour cibler des éléments de la page (en CSS et en Javascript)

CSS et DOM pour le rendu

Source: Site MDN

Utilisation de l'arborescence

Dans une arborescence, chaque élément (noeud) est l'enfant d'au plus un autre noeud, et est le parent de 0 ou plusieurs enfants
Deux cas particuliers:
- La racine: le seul noeud qui n'a pas de parent
- Les feuilles: qui n'ont aucun enfant
D'autres types de relations peuvent être exploitées (et qui nous serviront): les ancêtres, les descendants, les frères

Racine et Feuilles

Descendants et ancêtres

Frères (siblings)

Identification des éléments (1/2)

Tout élément HTML peut avoir un identifiant unique

L'identifiant est spécifié à travers l'attribut id:

Identification des éléments (2/2)

Tout élément HTML peut aussi appartenir à une catégorie ou classe d'éléments

La classe est spécifiée à travers l'attribut class:

Généralement, plusieurs éléments sont dans la même classe.

Un élément peut avoir plus d'une classe, séparées par des espaces:

Plan du chapitre

Rappel: Règle CSS

Le sélecteur: Partie qui définit à quel(s) élément(s) s'appliquera la règle
La déclaration: Règles de style qui seront appliquées aux éléments sélectionnés

Sélecteurs de base (1/3)

Sélecteur universel (*):

Sélection par type:

Sélecteurs de base (2/3)

Par identifiant:

Sélecteurs de base (3/3)

Par classe:

Sélecteurs de base

Cliquez sur le lien ci-dessous pour afficher les instructions dans l'éditeur.

Exercice 1

Sélecteurs combinés: Listes

Liste de sélecteurs: définie à l'aide de l'opérateur virgule (,)
Les éléments répondant à au moins un des sélecteurs seront affectés:

Sélecteurs combinés: Descendants

A B: Sélectionne tous les éléments sélectionnés par B qui sont un descendant d'un élément sélectionné par A.

Sélecteurs combinés: Enfants

A > B: Sélectionne tous les éléments sélectionnés pas B qui sont un enfant (direct) d'un élément sélectionné par A.

Sélecteurs combinés

Cliquez sur le lien ci-dessous pour afficher les instructions dans l'éditeur.

Exercice 2

Sélecteurs combinés: Frère adjacent

A + B: Sélectionne tous les éléments sélectionnés par B qui:

Ont le même parent qu'un élément sélectionné par A; et
Qui suivent directement l'élément sélectionné par A dans l'arbre.

Sélecteurs combinés: Frère antérieur

A ~ B: Sélectionne tous les éléments sélectionnés par B qui
1. Ont le même parent qu'un élément sélectionné par A; et
2. Qui viennent après l'élément sélectionné par A dans l'arbre.

Sélection par attribut

La sélection se base sur un attribut spécifique et sa valeur:

→ Consulter les différents opérateurs sur le site MDN.

Pseudo-classes

Une pseudo-classe identifie un état particulier d'un élément.
La pseudo-classe est ajoutée à la suite du sélecteur, en les séparant par un :
Liste complète sur le site MDN

Pseudo-éléments

Un pseudo-élément vise à sélectionner une portion de l'élément sélectionné.
Le pseudo-élément est ajouté à la suite du sélecteur, en les séparant par un ::
Liste complète sur le site MDN

Sujet d'un sélecteur

Dans le cas d'un sélecteur combiné: Ce sont toujours les éléments correspond à la partie la plus à droite du sélecteur qui seront sélectionnés!

Dans l'exemple ci-dessus, seuls des éléments A seront sélectionnés. Il faudra toutefois qu'ils soient descendants d'un LI qui lui même est un descendant direct d'un UL

Sélecteurs

Cliquez sur les liens ci-dessous pour afficher les instructions dans l'éditeur.

Exercice 3

Exercice 4

Plan du chapitre

Déclarations de style

Une déclaration de style est un ensemble de paires de clé-valeur, encapsulées entre des { } et séparées par des ;
Clé: Élément de style à altérer
Valeur: La valeur définissant l'apparence désirée

Stylage du texte (1/2)

Ensemble de déclarations permettant de modifier l'apparence du texte, tels que:

La police: Voir: https://www.cssfontstack.com

La taille:

La couleur:

Le style:

Consulter le site MDN pour connaître les principaux éléments de styles du texte.

Stylage du texte (2/2)

D'autres références associées aux déclarations de style du texte:

Le modèle en boite

Le rendu des éléments à l'écran s'effectue de deux manières:

En ligne: À la suite de l'élément qui le suit (le texte, les liens, les span, ...)
En boite: Le contenu est encapsulé au sein d'une boite englobante qui se détache (par défaut) du flux normal du contenu (i.e. revient à la ligne)
Il est possible d'altérer le style par défaut en modifiant la propriété display: inline ou block:
Il existe d'autres valeurs possibles pour la propriété display que nous verrons dans la section Positionnement.

Le modèle en boite

Structure d'une boite

Source: Vincent De Oliveira, Formation Microsoft tech-days 2014

Stylage de boites

Nous pouvons agir de façons indépendante sur chaque constituante de la boite:

Valeurs CSS

Chaque déclaration CSS comporte une valeur.
La valeur peut être de plusieurs types (même pour la même propriété!)
Un type de valeur donné doit être utilisé dans le contexte approprié
Ex.: Il n'est pas possible de mettre une valeur de type image pour spécifier la taille d'une marge...

Types de valeurs

Numérique:
```
50px, 5cm, 1.5em, 3rem, 10vh, 20%
```

Couleur:

darkblue, #12a4b7, #faf, rgb(109, 234, 234), ...

Image:

background-image: url(../images/logo_ets.png)

Position:
```
center, left, right, middle, ...
```
Chaines de caractères:
```
content: "Bizarrerie de CSS"
```
Fonctions:
```
width: calc(100px + 20%)
```

Nous allons nous intéresser spécifiquement aux valeurs numériques de taille et aux couleurs. Pour une référence complète, voir le site MDN.

Les unités de taille

Une taille peut-être:
- absolue: valeur numérique sans dépendance (ex.: cm, in, px), ou
- relative: valeur dépendant d'une autre valeur (typiquement du parent).
L'unité utilisée détermine le type de longueur

Unités absolues

Pixel (px): unité de base d'un écran.
Pouces (in): On assume que 1 in = 96px
Centimètres (cm): 25.2/64in = 37.8px
Millimètre (mm): 1/10cm = 3.78px
Point (pt): 1/72 in
Picas (pc): 1/6 in

Unités relatives

%: Pourcentage de la taille (totale) du parent.
em: Taille de la police du parent.
rem: Taille de la police de la racine (html)
vh: 1% de la hauteur de la partie visible de l'écran
vw: 1% de la largeur de la partie visible de l'écran
fr: Unités fractionnaires de l'espace encore disponible du parent (voir Grid Layout)

Couleurs

Nommées: yellow, red, ... liste disponible sur MDN.
Hexadécimal:Valeur du Rouge, Vert et Bleu, sur deux digits hexa chacun (#xxxxxx)
RGB: En utilisant la fonction rgb() et en passant des valeurs décimales pour le rouge, vert et bleu.

RGBA: Comme RGB mais avec un 4e paramètre qui représente l'opacité (0: opaque, 1: transparent)

Héritage

En CSS, l'héritage contrôle l'apparence d'un élément lorsqu'aucune valeur n'a été spécifiée
Les propriétés CSS sont soit:
- Héritables: Sa valeur est définie, par défaut, à la valeur calculée du parent
- Non-héritables: Sa valeur est définie, par défaut, à la valeur initiale de la propriété

Propriétés héritées

C'est est une démonstration de l'héritage.

Propriétés non-héritées

C'est est une démonstration de l'héritage.

Altérer l'héritage

C'est est une démonstration de l'héritage.

La propriété all peut être utilisée si on souhaite modifier le mode d'héritage de toutes les propriétés dans une déclaration. Voir la syntaxe ici.

Plan du chapitre

Motivation

Un document peut inclure plusieurs feuilles de style CSS, des éléments peuvent avoir des style enligne
D'autres feuilles de style sont utilisées, en plus de celles créées par la personne qui développe le site (navigateur, préférences personnelles)
Il est fréquent que, pour un élément donné et une propriété donnée, plusieurs valeurs s'opposent
Quelle valeur choisir? ⇨ Algorithme de cascade

Algorithme de cascade

Plan du chapitre

Implémentation d'un positionnement Flex

Définir la direction

D'autre valeurs possibles: row-reverse et column-reverse

Positionnement FlexBox

Cliquez sur le lien ci-dessous pour afficher les instructions dans l'éditeur.

Exercice 5

Positionnement Grid Layout

Cliquez sur le lien ci-dessous pour afficher les instructions dans l'éditeur.

Exercice 6

## Points de Rupture * Définit une taille à laquelle le *media query* s'active * On utilise généralement les attributs `min-width` et `max-width` ```css @media screen { boite { width: 20rem; background-color: lightcoral; } } @media screen and (max-width: 600px) { boite { width: 50px; background-color: lightgrey; } } ```

Plan du chapitre

Cadriciels / Bibliothèques

Des outils et ensembles de code réutilisables qui facilitent le développement de logiciels en fournissant des solutions prédéfinies pour des problèmes courants.

Bien que ces deux concepts partagent le but de simplifier le développement de logiciels, ils diffèrent par leur approche et leur utilisation.

Bibliothèques

Une collection de fonctions, de méthodes, ou d'autres ressources réutilisables pour réaliser des tâches spécifiques
C'est au développ-eur/euse de choisir où et quand appeler les fonctions de la bibliothèque
Généralement plus légères qu'un cadriciel et offrent plus de flexibilité dans le code.

Bibliothèques - Exemples

CSS: Bootstrap, Tailwind
Javascript: jQuery, Lodash, D3.js
PHP: Guzzle, Intervention Image, Twig, Doctrine

Les librairies sont omniprésentes, dans tous les langages

Cadriciels (frameworks)

Ensemble cohérent et réutilisable de code qui sert de fondation pour le développement d'applications dans un domaine spécifique.
Définit une structure et une méthodologie de développement, dictant souvent l'architecture de l'application
Les frameworks peuvent inclure des composants logiciels, des bibliothèques, et des API pour faciliter le développement d'applications.

Cadriciels - Exemples

Java: Spring, J2EE, Struts, Hibernate
Développement Web FrontEnd: Angular, React, Vue.js, Svelte
Développement Backend: Express, NextJs, Django, Flask, Spring Boot

Cadriciel vs Bibliothèque

Le framework "appelle" le code et impose une structure. Une bibliothèque est "appelée" par le code.
Un framework est en charge de l'exécution globale et appelle le code au besoin.
Les frameworks fournissent une solution complète avec une structure et une architecture prédéfinies (commodité). Les bibliothèques offrent des fonctionnalités spécifiques (flexibilité)

Plan du chapitre

Qu'est-ce que SASS?

SASS (Syntactically Awesome Stylesheets) est un pré-processeur CSS puissant qui aide à écrire du CSS de manière plus efficace et organisée
Il étend les fonctionnalités de CSS standard avec des fonctionnalités avancées telles que les variables, les mixins, les fonctions et l'héritage
SCSS (Sassy CSS) est la syntaxe de SASS qui utilise la même syntaxe que CSS (mais qui l'étend)

Il existe deux syntaxes de SASS: la syntaxe SCSS et la syntaxe avec indentation (appelée SASS aussi). La syntaxe SCSS tend à remplacer la syntaxe avec indentation

Exemple de fichier de style SCSS


						//Une variable
						$main-background: #3478f7; // Bleu

						//Un mixin (semblable à une fonction) 
						@mixin border-radius($radius) {
							-webkit-border-radius: $radius;
							-moz-border-radius: $radius;
							border-radius: $radius;
						}

						//Une structure hiérarchique de styles
						.navbar {
							background-color: $main-background;
							@include border-radius(4px);

							.nav-item {
								display: inline-block;
								.nav-link {
									text-decoration: none;
									color: white;
									&:hover {
										color: yellow;
									}
								}
							}
						}

Rôle du pré-processeur

Le code SCSS de SASS n'est pas interprétable par un navigateur. Il doit d'abord être transpilé par le pré-processeur pour le convertir en CSS

Installation de SASS

Plusieurs méthodes existent pour installer SASS, mais la plus commune et pratique est à travers NodeJs

Installer NodeJs
Exécuter la commande suivante dans un terminal:
```
								npm install -g sass
							
```
Tester que l'exécutable est fonctionnel:
```
								sass --version
							
```

Un bug existe avec la version 21.0 de NodeJs. Si vous aviez déjà cette version, mettez à jour votre NodeJs.

Définition de variables

Les précompilateur comme SASS ont permis l'introduction de valeurs ré-utilisables
Permettent d'avoir un point unique de définition d'une valeur et la ré-utiliser dans le reste du document - Utile pour la définition de thèmes


						$couleur-principale: #3478f7; // Bleu
						$padding: 15px;

						.content {
							background-color: $couleur-principale;
							padding: $padding;
						}

La version 3 de CSS a également introduit la possibilité de définir des propriétés personnalisées (custom properties).

Imbrication

SCSS permet d'imbriquer vos sélecteurs de manière hiérarchique, reflétant la structure HTML. Cela rend le CSS plus lisible et plus facile à maintenir.


						.navbar {
							background-color: #333;
							.nav-item {
								display: inline-block;
								.nav-link {
									text-decoration: none;
									color: white;
									&:hover {
										color: yellow;
									}
								}
							}
						}

Les mixins

Les mixins sont des blocs de code réutilisables que vous pouvez inclure dans n'importe quel sélecteur. Ils sont utiles pour les ensembles de propriétés CSS que vous souhaitez réutiliser.


						@mixin border-radius($radius) {
							-webkit-border-radius: $radius;
							-moz-border-radius: $radius;
							border-radius: $radius;
						}
						  
						.button {
							@include border-radius(4px);
							background-color: blue;
							color: white;
						}

Héritage

Un sélecteur peut "hériter" des propriétés d'un autre sélecteur avec @extend


						.btn {
							padding: 10px 15px;
							border: none;
							display: inline-block;
							cursor: pointer;
						}
						.btn-primary {
							@extend .btn;
							background-color: blue;
							color: white;
						}

Les boucles

Les boucles permettent de générer dynamiquement des styles répétitifs ou basés sur un modèle.


								@for $i from 1 through 10 {
									.m-#{$i} {
										margin: #{$i * 5}px;
									}
									.mt-#{$i} {
										margin-top: #{$i * 5}px;
									}
									.mr-#{$i} {
										margin-right: #{$i * 5}px;
									}
									.mb-#{$i} {
										margin-bottom: #{$i * 5}px;
									}
									.ml-#{$i} {
										margin-left: #{$i * 5}px;
									}
								}

Les conditions

Appliquer des styles différemment selon certaines conditions.


						$theme: "dark"; // Essayez de changer cette valeur en "light"

						.button {
							padding: 10px 20px;
							border: none;
							font-weight: bold;
							cursor: pointer;

							@if $theme == "dark" {
								background-color: black;
								color: white;
								border: 1px solid white;
							} @else if $theme == "light" {
								background-color: white;
								color: black;
								border: 1px solid black;
							} @else {
								background-color: gray;
								color: black;
								border: 1px solid black;
							}
						}

Plan du chapitre

Qu'est-ce que Bootstrap?

Librairie permettant de simplifier le développement de styles
Accélère le développement et permet la construction d'interfaces élégantes avec un système de grille et des composants prêts à l'emploi
Responsive: Facilite la conception d'un site qui fonctionne aussi bien sur un téléphone portable que sur un grand écran.

Installation et configuration

Via CDN (Content Delivery Network): Inclure le script Javascript et la feuille de style de Bootstrap


						<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
						<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">

Les versions de Bootstrap antérieures à la version 5 demandaient l'inclusion de jQuery également. Depuis la version 5, Bootstrap est devenu indépendant de jQuery.

Définition du conteneur

Les éléments de la page doivent être encapsulés au sein d'un conteneur pour qu'ils soient pris en charge adéquatement par Bootstrap
Il existe deux classes de conteneurs:
- .container: Pour un conteneur adaptatif à la taille du périphérique
- .container-fluid:Pour un conteneur qui occupe toujours l'intégralité de l'écran.

Naviguez vers le bas pour voir un exemple.

Définition du conteneur - Exemple

Système de grille

La disposition du contenu avec Bootstrap repose sur un système de grille à 12 colonnes
Le conteneur (container ou container-fluid) encapsule la grille
Les lignes de la grille sont encapsulées dans des éléments de la classe .row
Le contenu est réparti sur les colonnes au sein d'une "ligne" dans des éléments de classe .col-*-*
Les colonnes sont réactives grâce à un des points de rupture prédifinis

Naviguez vers le bas pour voir un exemple.

Système de grille

Les points de rupture (Breakpoints)

Bootstrap prédéfinis 6 points de rupture:

Point de rupture	Classe (col-*)	Dimensions
Extra small		<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Source: Bootstrap - Breakpoints

Utilisation des points de rupture

Un point de rupture détermine la largeur d'une boite pour les périphériques correspondants
Le point de rupture col-md s'applique donc à tous les périphériques d'au moins 768px de large (inclus lg, xl et xxl)
Sur tous les périphériques ayant une taille inférieure, la colonne prendra toute la largeur

Naviguez vers le bas pour voir un exemple.

Points de rupture - Exemple

Personnalisation - Espacement

Bootstrap fournit un ensemble de Helper classes pour personnaliser l'affichage
Il est possible de contrôler les mages (m-) le padding (p-) à l'aide de classes ayant ce format: {type}{côté}-{taille}, où:
- type peut être `m` (marge) ou `p` (padding)
- côté `t` (top), `b` (bottom), `l` (left), `r` (right), `x` (axe horizontal), `y` (axe vertical)
- taille valeur de 0 à 5 (0: aucun, 5 grand)

Personnalisation - couleurs et arrière plan

Des classes prédéfinies pour les couleurs du texte (ex.: text-primary, text-success, text-danger)
Et des classes pour prédéfinies pour l'arrière plan (ex.: bg-primary, bg-warning, etc.)

Personnalisation - Autres

Bootstrap offre une multitude d'options de personnalisation, comme notamment: les bordures, l'opacité, les ombres, etc.

Les composants Bootstrap

Bootstrap est renommé pour sa vaste bibliothèque de composants réutilisables, qui permettent aux développeurs de construire rapidement des interfaces web riches et interactives.
Il suffit de copier/coller le modèle de composant et l'adapter au besoin.
Les composants incluent: les boutons, les cartes, les carroussels, et bien d'autres
Consulter la documentation de Bootstrap comme référence pour les composants disponibles.