# HTML5 et CSS3  --- ## Courte introduction au web --- ### Architecture client-serveur  [Plus d'info ici](https://docs.google.com/drawings/d/1z-hU0ptBdYjczQn5CI5AVm82R6cJtacx3ejwYxXCkeo/edit?usp=sharing) --- ### Séparation des concepts - HTML signifie _HyperText Markup Language_, en français _Langage de balisage hypertexte_. - Le HTML est une norme d'écriture de documents. - Il est analysé, ou "interprété", par les navigateurs, comme Firefox, Chrome ou encore Internet Explorer. - Il n'est pas à proprement parler un langage de programmation, mais plutôt un langage de mise en forme du contenu. --- - Dans sa forme la plus simple, un document HTML peut être constitué exclusivement de texte brut. - La plupart du temps cependant, il est parsemé de "code" permettant de mettre en forme le texte, et bien souvent, il contient des "références" vers d'autres fichiers. --- - Les fichiers HTML sont donc des "porteurs de contenu". - Par "contenu", on entend "texte", "images", "vidéos", etc. --- Différents types de fichiers peuvent être référencés dans un document HTML, comme par exemple : - Des images (JPEG, GIF, PNG...) - Des fichiers JavaScript, écrits dans un langage dont la fonction principale est de faire - interagir la page web avec l'utilisateur, sans envoyer de nouvelle requête au serveur - (exception faite du mécanisme AJAX, traité plus loin) - Des fichiers CSS, dont le rôle est de "maquiller" la page rendue à l'écran --- Quand on emploie le terme "HTML", il peut donc s'agir, soit du fichier en lui-même, dont l'extension est `.html`; soit du langage de mise en forme lui-même, qui répond à diverses règles. --- ### Le W3C - W3C signifie **World Wide Web Consortium**. - C'est un organisme à but non lucratif dont le but est de normer et standardiser le Web. - Il veut promouvoir la compatibilité des technologies du World Wide Web (notamment HTML, HTML5, XML, CSS...). - Il définit les règles à suivre par les développeurs, et le comportement que les navigateurs doivent adopter pour ces règles. - Par exemple, il va définir la liste des balises HTML, et la sémantique de chacune d'elles. --- - Chaque développeur doit utiliser les balises de cette liste pour être certains que la plupart des navigateurs puisse afficher correctement le code HTML produit. - Il est fondé en 1994 par _Tim Berners-Lee_ et fonctionne à présent comme un consortium international. - A l'heure actuelle, le W3C compte environ une centaine d'employés et a environ 400 partenaires dans le monde. - Ensemble ils sont garants du bon respect de la charte de fonctionnement du W3C. --- Les plus grands partenaires du W3C sont : - Les éditeurs des navigateurs (Mozilla Fondation, Microsoft, Apple ou Opera) - Les centres de recherches (Inria, National Research Council Canada, etc.) - Les opérateurs de réseaux --- La leitmotiv du W3C est : > "Un seul web partout et pour tous" Et leur devise est : > "Leading the Web to its full potential" --- ## Les outils pour les développeurs --- ### Les navigateurs - Un navigateur web est un logiciel conçu pour consulter et afficher des pages web. - Les plus utilisés à l'heure actuelle sont Google Chrome, Mozilla Firefox, Edge, Internet Explorer et Safari. --- - Chrome et Firefox ont un **inspecteur d'éléments HTML**, accessible via le clic droit de la souris puis l'option **Inspecter l'élément**. - On y retrouve toutes les fonctionnalités de base relatives à l'inspection du document (HTML), des fichiers (CSS, JS, images…), ainsi qu'un panel d'informations pour visualiser tout ce qu'il se passe en temps réel (chargement, requête, etc.) ---  --- ### Présentation de l'éditeur de texte - Les éditeurs de texte sont spécialisés pour le développement et sont particulièrement populaires pour leur performances, leurs fonctions riches et leurs modularités. - Pour cette formation retenons **Visual Studio Code** --- #### Un éditeur de texte Orienté développement Parmi les nombreuses fonctionnalités disponibles, voici les principales à retenir : - Coloration syntaxique (adapte la coloration du code selon le langage et sa syntaxe) - Auto-complétion (propose des noms de fonctions, variables ou autre en fonction de ce qui est - tapé) - Possibilité d'ouvrir un dossier complet afin de parcourir et trouver rapidement un fichier - directement depuis l'éditeur --- - Possibilité d'ajouter des thèmes de coloration, d'interface et des extensions pour ajouter - de nouvelles fonctionnalités - Sélection et édition en parallèle de plusieurs endroits dans un même fichier. - Recherche et remplacement multiples par expression régulière --- ### Raccourcis clavier Ne sous-estimez pas le temps que vous allez gagner en utilisant des raccourcis clavier ! Prenez donc l'habitude de les découvrir dans l'interface des logiciels que vous utilisez et surtout de les utiliser. :::info - [Les raccourcis universels <i class="fa fa-external-link-square" aria-hidden="true"></i> ](https://hackmd.io/@alternative-rvb/raccourcis-windows-10) - [Les raccourcis VS-CODE <i class="fa fa-external-link-square" aria-hidden="true"></i> ](https://hackmd.io/@alternative-rvb/raccourcis-vs-code) ::: --- #### Rappel des raccourcis similaires aux autres logiciels En voici quelques raccourcis universels : - `CTRL` + `C` — copie dans le presse-papier le texte sélectionné (copy, copier) - `CTRL` + `V` — colle dans l'éditeur de texte le texte que vous aviez préalable copié (paste, - coller) - `CTRL` + `X` — copie dans le presse-papier le texte sélectionné (comme CTRL-C) et en plus supprime ce texte (cut, couper) - `CTRL` + `S` — enregistre le fichier courant. Ce raccourci est extrêmement répandu pour tous les logiciels qui permettent d'éditer du texte. --- - `CTRL` + `O` — Ouvrir un fichier ou dossier - `CTRL` + `W` — Fermer le fichier en cours - `CTRL` + `F` — permet d'effectuer une recherche à l'intérieur du fichier courant --- #### Fonctions spéciales - Le plus important à retenir — **`CTRL` + `Maj` + `P`** - Il permet d'accéder à la palette des commandes. Toutes les commandes spécifiques à l'éditeur y sont listées. ---- #### Aller à - `CTRL + P` — Lorsque vous avez un dossier ouvert ou plusieurs fichiers, vous permet d'accéder - directement à un fichier spécifique où qu'il soit simplement en tapant une partie de son nom. - `CTRL + G` — Permet d'accéder directement à une ligne spécifique du fichier en cours en tapant son numéro ---- #### Manipulation de texte - `TAB` ou `Maj + TAB`: Indenter/Désindenter la ligne ou la sélection. - `ALT + ↑, ↓` — Déplace la ligne courante au dessus ou au dessous. - `CTRL + :` — Commenter / Décommenter la ligne courante. ---- Pour écrire une balise HTML vous pouvez utiliser **emmet** (plugin par défaut). Lorsque vous taper le nom d'une balise VS-CODE vous permet d'auto-compléter la balise. Lorsque celle-ci est reconnu une petite clé apparait. Il ne vous reste plus qu'a taper sur entrée.  --- ### Arborescence de fichiers, organisation, raccourcis clavier, bonnes pratiques - L'idéal avec les éditeurs de texte, c'est d'ouvrir le dossier entier du projet. - Cela permet d'avoir toute l'arborescence dans la barre latérale de gauche, et d'avoir tous les fichiers ouverts du projet en onglets d'une seule fenêtre, et non une fenêtre par fichiers. --- #### Arborescence des fichiers et organisation - Le dossier de votre site doit contenir au minimum un dossier dédié aux images ("📂 images") et un autre dédié aux feuilles de style ("📂 styles"). --- Exemple d'arborescence : ```mermaid graph TB root("📂root/")-->index("📄 index.html") root-->page("📂pages/") style index stroke:#f00 root-->resources("📂resources/") resources-->img1("📂images/") resources-->video("📂videos/") resources-->font("📂fonts/") img1-->png("🖼️ logo.png") img1-->jpg("🖼️ banner.jpg") root-->styles("📂styles/") styles-->styleCSS("📄 main.css") styles-->img2("📂images/") root-->scripts("📂scripts/") scripts-->js("📂js/") ``` ---- - /index.html - /images/fond.png - /css/style.css --- Contenu du fichier `style.css` : CSS ```css body { background-image: url('../img/fond.png'); } ``` --- - La première partie du chemin `../` permet de remonter au niveau parent de l'arborescence par rapport à l'emplacement du fichier CSS, c'est-à-dire la racine du projet. - Vous pourriez également décider de positionner le dossier img en tant que sous-dossier de css et le chemin de fichier pour la propriété background-image serait alors tout simplement : `img/fond.png` --- ### Les extensions - Plugins :::info [Comment installer des plugins dans VS-CODE <i class="fa fa-external-link-square" aria-hidden="true"></i> ](http://hackmd.io/@alternative-rvb/plugins-vs-code) ::: - De manière général les éditeurs de texte sont modulaire et permettent d'ajouter des plugins afin d'y intégrer de nouvelles fonctionnalités. - Vous trouverez en général un gestionnaire de plugins. - Une fois les plugins installés, il suffit alors d'utiliser le raccourci `ctrl + maj + P` afin de faire apparaître le champ de lancement de commandes, et de taper le nom de la nouvelle fonctionnalité. <!-- Insérer la liste des plugins --> --- ### Terminologies, définitions, jargon - Pendant cette première journée, vous avez certainement entendu beaucoup de termes techniques. - Le jargon ne s'apprend pas en un jour, mais tentez tout de même de retenir les principaux termes. - Il sera alors plus facile de communiquer entre développeurs ! --- #### Les différentes disciplines - **Intégration web :** la technique permettant de créer une page web, basée sur les langages HTML et CSS. - **Développement web :** contrairement à l'intégration web qui décrit la programmation "statique", le développement est utilisé pour décrire la programmation dynamique. Que ce soit du développement front, côté client (JS), ou du développement back, côté serveur (PHP…) --- #### Un peu de vocabulaire - **Langage :** c'est un ensemble de règles et de syntaxe, qui permettent de décrire un état ou une action. - **Code :** lignes écrites dans un langage de programmations. - **Éditeur de texte :** Logiciel dans lequel on écrit notre code. - **Navigateur :** Logiciel permettant d'afficher des pages web, qu'on appelle aussi « client ». Chrome ou Firefox par exemple. <!-- réf supp --> --- ## Le HTML - **HTML :** Langage permettant de décrire le contenu d'une page web. - **Balise :** Element syntaxique de base du langage html : `<balise>`. Par exemple, pour un paragraphe : `<p>`. - **Attribut :** Un attribut HTML permet d'ajouter une information sur une balise HTML : `<balise attribut="valeur">`. Par exemple, pour un champ de saisie : `<input type="text">` --- ### Syntaxe, balises et attributs Une page HTML est composée de plusieurs balises qui définissent les différents éléments de la page (un titre, une image, un menu, un paragraphe, ...) Une balise HTML est délimitée par une balise ouvrante `<balise>` et une balise fermante `<\balise>` et est qualifiée par des attributs.  --- ### Syntaxe générale d'une balise HTML ```html= <balise ...="" attribut1="valeur1" attribut2="valeur2"> "contenu de la balise" </balise> ``` ---  --- ### Règles d'écriture des balises HTML - Les balises (nom, attribut) doivent être écrites en **minuscule** - Les valeurs des attributs doivent être encadrées par des **guillemets** : "valeur" - Il faut toujours **"fermer"** les balises (c'est à dire : écrire la balise fermante correspondante) - Une balise peut contenir également du texte et/ou d'autres balises (la balise parent contient des balises enfant) - Il faut **indenter** les balises enfants. - On ne peut pas fermer une balise parent sans avoir fermé la balise enfant --- :::danger **PAS BIEN** : `<div><p>mon paragraphe</div></p>`, la balise parent `</div>` est fermée avant la balise enfant `<p>` ::: :::success **BIEN** : `<div><p>mon paragraphe</p></div>`, la balise enfant `</p>` est fermée avant la balise parent `<div>` ::: --- ### Balises fermantes et auto-fermantes Les balises de type auto-fermantes sont des balises qui sont ouvrantes et fermantes en même temps. Cela signifie qu'elles ne contiennent pas de contenu. On ferme donc la balise en ajoutant un espace et un slash `/` à la fin de la balise avant le symbole `>`. Quelques balises auto-fermantes : - `<link />` - `<meta />` - `<input />` - `<img />` --- ### Création de l'index Voilà le contenu du fichier nommé index.html : ```html <!DOCTYPE html> <html lang="fr"> <head> <!-- Cette partie n'est pas affichée et ne concerne que le navigateur --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titre du document</title> </head> <body> <!-- Ceci est un commmentaire sur plusieurs lignes Les commentaires ne sont pas affichés Insérez le contenu du site après --> </body> </html> ``` <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> --> --- ### Le Doctype - `<!DOCTYPE>` Permet d’indiquer la version du code utilisé. - `<!DOCTYPE html>` correspond à la norme HTML 5. Donc le navigateur sait qu’il va interpréter du HTML 5 ! Les balises doivent donc respecter la version. On a différents Doctypes (aller voir sur Internet - [ici](https://www.w3schools.com/tags/tag_doctype.asp "Description du doctype") ). --- ### head - Les balises `<head></head>` sont **obligatoires**. Elles indiquent des informations destinées au navigateur. - Les informations qu'elles contiennent ne s'affichent pas dans le navigateur. :::danger Attention de ne pas confondre avec `<header></header>` 🧐. ::: --- ### title - le titre à la page `<title></title>` Donnent un titre à la page. Il s'agît du titre de l'onglet. --- ### meta name="viewport" :::info [Voir aussi l'article suivant <i class="fa fa-external-link-square" aria-hidden="true"></i>](https://hackmd.io/@alternative-rvb/meta-viewport) ::: `<meta name="viewport" content="width=device-width, initial-scale=1.0">` Le `viewport` correspond à la partie de la page affichée à l'écran. ---- Le méta tag `viewport` dicte au navigateur quel comportement il doit adopter pour afficher une page ; vous pouvez spécifier la largeur qu'adoptera le `viewport`. ---- Par exemple si vous visitez un site Web depuis un appareil mobile, et qu'à l'écran s'affiche le coin haut gauche de la page (comme s'il y avait un zoom) c'est que le `viewport` a été défini à une certaine largeur. En revanche, si la page entière du site s'affiche et qu'elle occupe tout votre écran, c'est que le `viewport` a été défini pour afficher toute la page. ---- Ci-dessous un exemple d'utilisation du méta tag `viewport`. ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ``` ---- Cette ligne définit la largeur du `viewport` pour être la même que la taille de l'écran de l'appareil utilisé pour afficher le site. L'échelle d'affichage du site sera 100 % et l'échelle maximum également de 100 %. ---- Chaque navigateur mobile dispose de son propre `viewport` par défaut, la plupart de ces navigateurs utilisant un `viewport` par défaut de 980px ce qui signifie que la page sera affichée dans une section d'affichage de 980 pixels et qu'un zoom arrière sera effectué si nécessaire pour que la page s'affiche en plein écran. ---- Plus l'écran de votre appareil sera petit plus le zoom arrière sera important. Si vous comparez l'affichage d'une même page Web sur un iPhone et sur un iPad, le zoom sera plus important sur l'iPhone que sur l'iPad. Changer la valeur du `viewport` vous permet de personnaliser la façon dont le navigateur va afficher votre site. --- ### body - Le corps de la page `<body></body>` contiennent le contenu de la page. Ces balises sont obligatoires. C'est entre ces balises que vous allez intégrer des éléments afin de les afficher. Toute votre page est construite dans "body" ---  --- ### Les balises sémantiques Avec l'arrivée de HTML5, voici les nouvelles balises qu'il est possible d'utiliser : - `<main>` : principal contenu de la page, un seul élément `<main>` par page. - `<section>` : définit une section regroupant des éléments par similarités ( thématique, - fonctionnelle, applicative, ... ) - `<article>` : balise des blocs de contenu utiles que l'on pourrait extraire du document tout en - conservant leur sens et leurs informations. --- - `<header>` : définit l'entête d'un document, d'une **section** ou d'un **article** - `<footer>` : définit le pied de page, d'une **section** ou d'un **article** --- - `<aside>` : permet de spécifier du contenu annexe à un élément de la page ( définition d'un mot, - biographie de l'auteur de l'article, ... ) - `<nav>` : permet de spécifier les éléments de navigation de la page ou de navigation interne - `<figure>`: sert de conteneur pour divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. Peut contenir une balise `<figcaption>` afin de donner un - titre à un ou plusieurs éléments contenu dans cette balise `<figure>` - `<time>` : représente une date et/ou un temps --- #### Le header - `<header></header>` C’est l’en-tête de la page. On va donc englober le haut avec header. Souvent on y trouve le logo `<img>` et la navigation `<nav>` --- #### Le menu - `<nav></nav>` est une section de navigation. On y trouve souvent des listes`<ul> <li> </li> </ul>` contenant des liens `<a></a>`. ```html <ul> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> <li><a href="#">Lien</a></li> </ul> ``` --- - Ces listes sont mises en forme ensuite grâce à des CSS. - Une section contenant des liens est souvent incluse dans une `<nav>`. - Aller voir quelques sites au fur et à mesure et inspecter le code source. Certains ont des `div`, des `nav`... --- #### Le contenu - `<main></main>` C’est le contenu principal du site. - `<article></article>` Afin de séparer chacune des actualités et les individualiser. - `<section></section>` Permet d'organiser le contenu à l'aide de section - `<aside></aside>` Tout ce qui est annexe (de la pub, les liens des partenaires….). --- #### Les titres - `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`. - `<h1></h1>` est important à travailler car c’est l’élément clé en termes de référencement, on le choisit en corrélation avec le **champ lexical** de la page Web. Le titre h1 est davantage référencé que h2 etc. la taille de la police est ensuite définie via le CSS. --- #### Les paragraphes - `<p></p>` contient des zones de texte. Autant de p qu’on a de paragraphes. Leur donner « Lorem ipsum » pour les textes (afin de séparer la forme du fond). --- #### Le texte important - `<strong><strong>` et `<em></em>` contienent des mots plus importants. --- #### les listes - `<ul> <li> </li> </ul>` constituent une liste à puce. Plus tard on gérera avec des CSS le style de ces listes. Dans ces listes on peut mettre ce qu’on veut. Du texte, des titres, des liens (`<a>`). - `<ol> <li> </li> </ol>` Liste avec numéros. Ne pas donner les numéros nous même dans le code ! --- #### Le pied de page - `<footer></footer>` Le pied de pages. On y trouve les mentions légales, les FAQ, les contacts etc…. Ajouter un pied de page en bas de notre page. `&nbsp` représente un espace. Ainsi on pourra en afficher plusieurs. --- #### Les images - `<img>` Sert à insérer une image. Par exemple **le logo**. :::warning ⚠ Attention aux copyrights des images que vous incluez dans vos pages ! ::: --- - `alt` sert au référencement ainsi qu’à l’accessibilité (navigateurs dédiés aux malvoyants). - `title` = infobulle. Il faut guider les utilisateurs ! - `<img>` est une balise particulière, elle n’a pas besoin d’être fermée (elle se ferme toute seule) --- ### Autres balises #### Les liens - `<a href="#"></a>` Représente un lien vers une "adresse". l'adresse est précisée via l’attribut `href`. `href = « # »` ne fait rien, retourne à la même page. #### Saut de ligne et séparateur - `<br>` Saut de ligne. Ou `<br/>` (HTML5 c’est `<br>`) - `<hr>` Insère une ligne. --- #### Les div et les span - `<div></div>` Ce sont des boîtes génériques de type block. - `<span></span>` Ce sontes boîtes génériques de type inline. Elles n'ont pas de valeur sémantique. Il est préférable de donner des identifiants et des classes à nos div, afin de les retrouver plus tard. --- ### Les tableaux - `<table>` Permet de créer des tableaux => à éviter. Mauvais pour le référencement. ```html <table> <tr> <th>En-tête 1</th> <th>En-tête 2</th> <th>En-tête 3</th> </tr> <td>Élément 1</td> <td>Élément 2</td> <td>Élément 3</td> </tr> <table> ``` ---- Par contre c’est simple à utiliser et efficace donc, pour un Intranet pour afficher des chiffres, pourquoi pas. Pour le texte, préférer les `<ul> <li>`. On peut mettre une bordure aux tables (pas valide W3C !). --- ### Les formulaires - `<form></form>` Conteneur principal du formulaire - `<input>` Champ de saisi. Nombre de caractère limité - `< texterea >< /texterea >` Champ de saisi libre. - `<button></button>` bouton de validation du formulaire. Il s'accompagne de l'attribut `type=submit` --- ## Le CSS Les CSS permettent de styliser une page html, il existe plusieurs méthodes pour ajouter des CSS à votre fichier HTML --- ### Séparation des concepts Comme leur nom l'indique HTML et CSS sont complémentaires, et ont chacun leur rôle : - HTML : _Hypertext Markup Language_ (ou _Langage de Balisage Hypertexte_) est un language de **structuration sémantique**, c’est à dire que l’on décrit la nature des objets constituant la page. - CSS : _Cascading Styles Sheet_ (ou _Feuilles de Styles en Cascade_) est un langage de **description de styles**. Il est incapable de créer du contenu, ou de modifier la nature de celui-ci. Il ne sert qu'à décrire son apparence. --- - `style=""`: Cet attribut HTML ajoute ou modifie le style CSS de l'élément qui le porte. C'est ici que l'on trouve les styles appliqués par le biais de JavaScript - `<style></style>`: Ces balises s'écrivent dans le `<head>` et permet d'y écrire les règles CSS. - `<link>`: (Couramment utilisé) Cette balise HTML permet de lier entre autres des feuilles de styles. Elle s'écrit dans le `<head>` de la page et permet d'y écrire les règles CSS. --- - `@import`: Cette règle CSS peut être utilisée de deux façons: - Entre les balises `<style>` et `</style>` dans la section `<head>` d'une page HTML - Au début d'un fichier CSS, pour inclure une ou plusieurs autres feuilles de styles --- **Exemples :** Dans cet exemple le HTML sert de structure de texte et donne des informations sur sa nature: "paragraphe", "titre" ou "extrait" ```html <p>Hello World</p> ``` - Affiche le paragraphe: Hello World ---- All your bases are belong to us --- - Dans cet exemple le CSS n’a pas ajouté de contenu, ni modifié la nature, ni la structure des éléments. ```css p { color: blue; font-size: 50px; } ``` - Grâce au CSS on affiche le paragraphe en bleu et on agrandit la police. - L'avantage de cette séparation des concepts est de pouvoir modifier la structure du html sans se soucier des styles associés et réciproquement changer l'apparence sans mettre à jour la structure. --- ### Attribut HTML `style` ```html <div style=”background-color:white; width:150px;”></div> ``` --- ### Balise - Dans le head d'un fichier HTML avec la balise link : ```html <link href='./chemin/vers/styles.css' rel='stylesheet' type='text/css' media=”all”/> ``` - ou bien directement entre les balise `<stle></style>` ```html <style> div { background-color:white; width:150px; } </style> ``` --- ### Règle @import - Dans le head d'un fichier HTML : ```html <style> @import url("styles/layout.css") </style> ``` --- ### Dans un fichier CSS ```css @import url("styles/styles.css"); ``` ou : ```css @import "styles/module.css"; ``` --- ### Syntaxe, sélecteurs simples, propriétés - La syntaxe du CSS est très simple, celui-ci n'étant pas un langage de programmation. - La syntaxe est toujours la même : ```css element { propriété: valeur; } ``` --- - Nous devons tout d'abord indiquer quel élément de la page nous voulons styliser. - Pour cibler un ou plusieurs éléments dans l'arbre HTML, il existe plusieurs méthodes : - Cibler la balise (l'élément lui-même) - Cibler son `#id` - Cibler sa `.classe` - Cibler un attribut --- **Exemples** - Prenons cette balise HTML ```html <div id="mon_id" class="box-example" title="example">Lorem ipsum dolor sit...</div> ``` --- - Nous pouvons la sélectionner de plusieurs façon en CSS ```css /* Avec l'id */ #mon_id { propriete: valeur; } /* Avec la class */ .box-example { propriete: valeur } /* Avec l'élément */ div { propriete: valeur } /* Avec un attribut */ [title="example"] { propriete: valeur } ``` --- ### Dimensions et marges - Pour structurer nos éléments nous pouvons définir la dimensions de leur zone de contenu grace aux propriétés `width` et `height` de la manière suivante: ```css .element { height: 100px; /* les dimensions peuvent être exprimé de plusieurs façon: px, rem, % */ width: auto; /* elle peut aussi prendre la valeur auto */ } ``` --- **La zone de contenu est à l'intérieur du padding, des bordures et marges de l'élément.** - `padding` est la marge interne de notre élément qui sépare le contenu du bord - `border` défini la limite entre l'intérieur et l'extérieur - `margin` est la marge externe séparant notre élément de ceux qui l'entourent --- - Ces trois propriétés ont en commun qu'elles peuvent être définies indépendamment pour chacun des côtés de notre élément: ```css .element{ margin-top: 10px; margin-right: 5%; padding-bottom: 3em; border-left: 1px solid gray; } ``` --- - Il est possible d'utiliser des notations courtes afin de définir plusieurs côtés à la fois. ```css .element{ margin: 5%; /* tout les côtés ont une marge de 5% */ margin: 10px; /* tout les côtés ont une marge de 10px */ margin: 1.6em 20px; /* le haut et le bas ont une marge de 1.6em et la gauche et la droite de 20px */ margin: 10px 3% 1em; /* le haut a une marge de 10px, la gauche et la droite de 3% et le bas de 1em */ margin: 10px 3px 30px 5px; /* le haut a une marge de 10px, la droite de 3px, le bas de 30px et la gauche de 5px */ margin: 1em auto; /* la marge pour le haut et le bas est de 1em et le bloc est centré horizontalement */ margin: auto; /* le bloc est centré horizontalement, la marge pour le haut et le bas est de 0 */ } ``` --- ### Éléments inline et éléments block - Il y a deux comportements pour les balises : les balises **ligne** et les balises **bloc**. - Certaines se mettent les unes à côté des autres et d’autres se mettent les unes en dessous des autres.  --- En HTML la plupart des balises ont un comportement par défaut par exemple: - Les éléments comme `div`, `p`, `header`, `footer` renvoient les éléments à la ligne peu importe leur contenu, ils ont un comportement de type **block**. - Les éléments comme `span`, `em`, `label` ont un comportement **inline**, c'est à dire qu'ils s' enchainent à la suite des un des autres dès que leur contenu est fini: --- ```html <!-- Comportement `inline`--> <span> Cette phrase est </span> <span> sur une seule ligne</span> <!-- Comportement `block` --> <div> Cette phrase</div> <div>passe à la ligne</div> ``` --- :::danger Attention certaines propriétés ne fonctionnent pas avec les balises inline. ::: ```css span { background-color: red;/*YES*/ color: white;/*YES*/ padding: 50px;/*YES*/ margin-top: 200px;/*NO*/ margin-bottom: 200px;/*NO*/ margin-left: 50px;/*YES*/ width: 200px;/*NO*/ height: 200px;/*NO*/ } ``` --- - Mais ce comportement est modifiable grâce à la propriété CSS `display` ```css span { /* Par défaut en ligne*/ display: block; /* Donne le comportement bloc */ } div { /* Par défaut en bloc*/ display: inline; /* Donne le comportement en-ligne */ } ``` --- ### Mise en forme typographique avec les CSS - Les textes sont les éléments les plus importants dans une page, ils représentent la majorité du contenu. - Il est important de bien les styliser. --- - `color` : définit la couleur du texte, cette couleur peut être exprimée de plusieurs façons: nomdelacouleur, `#RGB` | `#RRGGBB` (notations hexadécimales) et `rgb(RRR, VVV, BBB)` (notation - décimale). - `font-size` : définit la taille du texte, celle-ci peut être exprimée en px (pixels) , pt- `(points),` em ou rem. - `font-family` : définit la police à utiliser, notez qu'il est possible de définir plusieurs alternatives au cas où l'on ne puisse utiliser la première. --- - `font-weight` : définit le poids de la police, il peut être défini par des mots clés tels que - `bolder ,` lighter ou par des multiples de `100` (entre `100` et `900`). - `text-transform` : permet de modifier la casse d'un texte avec les mots-clés suivant - `capitalize,` uppercase, lowercase, none. - `text-decoration` : permet de souligner, surligner ou barrer un texte avec les mots-clés - underline, overline, ligne-through. --- **Exemples** CSS ```css .extrait { /* Color */ color: LightSlateGray; /* Mot clé de la couleur */ color: #778899; /* Notation Hexadécimale */ color: rgb(119, 136, 153); /* Notation Décimale*/ /* Font Size */ font-size: 15px; /* Pixels */ font-size: 12pt; /* Points */ font-size: 1em; /* EM */ font-size: 1rem; /* Root EM */ /* Font Family */ font-family: Helvetica, Arial, sans-serif; /* Si Helvetica n'est pas présente c'est Arial qui sera chargé */ /* Font Weight */ font-weight: bolder; /* Mot clé */ font-weight: 900; /* Text Tranform */ text-transform: uppercase; /* Text Decoration */ text-decoration: underline; } ``` --- ### Ajout d'images en CSS - Les images en CSS s'utilisent grâce à la propriété background-image avec la syntaxe suivante: CSS ```css .my-bloc { background-image: url("chemin/vers/image.png"); } /* Un élément HTML peut avoir plusieurs images d'arrière plan */ .my-bloc { background-image: url("chemin/vers/image.png"), url("chemin/vers/image2.png"); } ``` --- - Les images CSS sont des décorations contrairement aux `<img>` HTML et peuvent être positionnées et répétées grâce aux propriétés complémentaires: - `background-position` indique la position initiale de l'image - `background-size` indique la dimension de l'image - `background-repeat` indique comment l'image doit être répétée --- CSS ```css .my-bloc { background-image: url("chemin/vers/image.png"); background-position: center center; background-size: auto; background-repeat: no-repeat; } /* ou en version courte */ .my-bloc { background: url("chemin/vers/image.png") center center auto no-repeat; } ``` --- ### Positionnement en CSS, premiers pas - Le positionnement normal des éléments HTML correspond à l'ordre dans lequel ils sont déclarés. - Cette liste d'éléments successifs définit un flux d'éléments se suivant les un les autres, qu'ils soient block ou inline. - Lorsqu' une série d'éléments se trouve à l'intérieur d'un autre, celle-ci possède son propre flux relatif à son conteneur. --- ### Reset et Normalize - Tous les navigateurs appliquent des propriétés et valeurs par défaut en CSS pour les différents éléments HTML. - Par exemple, la plupart d'entre eux appliqueront `list-style-type: disc`; sur les `<ul>` afin d'afficher systématiquement les éléments de la liste avec une puce. --- - Chrome et Firefox appliquent également un padding de `40px` sur ce même élément, afficher d'afficher proprement la puce et le texte indenté. - Cela peut vous poser problème si vous vous contentez de re-définir `list-style-type` par exemple, vous pourriez avoir un padding différent selon le navigateur. --- - Il est courant d'utiliser dans ce cas là d'utiliser un Reset ou Normalize. --- - Le **Reset**, au nom plutôt explicite, va se contenter de mettre toutes les propriétés de tous les éléments HTML à 0 ou une valeur similaire, de façon à ce que ce soit pareil pour tous les navigateurs. - Mais cela signifie que vous devrez ré-définir certaines propriétés pour que le contenu s'affiche convenablement dans certains cas. - Les balises bet strong n'afficheront plus le contenu en gras par défaut, et les listes n'auront plus du tout de puce. --- - **Normalize** part du même principe que le reset — avoir le même rendu par défaut sur tous les navigateurs. - A l'exception qu'il ne va pas mettre toutes les propriétés à 0 ou équivalent mais tenter d'appliquer un style par défaut identique à tous. - Il prend en compte les spécificités de chaque navigateur et le plus souvent en tentant de corriger certains bugs propres à des navigateurs spécifiques. --- #### Utilisation Que l'on utilise l'un ou l'autre, ils doivent toujours être utilisé en premier avant tout autre style dans la page, pour la simple raison qu'ils sont destinés à changer les styles par défaut des navigateurs, et non à écraser les styles que l'on aura défini pour le projet. --- #### Reset - Le reset le plus utilisé est celui d'Eric Meyer, accessible sur [cette page](http://meyerweb.com/eric/tools/css/reset/), et s'utilise donc comme suit: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ma page</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/main.css" /> </head> <body> <!-- Le corps de ma page --> </body> </html> ``` - Le fichier `main.css` étant ici la feuille de style propre au projet, et donc appelée après le reset. --- #### Normalize - Normalize.css peut-être récupéré depuis [cette page](https://necolas.github.io/normalize.css/), et il s'utilise exactement de la même façon que le reset : ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ma page</title> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/main.css" /> </head> <body> <!-- Le corps de ma page --> </body> </html> ``` --- #### Les deux - Dans le cas où l'on souhaiterait utiliser les deux en même temps (bien que cela puisse faire beaucoup), le Reset doit être appelé avant Normalize auquel cas il risquerait d'en annuler les effets. - Pour en savoir plus [Voir le sujet](https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css#:~:text=The%20major%20difference%20is%20that,having%20no%20decoration%20at%20all.&text=Normalize%20CSS%20aims%20to%20make,browser%20styling%20consistent%20across%20browsers.) --- ### Sélecteurs avancés --- #### Les sélecteurs d'enfants, d'enfants adjacents et d'enfants successeurs --- ##### Sélecteur d'enfants `>` - Une balise enfant est directement imbriquée dans la balise de niveau supérieur (Penser à la relation père et enfant). - Une balise descendante est imbriquée dans une autre balise, mais il peut exister des niveaux intermédiaires (Comme un grand-père et un petit-enfant). --- Supposons le code HTML suivant : ```html <section id="content"> <div class="container"> <p>Paragraphe 1</p> <p>Paragraphe 2</p> </div> <p>Paragraphe 3</p> </section> ``` --- - Dans cet exemple, les paragraphes 1 et 2 sont définis dans des balises `<p>` descendants de la balise `<section>`. - Admettons que nous voulions ajouter un style particulier aux paragraphes faisant partie de la section content, mais uniquement s'ils ne sont pas imbriqués dans une balise intermédiaire. - On pourra alors utiliser le sélecteur d'enfant >. ```css section#content > p ``` - Le style qui suivra concernera uniquement le paragraphe 3. --- ##### Sélecteur d'enfants adjacents `+` - Notation : `A + B`. L'enfant adjacent est l'élément `B`, ayant le même parent que `A` et le suivant immédiatement. - Exemple : ```html <body> <h1>Menu</h1> <h2>Filets de merlu au pinot des charentes</h2> ... <h2>Risotto asperges-citron vert</h2> </body> ``` - Le sélecteur `h1 + h2` vise la première balise `<h2>`, car c'est la seule à suivre directement une balise `<h1>` --- ##### Sélecteur d'enfants successeurs `~` - Il est moins exigeant que le sélecteur précédent. - Là ou le sélecteur `A + B` vise le premier élément `B` suivant `A`, `A ~ B` sélectionnera l'ensemble des éléments `B` suivant un élément `A`. --- - Par exemple, considérons le code HTML suivant : ```html <div>Voici un div</div> <section id="first"> Arabica </section> <p>Premier paragraphe.</p> <section id="second"> Robusta </section> <h2>La même liste</h2> <section id="third"> Blend </section> ``` - Le sélecteur `section + div` ciblerait la première liste (`#second`). Le sélecteur `p ~ section`, quant à lui, permettra de modifier le style de `#second` et de `#third`. --- #### Les pseudo-classes - Une pseudo-classe permet d'appliquer une décoration à un élément sur des critères qui ne sont pas forcément du ressort du code HTML, par exemple l'état d'un élément de formulaire (case cochée, champ en cours d'édition..). --- ##### Éléments survolés `:hover` - Il est possible d'ajouter un style à un élément lorsque le pointeur de la souris survole celui-ci. - Il suffit de préciser dans le sélecteur la pseudo-classe :hover à la fin de celui-ci. --- ##### Éléments sélectionnés `:focus` - Permet de modifier le style d'un élément qui reçoit le "focus". - Cela sera fait, soit en cliquant sur l'élément concerné, soit en utilisant le clavier (appui sur la touche "Tabulation"). --- ##### Éléments actifs `:active` - Cette pseudo-classe permet de définir l'apparence d'un élément au moment ou l'utilisateur clique dessus. - Il s'agit généralement d'un élément `<button>` ou `<a>`, mais elle peut être utilisée dans d'autres cas. --- ##### Premier enfant `:first-child` - Cette pseudo-classe ne dépend pas vraiment de l'utilisateur, mais elle comble un manque dans les opérateurs de sélection `+`, `>` ou encore `~`. - Elle permet d'atteindre le premier élément parmi les autres du même parent, correspondant au sélecteur. --- - Considérons le code HTML suivant : ```html <div> <span>Hello, Dolly</span> <span>Basin Street Blues</span> <span>Blueberry Hill</span> </div> <div> <span>Moonlight in Vermont</span> <span>A-Tisket A-tasket</span> <span>I Got Rythm</span> </div> ``` --- - Ainsi que la feuille de style liée : ```css span:first-child { font-size: 200%; } ``` - La directive contenue dans le fichier CSS doublera la taille de la police des premiers éléments de chaque `<div>` : "Hello, Dolly" et "Moonlight in Vermont". --- ### Priorité et poids des sélecteurs ---  <!-- Parler des priorités --> <!-- Voir jeux --> --- - Toutes les règles CSS ne naissent pas égales. - Si l'une d'entre elles spécifie que le titre doit être rouge et une autre spécifie qu'il doit être bleu, il faut un moyen de départager les deux. - C'est pour cette raison que tous les sélecteurs et pseudo-sélecteurs ont un poids. - Plus une règle a de poids, plus elle a d'importance et plus elle aura donc de chances de prendre le dessus. --- - Ce poids est défini en fonction du type de sélecteur utilisé; du plus léger au plus lourd - Sélecteurs universels `*` - Sélecteurs de tags `div` et pseudo-éléments `:before` - Sélecteurs de classe `.titre`, d'attributs `type="radio"` et pseudo-classes `:hover` - Sélecteurs d'id `#footer` --- - Autrement dit : :::info `*` < balise < class < class + class < id < inline style < !important ::: ---- De manière synthétique en ajoutant les "layers" ```code @layer theme1 < @layer theme2 < * < sélecteur de balise = pseudo-éléments < pseudo-classes = sélecteur de classe < sélecteurs de classes combinés < sélecteur d'ID < style en ligne < !important ``` --- Ce schéma montre que : 1. Les styles déclarés dans `@layer theme2` ont la priorité sur les styles déclarés dans `@layer theme1`. 2. Ensuite, la priorité des styles à l'intérieur de chaque couche dépend de la spécificité des sélecteurs, des styles en ligne et de l'utilisation de `!important`. --- - Les pseudo-éléments (par exemple, `::before` et `::after`) ont la même spécificité que les sélecteurs de balise. - Les pseudo-classes (par exemple, `:hover`, `:focus`, `:active`) ont la même spécificité que les sélecteurs de classe. - Les styles en ligne ont une spécificité supérieure aux sélecteurs d'ID. --- HTML ```html <div id="conteneur" class="parent"> <div class="zone"> <span>Bla bla</span> </div> </div> ``` CSS ```css #conteneur span { color: green; // Le sélecteur d'id a plus d'importance que le sélecteur de classe, la couleur sera donc verte } .zone span { color: red; } ``` --- - Le poids augmente aussi même si on utilise plusieurs sélecteurs de même type. ```css .parent .zone span { // Cette règle l'emporte, il y a deux sélecteurs de classe color: yellow; } .zone span { // Il n'y a qu'un sélecteur de classe ici, cette règle est considérée comme moins importante color: pink; } ``` - Si deux règles ont un poids égal, c'est la dernière écrite qui l'emporte. --- - Aussi, une règle écrite dans un attribut style prendra le pas sur toutes les autres. :::info Il y a une exception, `!important` qui aura toujours la priorité la plus haute. ::: --- ### Positionnement CSS, solutions avancées - `position` permet de spécifier un positionnement particulier pour l'élément en question. - Plusieurs valeurs sont possibles : - `static` - `relative` - `absolute` - `fixed` --- - `static`, qui est la valeur par défaut dispose les éléments selon leur flux naturel. - `relative` dispose tout d'abord les éléments dans leur flux naturel et les déplace ensuite d'une distance égale aux valeurs top|right|bottom|left sans modifier l'agencement des éléments voisins. Visuellement, l'élément a été déplacé mais ses voisins sont placés comme s'il était à son emplacement initial. --- - `absolute` fait sortir l'élément du flux: le moteur de rendu ne prévoit pas d'espace pour lui. Son point de référence devient le parent positionné (qui a une position autre que `static`) le plus proche. Si tout ses parents sont `static`, il sera positionné par rapport à la racine html. --- - Les valeurs `top` | `right` | `bottom` | `left` déplacent l'élément par rapport à ce point de référence. - Pour les éléments en `fixed`, le moteur ne prévoit pas d'espace pour eux non plus. - Ils sont placés à la position spécifiée et ce de façon relative à la fenêtre d'affichage. - Concrètement, cela veut dire qu'un élément en `position: fixed` restera à la même position sur l'écran lorsque l'utilisateur scrolle dans la page. --- ### Images : notions supplémentaires - Deux propriétés supplémentaires sont disponibles pour placer les images de fond (background) en CSS : - `background-repeat` - `background-position` --- - `background-repeat` sert à définir une répétition ou non de l'image. Peu utilisée quand l'image est une photo, elle devient très utile en trame de fond. - La valeur `repeat` fait se répéter l'image sur les axes horizontal et vertical, `repeat-x` sur l'axe horizontal seulement et `repeat-y` sur l'axe vertical seulement. `no-repeat` ne fait afficher l'image qu'une seule fois. - `background-position` définit l'emplacement initial de l'image de fond par rapport à son conteneur. Par défaut, la propriété prend les valeurs 0 0, le fond est ainsi placé tout en haut à gauche. --- - `background-position : 50px 200px`; place l'image de fond à `50 px` à gauche et `200px` du haut du conteneur. - Les pourcentages fonctionnent de manière un peu différente : une valeur de `50%` placerait le milieu de l'image ( `50%` ) au milieu de son conteneur ( `50%` ). - Une valeur de `100%` place la partie droite de l'image à la droite de son conteneur, collant l'image tout à droite. --- - Des mots-clés peuvent être utilisés à la place des pourcentages : - `top` correspond à `0%` en vertical - `bottom` correspond à `100%` en vertical - `left` correspond à `0%` en horizontal - `right` correspond à `100%` en horizontal - S'il n'y a que des mots-clés d'utilisés, l'ordre n'est pas important, le contexte permet de comprendre la position de l'image. --- ### CSS3 --- #### Qu'est-ce que le CSS3 ? - CSS est l'abréviation de « _Cascading Style Sheets_ ». - CSS3 est la dernière version standard de CSS et est rétro-compatible avec les anciennes versions. - CSS3 est un langage qui permet de définir la présentation(mise en page) des documents HTML. - Il vous permet de choisir la police sur votre site, la couleur des textes et bien plus encore! --- - CSS3 gère notamment les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images, les arrière-plans, les positionnements, les animations, des effets, des actions, etc. - CSS3 est pris en charge par tous les navigateurs actuels. - Pour voir toutes les possibilités permises par le CSS3, consultez cette [article](https://developer.mozilla.org/fr/docs/Web/CSS/CSS3). --- ### Les préfixes vendeurs - Ils sont apparus afin d'intégrer les propriétés CSS3 encore non-standardisées par le W3C. - Ce sont des préfixes à ajouter devant une propriété CSS. Chaque préfixe correspond à un moteur de rendu qui équipe différents navigateurs. - Vous avez donc compris, grâce à ce préfixe, seul certains navigateurs avec un tel moteur de rendu vas interpréter cette propriété CSS. --- Voilà les principales préfixes que vous pouvez utiliser : - `-webkit-` : préfixe pour le moteur WebKit, qui équipe Chrome, Safari, Opera... - `-moz-` : préfixe pour le moteur Gecko développé par Mozilla et qui est donc utilisé par - Firefox - `-ms-` : préfixe pour le moteur Trident développé par Microsoft, utilisé par Internet - Explorer - `-o-` : préfixe pour le moteur Presto, jusqu'à très récemment utilisé par Opera, qui a maintenant migré sur Blink, la version personnalisée de WebKit par Google (qui équipe aussi Chrome, donc). --- Exemple : ```css a { -webkit-transition: all 1s ease; } /* Seuls les navigateurs avec le moteur de rendu webkit vont interpréter cette propriété CSS de transition. */ ``` --- ### Principales nouveautés dans CSS3 - Les médias queries - Permet de répondre à l’essor de la mobilité avec le responsive design. - Des nouveaux sélecteurs très précis - Exemple : Sélecteur de ligne paires/impaires, élement - avec/sans enfant, du premier ou du dernier enfant, élément avec un texte donné, etc - Les arrière-plans multiples et les dégradés - Permet d'avoir plusieurs niveaux d'arrière - plans et faire des dégradé de couleurs sans passer par une image. --- - Les transitions CSS - Permet de faire des animations avec les éléments HTML et leur propiété - CSS. - Les polices non-standards - Avec la propriété @font-face qui permet de définir une police - externe que l’on pourra trouver à une url donnée. - La gestion de la transparence - Il est maintenant possible de jouer sur la transparence avec - la fonction `rgba`. - Les coins arrondis - Ce qui avant était une tâche ardue devient un jeu d'enfant avec la propriété `border-radius`. --- ### Fonts - Avant l'arrivée de CSS3, il était impossible d'utiliser des fonts personnalisées sur son site. - Seules les fonts standards étaient autorisées (`Arial`, `Helvetica`, `Times new roman`, etc). --- - Désormais grâce à la règle @font-face on peut à présent utiliser des polices de caractères non standards. - Tous les navigateurs web récents supportent cette fonctionnalité. --- - La police de caractères doit être placée sur un serveur et accessible en lecture. - Comme pour une image, elle sera chargée au moment de l'appel de la feuille de style dans laquelle est déclarée. --- - Comme pour les images, des droits d'auteurs s'appliquent donc. - Il faut donc n'utiliser que des fontes dont on est en accord avec la licence. - De plus, dans un souci de performance, il ne faut pas choisir des polices trop lourdes en poids pour le chargement de la page. --- Les différents formats de fontes pris en charge : - TrueType Fonts (TTF) - OpenType Fonts (OTF) - The Web Open Font Format (WOFF) - The Web Open Font Format (WOFF 2.0) - SVG Fonts/Shapes --- #### Embedded OpenType Fonts (EOT) - Pour voir la compatibilité avec les navigateurs, consultez cet [article](https://developer.mozilla.org/fr/docs/Web/CSS/@font-face). - Pour déclarer une nouvelle fonte dans votre feuille de style : ```css @font-face { font-family: maFontePersonnalise; src: url(/fonts/ma_fonte.woff); } ``` --- - Vous pouvez maintenant l'utiliser partout dans votre feuille de style ```css body { font-family: maFontePersonnalise; } ``` --- - Une petite particularité, si vous voulez utiliser votre fonte personnalisé en bold. - Vous devez déclarer une 2e règle font-face avec la propriété font-weight avec le même pour font-family. ```css @font-face { font-family: maFontePersonnalise; src: url(ma_fonte_bold.woff); font-weight: bold; } ``` --- :::warning ⚠ Attention cependant, tous les navigateurs n'acceptent pas tous les formats de fonts. Pour que la fonte soit compatible avec tous, il faut avoir la font sous [tous les formats](http://www.fontsquirrel.com/fontface/generator) et les déclarer dans l'attribut src. ::: ```css @font-face { font-family: 'maFontePersonnalise'; src: url('ma_fonte.eot'); src: url('ma_fonte.otf') format('truetype'), url('ma_fonte.woff') format('woff'), url('ma_fonte.eot') format('embedded-opentype'), url('ma_fonte.svg') format('svg'); } ``` --- #### Google Fonts - Google Fonts est un service d’hébergement gratuit de polices d’écritures pour le Web. - Ces fonts sont sous licences libres. - Google Fonts propose un large choix fonts de qualité et les héberge sur son CDN. - N'hésitez pas à les utiliser pour vos sites car ces fonts sont accessibles, de qualité et gratuits. --- ## Indentation et commentaires --- ### L'indentation - L'indentation consiste en l'ajout de tabulations dans un code source. - Elle permet : - de simplifier l'écriture d'un code - de faciliter la recherche de bug - d'améliorer la lisibilité du code écrit - d'optimiser la collaboration entre développeurs --- ### Les commentaires - Cette balise permet d’ajouter des commentaires dans du HTML : `<!-- Entrer un commentaire ici -->` - Le commentaire est une description (une ou plusieurs phrases) rédigée par le développeur et qui ne sera pas affichée dans la page. --- - En HTML, le commentaire est délimité par `<!--` et `-->`. - Ils permettent : - d'expliquer les décisions prises par le développeur - de noter des idées à réaliser plus tard - de donner des explications pour comprendre le code plus tard ou pour d'autres développeurs. --- Exemple de code indenté et commenté ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Connexion</h1> <!-- début div formulaire --> <div> <form> <!-- penser à rajouter un bouton submit pour valider le formulaire ! --> <div> <!-- YD : 25/08/2015: j'ai fait le choix ici de ne pas utiliser de fieldset, car les étudiants n'ont pas encore abordé cette notion. --> <label>Login</label> <input type="text" name="login" /> </div> <div> <label>Password</label> <input type="password" name="password" /> </div> </form> </div> <!-- fin div formulaire --> </body> </html> ``` --- - Un code propre et lisible facilite le travail, c'est pour cela que les conventions sont importantes. - Pour conserver une lisibilité, il est recommandé d'indenter les propriétés par rapport au sélecteur. - On peut également indenter les sélecteurs qui correspondent à des enfants. --- - Par exemple, pour le code html suivant : ```html <div class="widget"> <div class="widget-heading"></div> </div> ``` - On peut écrire le css suivant : ```css .widget { padding: 10px; border: 1px solid #BADA55; } .widget-heading { font-size: 1.5rem; line-height: 1; } ``` --- - Les commentaires sont importants pour donner des informations aux autres développeurs (ou à vous même). - Dans un fichier CSS qui peut devenir long, il est important d'indiquer en commentaire à quoi correspondent notre code, surtout lorsque le sélecteur n'est pas immédiatement compréhensible. ```css /* Menu de navigation */ #navigation { … } ``` --- ## Compatibilité - Avec la disparition progressive de Flash, ce qui manquait en HTML/CSS était le fait de pouvoir faire des animations poussées (ou même simples, sans nécessiter de nombreuses lignes de codes). - Ce qui était auparavant faisable uniquement avec du JavaScript qui interagissait sur le CSS est faisable uniquement en CSS3. --- - Il est donc possible de faire des effets simples (transitions), des effets plus poussées (animations), et combiner des effets de transformations. - Mais CSS3 c'est aussi les bords arrondis (border-radius), les options avancées sur les background-image et des sélecteurs avancés, entre autres. --- ### Les préfixes propriétaires - Les spécifications mettant du temps à être validées, les navigateurs ont souvent tendance à mettre en place une syntaxe qui les arrange en attendant qu'elle soit finalisée. - Ils utilisent donc des préfixes pour chaque propriété : - `-moz-` pour Mozilla Firefox - `-webkit-` pour Safari, Chrome et Opera - `-ms-` pour Internet Explorer et Edge --- - Néanmoins, Webkit ayant été le moteur le plus mis en avant grace à Chrome, certains navigateurs (comme Firefox) prennent désormais en compte le préfixe `-webkit-` bien qu'ils n'utilisent pas ce moteur de rendu (À noter cependant que Chrome et Opera utilisent Blink, un fork d'Opera créé par Google). --- ### Connaître le niveau de compatibilité des navigateurs - Les différentes versions des navigateurs ne sont pas toutes compatibles avec toutes les propriétés disponibles, que ce soit en CSS 3, HTML5, JavaScript, etc. - Il existe pour cela des sites qui recensent les différentes fonctionnalités/technologies et la compatibilité des navigateurs suivant leurs versions. --- - En voici deux indispensables pour avoir ce type d'information : - `caniuse.com`: Liste toutes les technologies front-end disponibles et leur compatibilité avec les différentes versions des navigateurs desktop et mobiles. Donne également la liste des bugs connus dans certains cas. - `html5please` : Un peu plus simpliste, liste également toutes les fonctionnalités que l'on peut utiliser sans se soucier de la compatibilité (ou non) sur un périmètre navigateur spécifique. --- ## Animer et transformer --- ### Les transitions - Les transitions, ce sont les animations CSS les plus simples à mettre en place mais aussi les plus basiques. - Elles concernent le changement de valeur d'une ou plusieurs propriétés sur un sélecteur, avec une certaine fonction de transition (accélération, etc.) pendant une durée spécifique. - Il peut s'agir par exemple de changer l'opacité d'un élément de `0.25` à `1.0` avec une transition en douceur plutôt que de passer directement de `0.25` à `1.0`. --- - Prenons par exemple un div, qui aura par défaut une opacité à `0.25`, et au survol on veut que son opacité passe à `1.0` : ```css .mydiv { opacity: 0.25; transition: opacity 1s linear; } .mydiv:hover { opacity: 1; } ``` - Ici, grace à la propriété transition quel l'on applique sur la propriété opacity uniquement (car il n'y a qu'elle qui change), on aura un effet de transition linéaire d'une seconde dès que cette propriété changera de valeur : ce qui est le cas au survol (hover). --- #### Transition, la propriété raccourcie - Un peu comme margin ou font, la propriété transition est une version raccourcie se décomposant en 4 autres propriétés : `transition: {transition-property} {transition-duration} {transition-timing-function} {transition-delay};` --- - `transition-property` : all (par défaut) ou la propriété sur laquelle on veut appliquer la transition - `transition-duration` : la durée de la transition (toujours préciser l'unité, sou ms) - `transition-timing`-function : le nom ou la fonction qui détermine la façon dont sont calculées les valeurs intermédiaires (exemple: linear, ease-in, etc.) - `transition-delay` : le délai avant que la transition démarre (même type de valeur que `transition-duration`) --- #### Transitions multiples - Il est tout à fait possible d'appliquer une transition différente par propriété, sur un même élément, et ce avec une seule déclaration de la propriété transition. - Il suffit pour cela de séparer les valeurs par des virgules : ```css .mydiv { opacity: 0.25; color: #FFFFFF; transition: opacity 0.5s, color 1s 0.5s; } .mydiv:hover { opacity: 1; color: #BBBBBB; } ``` --- - Ici on va appliquer 2 transitions différentes, la première sur opacity, d'un durée de `500ms` (`=0.5s`), puis la seconde sur color d'une durée d'une seconde mais avec un délai de `500ms` pour qu'elle démarre après opacity. --- #### Évènements JavaScript - Parfois il est nécessaire d'exécuter un script qu'à partir du moment où la transition est terminée. - Malgré le fait que celle-ci soit uniquement du CSS, des évènements JavaScript sont déclenchés par le navigateur sur l'élément lorsqu' une transition se termine. ```js var e = document.getElementById("monLien"); e.addEventListener("transitionend", listener, false); function listener(e) { console.log( e.type, // transitionend e.propertyName, // la propriété CSS pour laquelle la transition est appliquée et terminée e.elapsedTime, // le temps écoulé e.pseudoElement // le nom du pseudo élément sur lequel est appliqué la transition, si cela s'applique ); } ``` --- :::warning ⚠ Attention: l'évènement est déclenché autant de fois qu'il y a de propriétés pour lesquelles la transition s'applique. ::: ___ :::info Même si cela ne fait pas parti de la spécification des transitions, Internet Explorer 10 implémente également un évènement `transitionstart`.| ::: --- ### Les animations - Alors que les transitions permettent d'effectuer une animation assez simple entre plusieurs états d'un éléments et de ses propriétés de manière automatique, les animations permettent un contrôle plus précis sur les différentes étapes de l'animation et d'autres éléments précis avant, pendant et après l'animation. - Avec une transition, en utilisant une seule classe CSS, vous pourriez par exemple faire en sorte que votre lien passe de la couleur vert au bleu. --- - Avec une animation en revanche, vous pouvez faire en sorte que votre lien passe par toutes les couleurs de l'arc-en-ciel, et ce de manière répétée. - Ce cas précis est bien entendu à éviter car il risque de gêner fortement la perception des liens de votre site par les utilisateurs. --- #### Définition d'une animation - Avant toute utilisation d'une animation, elle doit être définie par un nom et ses étapes. - On utilise pour cela la propriété @keyframes qui va permettre de définir le nom de votre animation et ses différentes étapes : ```css @keyframes monAnimation { … } ``` --- - Pour définir ensuite les différentes étapes, il s'agit simplement d'indiquer à quel pourcentage d'avancement de l'animation vous souhaitez appliquer des propriétés à votre élément, puis indiquer les propriétés correspondantes. ```css /* Ici on va par exemple définir qu'au début de l'animation, le texte de notre élément est bleu, puis au milieu de l'animation il est rouge pour finir vert. 0% étant le début, 50% le milieu et 100% la fin de l'animation. */ @keyframes monAnimation { 0% { color: #337AB7; // Bleu } 50% { color: #D9534F; // Rouge } 100% { color: #5CB85C; // Vert } } ``` --- - Si on ne voulait que 2 étapes à la manière d'une transition, il existe également 2 mots clés plutôt que `0%/100%` : `from` et `to`. - C'est particulièrement utile dans le cas où vous souhaitez agir sur plusieurs propriétés en même temps. Vous avez alors une méthode plus structurée que la transition. ```css @keyframes monAnimation { from { color: #337AB7; // Bleu } to { color: #5CB85C; // Vert } } ``` --- #### Appliquer l'animation - Une fois votre animation définie, il ne vous reste plus qu'à l'appliquer sur l'élément en question. - Pour cela, une propriété : animation-name, à laquelle il faut ajouter la durée via animation-duration. ```css .monLien { animation-name: monAnimation; animation-duration: 3s; } ``` --- #### Configuration de l'animation - De la même façon que les transitions (et même plus encore), il est possible de configurer certaines options de l'animation : --- - `animation-delay` — pour démarrer l'animation après un certain temps - `animation-direction` — pour définir le sens de l'animation (du début à la fin, inversé, alterné, etc.) - `animation-iteration-count` — le nombre de fois que doit se jouer l'animation (de 1 à l'infini) --- - `animation-play-state` — pour mettre en pause et reprendre l'animation (au survol par exemple) - `animation-timing-function` — la fonction d'animation à utiliser pour calculer les valeurs des étapes de l'animation - `animation-fill-mode` — défini quelles valeurs doit conserver l'élément avant et après l'animation] --- CSS ```css .monLien { animation-name: monAnimation; animation-delay: 1s; animation-duration: 3s; animation-iteration-count: 3; animation-direction: alternate; animation-fill-mode: forwards; } /* Ici, notre animation va se jouer - après 1 seconde d'attente, - pendant 3 secondes, - 3 fois de suite, - en alternant début-fin/fin-début, - et laissera appliquées les propriétés de la dernière étape de l'animation à la fin de celle-ci. */ ``` --- #### Les évènements JavaScript - De la même manière que pour les transitions, le navigateur déclenche des évènements sur l'élément au début, pendant et la fin de l'animation. ```js var lien = document.getElementById("monLien"); lien.addEventListener("animationstart", listener, false); lien.addEventListener("animationend", listener, false); lien.addEventListener("animationiteration", listener, false); function listener(e) { console.log( e.type, // animationstart, animationend ou animationiteration e.animationName, // le nom de l'animation CSS exécutée e.elapsedTime // le temps écoulé ); } ``` --- ### Les transformations - Les transformations CSS sont à la fois puissantes, variées et complexes. En effet, elles permettent d'appliquer un grand nombre d'effets divers et variés à vos éléments, mais compliquent parfois la mise en page. - Les transformations permettent aussi bien d'agir en 2D qu'en 3D sur votre élément. --- #### La propriété - Pour appliquer une transformation, le mot clé à utiliser est transform, auquel vous passez la fonction de transformation à appliquer avec sa valeur. - Si l'on veut par exemple appliquer un zoom 2x à un élément, on utilisera : ```css .myElement { transform: scale(2); } ``` --- #### Les différentes fonctions - Il existe un grand nombre de fonctions de transformation applicables : ```css .myElement { transform: translate(12px, 50%); // Déplace l'élément en horizontalement et verticalement transform: translateX(2em); // Déplace l'élément horizontalement uniquement transform: translateY(3in); // Déplace l'élément verticalement uniquement transform: scale(2, 0.5); // Modifie le zoom horizontal et vertical de l'élément (ou des deux si une seule valeur) transform: scaleX(2); // Modifie le zoom horizontal uniquement transform: scaleY(0.5); // Modifie le zoom vertical uniquement transform: rotate(0.5turn); // Applique une rotation à 180° = 180deg transform: skew(30deg, 20deg); // Permet d'obliquer l'élément horizontalement et verticalement transform: skewX(30deg); // Permet d'obliquer l'élément horizontalement uniquement transform: skewY(1.07rad); // Permet d'obliquer l'élément verticalement uniquement transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); // Déforme l'élément selon une matrice de données /* Toutes les autres propriétés sont équivalentes aux précédentes mais s'appliquent en 3D et non en 2D */ transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); } ``` --- #### La configuration - Comme les transitions et animations, les transformations possèdent d'autres propriétés permettant d'ajuster la façon dont sont appliquées celles-ci : --- - `transform-origin` — permet de modifier le point d'origine du repère utilisé par la transformation - `transform-style` — dans le cas d'une transformation 3D, permet d'indiquer si les éléments enfants sont dans un plan 3D distinct ou aplatis dans le plan de l'élément sur lequel est appliqué la transformation - `transform-box` — défini à quel type de box s'applique la transformation (similaire à box-sizing mais pour les transformations) --- - `perspective` — permet d'ajuster la dimension de la perspective dans le cas d'une transformation dans un plan 3D - `perspective-origin` — permet de définir le point d'origine de la perspective (par défaut il s'agit du centre de l'élément) - `backface-visibility` — permet de définir si la vue arrière d'un élément doit être visible comme dans un miroir si le cas se présente (dans une rotation 3D par exemple, comme une carte) --- **Exemple** - L'un des exemples les plus faciles d'utilisation poussée des transformations (couplée aux transitions) est le cas d'une carte qui se retourne. HTML ```html <div class="card-container"> <div class="card"> <div class="card-front"> face avant </div> <div class="card-back"> face arrière </div> </div> </div> ``` --- CSS ```css .card-container, .card-front, .card-back { width: 320px; height: 427px; } .card-container { perspective: 1000px; transform-style: preserve-3d; border: 1px solid #ccc; } .card { transition: 0.6s; transform-style: preserve-3d; position: relative; } .card-front, .card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: 0.6s; transform-style: preserve-3d; transform: rotateY(0deg); position: absolute; top: 0; left: 0; } .card-front { background: lightgreen; z-index: 2; transform: rotateY(0deg); } .card-back { background: lightblue; transform: rotateY(-180deg); } .card-container:hover .card-front { transform: rotateY(180deg); } .card-container:hover .card-back { transform: rotateY(0deg); } ```