Catégories
Plugin et site web

CSS News juillet 2020 – Smashing Magazine

A propos de l'auteur

Rachel Andrew est non seulement rédactrice en chef du magazine Smashing, mais également développeur Web, écrivaine et conférencière. Elle est l'auteur de plusieurs livres, dont…
Plus à propos
Rachel
Andrew

Dans cet article, Rachel Andrew examine certaines des fonctionnalités CSS intéressantes qui font leur chemin dans les navigateurs en ce moment.

Les choses bougent beaucoup plus rapidement qu'auparavant en termes de mise en œuvre 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 bien d'autres à votre 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 la version d'expédition d'un navigateur et en version bêta dans un autre. Dans CSS Grid, nous pouvons utiliser le gap, column-gap et row-gap propriétés pour définir les écarts entre les lignes et les colonnes ou les deux en même temps. le column-gap 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 gap la caractéristique est que vous obtenez seulement des lacunes 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’espace dans Flexbox, non? 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 gap: 20px, créant un écart entre les éléments mais pas sur le bord de début et de fin.

Voir les articles Pen Flex avec des marges et des marges négatives, et la fonction d'écart par Rachel Andrew (@rachelandrew) sur CodePen.

Voir les articles Pen Flex avec des marges et des marges négatives, et la fonction d'écart par Rachel Andrew (@rachelandrew) sur CodePen.

Mind The Gap

La Flexbox gap la mise en œuvre 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 les suivantes:

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

Ces propriétés ont été expédiées 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 (justify-content, align-content, align-items, et ainsi de suite) sont apparus pour la première fois dans Flexbox, puis sont devenus disponibles pour Grid (une fois qu'il a été décidé que les fonctionnalités d'écart étaient utiles pour 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 se trouvent désormais 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 grid- préfixe.

Si vous avez le 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'écart dans Flexbox et utiliser les requêtes de fonctionnalité pour tester la prise en charge en utilisant une marge comme solution de 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) {
  .grid {
    /* grid layout code here */
  }
}

Si je devais tester gap: 20px, cependant, j'obtiendrais une réponse positive dans Chrome qui ne prend actuellement pas en charge l'écart dans Flexbox, mais Est-ce que le soutenir dans la grille. 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 des endroits limités où nous avons ce problème d'implémentation partielle.

Unité de rapport hauteur / largeur

Certaines choses ont un rapport d'aspect que nous voulons conserver, et une image ou une vidéo par exemple. Si vous placez une image ou une vidéo directement sur la page en utilisant le code 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 incorporons une vidéo avec un 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 cela est au moyen du hack de remplissage. 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. C’est une solution peu élégante au problème, mais ça marche.

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 jeter un œil à la démo ci-dessous en utilisant Canary si vous activez le Fonctionnalités expérimentales de la plateforme Web drapeau.

J'ai créé une disposition de grille et défini mes éléments de grille pour utiliser un 1 / 1 ratio d'aspect. 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 articles.

Une grille d'éléments carrés

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

Voir la grille du stylet en utilisant le rapport d'aspect pour les éléments (nécessite l'indicateur de fonctionnalités de la plate-forme Web Chrome Canary et Exp) par Rachel Andrew (@rachelandrew) sur CodePen.

Voir la grille du stylet en utilisant le rapport d'aspect pour les éléments (nécessite l'indicateur de fonctionnalités de la plate-forme Web Chrome Canary et Exp) par Rachel Andrew (@rachelandrew) sur CodePen.

Prise en charge de la maçonnerie native

Les développeurs demandent souvent si CSS Grid peut être utilisé pour créer une mise en page de style maçonnerie ou Pinterest. Alors que certaines démos ressemblent un peu à ça, 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 mise en page à l'aide de la grille CSS et du placement automatique, vous verrez que vous perdez ce réarrangement de la direction du bloc des éléments. Ils se présentent en lignes et colonnes strictes car c'est ce que fait une grille.

Alors, la grille pourrait-elle ê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 le drapeau layout.css.grid-template-masonry-value.enabled mis à true en allant à about:config dans la barre d'URL de Firefox Nightly.

Disposition de la maçonnerie dans Firefox Nightly

Voir le Pen Proposed Masonry (nécessite Firefox Nightly et the) de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen Proposed Masonry (nécessite Firefox Nightly et the) de Rachel Andrew (@rachelandrew) sur CodePen.

Bien que cela soit très excitant pour quiconque a dû créer ce type de mise en page à 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 mise en page très spécifique. Vous pouvez lire certaines de mes réflexions dans mon article «La maçonnerie appartient-elle à la spécification de la grille CSS?».

Sous-grille

Nous avons bénéficié du soutien de subgrid valeur de grid-template-columns et grid-template-rows 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 grille a display: grid, 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 «Digging Into The Display Property: Grids All The Way Down» 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 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 nouvelle génération de Chromium. Une partie de ce travail impliquera également un support de sous-grille supplémentaire.

L'ajout de fonctionnalités aux navigateurs n'est pas un processus rapide, cependant, l'équipe Microsoft nous a apporté la disposition de la grille en premier lieu – ainsi que la mise en œuvre préfixée au début 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.

prefers-reduced-data

Pas encore implémenté dans aucun navigateur – mais avec un bogue répertorié pour Chrome avec une activité récente – est le prefers_reduced_data fonction multimédia. 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, choisir d'éviter de charger de grandes images.

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

le prefers_reduced_data La fonction multimédia fonctionne de la même manière que certaines des fonctionnalités multimédia des préférences utilisateur déjà implémentées dans la spécification des requêtes multimédias de niveau 5. Par exemple, les fonctionnalités 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 son système d'exploitation et d'adapter votre CSS à votre convenance.

::marker

le ::marker le pseudo-élément 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.)

Voir le Pen :: marker de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen :: marker de Rachel Andrew (@rachelandrew) sur CodePen.

Soutien ::marker est déjà disponible dans Firefox et se trouve désormais également dans Chrome Beta.

En plus de styliser les puces sur les listes réelles, vous pouvez utiliser ::marker sur d'autres éléments. Dans l'exemple ci-dessous, j'ai une rubrique qui a été donnée display: list-item et a donc un marqueur que j'ai remplacé par un emoji.

Voir le Pen display: list-item and :: marker de Rachel Andrew (@rachelandrew) sur CodePen.

Voir le Pen display: list-item and :: marker de Rachel Andrew (@rachelandrew) sur CodePen.

Remarque: Vous pouvez en savoir plus sur ::marker et d'autres choses liées à la liste dans mon article "Listes CSS, marqueurs et compteurs" ici sur Smashing Magazine.

Veuillez tester de nouvelles fonctionnalités

Bien qu'il soit amusant d'avoir un petit aperçu de ce qui s'en vient, je recommande de tester les implémentations si vous avez un cas d'utilisation pour l'une de ces choses. Vous pouvez très bien trouver un bogue ou quelque chose qui ne fonctionne pas comme prévu. Les fournisseurs de navigateurs et le groupe de travail CSS aimeraient savoir. Si vous pensez avoir trouvé un bogue dans un navigateur – peut-être testez-vous ::marker dans Chrome et le trouver s'affiche différemment de l'implémentation dans Firefox – puis soulevez un problème avec le navigateur: "Comment déposer un bon bug" explique comment. Si vous pensez que la spécification pourrait faire quelque chose qu'elle ne fait pas encore, soulevez un problème par rapport à la spécification dans le référentiel GitHub du groupe de travail CSS.

Smashing Editorial(il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *