CSS News juillet 2020

Les choses bougent beaucoup plus rapidement qu'auparavant en termes d'implémentation des fonctionnalités de la plate-forme Web, et cet article est un tour d'horizon des nouvelles sur les fonctionnalités CSS qui font leur chemin dans la plate-forme. Si vous êtes le genre de personne qui n'aime pas lire des choses si vous ne pouvez pas les utiliser maintenant alors cet article n'est probablement pas pour vous – nous en avons beaucoup d'autres pour vous à la place! Cependant, si vous aimez savoir ce qui se passe et en savoir plus sur les choses avec lesquelles vous pouvez jouer dans une version bêta d'un navigateur, lisez la suite!

Flexbox Gaps

Commençons par quelque chose qui est implémenté dans le version d'expédition d'un navigateur, et en version bêta dans un autre. Dans CSS Grid, nous pouvons utiliser les propriétés gap column-gap et row-gap pour définir les espaces entre les lignes et les colonnes ou les deux en même temps . La fonction écart de colonne apparaît également dans la disposition multi-colonnes pour créer des espaces entre les colonnes.

Bien que vous puissiez utiliser des marges pour espacer les éléments de la grille, la bonne chose à propos de la La fonction d'écart est que vous n'obtenez que des intervalles entre vos articles; vous ne vous retrouvez pas avec de l'espace supplémentaire à prendre en compte au début et à la fin de la grille. L'ajout de marges a généralement été la façon dont nous avons créé un espace entre les éléments flexibles. Pour créer un espace régulier entre les éléments flexibles, nous utilisons une marge. Si nous ne voulons pas de marge au début et à la fin, nous devons utiliser une marge négative sur le conteneur pour le supprimer.

Ce serait vraiment bien d'avoir cette fonction d'écart dans Flexbox également, n'est-ce pas? La bonne nouvelle est que nous l'avons – il est déjà implémenté dans Firefox et est dans la version bêta de Chrome.

Dans le prochain CodePen, vous pouvez voir les trois options. Les premiers sont des éléments flexibles utilisant des marges de chaque côté. Cela crée un espace au début et à la fin du conteneur flexible. Le second utilise une marge négative sur le conteneur flexible pour tirer cette marge à l'extérieur de la frontière. Le troisième supprime complètement les marges et utilise à la place écart: 20 pixels créant un écart entre les éléments mais pas sur les bords de début et de fin.

Mind The Gap

La mise en œuvre de Flexbox gap met en évidence quelques éléments intéressants. Tout d'abord, vous vous souvenez peut-être que lorsque la fonction d'écart a été introduite pour la première fois dans Grid Layout, les propriétés étaient:

• grid-gap
• grid-row-gap
• grid-column-gap

Ces propriétés étaient expédié lorsque la grille est apparue pour la première fois dans les navigateurs. Cependant, de la même manière que les fonctions d'alignement ( justifier-contenu align-contenu align-items etc.) sont apparues pour la première fois dans Flexbox puis sont devenus disponibles pour Grid (une fois qu'il a été décidé que les fonctions d'écart étaient utiles à plus que la grille), elles ont été déplacées et renommées.

Parallèlement à ces fonctions d'alignement, les propriétés d'écart sont maintenant dans la spécification d'alignement de boîte. La spécification traite de l'alignement et de la distribution de l'espace, c'est donc une maison naturelle pour eux. Pour nous empêcher d'avoir plusieurs propriétés préfixées par un nom de spécification, elles ont également été renommées pour supprimer le préfixe grid- .

Si vous avez la version grid- versions préfixées dans votre code , vous n'avez pas à vous inquiéter. Ils ont été conservés en tant qu'alias des propriétés afin que votre code ne casse pas. Pour les nouveaux projets, cependant, les versions non préfixées sont implémentées dans tous les navigateurs.

Détection de la prise en charge des écarts pour Flexbox

