Comprendre les unités CSS (et comment les utiliser)

Vous avez probablement déjà vu diverses unités CSS dans le code Web, mais comprendre comment ils fonctionnent vous permet de les utiliser plus intentionnellement. Dans cet article, vous apprendrez ce que sont réellement les unités CSS, comment elles affectent vos dispositions et comment les utiliser à l'intérieur de Divi 5 vous aide à concevoir plus de manière responsable.

Divi 5 apporte un support natif pour les unités CSS directement dans le constructeur. Grâce à la nouvelle fonctionnalité Advanced Units, vous pouvez utiliser%, EM, REM, VW, et plus sans code personnalisé.

Que sont les unités CSS?

Les unités CSS indiquent au navigateur à quel point quelque chose devrait être grand ou petit. Que vous définissiez la taille d'un cap, la largeur d'une section ou l'espacement entre les éléments, vous utilisez des unités pour définir cet espace. Sans eux, le navigateur n'a aucune idée de ce qu'il faut faire de vos valeurs.

Par exemple, l'écriture de largeur: 100 ne signifie rien pour le navigateur. Mais ajoutez une unité, comme 100px ou 100%, et maintenant il sait exactement ce que vous voulez.

Prenez cet exemple avec quatre boîtes, chacune utilisant une valeur CSS différente:

• Le premier utilise la largeur: 100. Techniquement invalide, mais de nombreux navigateurs le rendront à 100%.
• Le second (100px) utilise une largeur fixe.
• La troisième et la quatrième échelle (100% et 60%) par rapport au conteneur parent.

Vous vous demandez peut-être pourquoi la première boîte avec une largeur: 100 apparaît toujours pleine largeur, même si elle est techniquement invalide.

Largeur: 100 est ignorée par le navigateur car il manque d'une unité. Mais dans ce cas, la boîte s'étend toujours à travers le conteneur, non pas parce que le CSS a été accepté, mais parce que les éléments au niveau du bloc comme Div s'étendent naturellement à toute la largeur de leur parent par défaut. C'est une coïncidence du comportement par défaut, et non le résultat de l'interprétation du CSS non valide comme 100%.

Unités CSS populaires

Bien que PX et% apparaissent généralement, beaucoup d'autres sont tout aussi utiles une fois que vous savez quand les utiliser:

Vous verrez ces unités partout dans la conception Web, de la définition de tailles de police, de la définition des largeurs de section, du rembourrage et des marges et de la construction de dispositions de grille flexibles. Ils sont l'un des facteurs de décision les plus importants sur l'apparence et le comportement de votre mise en page. Et lorsque vous utilisez les unités plus importantes dans une conception efficace, nous y arriverons sous peu.

Mais d'abord, il est utile de savoir que toutes les unités CSS se répartissent en deux types principaux: absolus et relatifs.

Unités absolues et relatives

Comprendre la différence est essentiel si vous voulez que votre mise en page fonctionne bien sur différentes tailles d'écran.

Unités absolues

Les unités absolues ont des valeurs fixes. Cela signifie que lorsque vous définissez quelque chose sur 100px, il aura toujours 100 pixels de large, que l'utilisateur soit sur un téléphone, une tablette ou un moniteur de bureau massif. Ces unités ne répondent pas à la taille de l'écran ou à la disposition environnante, ce qui les rend excellentes lorsque vous avez besoin d'un contrôle exact.

Ils sont souvent utilisés pour les frontières, les tailles d'icônes ou les ombres à boîte fixe, généralement là où la précision compte plus que la flexibilité.

Mais cette même précision peut causer des problèmes. Un design qui a l'air parfait sur un grand écran pourrait déborder, rétrécir maladroitement ou se casser entièrement sur des appareils plus petits. Étant donné que les unités absolues ne s'adaptent pas, elles peuvent rendre votre disposition rigide à moins d'être utilisée avec soin.

Unités relatives

Comme son nom l'indique, ceux-ci s'ajustent en fonction de leur environnement. Au lieu de rester verrouillé sur une taille spécifique, ils évoluent en fonction du contexte (élément parent, fenêtre, etc.). Cela les rend beaucoup plus flexibles pour une conception réactive.

Certaines unités répondent à la taille de l'élément parent, d'autres à la taille de la police racine de la page, et d'autres réagissent même à la fenêtre du navigateur lui-même. Voici quelques clés:

• % échelle avec le conteneur parent.
• EM s'ajuste en fonction de la taille de la police de l'élément parent.
• REM suit la taille de la police racine de la page.
• VW et VH répondent à la largeur et à la hauteur de la fenêtre de navigateur.

Parce qu'ils s'adaptent à différents environnements, ces unités vous aident à créer des dispositions qui semblent naturelles sur n'importe quel écran. Ils se développent ou se rétrécissent avec l'espace qui leur est donné, ce qui maintient votre contenu lisible et votre conception équilibrée entre les appareils.

