Ce que vous pouvez faire avec CSS aujourd'hui

Allons-y.

Disposition de maçonnerie

Les dispositions de maçonnerie sont devenues très populaires avec Pinterest, Tumblr et Unsplash, et jusqu'à récemment, nous avions tendance à s'appuie sur JavaScript pour nous aider avec notre mise en page ce qui n'est presque jamais une bonne idée.

Bien sûr, vous pouvez utiliser CSS multicol très efficacement pour réaliser une mise en page de maçonnerie, mais cela L'approche peut être problématique avec le focus tabulé car elle présente le contenu dans les colonnes . Cela crée une déconnexion entre la disposition visuelle et l'index de tabulation.

Avance rapide jusqu'à aujourd'hui (enfin, très bientôt dans le futur ) et une disposition en maçonnerie est assez triviale, grâce à un mise à jour vers CSS Grid . Voici une disposition complète de maçonnerie, avec gouttières, en 6 lignes de CSS:

 .masonry {
  affichage: grille;
  grille-modèle-colonnes: répéter (4, 1fr);
  grid-template-rows: maçonnerie;
  écart de grille: 1rem;
} 

La magie est dans grid-template-rows défini comme maçonnerie qui le transforme en «axe de maçonnerie», fournissant ainsi la disposition «remplie» que nous

Explorons ceci et explorons une démo rapide de création d'une disposition de maçonnerie réactive . En utilisant une version légèrement modifiée du CSS ci-dessus, nous pouvons remplacer la ligne grid-template-columns pour utiliser cette auto grid method à la place:

 .masonry {
  affichage: grille;
  grid-template-columns: répétition (auto-fill, minmax (16rem, 1fr));
  grid-template-rows: maçonnerie;
  écart de grille: 1rem;
} 

La fonction minmax () nous permet de définir quelle est la plus petite taille de nos éléments, qui pour nous, est 16rem . Ensuite, nous disons à minmax () la taille maximale de chaque élément. Nous déclarons que 1fr, qui prend 1 partie de l'espace disponible restant .

Cette définition de grid-template-columns permet à notre mise en page de se casser et de s'empiler en cas d'épuisement d'espace horizontal que l'axe de maçonnerie trie alors automatiquement nos éléments restants pour nous.

Note : Pour le moment, la maçonnerie ne fonctionne que dans Firefox Nightly ou derrière un drapeau, mais la disposition de la grille fonctionnera toujours parfaitement dans les navigateurs non compatibles, ce qui en fait une cible d'amélioration progressive décente.

Rachel Andrew a écrit un excellent article sur CSS Grid Masonry et vous pouvez également lire le brouillon de l'éditeur CSS Grid Layout Module Level 3 ici [1 9459013] pour les détails techniques.

Le soutien de la maçonnerie est actuellement très faible mais comme tout ce qui se trouve sur le Web, déterminez votre expérience minimale viable puis augmentez progressivement avec l'amélioration. est un moyen résilient de construire des choses. Si vous devez utiliser une mise en page de maçonnerie, cependant: je vous recommande de vous en tenir à la testée et testée Masonry.js pour le moment, mais collez un ticket dans votre backlog à

Ressources

Le sélecteur : is

J'imagine que beaucoup d'entre nous ont dû écrire des CSS géniaux comme celui-ci dans le passé:

 .post h1,
.post h2,
.post h3 {
    hauteur de ligne: 1,2;
}

.post img,
.post vidéo {
    largeur: 100%;
} 

Heureusement, CSS nous a de nouveau soutenu avec la pseudo-classe : is pseudo-classe .

Ce CSS peut maintenant être considérablement simplifié en ceci: [19659013] .post: is (h1, h2, h3) {
hauteur de ligne: 1,2;
}

.post: is (img, vidéo) {
largeur: 100%;
}

Lorsque les choses deviennent plus complexes, cela devient encore plus utile, car vous pouvez enchaîner d'autres sélecteurs, tels que : not et : first-child comme dans l'exemple suivant démo:

La pseudo-classe : is () fonctionne en prenant une liste de sélection approuvée puis en la traduisant pour nous en une liste de sélection étendue. Cela nous permet d'écrire du code plus compact et au navigateur de faire ce qu'il fait déjà.

Si vous avez un projet complexe où la spécificité est cruciale, alors le : where () pseudo-classe pourrait être utile. La principale différence entre : is () et : where () est que : where () a zéro spécificité, alors que le : is () La pseudo-classe utilise le sélecteur le plus spécifique de la collection de sélecteurs passés. Cela devient utile si vous pensez que les règles définies dans votre bloc : is () doivent être remplacées hors contexte. Cet article MDN en montre un excellent exemple .

