Les expressions multimédias CSS ont une largeur supérieure à la largeur maximale

Récemment, nous avons publié notre nouveau site Web Mabiloft avec un design épuré entièrement repensé et de nombreuses nouvelles illustrations et animations.

Après que notre concepteur a fait un travail incroyable, après avoir réfléchi et dessiné le site, nous, les développeurs, avons dû implémenter la mise en page, en la gardant propre et complète pour chaque appareil, du grand écran 2K sur lequel nous écrivons le code à l'ancien iPhone 4 avec. Écran 3,5 pouces.

Quelques semaines plus tard, le site Web était presque prêt et je l'ai parcouru pour m'assurer que tout fonctionnait comme il se doit. Remarquant que la mise en page de la page principale ne s'affichait pas correctement sur notre iPad, j'ai rapidement changé certaines règles CSS et corrigé l'erreur, mais ... cela a conduit à des problèmes d'affichage de la mise en page sur tous les ordinateurs portables avec un petit écran

---

À la recherche d'une solution à ce problème, j'ai trouvé que je pouvais rendre les deux mises en page parfaites, en utilisant uniquement des expressions multimédias CSS, sans recourir à JavaScript.

En fait, avant cela, j'utilisais essentiellement des expressions multimédias CSS pour rendre la mise en page réactive en utilisant max-width et min-width .

Maintenant, j'ai découvert que les expressions multimédias CSS ne sont pas seulement des largeurs maximales, mais de nombreuses valeurs différentes. Et certains d'entre eux peuvent être vraiment utiles dans la vie de tous les jours.

Quelle est donc cette expression médiatique dont je parle? Vous en avez peut-être entendu parler. Mais j'en ai également mis en évidence plusieurs nouveaux, dont l'utilisation peut être très utile

Taille de la fenêtre

Oui, je parle de largeur, hauteur, largeur min, hauteur min, largeur max et hauteur max .

Ont-ils besoin d'une introduction spéciale? Je serai bref.
Ces fonctions multimédias sont utilisées pour définir différents styles pour différentes tailles d'écran. Ils sont très utiles pour développer un système réactif.

Étant donné que les fonctions largeur et hauteur peuvent uniquement définir des styles pour la taille exacte de la portée, il est plus probable que vous utilisiez les préfixes max et min . Par exemple, dans le code suivant, les styles ne seront appliqués que si la hauteur de la fenêtre est supérieure à 320 pixels.