Voyons un exemple rapide pour voir pourquoi cette flexibilité est importante. Supposons que vous construisiez une section d'image et définissez sa largeur à 1200px.

Cela peut sembler parfait sur un grand moniteur, mais sur une tablette avec une largeur d'écran de 768 pixels, l'image pourrait déborder et avoir l'air bizarre. Essayez maintenant d'utiliser:

width: 100%;

Cela indique au navigateur de faire remplir l'image la largeur de son conteneur. Que l'écran soit large ou étroit, l'image s'ajuste automatiquement.

Le véritable avantage de l'utilisation d'une unité relative est la réactivité. Vous n'attribuez pas seulement une taille, mais donnez au navigateur des instructions claires sur la façon dont votre disposition doit se comporter dans différents scénarios. Et lorsque vous faites les choses correctement, votre contenu s'adapte à chaque écran.

En utilisant des unités relatives où ils ont du sens, vous évitez les dispositions rigides, réduisez le besoin de points d'arrêt et gardez votre conception plus facile à gérer. Et avec Divi, vous n'avez pas à écrire une seule ligne de code pour utiliser différentes unités CSS. Sélectionnez l'unité que vous souhaitez dans le constructeur et voyez votre disposition répondre en temps réel.

Quand utiliser quelle unité CSS

Maintenant que vous comprenez la différence entre les unités absolues et relatives, l'étape suivante consiste à savoir quand utiliser chacun.

En règle générale, optez pour les unités relatives lorsque votre mise en page doit s'adapter à différentes tailles d'écran. Ceux-ci sont parfaits pour les largeurs de section, la typographie, l'espacement entre les éléments ou les mises en page pleine page. Parce qu'ils évoluent automatiquement, ils vous aident à maintenir la cohérence sans créer de styles séparés pour chaque appareil.

D'un autre côté, les unités absolues sont utiles lorsque vous voulez que quelque chose reste le même quelle que soit la taille de l'écran. Pensez aux frontières, aux icônes, à l'espacement fixe ou aux petits détails visuels.

Voici quelques exemples pour guider vos choix:

• Utilisez PX lorsque vous avez besoin de contrôle exact, comme pour les tailles d'icônes. Puisqu'il ne s'adapte pas, évitez-le pour les largeurs de mise en page ou le texte.
• Utilisez% lorsque vous voulez que les éléments évoluent avec leur conteneur.
• Utilisez-les lorsque vous voulez que l'espacement s'adapte avec la taille de la police de l'élément parent.
• Utilisez REM (communément appelé Root EM) si vous souhaitez un dimensionnement cohérent sur votre site. Comme il est basé sur la taille de la police racinaire, il maintient l'espacement et la typographie prévisible.
• Utilisez VW et VH pour les sections écran complètes, les zones de héros ou l'espacement qui répondent directement à la fenêtre (toute la vue de l'écran de votre appareil).

Pour un contrôle plus avancé, vous pouvez également combiner des unités à l'aide de fonctions CSS. calc () est pratique lors du mélange de valeurs comme 1REM + 5VW pour un espacement réactif avec une base minimale. Et clamp () est idéal pour régler les valeurs fluides qui se développent ou se rétrécissent entre les limites, ce qui en fait une alternative plus propre aux requêtes multimédias.

En fin de compte, le choix de la bonne unité consiste à considérer comment chaque élément devrait se comporter dans différents scénarios et choisir l'unité qui accomplit le mieux cela.

Les unités avancées de Divi pour construire de manière réactive sans codage

Nous avons déjà vu comment les unités CSS vous donnent le contrôle du comportement de mise en page. Divi 5 prend ce contrôle et le rend sans effort pour l'utiliser avec des unités avancées.

Abonnez-vous à notre chaîne YouTube

Avec la prise en charge native pour%, EM, REM, VW et VH construites directement dans le constructeur, vous pouvez appliquer des valeurs CSS réelles aux modules, sections, espacement et typographie, sans avoir besoin d'ouvrir un panneau de code. Dans n'importe quel champ numérique, sélectionnez simplement votre unité préférée dans la liste déroulante de l'unité avancée, ajustez la valeur et voyez les modifications en direct.

Et ça ne s'arrête pas là. Divi vous permet également d'utiliser des fonctions CSS avancées comme calc () et clamp () dans le constructeur visuel. Cela signifie que vous pouvez créer des valeurs de fluide, mélanger des unités et des dispositions affinées avec le même niveau de développeurs de précision à partir de CSS rédigés à la main, mais visuellement.

Besoin d'une taille de police qui évolue de manière fluide sur différentes tailles d'écran? Utilisez CLAMP (). Vous voulez compenser l'espacement avec un mélange de valeurs fixes et flexibles? Essayez calc (). Divi gère tout, instantanément et visiblement.

Vous ne devinez ni ne basculez plus entre la conception et le code. Divi vous donne la puissance visuelle et les commentaires instantanés pour obtenir la logique réactive correctement avec un contrôle total sur la façon dont vos éléments évoluent et se comportent sur les appareils.

