Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
purecss [2020/03/29 00:08] luffah |
purecss [2020/03/29 19:54] (Version actuelle) |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Pur Css / une odysée sans JavaScript ====== | ||
+ | |||
+ | Dans les pages Web affichées par votre navigateur (i.e. Firefox, Chrome, Edge...), | ||
+ | JavaScript est souvent utilisé pour réaliser des boutons, des menus, des diaporamas, et un tas d' | ||
+ | Nous allons voir dans cet article que pour la plupart de ces fonctionnalités, | ||
+ | < | ||
+ | |||
+ | ===== Que fait Javascript ? ===== | ||
+ | Une page Web est constituée de blocs (HTML) et de directives pour styliser ces blocs (CSS): | ||
+ | |||
+ | * la partie HTML contient du texte et des références à des médias (images, sons et vidéos) | ||
+ | * la partie CSS définit la police d' | ||
+ | |||
+ | Un fois copiée sur votre ordinateur (c'est ce commence par faire le navigateur ), la page est interprétée avec ces informations. | ||
+ | À cette étape, le contenu de la page Web est fixe, c'est à dire qu' | ||
+ | |||
+ | Pourtant, il est commun de naviguer sur des sites dont les éléments de la page sont dynamiquement chargées, par exemple une messagerie instantanée. | ||
+ | Dans ce cas, la page contient des directives dans un langage plus permissif que le CSS : le JavaScript. | ||
+ | |||
+ | Le navigateur lit le script JavaScript et peut sur ordre du script changer le contenu de la page et | ||
+ | faire de nouvelles requêtes distantes liées à votre comportement. | ||
+ | |||
+ | Pour éviter d' | ||
+ | une partie des internautes utilise des bloqueurs de script (tels que [[https:// | ||
+ | |||
+ | C'est pour éviter de pénaliser ces personnes qu'on va essayer de faire des sites qui n' | ||
+ | |||
+ | |||
+ | ===== Les bases théoriques du pur CSS (interactions sans JavaScript) ===== | ||
+ | Pour marquer l' | ||
+ | Certains éléments HTML n'ont pas besoin de JavaScript, pour avoir des états similaires. | ||
+ | |||
+ | * presque tous les éléments ont un état lié au survol de la souris, ou à la focalisation au clavier | ||
+ | * les liens ont en plus de cela des états : visité; en cours de clic | ||
+ | * les cases à cocher ont deux états : coché, décoché | ||
+ | * les boutons " | ||
+ | |||
+ | C'est donc avec ces éléments qu'on va jouer pour créer l' | ||
+ | |||
+ | La première chose à comprendre pour ajouter des évènements en CSS3, | ||
+ | est qu'il est impossible de cibler un élément HTML précédent ou parent. | ||
+ | Comme rappelé par son nom //Cascading Style Sheet//, CSS est prévu pour faire les choses dans un ordre et un seul. | ||
+ | On va donc faire attention à placer les éléments HTML au bon endroit et les sélecteurs CSS dans le bon ordre. | ||
+ | |||
+ | ===== Exemple pratique ===== | ||
+ | |||
+ | On va commencer par un cas simple : l' | ||
+ | Une case à cocher peut-être associée à plusieurs étiquettes. | ||
+ | Cela permet de changer l' | ||
+ | |||
+ | Le code HTML est le suivant: | ||
+ | <code html> | ||
+ | <input type=" | ||
+ | <label for=" | ||
+ | <label for=" | ||
+ | </ | ||
+ | |||
+ | Coté CSS: | ||
+ | <code css> | ||
+ | input[id^=" | ||
+ | display: | ||
+ | cursor: | ||
+ | border: 1px solid gray; | ||
+ | width:36ch; | ||
+ | text-align: | ||
+ | padding: 1ch; | ||
+ | background: whitesmoke; | ||
+ | border-radius: | ||
+ | } | ||
+ | input[id^=" | ||
+ | input[id^=" | ||
+ | display: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Résultae | ||
< | < | ||
- | <article> | + | |
- | < | + | #bouton-0 ~ label { |
- | <p> | + | display: |
- | Dans les pages Web affichées par votre navigateur (i.e. Firefox, Chrome, Edge...), | + | border: 1px solid gray; |
- | JavaScript est souvent utilisé pour réaliser des boutons, des menus, des diaporamas, et un tas d' | + | width: |
- | Nous allons voir dans cet article que pour la plupart de ces fonctionnalités, | + | text-align: |
- | </ | + | padding: 1ch; |
- | < | + | cursor: pointer; |
- | | + | background: whitesmoke; |
- | | + | border-radius: |
- | <div class=" | + | } |
- | <p> | + | # |
- | Une page Web est constituée de blocs (HTML) et de directives pour styliser ces blocs (CSS): | + | # |
- | </ | + | display: |
- | < | + | } |
- | < | + | label[for=" |
- | < | + | font-weight: |
- | </ | + | } |
- | <p> | + | </ |
- | Un fois copiée sur votre ordinateur (c'est ce commence par faire le navigateur ), la page est interprétée avec ces informations. | + | <input type=" |
- | À cette étape, le contenu de la page Web est fixe, c'est à dire qu' | + | <label for=" |
- | </ | + | <label for=" |
- | <p> | + | </html> |
- | Pourtant il est commun de naviguer sur des sites dont les pages sont partiellement rechargées, | + | |
- | par exemples les chats <b class=" | + | |
- | ou encore font apparaître des évènements lorsqu' | + | |
- | Dans ce cas, la page contient des directives dans un language plus permissif que le CSS. | + | |
- | </ | + | |
- | <p> | + | |
- | JavaScript est ce langage. Le navigateur lit le script et peut sur ordre du script changé le contenu de la page ou | + | |
- | faire de nouvelles requêtes sur le Web liées à votre comportement. | + | |
- | </ | + | |
- | <p> | + | |
- | <p> | + | |
- | Pour des raisons d' | + | |
- | utilise des bloqueurs de script (tels que <a href=" | + | |
- | </ | + | |
- | <p> | + | |
- | C'est pour éviter de pénaliser ces personnes, qu'on va essayer de faire des sites qui n' | + | |
- | </ | + | |
- | </ | + | |
- | < | + | |
- | <input type=" | + | |
- | <div class=" | + | |
- | <p> | + | |
- | Pour marquer l' | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | <p> | + | |
- | La première chose à comprendre pour ajouter des évènements en CSS3, | + | |
- | est qu'il est impossible de cibler un élément HTML précédent ou parent. | + | |
- | Comme rappelé par son nom < | + | |
- | On va donc faire attention | + | |
- | </ | + | |
- | </ | + | |
- | < | + | |
- | <input type=" | + | |
- | <div class=" | + | |
- | <p>On va commencer par un cas simple et répendu avec les cases à cocher. Une case à cocher peut-être associée à plusieurs étiquettes. Cela permet de changer l' | + | |
- | <div class=" | + | |
- | < | + | |
- | < | + | |
- | & | + | |
- | & | + | |
- | & | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | cursor: | + | |
- | <div class=" | + | |
- | width: | + | |
- | text-align: | + | |
- | padding: 1ch;</ | + | |
- | background: whitesmoke;</ | + | |
- | border-radius: | + | |
- | }</ | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | } | + | |
- | </ | + | |
- | <div class=" | + | |
- | < | + | |
- | < | + | |
- | | + | |
- | display: | + | |
- | border: 1px solid gray; | + | |
- | width: | + | |
- | text-align: | + | |
- | padding: 1ch; | + | |
- | cursor: pointer; | + | |
- | background: whitesmoke; | + | |
- | border-radius: | + | |
- | } | + | |
- | # | + | |
- | # | + | |
- | display: | + | |
- | } | + | |
- | label[for=" | + | |
- | font-weight: | + | |
- | } | + | |
- | </ | + | |
- | <input type=" | + | |
- | <label for=" | + | |
- | <label for=" | + | |
- | </ | + | |
- | </ | + | |
- | <p> | + | |
- | Ici, le CSS décrit le comportement qui est de cacher l' | + | |
- | Dans le même principe, on peut cacher de paragraphes, | + | |
- | </ | + | |
- | <p> | + | |
- | L' | + | |
- | Le prérequis de cette méthode est de calculer en détails la position et la taille de chaque élément. | + | |
- | C'est ce qu'on fait dans l' | + | |
- | Remarquons le troisième bloc, qui, après avoir coché la case, sort de la zone cliquable. | + | |
- | L' | + | |
- | qui permet de cocher ou décocher la case depuis n' | + | |
- | </ | + | |
- | <div class=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | # | + | |
- | position: | + | |
- | } | + | |
- | # | + | |
- | opacity: | + | |
- | } | + | |
- | # | + | |
- | position: | + | |
- | z-index:2; top: | + | |
- | width: 40px; | + | |
- | height: 64px; | + | |
- | opacity: | + | |
- | cursor: | + | |
- | } | + | |
- | # | + | |
- | position: | + | |
- | height: | + | |
- | border:2px solid; | + | |
- | margin:0 4px 8px; | + | |
- | transition: | + | |
- | } | + | |
- | # | + | |
- | transform: translate(80px, | + | |
- | opacity: | + | |
- | } | + | |
- | # | + | |
- | transform: translateY(11px) rotate(45deg) ; | + | |
- | } | + | |
- | # | + | |
- | transform: translateY(-11px) rotate(-45deg) ; | + | |
- | } | + | |
- | </ | + | |
- | <div id=" | + | |
- | <input id=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | </ | + | |
- | | + | |
- | </ | + | Ici, le CSS décrit le comportement qui est de cacher l' |
+ | Dans le même principe, on peut cacher de paragraphes, | ||
- | <h2><label for="1-4-art-utg">Mettre ou ne pas mettre du JavaScript ?</ | + | L' |
- | <input type="checkbox" id="1-4-art-utg" | + | Le prérequis de cette méthode est de calculer en détails la position et la taille de chaque élément. |
- | < | + | C'est ce qu'on fait dans l' |
- | <p> | + | Remarquons le troisième bloc, qui, après avoir coché la case, sort de la zone cliquable. |
- | | + | L' |
- | | + | qui permet de cocher ou décocher la case depuis n' |
- | </p> | + | |
+ | Un exemple de case à cocher sans //label// | ||
+ | <html> | ||
+ | <style> | ||
+ | # | ||
+ | position: | ||
+ | } | ||
+ | # | ||
+ | opacity: | ||
+ | } | ||
+ | # | ||
+ | position: | ||
+ | z-index:2; top: | ||
+ | width: 40px; | ||
+ | height: 64px; | ||
+ | opacity: | ||
+ | cursor: | ||
+ | } | ||
+ | # | ||
+ | position: | ||
+ | height: | ||
+ | border:2px solid; | ||
+ | margin:0 4px 8px; | ||
+ | transition: | ||
+ | } | ||
+ | # | ||
+ | transform: translate(80px, | ||
+ | opacity: | ||
+ | } | ||
+ | # | ||
+ | transform: translateY(11px) rotate(45deg) ; | ||
+ | } | ||
+ | # | ||
+ | transform: translateY(-11px) rotate(-45deg) ; | ||
+ | } | ||
+ | </ | ||
+ | <div id="bouton-0bis"> | ||
+ | < | ||
+ | <div></ | ||
+ | <div></ | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Note: si l' | ||
+ | |||
+ | ===== Dans quel cas utiliser JavaScript ? ===== | ||
+ | |||
+ | JavaScript permet de faire appel au fonctionnalités du navigateur, notamment: | ||
+ | - ajouter, modifier, supprimer des éléments HTML | ||
+ | - lire et écrire des '' | ||
+ | - lire les informations spécifique au navigateur (taille de la fenêtre, emplacement du curseur...) | ||
+ | - appeler des sites externes, pour envoyer et rapatrier un contenu | ||
+ | - manipuler de manière procédurale les éléments de la pages (par exemple, pour faire défiler la page) | ||
+ | |||
+ | L' | ||
+ | communiquant au navigateur d' | ||
+ | Hors, on a vu dans la partie | ||
+ | |||
+ | Le véritable intérêt du JavaScript est l' | ||
+ | Dans les faits, la plupart des effets de mise en page sont réalisable sans, tandis que le langage sera indispensable pour une application complexe telle qu'un jeu vidéo. | ||
+ | |||
+ | Ci-dessous, | ||
+ | |||
+ | <html> | ||
< | < | ||
< | < | ||
Ligne 205: | Ligne 197: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
- | <td><i>Smooth-Scrolling</i></td> | + | <td>//Smooth-Scrolling/ |
< | < | ||
< | < | ||
Ligne 211: | Ligne 203: | ||
</ | </ | ||
</ | </ | ||
- | <ul> | ||
- | < | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | <p> | ||
- | En fait, à part le cas du < | ||
- | Dans la partie suivante on ne va pas détailler comment faire chacune de ces choses mais seulement poser les principes de bases. | ||
- | </p> | ||
- | </ | ||
- | < | ||
- | <input type=" | ||
- | <div class=" | ||
- | <p> | ||
- | Pour la réalisation d'un chat <b class=" | ||
- | pour des évènements qui nécessite de déplacer la page, ou de charger dynamiquement des vidéos parmis des centaines de vidéos... | ||
- | dans tous ces cas, | ||
- | JavaScript est indispensable. | ||
- | </p> | ||
- | <p> | ||
- | Dés lors que des choses peuvent être construite en série de manière automatique, | ||
- | Un script de 20 lignes, pollura moins le réseau internet que 200 lignes d' | ||
- | |||
- | Si l'on veut ajouter une fioriture en JavaScript, on peut toujours prévoir une balise & | ||
- | </p> | ||
- | </ | ||
- | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | Dans la partie suivante on ne va pas détailler comment faire chacune de ces choses mais seulement poser les principes de bases. | ||
+ | |||
+ | Javascript est indispensable pour toute application complexe : synchroniser une messagerie instantanée, | ||
+ | dynamiquement des vidéos... | ||
+ | |||
+ | Dés lors que des choses peuvent être construite en série de manière automatique, | ||
+ | Un script de 20 lignes, polluera moins les réseaux que 200 lignes d' | ||
+ | |||
+ | Aussi, si l'on veut ajouter une fioriture en JavaScript, on peut toujours prévoir une balise & | ||