Cette pseudo-classe : is () a fantastique support de navigateur – mis à part IE11 et Opera Mini – donc je vous recommande absolument de commencer à l'utiliser aujourd'hui. Je suggérerais d'être prudent avec la pseudo-classe : where () car pour le moment, seuls Firefox et Safari la prennent en charge .

Resources

Logical CSS Functions For Dimensionnement

Le design réactif a évolué vers un design intrinsèque au fil des ans, les concepteurs repoussant à juste titre les limites du design sur le Web. Il y a eu beaucoup de hacks dans le passé – en particulier avec la typographie fluide – qui ont été plutôt fragiles, pour le dire légèrement.

Nous avons quelques fonctions CSS vraiment utiles qui aident au dimensionnement: min () max () et pince () . La fonction min () obtient la plus petite valeur de deux paramètres passés et max () fait l'inverse: prend la valeur la plus grande .

La fonction clamp () est encore plus pratique car elle permet de passer un minimum un maximum et une idéal valeur . En raison de cette valeur idéale de «verrouillage», clamp () est de plus en plus utilisé dans la typographie fluide, comme le légendaire FitText de Dave Rupert parce que vous obtenez une ligne de base garantie, ce qui empêche l'imprévisible les résultats. C'est la base de toutes ces fonctions car si vous définissez une bonne ligne de base comme minimum pour min () et une bonne ligne de base comme maximum dans max () vous obtenez cela nécessitait de la flexibilité, assurée par un niveau de contrôle raisonnable.

Ces fonctions logiques sont cependant bien plus utiles que cela. Voici une démo où je les utilise non seulement pour un dimensionnement fluide de la typographie, mais aussi pour dimensionner efficacement une image d'avatar.

Dans la démo, j'utilise min () pour dimensionner l'image et aussi calculer le rayon de la bordure de la même manière. C'est incroyablement subtil, mais aide vraiment à obtenir des détails de conception élevés sur le Web, ce qui est génial!

Una Kravets a écrit un article extrêmement utile sur les cas d'utilisation de ces fonctions . Je l'utilise aussi pour créer un wrapper flexible .

Resources

Unités réactives spécifiques pour la typographie

Il y a tellement d'unités dans CSS qui répondent toutes à des cas d'utilisation spécifiques. Saviez-vous qu'il existe des unités spécifiquement pour la typographie? Bien sûr, em et rem sont liés à la taille de la police, mais ch et ex sont basés sur la taille des lettres elles-mêmes. [19659006] L'unité ch est égale à la largeur du caractère 0 de votre police rendue dans sa taille. Cela s'adapte également à la police. C'est donc un moyen très pratique de limiter la largeur de votre texte, ce qui améliore la lisibilité . Aussi, gardez à l'esprit que dans les polices proportionnelles, 1ch est généralement plus large que la largeur moyenne des caractères souvent d'environ 20-30% .

Le L'unité ex est égale à la hauteur du caractère minuscule x – également appelé «hauteur x» dans la typographie plus traditionnelle. C'est vraiment utile pour travailler avec précision et réactivité avec l'axe vertical de votre typographie. Un cas d’utilisation très pratique pour cela consiste à créer une icône SVG de la même hauteur que votre texte.

Dans la démo suivante, j’ai résolu deux problèmes avec ces unités. Tout d’abord, j’ai limité la longueur du texte à ch puis j’ai utilisé l’unité ex pour positionner un élément et de manière plus efficace. Cela a longtemps été une douleur dans la conception Web!

Ressources

Mise à jour du contrôle de décoration de texte

La décoration de texte n'est plus ennuyeuse. Vous pouvez faire chargements maintenant, grâce à quelques mises à jour dans Décoration de texte niveau 4 . Mon truc préféré est de créer un style de surbrillance avec text-decoration-thick text-decoration-skip-ink et text-decoration-color . [19659064] Voir le stylo [Text decoration demo] (https://codepen.io/smashingmag/pen/WNGVXKV) par Andy Bell .

J'aime aussi utiliser ces nouvelles propriétés pour mieux contrôler l'épaisseur du soulignement des éléments d'en-tête, car elles peuvent devenir assez lourdes dans certaines polices.

Je vous recommande fortement de regarder cette vidéo de Jen Simmons où, comme toujours, elle explique les propriétés CSS d'une manière conviviale et facile à comprendre.

Resources

Scroll Margin

Cet extrait de CSS va considérablement s'améliorer vos sites Web:

 [id] {
  scroll-margin-top: 2ex;
} 

Lorsqu'un navigateur passe à un élément avec un id – souvent un en-tête dans un long article comme celui-ci – l'élément ciblé se trouve au ras du haut de la fenêtre. Non seulement cela n'avait pas l'air génial, mais cela posait aussi des problèmes pour les en-têtes fixes.

Cette propriété – scroll-margin-top – est l'antidote à tout cela et est incroyablement utile. Regardez cette démo où je la combine avec un défilement fluide:

