#18159

Pure CSS floating label

Un "floating label" en CSS qui marche tout le temps (sans JS).

Ça utilise le :placeholder-shown, mais peu importe, c’est relativement bien supporté : https://caniuse.com/#feat=css-placeholder-shown

Ah et surtout, ça utilise un vrai "label" et pas le placeholder, justement (qui est là et nécessaire, mais vide). Ça reste donc accessible pour les lecteur d’écran. Le fait de placer un span dans le label ne doit pas changer quoi que ce soit de ce côté là.

https://codepen.io/lehollandaisvolant/pen/vvavWJ?editors=1100

#18157

CSS3 Grid Layout - Alsacreations

Purée, les Grid en CSS c’est trop bien !

J’avais déjà été ébloui par les flex-box et leur possibilités (voir là), mais les grid ne sont pas en reste non plus !

Par exemple, je veux faire un formulaire pour remplir sont adresse postale, sous la forme suivante :


|--------------------------|
| n° | nom de rue          |
|--------------------------|
| complément               |
|--------------------------|
| cp     | ville           |
|--------------------------|
| état        | pays       |
|--------------------------|

C’est à dire en respectant la disposition des champs. (un peu comme là)

Le truc, c’est que j’ai juste un seul <div> avec sept <input> qui se suivent. Je ne veux pas utiliser de <p> ou de <br/>.

La solution ? Les grid (comme dans Tron) !

Je déclare le <div> comme étant une grille, divisée en 10 sections de 10 % chacune sur la largeur. Pour les lignes, le retour à la ligne est automatique ici (mais le grid permet également de modifier ça comme on veut !).

Ensuite, je donne à chaque <input> sa position : numéro de ligne, numéro de colonne et un sorte de « colspan ».

J’en ai fait un codepen pour voir ça directement : https://codepen.io/lehollandaisvolant/pen/aPjBXK?editors=1100

Et tout est parfaitement aligné, responsive et flexible ! C’est ça qui est tellement mieux qu’avec des floats !

https://www.alsacreations.com/article/lire/1388-css3-grid-layout.html