Fonctionnalités CSS intéressantes à connaître

La semaine dernière, nous parlions de pseudo-éléments et de pseudo-classes en CSS. Dans cet article, nous avons vu comment ces fonctionnalités CSS nous permettent de générer un code plus concis, intelligible et facile à entretenir. Aujourd'hui, je voudrais partager avec vous quelques propriétés CSS supplémentaires pour créer des sites Web adaptatifs qui tiennent compte des préférences de vos visiteurs .

Rapports d'aspect avec object-fit d' object-position

object-fit est une propriété CSS qui vous permet de définir comment un élément de remplacement (par exemple une image) doit être redimensionné pour s'adapter à son conteneur. Voyons ce que cela signifie avec un exemple concret, d'accord ?

Supposons que nous ayons l'image verticale suivante :

et nous voulons l'afficher dans la zone suivante :

qui fait 15em de haut et occupe 80% de la largeur disponible. En principe, vous pourriez penser que tout ce que nous avons à faire est de définir une width et une height spécifiques pour notre image, n'est-ce pas ?

 .custom-size { height: 15em; width: 80%; }

Eh bien, si vous le faites, vous verrez que le rapport d'aspect de l'image est foiré :

Pour éviter qu'une image ne soit déformée lors de l'utilisation d'une largeur et d'une hauteur spécifiques, les développeurs utilisaient (et certains le font encore) la propriété CSS background d'un div . Ainsi, au lieu d'ajouter l'image à l'aide de la balise img , nous avons utilisé pour créer un conteneur div :

 <div></div>

définissez les dimensions correctes sur ledit div , puis ajoutez l'image réelle via CSS en utilisant les propriétés background-size et background-position :

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

Et ici vous pouvez voir le résultat :

La mise à l'échelle et le recadrage des images à l'aide des propriétés d'arrière- background CSS sur une balise div est une mauvaise solution, car vous n'utilisez plus la balise HTML sémantiquement correcte : img . En outre, les balises img incluent un tas de propriétés intéressantes qui se traduiront par des sites Web plus rapides et plus accessibles : une propriété alt qui décrit l'image, srcset pour la rendre réactive, le loading pour le charger paresseux, etc.

Si vous souhaitez redimensionner et recadrer une image afin qu'elle corresponde à certaines dimensions spécifiques sans déformer l'image elle-même, tout ce que vous avez à faire est d'utiliser les propriétés CSS object-fit et object-position , qui se comportent comme background-size et background-position fais:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Si vous appliquez les règles précédentes à une balise img :

 <img class="custom-size" src="…/image.jpg" />

voici le résultat que vous obtenez :

c'est exactement ce qui vous intéressait, n'est-ce pas ?

Si vous souhaitez en savoir plus sur ce bien, voici un lien avec toutes les informations nécessaires.

Conception adaptative avec Media Queries

Les requêtes multimédias sont un mécanisme qui vous permet d'ajouter des règles CSS à votre site Web en fonction des caractéristiques de l'appareil ou de l'application à partir de laquelle vos visiteurs accèdent au Web. Je suis sûr que vous les connaissez un peu, car les requêtes multimédias sont à la base de la création de sites Web réactifs, mais vous pouvez faire beaucoup plus avec eux !

Requêtes multimédias classiques

Utiliser une requête média dans une feuille de style CSS est aussi simple que d'ajouter le mot-clé @media avec deux choses : d'une part, une condition qui décrit quand la requête média est active et, d'autre part, l'ensemble de règles CSS qui doivent être chargé lorsque la condition est remplie. C'est pourquoi les media queries sont à la base de la construction de conceptions réactives : vous appliquez simplement un ensemble de règles ou un autre en fonction de la width du navigateur du visiteur.

Par exemple, supposons que vous souhaitiez modifier la barre latérale du paragraphe suivant :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Le lion sur le porche doux moche parfois, mais carquois élément extérieur. Mais le besoin des entrepreneurs s'appelle le stress thermique. Micro-onde réservé, mais ma porte est toujours ou parfois auteur de masse. Android et Nunc sodales interdum, tincidunt erat ac, tincidunt elit. Cependant, ultricies ac, arcu metus Sed congue. Pour plus de commodité, craignez les protéines améliorées de leo. Est un tellus orci, tempor id egestas nca, au moins obtenir quelques joueurs.

pour qu'il utilise toutes les couleurs de l'arc-en-ciel en fonction de la largeur du navigateur. Voici comment vous pouvez obtenir ce comportement via CSS :

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Plutôt facile, non ? Il suffit d'appliquer une couleur différente à chaque fois que la largeur du navigateur dépasse un certain seuil. Notez que nous implémentons cela en utilisant une approche mobile d'abord, car de "nouvelles" règles sont appliquées à mesure que l'écran s'agrandit. Modifiez la largeur de la fenêtre et vous verrez le résultat.

