xpath est une façon d'extraire des données d'un document xml plus logique que le parsing par une regex.
En gros, on retrouve un contenu grâce au chemin dans le DOM qui y conduit.
)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...
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()...
Pour la page de démo: c'est par là.
Pour le code : c'est sur snippetvamp.
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.
<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...
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...
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
scrollIntoView() ➜ https://www.alsacreations.com/astuce/lire/1883-Le-scroll-maitrise-avec-scrollIntoView.htmlL'élément template pour créer des objets à cloner via javascript de façon plus sémantique que via des div cachées.
template est inerte: les styles ne s'appliquent pas, les images ne se chargent pasdiv peut échouer, être désactive ou redéfini ailleurs alors que template est toujours cachédiv cachées, pas les template (à priori)Un wiki en une page html qui contient aussi l'éditeur permettant de le modifier (ajout/edition de pages, markdown etc) pour moins de 60ko.
Bim !
Un web component pour faire du markdown facilement par Lea Verou. Hop, de côté.
Ha zut, comme dit ici https://bookmarks.ecyseo.net/?sAzyVQ ça ne fonctionne que sous chrome.... Merci copain...
POURQUOI ?! PFFF
Je me suis aperçu récemment de l'existence de la balise details et je me suis dit que je pourrais me noter celles qui me feraient de l'usage dans un éventuel avenir.
L'élément HTML details sert à créer une ligne de résumé permettant de révéler plus d'informations sur un clic.
L'attribut [open] permet de styler l'ensemble lorsqu'il est ouvert.
<style>
details{font-style:italic;cursor:pointer}
details:after summary{content:"▶"}
details[open]:after summary{content:"▼"}
details p{margin-left: 25px}
</style>
<details>
<summary>Ligne de résumé.</summary>
<p>Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...</p>
</details>
Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...
en savoir plus - compatibilité 92% et pas sur edge
Crée une boîte de dialogue dans laquelle on peut mettre ce que l'on veut. L'attribut open contrôle l'ouverture et la fermeture
en savoir plus - compatibilité 75%, c'est peu...
La balise data permet d'ajouter une valeur interprétable par une machine à une valeur lisible par un humain: plus simplement, on peut relier le nom d'un produit à son ID dans la base de données par exemple.
<p>New Products:</p>
<ul>
<li><data value="398">Mini Ketchup</data></li>
<li><data value="399">Jumbo Ketchup</data></li>
<li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>en savoir plus - compatibilité 99%
On peut spécifier une image qui s'affiche pendant le chargement de la vidéo en faisant <video poster="chemin/vers/image.jpg">
en savoir plus - compatibilité 82%
On peut autoriser ou interdire la vérification orthographique avec cet attribut <input type="text" spellcheck="false">
en savoir plus - compatibilité 99%
Fournit l'url de base et le target pour tous les liens relatifs de la page.
Astuce: en faisant <base target="_blank"> tous les liens s'ouvriront dans une nouvelle page...
en savoir plus - compatibilité 98%
Crée une jolie jauge dont on définit le remplissage afin de représenter visuellement une proportion. Elle utilise les mêmes attributs qu'input number (min, max, value) et y ajoute high, low et optimum qui définissent respectivement à partir de quel nombre la valeur est haute ou basse ainsi que la valeur considérée comme optimale.
Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas les pseudo-éléments before et after)
<meter value="2" min="0" max="10" low="2">2 out of 10</meter>
meter value="0.6">60%
en savoir plus - compatibilité 95%
Comme meter, progress crée une... barre de progression. Elle utilise les attribut max et value.
Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas non plus les pseudo-éléments before et after)
<progress value="2" min="0" max="10" low="2">2 out of 10</progress>
progress value="0.6">60%
en savoir plus - compatibilité 98%
Qui sert simplement à mettre en surbrillance un passage de façon plus sémantique.
en savoir plus - compatibilité 50%
pour regrouper les options d'un select <optgoup label="groupe1">
en savoir plus - compatibilité 77%
.jpg)