Apprenez tout sur les unités avancées de Divi 5

Les unités CSS se synchronisent parfaitement avec les workflows avancés de Divi

Vous avez déjà vu comment Divi facilite l'utilisation des unités CSS individuelles à l'intérieur du constructeur. Mais la vraie force montre lorsque ces unités travaillent ensemble sur l'ensemble de votre site. C'est là que des fonctionnalités telles que des variables de conception, des préréglages de groupe d'options et des fonctions CSS avancées comme calc () et clamp () brillent vraiment.

Divi ne vous laisse pas simplement entrer dans les unités CSS dans des champs. Il vous aide à les intégrer dans l'ensemble de votre système de conception sans écrire de code. Tout reste cohérent, évolutif et plus facile à entretenir.

Voyons comment Divi vous aide à utiliser les unités CSS dans le cadre d'un flux de travail flexible et axé sur la logique:

1. Créer une logique de mise en page avec des variables de conception

L'une des façons les plus simples de gagner du temps sur n'importe quel projet est de planifier votre logique de mise en page. Au lieu d'ajuster le même espacement ou la même taille de police à plusieurs endroits, vous définissez ces valeurs une fois et les réutilisez sur l'ensemble de votre conception, avec les variables de conception de Divi.

Vous pouvez créer des valeurs réutilisables comme –card-padding ou –section-gap, en utilisant des unités CSS réelles comme 2Rem, 5VW ou même des formules comme CALC (2REM + 1VW). Une fois défini, ces valeurs peuvent être appliquées entre les modules, les lignes et les sections pour garder tout cohérent.

Vous n'avez qu'à mettre à jour la variable que si vous souhaitez le modifier plus tard. Le changement reflète partout où il est utilisé, vous faisant sauver les va-et-vient de la recherche de paramètres individuels. Et parce que les unités CSS sont construites directement dans le système de Divi, vous ne comptez pas sur les suppositions mais appliquant visuellement la logique réelle CSS. Cela rend votre mise en page plus gérable, évolutive et plus facile à ajuster à mesure que votre projet se développe.

2. Utilisez la clamp () et le calc () visuellement

Les fonctions CSS comme clamp () et calc () vous aident à créer des dispositions réactives. Ils vous permettent de définir des valeurs flexibles qui s'ajustent à travers les tailles d'écran sans écrire des requêtes multimédias. Ainsi, au lieu de régler des tailles fixes pour chaque appareil, vous pouvez écrire une logique comme la clamp (1REM, 2VW, 2.5REM) pour permettre au navigateur de faire évoluer les choses entre les limites de définition. Ou utilisez CALC (100VH - 80PX) pour ajuster une section de héros en fonction de la hauteur de votre fenêtre.

Normalement, ils nécessitent une écriture CSS manuellement. Dans Divi, vous pouvez les saisir directement dans n'importe quel champ de numéro.

Et parce que les unités CSS sont prises en charge à l'intérieur des deux fonctions, vous pouvez mélanger des valeurs comme Rem, VW et PX pour obtenir exactement le comportement souhaité. Vous voyez les résultats en direct pendant que vous tapez, ce qui facilite l'expérimentation et la réactivité correctement sans quitter le constructeur.

3. Enregistrer la logique de l'unité avec les préréglages du groupe d'options

Une fois que vous avez configuré des dispositions en utilisant des unités avancées ou des formules, vous n'avez pas à les reconstruire à nouveau. Divi vous permet d'enregistrer votre logique de style, y compris des choses comme le rembourrage: clamp (1Rem, 3VW, 2Rem), comme un préréglage du groupe d'options.

Cela signifie que la prochaine fois que vous aurez besoin du même modèle d'espacement ou de mise en page, vous n'appliquez pas les mêmes paramètres, mais seulement le préréglage enregistré.

Et si vous utilisez des variables de conception à l'intérieur des préréglages, c'est encore mieux. Vous pouvez facilement créer un système interconnecté dans lequel la modification des styles de l'ensemble de votre site Web dépend d'une seule chose: la modification de la variable.

En Divi, l'utilisation d'une unité CSS n'est pas seulement une question de taille; Il s'agit d'un comportement. Chaque valeur que vous définissez fait partie d'un système visuel qui s'adapte, évolue et reste cohérent sur votre disposition. Et parce que tout est intégré au constructeur, il ressemble moins à du codage et plus à la conception avec la logique.

Divi transforme les unités CSS en superpuissance visuelle

Vous n'avez pas besoin d'écrire CSS pour utiliser les unités CSS. Divi 5 les amène tous dans une interface visuelle où vous pouvez explorer, appliquer et prévisualiser en temps réel. Que vous régliez l'espacement, que vous construisiez la typographie de liquide ou que vous créiez une logique de mise en page avec des variables et des préréglages, Divi vous permet de tout faire visuellement.

Prêt à l'essayer? Téléchargez Divi 5 et commencez à utiliser de vraies unités CSS dans vos conceptions.