Exemples expliqués de mise en forme en 100% CSS ou agrementés d'une pincée de javaScript.
Ces dernieres années les modèles de boites utilisables se sont enrichis de deux type d'affichages en grilles: flex et grid.Vous en avez déjà probablement fait usage en reprenant des exemples qui fonctionnaient pour vos besoins. Voyons leurs différences et usages dans cet article.
Aux premiers abords et en les testant avec quelques elements, les résultats semblent similaires et peuvent preter à confusion dans leur usages et limites. Pourtant l'un ne fonctionne que sur un axe , portions par portions lorsque l'autre fonctionne sur les deux axes dans un tout, comme le ferait un tableau, ils sont en fait trés différents bien qu'ayant quelques propriétes apparement similaires.L'un etant plus flexible que l'autre posant un cadre.
Lire la suite de grid et flex, leurs differences.
La pseudo classe :nth-child(X) permet de cibler un élement sur une position unique.
La pseudo classe :nth-child(Xn) permet de cibler un élement se situant toutes les N positions.
Par exemple, pour cibler tout les element se trouvant en quatriéme, huitiéme, douziéme, etc.. position: :nth-child(4n){} fera le travail.
Il est alors possible de mettre en place un motif visuel répétitif (pattern en anglais).
Nous profiterons de cet article pour evoquer les autres pseudo class autour de nth-child avec une petite parenthèse sur les selecteurs de combinaisons.
Lire la suite de La pseudo classe :nth-child(Xn) , pour un motif qui se répete ... ou pas.
Le vent en poupe, flex est partout dans nos feuilles de styles et dans les frameworks CSS.
Cette propriété reste parfois mystérieuse et magique pour certains.
Une question revient souvent, comment je fais des lignes avec X colonnes et des marges entre chaque?
Voici un petit tutoriel pour débutant, en guise d'article, nécessitant un minimum de connaissances en Flexbox.
Lire la suite de Flex, ajuster le nombre d'élements par lignes. CSS
le modéle de boite en flex donne une hauteur de référence aux enfants sans qu'il soit nécessaire de la déclaré dans la feuille de styles pour s'en servir. et c'est plutôt une bonne chose si l'on est dans un cas où cette hauteur varie selon le contenu ou la largeur de l'écran.
Lire la suite de Une grille d'hexagones qui s'imbriquent.
:is() est un sélecteur qui deviendra vite incontournable dans vos feuilles de styles aux cotés de :where() et :not()
Gardez un oeil sur Caniuse.com pour voir où en est le support dans nos navigateur
N'oublions pas la définition officielle de cette propriété.
Lire la suite de Le selecteur :is()