Des labels flottants en CSS pur #CodingPartyAtHome 💕🤣🤜🤛😎

Depuis que mon grand est en fac d'info, on a un nouveau sujet de conversation et j'ai ENFIN un interlocuteur dans le domaine à la maison !

Du coup, il arrive le weekend avec les TP qu'il a eus pendant la semaine et me pose des questions sur les difficultés qu'il a.

En ce moment, il commence PHP et CSS/HTML...

On me   nomme ?

Du coup, aujourd'hui, il travaillait sur la page de login pour le projet final, une todolist en PHP+HTML+CSS sans JS.

Il voulait faire des labels flottants parce qu'il avait vu que c'était joli... Comme il découvre le monde merveilleux du frontend, on s'y est mis à deux et on a improvisé un petit cours.

Il a appris les subtilités du ciblage, les pseudo éléments, l'usage de :not() et :has()...

Car OUI  on a réussi des labels flottants en pur CSS.png

TLDR;

Pour la page de démo: c'est par là.

Pour le code : c'est sur snippetvamp.

Petit résumé du problème

En gros, on veut que le label soit dans l'input, comme un placeholder, lorsque il est vide mais que le label reprenne une place normale lorsque l'utilisateur clique dans l'input pour le remplir.

Capture du 2024-03-17 15-15-33.png Capture du 2024-03-17 15-15-57.png
Pour ça, j'ai créé un label contenant un span avec le texte et l'input correspondant:
<label><span>Username</span>
    <input type="text" name="login" value="" placeholder=" " >
</label>

Ensuite, je déplace le span vers l'intérieur de l'input:

label span{
    position: relative;
    top:2em;
    left:24px;
    transition:all 500ms;/* et on fait une transition douce, merci*/
}

Puis on utilise :has() pour cibler le span du label contenant un input ayant le focus.

label:has(input:focus) span
{
    color:grey;
    top:0;
    left:0;
    transition:all 500ms;
}

À ce stade, quand l'utilisateur clique dans l'input, le label glisse vers le haut pour sortir de l'input.

Toutefois, le problème c'est que lorsque l'input perd le focus, le label revient à l'intérieur même si l'input a été complété... et les deux textes se chevauchent hideusement...

Et la,   c'est le drame

La logique voudrait qu'on cible alors le span du label contenant un input vide, genre avec input[value=""] ... sauf que ça ne marche pas car le fait de remplir un input ne modifie pas l'attribut value de la balise input...

Zut flute et   cacaboudin

Heureusement, on peut gruger...

Puisqu'on ne peut pas cibler un changement de l'attribut value, on peut cibler... le placeholder ! Enfin... styler en fonction de la visibilité du placeholder...

Ainsi, en utilisant :placeholder-shown, on peut ajouter une règle de ciblage au CSS précédent:

label:has(input:focus) span,
label:has(input:not(:placeholder-shown)) span
{
    color:grey;
    top:0;
    left:0;
    transition:all 500ms;
}

Et là, les plus observateurs d'entre-vous - qui se demandaient avec une angoisse et un mépris non dissimulés pourquoi j'avais collé un placeholder=" " dans mon HTML - comprennent l'astuce: si le placeholder est visible, c'est que l'input est vide...

Et ça marche, tout est supporté dans la plupart des navigateurs. En plus, c'est léger, ne demande pas une structure HTML alambiquée ou des règles CSS à la mords-moi le zboub...

Si ça peut servir, c'est cadeau

CSS - 5t3ph@front-end.social - I'm not sure enough folks realize that :is()/:where(), and :not() can check _ancestor_ and _previous sibling_ conditions.p:is(h2 + *) = paragraphs that are directly after an h2p:not(blockquote *) = paragraphs that are not within blockquotesI've used these techniques to simplify what would otherwise be rather unmaintainable selectors or may have previously required additional conditional classes.https://codepen.io/5t3ph/pen/KKEmMXR

Pas mal cette astuce ! On peut avoir des conditions qui prennent en compte un élément parent ou un élément frère pour cibler un élément...

  • p:is(h2 + *) : seulement les paragraphes directement après un H2
  • p:not(blockquote *) : les paragraphes ne se trouvant pas dans des blockquotes...

Ça peut carrément simplifier certains cas !

5 extraits CSS que tout développeur front-end devrait connaître en 2024

Il y a de ces trucs en CSS quand même...

Quelques notes perso ici...

:has()

styler le parent en fonction du nombre d'enfants

Pour modifier une grid par exemple...

main:has(> :nth-child(5)) {…}

styler un élément selon l'état d'une checkbox

Pour appliquer un darkmode

