Ultra-light JS/CSS image slider

#17232

Hop, à nouveau tous les scripts / lib de sliders que je trouve sont trop lourds, trop complets, demandent jQuery…

… du coup j’ai pondu un slider très simple en quelques lignes de JS & CSS.

Rien de complexe, mais c’est ultra-léger, sans dépendances, et ça marche.
Et c’est assez simple à comprendre pour que vous puissiez ajouter ce que vous voulez vous-même :).

CSS3 structural pseudo-class selector tester

#17219

Un testeur pour les "n+x" dans les nth-child en CSS.

Essayez par exemple "4n", "4n+1", "-n+2", "-n-2", etc.

Pour mémo :
— sélectionner du ixième jusqu’à la fin : « n + x »
— sélectionner du début jusqu’à ixième : « -n + x »
— sélectionner du 3e jusqu’au 7e : nth-child(n+3):nth-child(-n+7)

(ce dernier n’est pas testable dans l’outil du lien)

http://lea.verou.me/demos/nth.html

Using CSS Counters - Pine

#17062

Un petit article sur les compteurs CSS.

C’est très pratique ! Perso je les utilise pour les h2, h3, h4 : ça me fait des documents avec des sections numérotées.

Ensuite, j’utilise JS pour récupérer tous les headings, et en faire un sommaire. Et j’utilise de nouveau les compteurs CSS.

Exemple : https://codepen.io/lehollandaisvolant/pen/wJgGdR (tout à la fois).
Exemple en live sur mon site :
http://lehollandaisvolant.net/tuto/bin/
http://lehollandaisvolant.net/tuto/responsive-css/
http://lehollandaisvolant.net/tuto/pagespd/

Je devrais peut-être en faire un article dédié, c’est tellement cool comme astuce !

(lien via)

https://pineco.de/using-css-counters/

Happier HTML5 Form Validation - daverupert.com

#16989

However the styling portion with input:invalid sorta sucks because empty inputs are trigger the :invalid state, even before the user has interacted with the page.

Heu, ça doit être Chrome, parce que je n’ai pas ça sous Firefox.

Les champs se mettent en rouge que quand je clique dessus (et reste quand j’en sors), mais il n’y a rien qui se met en rouge avant d’avoir interagit avec.

Sinon on peut utiliser un [value=""] couplé avec un :not(:placeholder-shown)

(Oubliez pas que pour le sélecteur d’attribue, le CSS cible la valeur de l’attribut dans le code source, pas à l’objet du DOM. Donc un champ vide au chargement et qu’on remplirait, réagirait toujours au [value=""] parce que le code source (reçu) est vide, mais la variable se trouve en mémoire. Il faut passer par JS pour synchroniser les deux, d’où la méthode du [value=""] (champ vide, pas encore touché) couplé avec le :not(:placeholder-shown) (champ remplis, pas encore touché non plus).

http://daverupert.com/2017/11/happier-html5-forms/

Pure-CSS fix for the fixed-menu / :target problem

#16981

Un fix pour le problème des ancres quand on a un menu fixe en haut de la page : l’élément ancré se retrouve bien en haut de la page, mais il est invisible parce qu’il est caché par le menu fixe.

Cette astuce résout le problème de manière invisible (pas de marges visibles).

Il s’agit d’appliquer un ::before sur le :target. La hauteur du ::before est égal (ou supérieur) à la hauteur du menu, et on lui met aussi un margin-top négatif égal à sa hauteur.

De cette façon, l’ancre s’applique sur le ::before, c’est donc lui qui est caché par le menu et le vrai élément ciblé (celui qu’on veut voir) est visible.

C’est très astucieux.

(merci à Aeris pour avoir déniché l’astuce !)

https://codepen.io/lehollandaisvolant/pen/JOOQeq

CSS avancé : métriques des fontes, line-height et vertical-align - Vincent De Oliveira

#16915

C’est beau d’un côté, de plonger si bas (bas-niveau) dans le CSS, mais ça complique pas mal les choses d’un point de vue pratique.

Perso, je note ce genre de choses, mais je n’essaye pas de les résoudre : bien trop compliqué (et puis de toute façon mal supporté par les nav).
Je me contente de savoir que c’est là pour pas chercher pendant 3 heures d’où viennent les décalage qu’on trouve partout…

http://iamvdo.me/blog/css-avance-metriques-des-fontes-line-height-et-vertical-align

Stéphanie Walter 🦊 sur Twitter : "#BlendWebMix “Le souci du responsive c’est qu’on charge tout le gros site donc c’est lent” Oui, enfin du responsive MAL FAIT surtout hein…"

#16910

+1

Un template fait correctement à la base, il demande très peu d’ajustements pour être compatible mobile. Et les media-queries servent justement pour faire ces ajustements.
En pratique, il s’agit souvent de transformer les dispositions "ligne" (les blocs/sections sont côte à côte) en disposition "colonne" (les uns sous les autres). Avec les flex, c’est devenu très très rapide à faire.

Le souci du responsive c’est qu’on charge tout le gros site donc c’est lent

Ben oui, car le "gros site" représente à la fois l’architecture desktop et l’architecture mobile de la page. On a factorisé le code pour avoir 90% du code commun à tous les appareils (mobiles et non-mobiles).

Ce n’est donc pas lent : la vitesse est normale.

Et puis, comme je l’avais moi-même mis là : https://lehollandaisvolant.net/tuto/responsive-css/ , une simple ligne <meta /> dans le HTML fait déjà 90% du boulot et redimensionnant l’ensemble des éléments à une taille visible.

De toute façon, on peut toujours ajouter une ligne <styles> en HTML qui ne charge le document CSS uniquement quand on est sur mobile. Comme ça il n’y a aucune bande passante de consommé (à part la centaine d’octets de la ligne HTML, ce qui est une quantité de données absolument négligeable).

À une époque je m’étais fait comme spécialité de trouver des solutions pour des webmasters qui voulaient un site responsive sans toucher au thème.
Là il fallait faire en sorte que le navigateur mobile 1) casse le thème desktop et 2) reconstruise l’architecture de la page pour mobile. Certes, c’était très une pratique honteuse, mais ça dépannait à moindre frais pour le webmaster (et c’est loin des pires trucs que j’ai pu voir, comme un template où tout, absolument tout, était positionné en absolute (phrase par phrase, ligne de texte par ligne de texte… une horreur…).

Ce n’est pas du tout une chose à faire quand on fait un thème from-scratch.

https://twitter.com/WalterStephanie/status/923567524020662272

[CSS] Un effet label/input avec icône et flexbox - Le Hollandais Volant

#16797

Je la repartage, parce que je suis tellement génial que je réutilise souvent mes propres astuces.

Mais aujourd’hui j’utilise plutôt les fonts avec les icônes dedans, et du coup ce n’est plus avec un background() mais avec content sur le ::before (du label). Mais le principe reste le même, c’est juste plus léger (les webfont contient des milliers d’icônes scallables là où un PNG en a 1 ou 2 pour le même poids).

https://lehollandaisvolant.net/?d=2015/07/17/23/46/32-css-un-effet-labelinput-avec-icone-et-flexbox