/*   ,      320  */ body { background-color: #FFD23F; /*   */ } @media screen and (min-height: 320px) { body { background-color: #EE4266; /*   */ } } 

Mais vous pouvez également mélanger ces fonctions pour gérer une gamme de tailles

 /*   ,      320  600  */ body { background-color: #FFD23F; /*   */ } @media screen and (min-width: 320px) and (max-width: 600px) { body { background-color: #EE4266; /*   */ } } 

L'exemple suivant montre comment utiliser la fonction max-width pour modifier la couleur d'arrière-plan en fonction de la largeur de la portée

 body { background-color: #0EAD69; } @media screen and (max-width: 1600px) { body { background-color: #3BCEAC; } } @media screen and (max-width: 1280px) { body { background-color: #FFD23F; } } @media screen and (max-width: 960px) { body { background-color: #EE4266; } } @media screen and (max-width: 600px) { body { background-color: #540D6E; } } 

Orientation de l'écran

L'orientation est une bonne fonctionnalité multimédia qui vous permet d'effectuer des modifications en fonction de l'orientation de l'écran. Il peut avoir deux significations: portrait (portrait) et paysage (paysage / album).

Mais qu'est-ce que le navigateur considère comme portrait et paysage? La valeur du portrait déclenchera des changements chaque fois que la hauteur de la lunette est supérieure à la largeur. De même, si la largeur est supérieure à la hauteur, la fenêtre sera considérée comme "paysage".

Par exemple, ce code donne le résultat suivant:

 /*    ,     */ body { background-color: #FFD23F; /*   */ } @media screen and (orientation: landscape) { body { background-color: #EE4266; /*   */ } } 

Rapport d'aspect

Cette fonction multimédia est similaire à la fonction d'orientation, mais est plus précise. Vous pouvez définir les règles du rapport hauteur / largeur dont vous avez besoin. Par exemple, vous pouvez définir différentes dispositions pour les téléphones avec les écrans 16/9 et 18/9.

Cette fonction peut également avoir le préfixe max et min pour traiter une gamme d'écrans avec différents rapports d'aspect.

Guidage et pointeur

Je vais donc essayer d'expliquer ces fonctions multimédias le plus simplement possible, car elles sont assez utiles.

Les fonctions multimédia de pointage et de pointeur se rapportent à la définition du mécanisme d'entrée principal sur le site. Par exemple, une souris. Ou un doigt si vous utilisez un smartphone. Pour déterminer tous les mécanismes d'entrée, vous pouvez utiliser les fonctions any-hover et any-pointer .

Maintenant, qu'en font-ils?

La fonction de survol (et de n'importe quel survol ) permet au navigateur de savoir si le mécanisme d'entrée principal peut survoler des éléments (par exemple, comme un curseur de souris).

Vous pouvez utiliser cette fonction pour déterminer le mécanisme d'entrée principal qui

• hover: hover , may hover over elements
• survoler: aucun , ne peut pas survoler des éléments ou il n'y a aucun mécanisme d'entrée en survol
  

Quand est-ce utile? Par exemple, lorsque vous souhaitez traiter des animations de survol sur des appareils mobiles, où le mécanisme de saisie (doigt) ne peut pas survoler des éléments.

Les fonctions de pointeur (et de n'importe quel pointeur ) permettent au navigateur de savoir si le mécanisme d'entrée principal a un pointeur (par exemple, une souris) et, dans l'affirmative, sa précision.

Vous pouvez utiliser cette fonction pour déterminer le mécanisme d'entrée principal, qui:

• pointeur: grossier , inclut une précision limitée du pointeur
• pointeur: fin , inclut un pointeur exact
• pointeur: aucun , n'inclut pas de pointeur

Cela est utile, par exemple, pour augmenter la zone de pression sur les appareils avec un pointeur inexact.


Hé, c'est tout ennuyeux. Où sont les nouvelles fonctionnalités intéressantes qui ont été mentionnées précédemment?

Les voici!

Veuillez noter que les fonctions suivantes sont expérimentales et ont actuellement un support très limité.

Couleurs inversées

La fonction de couleur inversée est très utile si vous devez appliquer certains styles lorsque les couleurs du système ont le même paramètre.

Pourquoi activer l'inversion des couleurs du système? Ceci est généralement très utile si vous souhaitez améliorer la lisibilité.

Gardez également à l'esprit qu'une autre bonne pratique consiste à augmenter la police et à diminuer l'audace lorsque les couleurs sont inversées. C'est exactement ce que vous pouvez faire avec les expressions multimédias.

Cette fonction n'a que deux valeurs:

• inversé : appliquer des styles si les couleurs sont inversées
• aucun : appliquer des styles par défaut

Voici un exemple! Lorsque les couleurs sont inversées, la taille du texte augmente

 .text { font-size: 24px; } @media screen and (inverted-colors: inverted) { .text { font-size: 36px; } } 

Veuillez noter que cette fonctionnalité n'est actuellement prise en charge que sur Safari (sur macOS et iOS). Vous trouverez ici une liste toujours à jour des navigateurs pris en charge .

Jeu de couleurs préféré

C'est l'une de mes fonctionnalités préférées, et j'espère qu'elle deviendra progressivement populaire.

La fonction permet aux développeurs de définir différentes options de conception pour les éléments si le jeu de couleurs change. Windows et macOS permettent aux utilisateurs de changer le jeu de couleurs du système de clair à foncé et vice versa. iOS 13 a également introduit cette fonctionnalité, et pour les utilisateurs d'Android, cette fonctionnalité sera disponible avec l'arrivée d'Android Q.

La prise en charge du navigateur est également décente. Les dernières versions de Google Chrome, Mozilla Firefox et Safari prennent actuellement en charge cette fonctionnalité. Sur les appareils mobiles, il est également pris en charge par tous les principaux navigateurs, à l'exception d'Opera. Vous trouverez ici une liste toujours à jour des navigateurs pris en charge.

Les valeurs de cette fonction sont assez intuitives:

• lumière : appliquer des styles si l'utilisateur préfère un thème clair
• sombre : appliquer des styles si l'utilisateur préfère un thème sombre
• sans préférence : appliquer des styles par défaut
  

Voyez à quel point cette fonctionnalité est cool dans l'exemple ci-dessous!

 .appbar { background-color: #EE4266; } .fab { background-color: #424242; } @media screen and (prefers-color-scheme: dark) { body { background-color: #424242; } .appbar { background-color: #212121; } h2 { color: #fff; } .fab { background-color: #EE4266; } } 

La définition d'un thème sombre du système rend la page également sombre

Réduire l'animation

Ceci est également très important. Personnellement, j'adore les animations et les transitions, et je pense que la bonne animation peut vraiment améliorer la convivialité du site. Mais tout le monde n'aime pas les animations et, plus important encore, certaines personnes peuvent avoir des troubles vestibulaires qui peuvent provoquer le mal des transports et des étourdissements. J'ai trouvé un article utile qui explique très bien de tels phénomènes.

En général, sur les systèmes d'exploitation de bureau et mobiles les plus importants, il existe une option d'accessibilité qui vous permet de résoudre ces problèmes en réduisant la mobilité des éléments.

Cette fonction peut avoir deux significations:

• réduire : applique des styles si l'utilisateur ne souhaite pas voir les animations et les transitions. Cette valeur est généralement utilisée pour les désactiver.
• sans préférence : applique des styles réguliers

Découvrez cette fonctionnalité dans l'exemple ci-dessous:

 .pulse { animation: pulse 2s infinite; } @media screen and (prefers-reduced-motion: reduce) { .pulse { animation: none; } } 

L'animation d'ondulation s'arrête lorsque l'utilisateur sélectionne la mobilité réduite des éléments

La compatibilité du navigateur pour cette fonctionnalité est plutôt bonne. Pour le moment, seuls Edge et IE ne le prennent pas en charge. Vous trouverez ici une liste toujours à jour des navigateurs pris en charge .

Conclusion

Ce fut une expérience intéressante pour moi, j'ai appris certaines des nouvelles fonctionnalités que j'utiliserai probablement plus souvent maintenant.

Je voudrais mentionner quelques autres fonctions, telles que le niveau d'éclairage , qui peuvent être utilisées pour vérifier le niveau d'éclairage ambiant, mais la plupart des fonctions d'expression multimédia récemment introduites ne sont toujours prises en charge par aucun des navigateurs, donc ... le moment n'est pas encore venu.

Exemples de code
Vous pouvez lire les exemples de code ici . Le code est accessible au public sur Github .

Qui sommes nous
Nous sommes une équipe de jeunes développeurs et designers basés à Padoue, en Italie. Nous développons des applications mobiles et des sites Web et sommes toujours prêts à créer quelque chose de génial.