9 astuces CSS avancées pour la requête multimédia que vous devriez connaître

Une expérience utilisable et accessible est essentielle pour un site Web réussi. Si vos lecteurs ont une expérience positive, ils sont plus susceptibles d'effectuer un appel à l'action, y compris l'achat de produits. Ils sont également plus susceptibles de revenir ou de recommander votre site à d'autres. L'expérience est la clé.

Les requêtes multimédias offrent différentes fonctionnalités CSS qui peuvent personnaliser votre site Web. Ils vous permettent de personnaliser l'expérience de chaque utilisateur en fonction des capacités de son appareil. Découvrez comment offrir à vos lecteurs la meilleure expérience, qu'ils utilisent leur téléphone ou un grand écran de bureau.

1. La fonctionnalité de pointeur

le règle @media dispose d'une fonctionnalité de pointeur qui vous permet de personnaliser votre conception en fonction du périphérique de pointage principal. Vous pouvez tester la disponibilité et la qualité.

Ce pointeur fonctionnalité de requête multimédia prend l'une des trois valeurs suivantes: aucune, grossière ou fine. le

rien la valeur s'applique lorsqu'il n'y a pas de périphérique de pointage. le grossier La valeur s'applique lorsque le dispositif de pointage principal a un niveau de précision réduit. Et le amende La valeur s'applique lorsque le dispositif de pointage principal a un haut niveau de précision.

Utilisation de la fonction de pointeur

Options à choisir: 
 Première option
 Deuxième option

Le code ci-dessus génère deux options radio d'entrée, qui varient en fonction de la précision du dispositif de pointage principal d'un ordinateur.

Un ordinateur doté d'un dispositif de pointage principal précis (ou de haute qualité) affichera la page Web suivante :

Un ordinateur doté d'un périphérique principal avec une précision limitée (ou une qualité médiocre) affichera la page Web suivante :

L'appareil qui a un dispositif de pointage principal avec un niveau de précision limité a des boutons radio plus grands. Cela donne une meilleure expérience utilisateur pour ces utilisateurs. Avec la fonctionnalité de pointeur, vous pouvez vous assurer que tous vos utilisateurs ont une expérience agréable, quel que soit leur appareil.

2. La fonctionnalité any-pointer

Comme la fonctionnalité de pointeur, la fonctionnalité de requête multimédia à tout pointeur cible les dispositifs de pointage. Cependant, la fonctionnalité any-pointer évalue chaque périphérique de pointage d'un ordinateur. La fonction any-pointer utilise également la rien, grossier, et amende valeurs.

Utilisation de la fonction Any-pointer

 @media (n'importe quel pointeur: bien) {
 entrée[type="radio"] {
 largeur: 15px ;
 hauteur: 15px ;
 rayon de bordure: 20 px ;
 largeur de bordure: 1 px ;
 }
 }
@media (n'importe quel pointeur: grossier) {
 entrée[type="radio"] {
 largeur: 25px ;
 hauteur: 25px ;
 rayon de bordure: 20 px ;
 largeur de bordure: 2 px ;
 }
 }

Vous pouvez simplement remplacer le code ci-dessus par la section de requête multimédia du code dans l'exemple de fonctionnalité de pointeur. Le code ci-dessus rend un affichage approprié en fonction de la qualité de tout dispositif de pointage qu'un ordinateur pourrait avoir.

3. La fonction de survol

La fonctionnalité de requête multimédia de survol évalue si le mécanisme d'entrée principal d'un appareil est capable de survoler les éléments d'une interface utilisateur.

Utilisation de la fonction de survol

 /* CSS */
 une{
 décoration de texte: aucune ;
 la couleur noire;
 }
 @media (survol: survol) {
 a: survolez {
 Couleur bleue;
 }
 }
 HTML 
 Un élément de lien

Le code ci-dessus affichera un élément. Il changera de couleur (du noir au bleu) chaque fois que le mécanisme d'entrée principal d'un périphérique (qui prend en charge le survol) le survole.

4. La fonctionnalité de vol stationnaire

le vol stationnaire media query cible tout mécanisme d'entrée, y compris le mécanisme d'entrée principal.

Utilisation de la fonctionnalité de survol

@media (n'importe quel survol: survol) {
 a: survolez {
 Couleur bleue;
 }
 }

La requête multimédia ci-dessus produit un effet de survol pour tout mécanisme d'entrée capable de survoler un élément.

5. La fonctionnalité de résolution

La fonction de requête multimédia de résolution calcule le nombre de pixels affichés par un appareil spécifique. Un appareil qui affiche plus de pixels par pouce a une meilleure résolution car il affiche des images avec plus de détails. Cette fonctionnalité peut aider un développeur à décider quels utilisateurs d'appareils peuvent voir plus clairement les éléments d'une interface utilisateur.