html:has(#dark-mode:checked) {…}

styler un form dont au moins un des items est invalide

form:has(:user-invalid) .error {
  display: block;
}

L'imbrication CSS

Et moi qui pensais que ce n'était réservé qu'à des sass & consorts !

Voilà qui permettra de mieux organiser le code et le rendre plus lisible...

/*AVANT*/
.nesting {
  color: hotpink;
}
.nesting > .is {
  color: rebeccapurple;
}
.nesting > .is > .awesome {
  color: deeppink;
}
/* MAINTENANT*/
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

[EDIT] Par contre, ce n'est pas forcément supporté par les navigateurs pas à jour... https://caniuse.com/css-nesting

text-wrap:balance

en gros, pour rendre plus homogène un texte sur plusieurs lignes... Attention, pas pour un texte de plus de 10 lignes apparemment.

via https://bookmarks.ecyseo.net/?DunHiA

Astuces & liens pour HTML, JS et toussa

Petite liste tirée des RSS que je suis en ce moment.

A (more) Modern CSS Reset - Andy Bell

De côté pour plus tard... Une reset.css plus moderne... Je me contentais du box-sizing depuis son avènement.

Les explications associées sont intéressantes.

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
Via https://links.kalvn.net/shaare/McJg3Q

RIDITLETEUR spécial DEV : CSS, HTML, JS, PHP...

A l'occasion d'un ménage dans les brouillons de billets, je compile les trucs DEV qui trainaient par là

Ressources CSS

Ressources JS

Ressources PHP

  • https://github.com/jcampbell1/simple-file-manager : GitHub - jcampbell1/simple-file-manager: A Simple PHP file manager. The code is a single php file.
  • https://grafikart.fr/tutoriels/authentification-2-facteurs-totp-630 : Tutoriel vidéo PHP : Authentification 2 facteurs, TOTP | Grafikart
  • https://phpbestpractices.org/ : A short, practical guide for common and confusing PHP tasks (Storing passwords, PHP and MySQL, PHP tags, Auto-loading classes, Single vs. double quotes, define() vs. const, Caching PHP opcode, PHP and Memcached, PHP and regex, Serving PHP, Sending email, Validating email addresses, Sanitizing HTML, PHP and UTF-8, Working with dates and times, Checking null and false values, Removing accent marks (diacritics) )

SwebDev - La fonction CSS clamp()

Clamp permet de spécifier trois valeurs pour une propriété : la valeur minimale, la valeur préférée et la valeur maximale.

Glopglop N°1

Ainsi, on pourra donner des tailles fixes comme minimum et maximum et une taille variable (pourcentages ou valeur de viewport) comme valeur préférée: la valeur variable sera utilisée, mais bornée au minimum et au maximum. ex: clamp(20px, 5vw, 54px)

Glopglop N°2

On peut faire des calculs directement dans clamp() : font-size: clamp(20px, 16px + 5vw, 54px);

Glopglop N°3

Clamp peut être utilisé sur les paddings, les margins etc... Tout ce qui a une valeur numérique (length, number, percentage...)

DoodleCSS & PaperCSS

Sympa ! Une feuille css permettant de donner un style doodle à la main aux éléments de formulaire HTML en ajoutant une classe au body . exemple

Bon, ya un appel vers google fonts mais rien que goofi ne saurait arranger...

Le Zip fait environ 277ko

EDIT

Merci à vinc[E] qui me signale une alternative très réussie : PaperCSS - 54ko

FireShot Capture 084 - Forms • PaperCSS - www.getpapercss.com.png

Il y a encore un appel à Google Fonts mais plus besoin du recours à un SVG pour les bordures...

Créer une arborescence en CSS uniquement - Dév. Web - ShevArezo`Blog

Superbe et pas si compliqué... Merci !

EDIT: Comme la page est bourrée de trackers, je copie colle ici et sur mon snippetvamp

CSS


 .tree {
  --spacing: 1.5rem;
  --radius: 10px;
  --marker-bg-default: #ddd;
  --marker-bg-haschild: #6b9abb;
  line-height: 2rem;
}
.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}
.tree ul li {
  border-left: 2px solid #ddd;
}
.tree ul li:last-child {
  border-color: transparent;
}
.tree ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}
.tree summary {
  display: block;
  cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}
.tree summary:focus {
  outline: none;
}
.tree summary:focus-visible {
  outline: 1px dotted #000;
}
.tree li::after,
.tree summary::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius) + 2px);
  left: calc(var(--spacing) - var(--radius) - 2px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: var(--marker-bg-default);
}
.tree summary::before {
  content: "+";
  z-index: 1;
  background: var(--marker-bg-haschild);
  color: #fff;
  line-height: calc(2 * var(--radius));
  text-align: center;
}
.tree details[open] > summary::before {
  content: "−";
}

HTML

<ul class="tree">
  <li>
    <details open>
      <summary>Informatique</summary>
      <ul>
        <li>
          <details>
            <summary>Périphériques</summary>
            <ul>
              <li>Clavier</li>
              <li>Souris</li>
              <li>Ecran</li>
            </ul>
          </details>
        </li>
        <li>
          <details open>
            <summary>Stockage</summary>
            <ul>
              <li>Disque dur</li>
              <li>SSD</li>
              <li>Clé USB</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>Carte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
</code></pre> codeCarte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
Via https://book.knah-tsaeb.org/

Super Useful CSS Resources 🌈 - DEV Community 👩‍💻👨‍💻

De côté pour plus tard: en particulier les usages exotiques de CSS.

The Cicada Principle, revisited with CSS variables – Lea Verou

Créer une impression de hasard (dans les formes, couleurs ou tout ce qui peut être stylé en css) en utilisant :nth-of-*() pour changer des variables css.

En utilisant assez de variables et en utilisant des nombres premiers pour nth-of, on donne l'illusion de la randomisation. Intéressant.

Plusieurs applications dans l'article.

Fil RSS des articles