Ressources

Rapport hauteur / largeur

S'il y avait jamais quelque chose dont nous avions besoin désespérément dans un design réactif , c'était le rapport hauteur / largeur natif. Cela est particulièrement nécessaire pour les médias intégrés, tels que les vidéos YouTube. Il y a longtemps eu le vieux padding hack pour ces conteneurs, mais un piratage ne devrait être qu'une chose temporaire.

Heureusement, nous aurons bientôt le support aspect-ratio dans les principaux navigateurs .

Si vous activez layout.css.aspect-ratio.enabled dans un navigateur Chromium, les démos suivantes seront respectivement un carré parfait et une vidéo YouTube parfaitement réactive:

Square (1 : 1)

Ci-dessous, un carré qui conservera toujours le même rapport hauteur / largeur, 1: 1 – obtenu en définissant rapport hauteur / largeur: 1/1 .

Vidéo (16: 9)

Pour les vidéos, un carré serait un format assez rare. Au lieu de cela, nous pouvons utiliser 16: 9 pour définir rapport hauteur / largeur: 16/9 sur la boîte.

Même si rapport hauteur / largeur n'est pas encore tout à fait là, vous devriez certainement commencer à y penser – en particulier avec les images, car ce qui suit est susceptible d'apparaître dans tous les navigateurs comme styles par défaut, et est déjà dans Firefox (à partir de 69):

 img , entrée [type="image"]vidéo, incorporer, iframe, marquee, objet, table {
  rapport hauteur / largeur: attr (largeur) / attr (hauteur);
} 

Cela va être très utile pour réduire le chargement de la page jank car des éléments comme vont générer une boîte de taille correcte pour eux-mêmes avant qu'ils se chargent. Mon conseil est de commencer à ajouter les attributs width et height aux éléments de l'exemple de code ci-dessus pour offrir à vos utilisateurs une meilleure expérience de chargement. Vous pouvez trouver plus de détails sur ce problème particulier sur MDN .

Aussi, en parlant d'articles utiles: jetez un œil à un article pratique sur l'unité de rapport hauteur / largeur ici sur Smashing Magazine, écrit par Rachel Andrew – Je vous recommande vivement de le lire.

Resources

Content-Visibility And Contains-Intrinsic-Size

Le dernier de notre tournée est la visibilité du contenu et comment il peut nous donner un énorme augmentation des performances. Parce que CSS vous permet à peu près de faire n'importe quoi un navigateur doit calculer tout pour afficher un seul élément. Si vous avez une page énorme et complexe, cela peut entraîner des temps de rendu et de peinture raisonnablement lents.

Les nouvelles propriétés content-visibilité et contains-intrinsic-size sont arrivées pour aider cela et ils sont super .

Avec content-visibilité: auto vous pouvez dire au navigateur de ne pas s'inquiéter du rendu des éléments là-dedans pendant qu'ils sont en dehors de la fenêtre ce qui peut avoir un impact considérable sur les vitesses de chargement initiales. Le seul problème est que l'élément avec content-visibilité: auto défini sur celui-ci perd sa hauteur, nous définissons donc contains-intrinsic-size sur quelque chose comme 0 400px ] à indice à quelle sorte de taille l'élément sera lorsqu'il sera chargé.

Ces propriétés permettent au navigateur d'ignorer le rendu initial et à la place, comme les éléments avec content-visibilité: auto mis sur eux défilez près de la fenêtre, le navigateur commencera à les rendre. Chargement progressif approprié!

Cette vidéo de Jake Archibald la démontre très bien:

Vous pouvez également lire cet excellent article aussi .

Ressources

Conclusion et ce qui va arriver

C'est un joli cool nouveau CSS, non? Il y en a d'autres qui arrivent bientôt et des charges dans le pipeline à long terme aussi. Nous pouvons nous attendre à Media Queries Level 5 qui nous permet de cibler le niveau de lumière ambiante actuel et si l'utilisateur préfère ou non des données réduites.

Nous avons également CSS Nesting in draft ce qui nous donnera des capacités d'imbrication de type Sass comme celle-ci:

 .my-element {
    fond: rouge;

    & p {
        fond: jaune;
    }
} 

Nous obtenons encore plus de contrôle, avec les descripteurs de remplacement des métriques de police et Cascade Level 5 qui introduit des couches dans la cascade. Le prototypage est également en cours avec les requêtes de conteneurs !

Enfin, il y a quelques nouvelles astuces sympas à l'horizon, comme animations liées par défilement qui ouvriront la porte grande ouverte à une nouvelle génération de travail créatif sur le web.

En conclusion, le présent et l'avenir du CSS sont en effet très lumineux et si vous adoptez une approche pragmatique et progressive de votre CSS: les choses continueront à s'améliorer sur vos projets

(vf, yk, il)