La fonction de résolution utilise la plage. Cela signifie qu'en plus d'utiliser le résolution mot-clé, vous pouvez utiliser min-résolution et résolution max. La fonctionnalité de résolution de requête multimédia appartient au type de données de résolution. Cela signifie que la fonction de résolution est mesurable dans l'une des trois unités suivantes: points par pouce (dpi), points par centimètre (dpcm) ou points par pixel (dppx).

Utilisation de la fonction de résolution

/* CSS */
@media (résolution minimale: 72 dpi) {
 p {
 Couleur blanche;
 couleur de fond: bleu ;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

La résolution la plus basse qu'un appareil peut avoir et afficher des images de qualité est de 72 dpi. Ainsi, si un appareil a une résolution de 72 dpi ou plus, il affichera la sortie suivante dans son navigateur :

6. La fonction d'orientation

Une fenêtre de périphérique ne peut avoir qu'une des deux orientations suivantes: portrait ou paysage. Vous devez noter qu'une orientation de fenêtre est différente d'une orientation de périphérique. Si un appareil utilise un clavier logiciel, sa fenêtre d'affichage peut passer de portrait à paysage alors que l'appareil lui-même est toujours en position portrait.

Utilisation de la fonction d'orientation

/* CSS */
 corps{
 affichage: flexible ;
 }
 section{
 bordure: 2px bleu uni ;
 rembourrage: 3px ;
 marge: 3px ;
 }
 @media (orientation: paysage) {
 corps {
 flex-direction: ligne ;
 }
 }
@media (orientation: portrait) {
 corps {
 flex-direction: colonne ;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Le code ci-dessus modifie la disposition d'une page Web en fonction de l'orientation d'un appareil.

Un appareil avec une fenêtre d'affichage en mode paysage affichera la page Web suivante :

Un appareil avec une fenêtre en mode portrait affichera la page Web suivante :

7. La fonction de hauteur

La fonctionnalité de requête multimédia en hauteur vous permet de spécifier le style CSS en fonction de la hauteur de la fenêtre d'affichage de l'appareil d'un utilisateur. Cette fonction prend en charge la portée, vous pouvez donc également utiliser le hauteur min et hauteur maximum mots clés.

Utilisation de la fonction de hauteur

 /* CSS */
 @media (hauteur minimale: 360px) {
 p{
 bordure: 2px rouge orange pointillé ;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Le code ci-dessus personnalise ce qu'un utilisateur voit en fonction de la hauteur de son appareil. Les utilisateurs dont la hauteur d'appareil est de 360 ​​pixels et plus verront quelque chose de similaire à la page Web suivante :

Les appareils dont la hauteur est inférieure à 360 pixels n'afficheront pas la bordure autour du paragraphe sur la page Web.

8. La caractéristique de largeur

La fonctionnalité de requête multimédia de largeur vous permet de créer un style CSS spécifique en fonction de la largeur de la fenêtre d'affichage de l'appareil d'un utilisateur. Cette fonction prend également en charge la portée, vous avez donc la possibilité d'utiliser le largeur min et largeur maximale mots clés.

Utilisation de la fonction de largeur

 /* CSS */
 @media (largeur minimale: 600px) {
 p{
 bordure: 2px violet solide ;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Le code ci-dessus personnalise ce qu'un utilisateur voit en fonction de la largeur de son appareil. Les utilisateurs dont la largeur d'appareil est de 600 pixels et plus verront quelque chose comme la page Web suivante :

L'utilisation de requêtes multimédias basées sur la largeur et la hauteur peut être une stratégie efficace dans rendre votre site web responsive.

9. La fonction de couleur

La fonction de requête multimédia couleur évalue la composante de couleur d'un périphérique (rouge, vert, bleu). La valeur fait référence au nombre de bits qu'un affichage utilise pour chaque composant, ce qui définit le nombre de couleurs différentes qu'il peut afficher. Les appareils modernes utilisent généralement un affichage 24 bits qui utilise huit bits par composant de couleur. Il prend également une valeur entière, où un périphérique incolore est égal à zéro.

La fonction de couleur utilise également le min-couleur et max-couleur gammes.

Utilisation de la fonction de couleur

 /* CSS */
 @media (couleur min: 7) {
 p{
 bordure: 2px vert solide ;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Les appareils avec une composante de couleur de sept et plus afficheront la sortie suivante dans leurs navigateurs :

Vous pouvez désormais créer des expériences utilisateur uniques

Vous devriez pouvoir utiliser ces requêtes multimédia avancées pour améliorer l'expérience de chaque utilisateur qui visite votre site Web ou votre application. Il est important d'offrir aux mobinautes et aux utilisateurs de bureau une expérience tout aussi positive sur votre site.

Les requêtes média ne sont pas les seuls outils CSS qui peuvent renforcer vos compétences de développeur.

8 trucs et astuces CSS essentiels que tout développeur devrait connaître

Lire la suite

A propos de l'auteur