Wiki CgX

Parce que j'ai un cerveau, mais pas trop.

Outils pour utilisateurs

Outils du site


code:html-css:astuces

Astuces HTML

Lazy Loading

Utilisez l'attribut loading=“lazy” pour que les images se chargement uniquement quand elles deviennent visibles au scroll

<img src="image.jpg" loading="lazy" alt="Je suis une image fainéante">

Attention, ça peut interférer avec certains modules js

Offset dans les <ol>

On peut définir un offset pour les listes numérotées

<ol start="11">
  <li>Pippo</li>
  <li>Mollo</li>
  <li>Bolsonaro</li>
<ol>

Donnera :

  1. Pippo
  2. Mollo
  3. Bolsonaro

<meter>

La balise <meter> permet de faire des barres de chargement !

<label for="value1">Chargement</label> <meter id="value1" min="0" max="100" low="30" high="75" optimum="100" value="25"></meter><br />
<label for="value2">Chargement</label> <meter id="value2" min="0" max="100" low="30" high="75" optimum="100" value="50"></meter><br />
<label for="value3">Chargement</label> <meter id="value3" min="0" max="100" low="30" high="75" optimum="100" value="75"></meter><br />
<label for="value4">Chargement</label> <meter id="value4" min="0" max="100" low="30" high="75" optimum="100" value="100"></meter>



<detail> Contenu au clic

La balise <details> permet d'affiche du texte au clic (accordéon), nativement :

<details>
   <summary>Je suis le texte toujours visible : cliquez moi !</summary>
   <p>Je suis le texte caché ! Coucou !</p>
   <p>Je suis aussi le texte caché ! Salut !</p>
</details>
Je suis le texte toujours visible : cliquez moi !

Je suis le texte caché ! Coucou !

Je suis aussi le texte caché ! Salut !

<mark> : Stabilo

On peut facilement stabiloter un texte ou un mot

<p>Tu ne sais <mark>rien</mark>, Jean-Neige !</p>

Tu ne sais rien, Jean-Neige !

Liens

Téléphones, SMS, Mails, etc...

Utilisez les protocoles pour facilier les liens de type téléphonie, sms, ou mail !

  • mailto:
    <a href="mailto:destinataire@domain.tld?subject=Sujet&body=Coucou">destinataire@domain.tld</a>
  • tel:
    <a href="tel:+33465712345">04 65 71 23 45</a>
  • sms:
    <a href="sms:81212&body=PROUT">Envoie PROUT au 81212</a>
  • fax:
    <a href="fax:+33465712346">Envoie moi un fax, je suis vieux</a>
  • facetime:
    <a href="facetime:+33465712345">J'ai un iPhone, je suis snob</a>
  • skype:
    <a href="facetime:+33465712345?call">Skypez moi, j'aime microsoft</a>
    <a href="facetime:+33465712345?chat">Skypez moi textuellement, j'aime microsoft</a>

Download direct

L'attribut download permet de télécharger directement un ficher au lieu de le visionner

<a href="/path/to/file" download>Téléchargez moi !</a>

On peut aussi spécifier un autre nom de fichier au download :

<a href="/path/to/file" download="TéléchargezMoi.pdf">Téléchargez moi !</a>

Formulaires

<datalist>

Utilisez <datalist> si vous souhaitez faire un champ “autocomplete” assez facilement.

Rechercher : <input list="items">
<datalist id="items">
   <option value="Pippo">
   <option value="Mollo">
   <option value="Bolsonaro">
</datalist>
Rechercher :

Attention, toutes les possibilités seront visibles dans le code source.

Attention, rien n'empêche l'utilisateur d'entrer ce qu'il veut dans le champ !

type=range

Utilisez <input type=“range”> pour faire des sliders natifs !

<input type="range" id="jauge" name="jauge" min="0" max="100" step="10" value="20" />

Utilisez <input type=“search”> pour permettre d'effacer le contenu avec un petit bouton dédié !

spellcheck

Utilisez l'attribut spellcheck (sur <input> ou <textarea>) pour autoriser le navigateur à chercher les fautes d'orthographes dans le texte saisi

optgroup

Utilisez l'élément <optgroup> dans les <select> pour pouvoir grouper les éléments (les <optgroup> en eux-mêmes ne sont pas sélectionnables)

code/html-css/astuces.txt · Dernière modification: 20 Oct 2021 :: 16:34 de CgX