7 nouvelles fonctionnalités pour créer un site Web réactif

Le CSS moderne prend tout le contrôle du style du site Web à l'aide du JavaScript requis. Dans cet article, nous mettrons en évidence sept nouvelles mises à jour CSS pour simplifier l'avenir du style. De plus, nous envisageons la prise en charge par les navigateurs de Chrome, Edge et Firefox. Enfin, nous discuterons des problèmes, des solutions et à peu près tout ce dont vous aurez besoin pour commencer tout de suite.

Compte tenu de toutes les astuces et techniques, voici quelques fonctionnalités CSS triées sur le volet qui valent votre temps. Alors, sans plus tarder, plongeons-nous dedans.

1. Sous-grille CSS

Contrairement à la capacité de CSS flexbox à se déplacer dans une seule direction, vous pouvez définir les deux dimensions dans des grilles. Alors qu'ils commencent à devenir puissants et populaires au cours des prochaines décennies, des changements considérables sont observés dans les conceptions Web. Les grilles imbriquées sont utilisées pour dessiner des grilles à l'intérieur des grilles. Mais quels sont les inconvénients majeurs qui ont suscité un appel pour des sous-grilles CSS?

• Les grilles imbriquées après le niveau 2 débordaient de contenu en dehors de la plus grande grille, ce qui affectait fortement la réactivité d'un site Web.
• Les grilles imbriquées agissaient comme des éléments indépendants à l'intérieur du plus grand conteneur de grille. Il n'y avait aucune référence au conteneur parent pour tout changement.

Sans sous-réseaux:

Après les sous-réseaux:

Voici comment implémenter des sous-grilles:

.récipient {
largeur: 700px ;
hauteur: 500px ;
arrière-plan: rvb (214, 255, 139) ;
affichage: grille ;
grille-modèle-colonnes: 1fr 1fr 1fr 1fr ;
grille-modèle-lignes: 1fr 1fr 1fr 1fr;
}
.div conteneur {
arrière-plan: rvb (72, 170, 137) ;
grille-ligne: 2/ 3 ;
grille-colonne: 2 / 5 ;
affichage: grille ;
grid-template-columns: sous-grille ;
grid-template-rows: sous-grille ;
}

Vous pouvez placer plusieurs sous-grilles. L'exception notable est que les sous-grilles héritent de la propriété parent grid-gap. Cela entraînera la création de toutes les sous-grilles avec les mêmes propriétés d'espacement à l'intérieur de chaque grille parent.

La meilleure chose à propos des sous-réseaux est qu'ils sont très réactifs, ajustables et évolutifs.

Compatibilité navigateur: Firefox

2. Propriété de rapport d'aspect

Vous pouvez éliminer tous les problèmes d'ajustement et de calcul en modifiant le rapport hauteur/largeur d'un conteneur donné. Si vous souhaitez insérer une vidéo, il vous suffit de fixer un rapport hauteur/largeur par rapport à la taille variable de l'écran. Mais, lorsque vous travaillez avec des grilles multiples en deux dimensions, il existe des risques de débordement et de vue par défaut.

Vous pouvez le corriger en prenant en charge la propriété de rapport d'aspect avec l'attribut width. Cela devient pratique pour les images réactives car vous pouvez définir une hauteur ou une largeur.

Voici comment implémenter la propriété de rapport d'aspect:

.récipient {
largeur: 700px ;
rapport d'aspect: 16 / 9 ;
arrière-plan: rvb (72, 170, 137) ;
}

Vous pouvez également saisir le rapport d'aspect: auto au lieu de spécifier le rapport. L'inconvénient de la valeur automatique par défaut est que le navigateur choisira la dimension d'origine de l'image. Sans aucun doute, cela nuit à la réactivité du site.

Compatibilité des navigateurs: Chrome, Edge, Firefox (partielle)

3. Espace Flexbox

Grid-gap est très populaire pour créer un espace égal entre chaque grille. Mais, vous étiez censé appliquer des marges négatives, des sélecteurs de pseudo-classe et des sélecteurs complexes pour gérer l'espace entre chaque élément flexible. Ainsi, l'écart Flexbox se traduit par moins de lignes de code avec une plus grande évolutivité.

Voici comment vous pouvez implémenter l'écart flexbox:

.récipient {
largeur: 700px ;
hauteur: 500px ;
affichage: flexible ;
align-items: center;
justifier-contenu: centre ;
écart: 1em ;
}

Production:

Compatibilité des navigateurs: tous les principaux navigateurs, y compris Chrome, Edge et Firefox.

Le défilement permet de partager plus d'informations sur un seul site Web sans encombrer la copie Web. Mais, le principal inconvénient du défilement est qu'il peut s'arrêter à la moitié du para ou de l'image. Parfois, le contrôle du contenu paginé est laissé à mi-chemin. JavaScript est judicieusement utilisé pour éviter la personnalisation du défilement. Mais, ce n'était pas un résultat complètement satisfaisant jusqu'à ce que CSS Scroll Snap arrive.

En utilisant Scroll Snap, vous pouvez définir des limites spécifiques pour fixer la disposition et la visibilité d'un conteneur donné. Par exemple, cela fonctionne très bien pour créer des carrousels et des sections de site Web définies. Notez que vous n'aurez besoin de JS pour aucun ajustement.

Voici comment implémenter l'accrochage au défilement:

