Es-tu sûr d’avoir besoin de javascript ?

Introduction

Introduction

  • Rémi Pachet

  • Lead Front

Angular
JS

Pourquoi cette conf ?

Pourquoi cette conf ?

  • Specs HTML & CSS méconnue

  • JS utilisé à outrance

Sommaire

  • Tooltip

  • Accordion

  • Validation de formulaire

  • Nouveautés CSS

  • Switch

  • Dark-mode

Un grand nombre des fonctionnalités abordées ce soir ne sont pas compatibles avec les navigateurs plus anciens.

Les tooltip

Utilisons JavaScript

<div class="tooltip-js">
<p>Pokemons</p>
    <ul>
      <li class="pokemon">Germignon</li>
      <li class="pokemon">Héricendre</li>
      <li class="pokemon">Kaiminus</li>
    </ul>
</div>
<div class="tooltip-js">
<p>Pokemons</p>
    <ul>
      <li class="pokemon">Germignon
        <span class="tooltip">Plante</span>
      </li>
      <li class="pokemon">Héricendre
        <span class="tooltip">Feu</span>
      </li>
      <li class="pokemon">Kaiminus
        <span class="tooltip">Eau</span>
      </li>
    </ul>
</div>
document.querySelectorAll(".pokemon").forEach(elem => {
  elem.addEventListener("mouseover", showTooltip);
  elem.addEventListener("mouseout", hideTooltip);
  }
);

function showTooltip(event) {
   const tooltip = event.target.querySelector(".tooltip");
   tooltip.style.display = "block";
}
function hideTooltip(event) {
   const tooltip = event.target.querySelector(".tooltip");
   tooltip.style.display = "none";
}

Pokemons

  • Germignon Plante
  • Héricendre Feu
  • Kaiminus Eau

Utilisons HTML - CSS

En HTML - CSS

<div class="tooltip-example">
<h4>Pokemons</h4>
    <ul>
      <li data-tooltip="Plante">Germignon</li>
      <li data-tooltip="Feu">Héricendre</li>
      <li data-tooltip="Eau">Kaiminus</li>
    </ul>
</div>
li::after {
    content: 'Type : ' attr(data-tooltip);
    transition: 0.5s opacity;
    ...
}

li:hover:after {
    opacity: 1;
}
li::after {
    content: 'Type : ' attr(data-tooltip);
    transition: 0.5s opacity;
    ...
}

li:hover:after {
    opacity: 1;
}
li::after {
    content: 'Type : ' attr(data-tooltip);
    transition: 0.5s opacity;
    ...
}

li:hover:after {
    opacity: 1;
}

Pokemons

  • Germignon
  • Héricendre
  • Kaiminus
.tooltip-example {
    & li[data-tooltip="Eau"]::after {
        background: blue;
    }
    & li[data-tooltip="Feu"]::after {
        background: red;
    }
    & li[data-tooltip="Plante"]::after {
        background: green;
    }
}

Pokemons

  • Germignon
  • Héricendre
  • Kaiminus

Les Accordéons

Comment faire un Accordéon en html - CSS Natif ?

<details>
  <summary>
    Who's that pokemon ?
  </summary>
  <p>Pikachu</p>
</details>
Who's that pokemon ?

Pikachu

Un icon custom

  summary::marker {
  font-size: 1.5em;
  content: "📁";
  }

  [open] summary::marker {
    font-size: 1.5em;
    content: "📂";
  }
Who's that pokemon ?

Pikachu

Une petite animation

  details {
    padding: 10px;
    transition:
      height .6s ease-in;
    overflow: hidden;
  }

  details:not([open]) {
      height: 50px;
  }

  details[open] {
      height: 150px;
  }
Who's that pokemon ?

Pikachu

La Validation de Formulaire

Côté HTML

Côté CSS

Pattern

Pattern

<form>
  <label for="starter">
    Ton starter préféré de la Gen 1 (Bulbizarre, Salamèche, Carapuce)
  </label>
  <input
    id="starter"
    required
    pattern="[Bb]ulbizarre|[Ss]alam[èe]che|[Cc]arapuce">
</form>

Pattern

<form>
  <label for="starter">
    Ton starter préféré de la Gen 1 (Bulbizarre, Salamèche, Carapuce)
  </label>
  <input
    id="starter"
    required
    pattern="[Bb]ulbizarre|[Ss]alam[èe]che|[Cc]arapuce">
</form>

Pattern

:valid & :invalid

form {
    & input:invalid {
        border: 2px solid red;
    }
    & input:valid {
        border: 2px solid green;
    }
}

:user-valid & :user-invalid

form {
    & input:user-invalid {
        border: 2px solid red;
    }
    & input:user-valid {
        border: 2px solid green;
    }
}

Quelques tricks CSS

le CSS imbriqué

Sass

Selecteur d’imbrication &

ul {
    & li {

    }
}

Sélecteur d’imbrication d’ajouts

<div class="wrapper">
  <article class="pokemon">
    <h2>Bulbizarre</h2>
    <p>...</p>
  </article>
  <article class="pokemon choix">
    <h2>Salamèche</h2>
    <p>...</p>
  </article>
  <article class="pokemon">
    <h2>Carapuce</h2>
    <p>...</p>
  </article>
</div>

Sélecteur d’imbrication d’ajouts

<div class="wrapper">
  <article class="pokemon">
    <h2>Bulbizarre</h2>
    <p>...</p>
  </article>
  <article class="pokemon choix">
    <h2>Salamèche</h2>
    <p>...</p>
  </article>
  <article class="pokemon">
    <h2>Carapuce</h2>
    <p>...</p>
  </article>
</div>

Sélecteur d’imbrication d’ajouts

<div class="wrapper">
  <article class="pokemon">
    <h2>Bulbizarre</h2>
    <p>...</p>
  </article>
  <article class="pokemon choix">
    <h2>Salamèche</h2>
    <p>...</p>
  </article>
  <article class="pokemon">
    <h2>Carapuce</h2>
    <p>...</p>
  </article>
</div>

Sélecteur d’imbrication d’ajouts

.pokemon {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /* équivalent à `.pokemon h2` */
    color: slateblue;
    .choix & {
      /* équivalent à `.pokemon.choix h2` */
      color: tomato;
    }
  }
}

Sélecteur d’imbrication d’ajouts

.pokemon {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /* équivalent à `.pokemon h2` */
    color: slateblue;
    .choix & {
      /* équivalent à `.pokemon.choix h2` */
      color: tomato;
    }
  }
}

Sélecteur d’imbrication d’ajouts

.pokemon {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /* équivalent à `.pokemon h2` */
    color: slateblue;
    .choix & {
      /* équivalent à `.pokemon.choix h2` */
      color: tomato;
    }
  }
}

Sélecteur d’imbrication d’ajouts

Bulbizarre

Bulbizarre est un petit quadrupède vert avec une tête large. Il porte un bulbe sur son dos.

Salamèche

Salamèche est un Pokémon bipède et reptilien avec un corps principalement orange, à l'exception de son ventre et de ses plantes de pieds qui sont beige

Carapuce

Carapuce est une petite tortue bipède de couleur bleue. Il possède une carapace brune au pourtour blanc, beige au niveau du ventre.

Le Selecteur :has()

:has()

Appliquer un effet sur le parent d’un input

<form>
    <legend>Qui est le meilleur starter ?</legend>
    <div class="form-input">
      <input type="radio" id="starter" value="Salamèche">
      <label for="starter" class="form-label">Salamèche</label>
    </div>
    ...
</form>

Appliquer un effet sur le parent d’un input

.form-input:has(input:checked) {
  background: red;
}
.form-input:has(input:checked) > label {
  font-weight: 700;
  color: white;
}

Appliquer un effet sur le parent d’un input

Qui est le meilleur starter ?

Apliquer un effet sur la page entière

body:has(:checked) {
  backdrop-filter: brightness(0.5);
}

Aplliquer un effet sur la page entière

Sass

de nombreux cas d’utilisations

Un input Switch

Côté HTML

<div class="has-exemple blur-exemple">
  <label>
    <input name="jour-nuit" id="jour-nuit" type="checkbox"  />
    Jour / Nuit
  </label>
</div>

Côté CSS

#jour-nuit {
  appearance: none;
  position: relative;
  display: inline-block;
  background: lightgrey;
  height: 1.65rem;
  width: 2.75rem;
  vertical-align: middle;
  border-radius: 2rem;
  box-shadow: 0px 1px 3px #0003 inset;
  transition: 0.25s linear background;
}
#jour-nuit {
  appearance: none;
  position: relative;
  display: inline-block;
  background: lightgrey;
  height: 1.65rem;
  width: 2.75rem;
  vertical-align: middle;
  border-radius: 2rem;
  box-shadow: 0px 1px 3px #0003 inset;
  transition: 0.25s linear background;
}
#jour-nuit {
  appearance: none;
  position: relative;
  display: inline-block;
  background: lightgrey;
  height: 1.65rem;
  width: 2.75rem;
  vertical-align: middle;
  border-radius: 2rem;
  box-shadow: 0px 1px 3px #0003 inset;
  transition: 0.25s linear background;
}
#jour-nuit {
  appearance: none;
  position: relative;
  display: inline-block;
  background: lightgrey;
  height: 1.65rem;
  width: 2.75rem;
  vertical-align: middle;
  border-radius: 2rem;
  box-shadow: 0px 1px 3px #0003 inset;
  transition: 0.25s linear background;
}
#jour-nuit::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: #fff;
  border-radius: 1.2rem;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  box-shadow: 0px 1px 3px #0003;
  transition: 0.25s linear transform;
  transform: translateX(0rem);
}
#jour-nuit::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: #fff;
  border-radius: 1.2rem;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  box-shadow: 0px 1px 3px #0003;
  transition: 0.25s linear transform;
  transform: translateX(0rem);
}
#jour-nuit::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: #fff;
  border-radius: 1.2rem;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  box-shadow: 0px 1px 3px #0003;
  transition: 0.25s linear transform;
  transform: translateX(0rem);
}
#jour-nuit:checked {
  background: green;
}
#jour-nuit:checked::before {
  transform: translateX(1rem);
}

Le Dark mode

Notre switch

Le retour du :has()

body:has(#dark-mode:checked) {
    --r-background-color:#1b1b1b;
    --r-heading-color:#e43;
    --r-main-color: #eee;
}
body:has(#dark-mode:checked) {
  --theme: dark;
}
body:has(#dark-mode:checked) {
  --theme: dark;
}

@container style(--theme: dark) {
  body {
    background-color: #1b1b1b;
    color: #e43;
  }
}

Conclusion

  • HTML et CSS évolue de plus en plus

  • Est-ce possible en HTML et CSS ?

Pour aller plus loin

  • Query Container - CSS

  • Fonction trigonométriques - CSS

  • Declarative Shadow DOM - HTML

  • API Popover - HTML - CSS

  • contrast-color - CSS

Remerciements

qrCode