Différences

Ci-dessous, les différences entre deux révisions de la page.

--- purecss [2020/03/29 00:09]
luffah
+++ purecss [2020/03/29 19:54]
@@ Ligne 1: / Ligne 1: @@
-<html>
-  <h1>Pur Css / une odysée sans JavaScript</h1>
-<p>
-  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'autres fonctionnalités.
-  Nous allons voir dans cet article que pour la plupart de ces fonctionnalités, JavaScript n'est pas indispensable.
-</p>
-<hr>
-      <h2>Que fait Javascript ?</h2>
-      <div class="tgscroll" >
-        <p>
-        Une page Web est constituée de blocs (HTML) et de directives pour styliser ces blocs (CSS):
-        </p>
-        <ul>
-          <li>la partie HTML contient du texte et des références à des médias (images, sons et vidéos)</li>
-          <li>la partie CSS définit la police d'écriture, les mesures ,les couleurs et parfois des images à utiliser en arriérer plan</li>
-        </ul>
-        <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.
-          À cette étape, le contenu de la page Web est fixe, c'est à dire qu'aucun bloc de texte ne peut subitement apparaître.
-        </p>
-        <p>
-          Pourtant il est commun de naviguer sur des sites dont les pages sont partiellement rechargées,
-          par exemples les chats <b class="emo">(=ＴェＴ=)</b> , qui affichent le temps passé sur la page,
-          ou encore font apparaître des évènements lorsqu'on clique sur la souris.
-          Dans ce cas, la page contient des directives dans un language plus permissif que le CSS.
-        </p>
-        <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>
-          <p>
-            Pour des raisons d'anonymat, ou pour éviter des popups, une partie (minoritaire peut-être) des internautes
-            utilise des bloqueurs de script (tels que <a href="https://fr.wikipedia.org/wiki/NoScript">NoScript</a>).
-          </p>
-          <p>
-            C'est pour éviter de pénaliser ces personnes, qu'on va essayer de faire des sites qui n'utilent pas (obligatoirement) JavaScript.
-          </p>
-      </div>
-      <h2><label for="1-2-art-utg">Les bases théoriques du pur CSS (interactions sans JavaScript)</label></h2>
-      <input type="checkbox" id="1-2-art-utg" value="false" />
-      <div class="tgscroll" >
-        <p>
-        Pour marquer l'interaction, les scripts ont souvent pour effet de rendre un élément actif, en indiquant que l'élément en question appartient à la classe CSS "active". L'élément aura sera alors affiché d'une manière particulière.
-        </p>
-        <p>Certains éléments HTML n'ont pas besoin de JavaScript, pour avoir des états similaires.</p>
-        <ul>
-          <li>presque tous les éléments ont un état lié au survol de la souris, ou à la focalisation au clavier </li>
-          <li>les liens ont en plus de cela des états : visité; en cours de clic</li>
-          <li>les cases à cocher ont deux états : coché, décoché</li>
-          <li>les boutons "radio" ont des états exclusifs si ils portent le même nom</li>
-        </ul>
-        <p>C'est donc avec ces éléments qu'on va jouer pour créer l'interactivité.</p>
-        <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 <i>Cascading Style Sheet</i>, 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.
-        </p>
-      </div>
-      <h2><label for="1-3-art-utg">Exemple pratique</label></h2>
-      <input type="checkbox" id="1-3-art-utg" value="false" />
-      <div class="tgscroll" >
-        <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'état de la case à cocher sans cliquer sur la case.</p>
-        <div class="code">
-          <code>
-            <span>HTML</span>
-            &lt;<i>input</i> <b>type</b>="checkbox" <b>id</b>="bouton-0"/&gt;</br>
-            &lt;<i>label</i> <b>for</b>="bouton-0"&gt;<div>L'élément est activé</div>&lt;<i>/label</i>&gt;</br>
-            &lt;<i>label</i> <b>for</b>="bouton-0"&gt;<div>Cliquer ici pour activer l'élément</div>&lt;<i>/label</i>&gt;</br>
-          </code>
-          <code>
-            <span>CSS</span>
-            <i>input</i>[id^="bouton-"]:checked ~ <i>label</i> {</br>
-            <div>display:none;</br>
-            cursor:pointer;</div>
-            <div class="look">border: 1px solid gray;</br>
-              width:36ch;</br>
-              text-align:center;</br>
-              padding: 1ch;</br>
-              background: whitesmoke;</br>
-              border-radius: 5px;</div>
-            }</br>
-            <i>input</i>[id^="bouton-"]:checked + <i>label</i>,</br>
-            <i>input</i>[id^="bouton-"]:not(:checked) + <i>label</i> + <i>label</i> {</br>
-            <div>display:inline-block;</div>
-            }
-          </code>
-          <div class="result">
-            <span>Résultat</span>
-            <style>
-              #bouton-0 ~ label {
-                display:none;
-                border: 1px solid gray;
-                width:36ch;
-                text-align:center;
-                padding: 1ch;
-                cursor: pointer;
-                background: whitesmoke;
-                border-radius: 5px;
-              }
-              #bouton-0:checked + label,
-              #bouton-0:not(:checked) + label + label {
-                display:inline-block;
-              }
-              label[for="bouton-0"]:hover {
-                font-weight:bold;
-              }
-            </style>
-            <input type="checkbox" id="bouton-0"/>
-            <label for="bouton-0">L'élément est activé</label>
-            <label for="bouton-0">Cliquer ici pour activer l'élément</label>
-          </div>
-        </div>
-        <p>
-          Ici, le CSS décrit le comportement qui est de cacher l'étiquette qui ne correspond pas à l'état.
-          Dans le même principe, on peut cacher de paragraphes, des mots, ou des blocs.
-        </p>
-        <p>
-          L'alternative aux étiquettes (<i>label</i>) serait de placer une case à cocher invisible au dessus d'autres éléments.
-          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'exemple suivant.
-          Remarquons le troisième bloc, qui, après avoir coché la case, sort de la zone cliquable.
-          L'utilisation d'une zone cliquable s'oppose à l'<label for="bouton-0b">étiquette</label>&nbsp;
-          qui permet de cocher ou décocher la case depuis n'importe quelle zone de la page.
-        </p>
-        <div class="code">
-          <div>
-            <span>Case à cocher sans <i>label</i></span>
-            <style>
-              #bouton-0bis {
-                position:relative;
-              }
-              #bouton-0bis input:hover{
-                opacity:.3
-              }
-              #bouton-0bis input{
-                position:absolute;
-                z-index:2; top:0;left:0;
-                width: 40px;
-                height: 64px;
-                opacity:0;
-                cursor:pointer;
-              }
-              #bouton-0bis div{
-                position:relative;
-                height:14px; width:40px;
-                border:2px solid;
-                margin:0 4px 8px;
-                transition:all 1s;
-              }
-              #bouton-0bis :checked ~ div:last-of-type {
-                transform: translate(80px,-32px) rotate(-90deg);
-                opacity:0.3;color:red;
-              }
-              #bouton-0bis :checked + div {
-                transform: translateY(11px) rotate(45deg) ;
-              }
-              #bouton-0bis :checked + div + div {
-                transform: translateY(-11px) rotate(-45deg) ;
-              }
-            </style>
-            <div id="bouton-0bis">
-              <input id="bouton-0b" type="checkbox" />
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <h2><label for="1-4-art-utg">Mettre ou ne pas mettre du JavaScript ?</label></h2>
-      <input type="checkbox" id="1-4-art-utg" value="false" />
-      <div class="tgscroll" >
-        <p>
-        Passons à la partie technique.
-        Voici un tableau regroupant des fonctionnalitées souvent réalisées en JavaScript:
-        </p>
-        <table>
-          <thead>
-            <th>Composant</th>
-            <th>Action</th>
-            <th>Possible sans JavaScript</th>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Boutons</td>
-              <td>Au clic sur un bouton, un élément apparaît dans la page.</td>
-              <td>Oui.</td>
-            </tr>
-            <tr>
-              <td>Menus déroulants et accordéons</td>
-              <td>Il s'agit de déplier un famille d'éléments. Au clic, les élément enfants apparaissent.</td>
-              <td>Oui</td>
-            </tr>
-            <tr>
-              <td>Diaporamas</td>
-              <td>On fait défiler des images, avec ou non la possibilité pour l'utilisateur de controler leur apparition</td>
-              <td>Oui</td>
-            </tr>
-            <tr>
-              <td><i>Smooth-Scrolling</i></td>
-              <td>Lorsqu'on clique sur un lien interne à la page, le navigateur fait bouger la page pour donner l'impression qu'elle glisse vers sa destination</td>
-              <td>Non, il n'est pas possible d'avoir d'impact précis sur le défilement de la page sans JavaScript.</td>
-            </tr>
-          </tbody>
-        </table>
-        <ul>
-          <li>L'ajout de classes CSS sur des éléments HTML ciblés. Lorsque que l'élément aura ou perdra la classe, le navigateur lui appliquera le style qui lui est associé.</li>
-          <li>L'appel à des fonctions spécifiques, permettant de faire défiler des éléments dans la pages.</li>
-          <li>L'ajout et la suppression des blocs HTML.</li>
-        </ul>
-        <p>
-          En fait, à part le cas du <i>Smooth-Scrolling</i>, ces effets visuels sont réalisables sans JavaScript.
-          Dans la partie suivante on ne va pas détailler comment faire chacune de ces choses mais seulement poser les principes de bases.
-        </p>
-      </div>
-      <h2><label for="1-5-art-utg">Dans quel cas utiliser JavaScript ?</label></h2>
-      <input type="checkbox" id="1-5-art-utg" value="false" />
-      <div class="tgscroll" >
-        <p>
-        Pour la réalisation d'un chat  <b class="emo">(=ＴェＴ=)</b>, dans des applications faisant des calculs plus ou moins complexes,
-        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, il est intéressant d'utiliser JavaScript.
-          Un script de 20 lignes, pollura moins le réseau internet que 200 lignes d'éléments de formulaire.
-          Si l'on veut ajouter une fioriture en JavaScript, on peut toujours prévoir une balise &lt;noscript&gt;.
-        </p>
-</html>