.récipient {
largeur: 100 % ;
hauteur: 100 % ;
affichage: flexible ;
overflow-x: défilement ;
scroll-snap-type: x obligatoire ;
}
section {
flex: aucun ;
affichage: flexible ;
align-items: center;
justifier-contenu: centre ;
taille de la police: 15 em ;
famille de polices: Arial, Helvetica, sans-serif ;
scroll-snap-align: fin ;
largeur: 100 % ;
hauteur: 100 % ;
}

Production:

L'accrochage de défilement CSS a une propriété parent et enfant. La propriété parent ou conteneur décide de la direction du défilement (x ou y) et du comportement de l'accrochage au défilement. Par exemple, vous pouvez définir scroll-snap-type: x obligatoire. Il accordera à l'utilisateur le contrôle de décider du point de défilement sans tenir compte de la position de défilement.

En revanche, le type scroll-snap: y la proximité ne fonctionne que lorsque le visiteur du site est plus proche du point de défilement.

La propriété enfant est scroll-snap-align pour aligner les éléments lors de l'accrochage au défilement CSS. Il saisit les valeurs de début, de fin et de centre pour aligner les éléments en conséquence.

5. Requêtes de fonctionnalité

Les requêtes de fonctionnalité sont utilisées pour gérer la dégradation progressive. Par exemple, les grilles CSS sont très populaires de nos jours. Mais, il convient de mentionner que les navigateurs plus anciens ne peuvent pas le rendre.

Ici, les requêtes de fonctionnalité vérifient si ce navigateur particulier prend en charge une propriété spécifique ou non et donne un système de support qui encourage la référence à une propriété CSS uniquement si elle est prise en charge sur celle-ci le navigateur. Sinon, la valeur par défaut est prise en compte. Dans ce cas, vous pouvez placer des blocs au lieu de grilles pour tout repli prévu.

Voici comment implémenter des requêtes de fonctionnalité:

@supports (visibilité du contenu: auto) {
corps{
fond: sarcelle ;
largeur: 100 % ;
hauteur: 100 % ;
}
}

Par conséquent, seuls les navigateurs qui affichent les propriétés de visibilité du contenu auront une couleur d'arrière-plan bleu sarcelle; sinon, la valeur par défaut serait prise en compte. Notez que @ est similaire à @media des requêtes multimédias, où vous étiez censé définir une largeur maximale ou une largeur minimale pour des ajustements de fortune. Cela simplifie la mémorisation des requêtes de fonctionnalité @supports.

Lire la suite: Comment utiliser les requêtes multimédias en HTML et CSS

Compatibilité des navigateurs: tous les principaux navigateurs, y compris Chrome, Edge et Firefox.

6. Propriété content-visibility

Le rendu rapide fonctionne comme l'épine dorsale d'un site Web interactif pour l'utilisateur. Avec la popularité croissante des appareils mobiles, les performances de rendu d'un site Web constituent un goulot d'étranglement pour obtenir un site Web attrayant.

Ici, la propriété de visibilité du contenu joue un rôle crucial. Car, par défaut, les navigateurs restituent tous les éléments du site à la fois. Cela diminue le temps de chargement et les performances globales du site, surtout si votre site Web comporte de nombreuses animations lourdes. D'un autre côté, la propriété content-visibility ne restitue que les éléments de la fenêtre d'affichage et affiche d'autres éléments lorsque vous faites défiler la page.

#principale {
visibilité du contenu: automatique ;
/* contient-taille-intrinsèque: 0 500px; */
}

La propriété content-visibility entre trois valeurs. content-visibility: visible ne montre aucun effet tandis que content-visibility: hidden est similaire à display: none où l'élément ignore le contenu inaccessible. La visibilité du contenu: l'auto ignore le contenu non pertinent, mais il est disponible en tant que page normale pour les fonctionnalités de l'agent utilisateur.

Mesurons la puissance de la visibilité du contenu. Voici le résultat:

7. Transition, transformation et animation

En CSS, nous avons deux façons d'appliquer l'animation. La transition est utilisée pour apporter des changements en douceur dans les propriétés visuelles des éléments. D'autre part, sans transition, la transformation passerait brusquement d'un état à un autre.

Les animations sont utilisées avec des @keyframes qui définissent des styles à plusieurs moments pendant la durée de l'animation. La chose intéressante est que @keyframes définissent quand le changement se produira, la transformation et l'animation prennent le contrôle du changement, et la transition s'occupe de la façon dont le changement se produira (par exemple, les effets de survol).

.enfant {
fond: sarcelle ;
hauteur: 150px ;
largeur: 150px ;
Couleur blanche;
transition: transformer 0,2 s en entrée-sortie ;
animation: myAnimation 2s infini ;
}
.child: survolez {
transformation: échelle (2, 2) rotation (45 deg);
}
@keyframes monAnimation {
0% {
}
50% {
transformer: translateX(400px)
}
100% {
transformer: translateX(0px)
}
}

Compatibilité des navigateurs: tous les principaux navigateurs, y compris Chrome, Edge et Firefox.

Emballer

Le balisage des feuilles de style en cascade évolue continuellement avec de meilleures fonctionnalités. Jusqu'à présent, vous avez découvert ces sept fonctionnalités impressionnantes qui incluent la sous-grille CSS, la propriété de rapport d'aspect, espaces flexbox, accrochage de défilement, requêtes de fonctionnalité, propriété de visibilité du contenu, transition, transformation et animation.

En fin de compte, vous devez vous assurer quelles fonctionnalités simplifient le style de votre site Web.

7 nouvelles fonctionnalités à surveiller dans Bootstrap 5

Si vous développez des sites Web et des applications à l'aide du framework CSS Bootstrap, voici les nouveautés de Bootstrap 5.

Lire la suite

A propos de l'auteur