Vous pensez peut-être que vous pouvez utiliser la fonction d'espacement dans Flexbox et utiliser les requêtes de fonctionnalités pour tester la prise en charge en utilisant un marge comme repli. Malheureusement, ce n'est pas le cas, car les requêtes de fonctionnalités testent un nom et une valeur. Par exemple, si je veux tester la prise en charge de la grille, je peux utiliser la requête suivante:

 @supports (display: grid) {
  .la grille {
    / * code de disposition de la grille ici * /
  }
}

Si je testais pour écart: 20px cependant, j'obtiendrais une réponse positive dans Chrome qui actuellement ne supporte pas l'écart dans Flexbox mais le supporte dans Grid. Toutes ces requêtes de fonctionnalités consistent à vérifier si le navigateur reconnaît la propriété et la valeur. Ils n'ont aucun moyen de tester la prise en charge dans un mode de mise en page particulier. J'ai soulevé cela comme un problème dans le CSS WG, cependant, il s'avère que ce n'est pas une chose facile à résoudre, et il y a actuellement peu d'endroits où nous avons ce problème d'implémentation partielle.

Unit

Certaines choses ont un rapport d'aspect que nous voulons conserver, et l'image ou une vidéo par exemple. Si vous placez une image ou une vidéo directement sur la page à l'aide de l'élément HTML img ou video il conserve bien le rapport hauteur / largeur avec lequel il arrive (sauf si vous changez de force la largeur ou la hauteur ). Cependant, nous voulons parfois ajouter un élément sans rapport d'aspect intrinsèque tout en rendant une dimension flexible avec l'autre en conservant un rapport d'aspect spécifique. Cela se produit le plus souvent lorsque nous intégrons une vidéo avec une iframe, cependant, vous pouvez également créer des zones parfaitement carrées sur votre grille (ce qui nécessite également qu'une dimension puisse réagir à une autre).

La ​​façon dont nous traitons actuellement c'est par le biais du hack de rembourrage . Cela utilise le fait que le remplissage dans la direction du bloc est copié à partir de la direction en ligne lorsque nous utilisons un pourcentage. Ce n’est pas une solution très élégante au problème, mais cela fonctionne.

L’unité de rapport d’aspect cherche à résoudre ce problème en nous permettant de spécifier un rapport d’aspect pour une longueur. Chrome l'a implémenté dans Canary, vous pouvez donc consulter la démo ci-dessous en utilisant Canary si vous activez le drapeau Fonctionnalités de la plateforme Web expérimentale .

J'ai créé une disposition de grille et défini mes éléments de grille sur utilisez un rapport d'aspect 1/1 . La largeur des éléments est déterminée par leur taille de piste de colonne de grille (comme c'est flexible). La hauteur est ensuite copiée à partir de cela pour faire un carré. Juste pour le plaisir, j'ai ensuite fait pivoter les éléments.

Aux Canaries, vous pouvez jeter un œil dans la démo et voir comment les éléments restent carrés même si leur piste grandit et se rétrécit, en raison de la fait que la taille de bloc utilise un rapport 1/1 de la taille en ligne.

Native Masonry Support

Les développeurs demandent souvent si CSS Grid peut être utilisé pour créer une maçonnerie- ou mise en page de style Pinterest. Bien que certaines démos ressemblent un peu à cela, Grid n'a jamais été conçu pour faire de la maçonnerie.

Pour expliquer, vous devez savoir ce qu'est une disposition en maçonnerie. Dans une disposition de maçonnerie typique, les éléments s'affichent par ligne. Une fois la première ligne remplie, de nouveaux éléments remplissent une autre ligne. Cependant, si certains des éléments de la première ligne sont plus courts que d'autres, les éléments de la deuxième ligne augmenteront pour combler l'écart. La bibliothèque de maçonnerie est le nombre de personnes qui y parviennent en utilisant JavaScript.

Si vous essayez de créer cette disposition à l'aide de la grille CSS et du placement automatique, vous verrez que vous perdez ce réarrangement des éléments dans la direction du bloc. Ils se présentent en lignes et colonnes strictes car c'est ce que fait une grille.

La ​​grille pourrait-elle donc être utilisée comme disposition de maçonnerie? Un des ingénieurs de Mozilla le pense et a créé un prototype de la fonctionnalité. Vous pouvez le tester en utilisant Firefox Nightly avec l'indicateur layout.css.grid-template-masonry-value.enabled défini sur true en accédant à about: config dans la barre d'URL de Firefox Nightly.

Bien que cela soit très excitant pour quiconque a dû créer ce type de disposition à l'aide de JavaScript, un certain nombre d'entre nous se demandent si la spécification de la grille est le lieu pour définir cette disposition très spécifique. Vous pouvez lire certaines de mes réflexions dans mon article " La ​​maçonnerie appartient-elle aux spécifications de la grille CSS? ".

Sous-grille

Nous avons pris en charge la valeur de la sous-grille de grille-modèle-colonnes et grille-modèle-lignes dans Firefox depuis un certain temps. L'utilisation de cette valeur signifie que vous pouvez hériter de la taille et du nombre de pistes d'une grille parent à travers les grilles enfants. Essentiellement, tant qu'un élément de la grille affiche : grille il peut hériter des pistes qu'il couvre plutôt que de créer de nouvelles pistes de colonne ou de ligne.

La ​​fonctionnalité peut être testée dans Firefox, et j'ai beaucoup d'exemples que vous pouvez tester. L'article « Creuser dans la propriété d'affichage: les grilles tout le long » explique en quoi la sous-grille diffère des grilles imbriquées et « CSS Grid Level 2: Here Comes Subgrid » présente la spécification. J'ai également un ensemble d'exemples détaillés dans « Grille par exemple ».

Cependant, la première question que les gens se posent lorsque je parle de sous-grille est: «Quand sera-t-il disponible dans Chrome?» Je ne peux toujours pas vous donner un quand mais de bonnes nouvelles se profilent à l'horizon. Le 18 juin, dans un article de blog Chromium il a été annoncé que l'équipe Microsoft Edge (qui travaille maintenant sur Chromium) travaillait à réimplémenter Grid Layout dans le moteur LayoutNG, c'est-à-dire le moteur de mise en page de nouvelle génération de Chromium. Une partie de ce travail impliquera également une prise en charge supplémentaire des sous-grilles.

L'ajout de fonctionnalités aux navigateurs n'est pas un processus rapide, cependant, l'équipe Microsoft nous a apporté Grid Layout en premier lieu - ainsi que la première implémentation préfixée livrée dans IE10. C'est donc une excellente nouvelle et j'ai hâte de pouvoir tester l'implémentation lorsqu'elle sera livrée en version bêta.

préfère les données réduites

Pas encore implémenté dans aucun navigateur - mais avec un bogue répertorié pour Chrome avec une activité récente - est la fonction multimédia prefers_reduced_data . Cela permettra à CSS de vérifier si le visiteur a activé l'enregistrement des données dans son appareil et d'ajuster le site Web en conséquence. Vous pouvez, par exemple, éviter de charger des images volumineuses.

 @media (prefers-reduction-data: Reduce) {
  .image {
    background-image: url ("images / placeholder.jpg");
  }
}

La fonctionnalité multimédia prefers_reduced_data fonctionne de la même manière que certaines des fonctionnalités multimédia des préférences utilisateur déjà mises en œuvre dans la spécification des requêtes multimédias de niveau 5. Par exemple, les fonctions multimédias prefers_reduced_motion et prefers_color_scheme vous permettent de tester pour voir si le visiteur a demandé de réduire le mouvement ou un mode sombre dans leur système d'exploitation et d'adapter votre CSS à votre convenance.

:: marker

Le pseudo-élément :: marker nous permet de cibler le marqueur de liste. À un niveau très simple, cela signifie que nous pouvons cibler la puce de la liste et changer sa couleur ou sa taille. (Cela était auparavant impossible en raison du fait que vous ne pouviez cibler que l'élément de la liste entière - texte et marqueur.)