luffah

Outils pour utilisateurs

Outils du site

Piste:
purecss

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
purecss [2020/03/29 00:09]
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'autres fonctionnalités.
 +Nous allons voir dans cet article que pour la plupart de ces fonctionnalités, JavaScript n'est pas indispensable.
 +<html><hr></html>
 +
 +===== 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'écriture, les mesures ,les couleurs et parfois des images à utiliser en arriérer plan
 +
 +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.
 +
 +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'ếtre pollué de popups, de pubs, et pour des raisons d'anonymat,
 +une partie des internautes utilise des bloqueurs de script (tels que [[https://fr.wikipedia.org/wiki/NoScript|NoScript]]). 
 +
 +C'est pour éviter de pénaliser ces personnes qu'on va essayer de faire des sites qui n'utilisent pas (obligatoirement) JavaScript.
 +
 +
 +===== Les bases théoriques du pur CSS (interactions sans JavaScript) =====
 +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.
 +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 "radio" ont des états exclusifs si ils portent le même nom
 +
 +C'est donc avec ces éléments qu'on va jouer pour créer l'interactivité.
 +
 +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'élément ''checkbox''.
 +Une case à cocher peut-être associée à plusieurs étiquettes.
 +Cela permet de changer l'état de la case à cocher sans cliquer sur la case.
 +
 +Le code HTML est le suivant:
 +<code html>
 +  <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>
 +</code>
 +
 +Coté CSS:
 +<code css>
 +  input[id^="bouton-"]:checked ~ label</i> {
 +    display:none;
 +    cursor:pointer;
 +    border: 1px solid gray;
 +    width:36ch;
 +    text-align:center;
 +    padding: 1ch;
 +    background: whitesmoke;
 +    border-radius: 5px;
 +  }
 +  input[id^="bouton-"]:checked + label,
 +  input[id^="bouton-"]:not(:checked) + label + label {
 +    display:inline-block;
 +  }
 +</code>
 +
 +Résultae
 <html> <html>
-  <h1>Pur Css / une odysée sans JavaScript</h1> +    <style> 
-<p> +      #bouton-0 ~ label { 
-  Dans les pages Web affichées par votre navigateur (i.e. Firefox, Chrome, Edge...),  +        display:none; 
-  JavaScript est souvent utilisé pour réaliser des boutons, des menus, des diaporamas, et un tas d'autres fonctionnalités. +        border: 1px solid gray; 
-  Nous allons voir dans cet article que pour la plupart de ces fonctionnalités, JavaScript n'est pas indispensable. +        width:36ch; 
-</p> +        text-align:center; 
-<hr> +        padding: 1ch; 
-   +        cursor: pointer; 
-      <h2>Que fait Javascript ?</h2> +        background: whitesmoke; 
-      <div class="tgscroll" > +        border-radius: 5px; 
-        <p> +      } 
-        Une page Web est constituée de blocs (HTML) et de directives pour styliser ces blocs (CSS): +      #bouton-0:checked + label, 
-        </p> +      #bouton-0:not(:checked) + label + label { 
-        <ul> +        display:inline-block; 
-          <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> +      label[for="bouton-0"]:hover { 
-        </ul> +        font-weight:bold; 
-        <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. +    </style> 
-          À cette étape, le contenu de la page Web est fixe, c'est à dire qu'aucun bloc de texte ne peut subitement apparaître. +    <input type="checkbox" id="bouton-0"/> 
-        </p> +    <label for="bouton-0">L'élément est activé</label> 
-        <p> +    <label for="bouton-0">Cliquer ici pour activer l'élément</label> 
-          Pourtant il est commun de naviguer sur des sites dont les pages sont partiellement rechargées, +</html>
-          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>+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.
  
-      <h2><label for="1-4-art-utg">Mettre ou ne pas mettre du JavaScript ?</label></h2> +L'alternative aux étiquettes (//label//) serait de placer une case à cocher invisible au dessus d'autres éléments. 
-      <input type="checkbox" id="1-4-art-utg" value="false" /> +Le prérequis de cette méthode est de calculer en détails la position et la taille de chaque élément. 
-      <div class="tgscroll" > +C'est ce qu'on fait dans l'exemple suivant. 
-        <p> +Remarquons le troisième bloc, qui, après avoir coché la case, sort de la zone cliquable. 
-        Passons à la partie technique. +L'utilisation d'une zone cliquable s'oppose à l'<label for="bouton-0b">étiquette</label>&nbsp; 
-        Voici un tableau regroupant des fonctionnalitées souvent réalisées en JavaScript: +qui permet de cocher ou décocher la case depuis n'importe quelle zone de la page. 
-        </p>+ 
 +Un exemple de case à cocher sans //label//  
 +<html> 
 +    <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> 
 +</html> 
 + 
 +Note: si l'élément ''checkbox'' est dans un formulaire, le navigateur se souviendra de l'état (à moins que la conservation des données de formulaire soit désactivées) au rechargement de la page. 
 + 
 +===== 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 ''cookies'' (sauvegarde de l'état de la page) 
 +  - 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'utilisation la plus courante de JavaScript est l'ajout de classes CSS sur des éléments HTML ciblés, 
 +communiquant au navigateur d'appliquer le style associé à la classe. 
 +Hors, on a vu dans la partie précédente qu'on peut simulé des états actif/inactif avec des éléments ''checkbox''. 
 + 
 +Le véritable intérêt du JavaScript est l'appel aux fonctions du navigateur, notamment l'utilisation des données relatives à l'utilisateur du site. 
 +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, un tableau regroupant des fonctionnalités souvent réalisées en JavaScript avec mention de la faisabilité sans langage de script. 
 + 
 +<html>
         <table>         <table>
           <thead>           <thead>
Ligne 204: Ligne 197:
             </tr>             </tr>
             <tr>             <tr>
-              <td><i>Smooth-Scrolling</i></td>+              <td>//Smooth-Scrolling//</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>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>               <td>Non, il n'est pas possible d'avoir d'impact précis sur le défilement de la page sans JavaScript.</td>
Ligne 210: Ligne 203:
           </tbody>           </tbody>
         </table>         </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> </html>
 +
 +
 +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, calculer des résultats, charger 
 +dynamiquement des vidéos...
 +
 +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, polluera moins les réseaux que 200 lignes d'éléments de formulaire.
 +
 +Aussi, si l'on veut ajouter une fioriture en JavaScript, on peut toujours prévoir une balise &lt;noscript&gt;.
  
purecss.1585436979.txt.gz · Dernière modification: 2020/03/29 19:54 (modification externe)
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Driven by DokuWiki