Comment implémenter le mode sombre avec CSS

Les modes sombres sont à la mode maintenant, à la fois sur mobile et sur ordinateur. Saviez-vous qu'il existe une requête média pour savoir si les utilisateurs préfèrent les modes sombres ? En utilisant la requête média prefers-color-scheme vous pouvez voir si l'utilisateur préfère un jeu de couleurs light ou dark . Cela signifie que vous avez maintenant le pouvoir de créer deux versions de votre site Web afin qu'il corresponde aux préférences de tous vos visiteurs.

Par exemple, considérez l'extrait de code HTML suivant :

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

et ces règles CSS :

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

Selon votre configuration, vous verrez que la partie "Dynamique" de l'extrait de code HTML précédent ressemble soit au thème clair, soit au thème sombre :

Plutôt cool, hein ? Et simple !

Autres cas d'utilisation intéressants avec Media Queries

Il existe de nombreuses requêtes multimédias que vous pouvez utiliser (vous en avez une liste complète ici), mais je voudrais me concentrer sur une en particulier. Plus précisément, je souhaite vous expliquer comment appliquer différents styles selon que la page est affichée dans le navigateur ou sur le point d'être imprimée. Tout ce que vous avez à faire est d'utiliser le mot-clé print ou screen pour la requête média comme suit :

 @media print { … } @media screen { … }

ou créez deux fichiers CSS distincts, un pour chaque cas d'utilisation, et incluez-les dans votre code HTML à l'aide de la propriété media d'une balise de link :

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

La chose intéressante à ce sujet est que vous pouvez créer une feuille de style qui transforme votre site en un élément de contenu conçu pour être imprimé. Ainsi, par exemple, vous pourrez masquer les parties dynamiques du Web qui n'ont pas de sens dans une version imprimée (comme les menus ou les formulaires). Ou vous pouvez même vous assurer que certaines choses qui sont perdues lors de l'impression deviennent visibles, comme par exemple l'URL cible d'un lien :

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

dont le résultat est le suivant :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Variables CSS

Enfin, parlons d'une autre fonctionnalité CSS étonnante : les propriétés personnalisées CSS (également appelées variables CSS). Les sites Web complexes contiennent de très grandes quantités de CSS, et il est assez courant que la même valeur soit répétée encore et encore. Par exemple, votre palette de couleurs, vos bordures, vos rembourrages, etc. sont utilisés partout. Eh bien, les variables CSS simplifient cette complexité. Et ils sont extrêmement utiles pour implémenter facilement le mode sombre !

Les variables CSS sont exactement ce que vous pensez : un moyen de stocker et de réutiliser une valeur CSS spécifique derrière un nom significatif. Il est beaucoup plus facile de comprendre ce qu'est --main-text-color que #333 , n'est-ce pas ?

La déclaration d'une propriété personnalisée s'effectue à l'aide d'un nom de propriété personnalisée qui commence par un double tiret ( -- ) et d'une valeur de propriété qui peut être n'importe quelle valeur CSS valide. Comme toute autre propriété, ceci est écrit à l'intérieur d'un ensemble de règles, comme ceci :

 element { --main-color: red; --main-padding: 2em 1em; }

Le sélecteur que vous utilisez dans le bloc de règles où vous avez défini la variable CSS détermine sa portée. Autrement dit, si vous définissez une variable dans une règle div.banner , cette variable ne sera disponible que dans cette portée. Cependant, la plus courante consiste à créer des variables dans la portée globale en utilisant la pseudo-classe :root :

 :root { --main-color: red; --main-padding: 2em 1em; }

Pour utiliser une variable CSS, il vous suffit de spécifier son nom dans la fonction var :

 p { color: var(--main-color); padding: var(--main-padding); }

CSS est là pour vous aider

La structure HTML d'une page Web est comme la fondation d'une maison - vous avez besoin d'une base solide si vous voulez construire quelque chose de solide. Lors de la création d'une page Web, assurez-vous d'utiliser une arborescence HTML sémantiquement correcte et propre. Cela se traduira par une page qui fonctionnera sur tous les navigateurs pour tous les visiteurs, et l'application d'astuces CSS par-dessus sera simple et efficace.

J'espère que vous avez aimé le post d'aujourd'hui. Si vous l'avez fait, partagez-le avec vos amis

Image sélectionnée par William Daigneault sur Unsplash.