L'une des composantes du responsive web design est la requête média CSS. Les développeurs WordPress utilisent cette technique pour garantir un fonctionnement optimal du site web sur tous les appareils et toutes les tailles d'écran. Un problème avec cette technique CSS peut entraîner l'affichage du message d'erreur « La requête média ne fonctionne pas dans WordPress ».
Il est essentiel de corriger l'erreur « requête média ne fonctionne pas dans WordPress » pour garantir l'accessibilité de votre site web à tous, quel que soit l'écran. Vous trouverez ci-dessous quelques conseils pour résoudre ce problème. Mais avant cela, voici une brève explication des requêtes média CSS.
Que sont les requêtes média CSS ?
Les requêtes média, une des fonctionnalités de CSS (Cascading Style Sheets), permettent aux développeurs d'appliquer différents ensembles de règles CSS en fonction de conditions spécifiques. Elles les aident à créer des mises en page variées selon le type d'appareil ou la taille de la fenêtre du navigateur. Une requête média peut être utilisée dans un fichier CSS dédié ou intégrée directement dans le code HTML .
Il s'agit d'une norme recommandée par le W3C pour la conception web adaptative . De plus, elle garantit que le contenu affiché s'adapte à différentes conditions, telles que la résolution d'écran, la largeur du navigateur et le type d'appareil.
Utilisation des requêtes média CSS
Offrir une expérience utilisateur optimale lors de la navigation sur un site web est l'un des facteurs permettant d'améliorer le classement de ce site dans les résultats de recherche, et c'est là que les requêtes média CSS peuvent s'avérer utiles.
Les requêtes média permettent de personnaliser l'apparence des pages web sur tous les appareils, quelles que soient la taille et la résolution de l'écran. Elles fournissent des instructions précises indiquant au navigateur comment afficher les pages web sur mobile, ordinateur ou autres appareils.
En utilisant la requête média CSS, les développeurs peuvent créer des sites web accessibles et lisibles sur tous les appareils sans avoir à créer un site mobile distinct.
À lire aussi : Différence entre un site mobile et un site adaptatif
Voici un exemple de requête média :
@media screen and (max-width: 480px){en-tête { hauteur: 70px; }article { taille de police : 14px; }img { largeur maximale : 480px; }}Les requêtes média servent à :
- Application de styles conditionnels avec les règles CSS @media et @import.
- Déplacer une barre latérale sous le contenu du site lorsqu'une page est consultée en mode portrait sur un appareil mobile.
- Cibler des médias spécifiques <style>, <source>, and other HTML elements with the media= attribute.
- Ajustement de la largeur des colonnes en fonction de la taille de l'écran de l'appareil.
- Modification de la mise en page sur les appareils mobiles, passant d'une disposition à deux colonnes à une disposition à une seule colonne.
Syntaxe des requêtes média
Une requête média se compose des quatre éléments suivants. En comprenant sa syntaxe, vous pourrez utiliser correctement les requêtes média.
@media Règle
Cet élément permet de déclarer (spécifier) l'intention de configurer une requête média en CSS. Saisissez @media sans espace.
Type de média
Le type de média fait référence au type d'appareil pour lequel la requête média est utilisée. Il comprend les règles suivantes :
- Tous : Convient à tous les appareils, et dans les cas où le type de support n'est pas spécifié, « tous » est utilisé.
- Parole : Ce type de média est utilisé (ou destiné) aux lecteurs d'écran.
- Impression : Si une page ou un document est en mode aperçu avant impression, le type de support « impression » est appliqué. Ce type de support est utilisé pour les imprimantes.
- Écran : Cette règle CSS s’applique aux écrans – smartphones, ordinateurs de bureau, tablettes, etc.
Articles de presse
L'élément « Fonctionnalités multimédias » permet d'ajouter des détails spécifiques. Toutes les expressions de fonctionnalités multimédias sont placées entre crochets, par exemple : « largeur maximale de 400 px » (appareils mobiles). Ici, la fonctionnalité multimédia « largeur maximale » est utilisée pour les appareils mobiles.
Voici les autres fonctionnalités multimédias et leurs fonctions :
- Largeur : Ceci fait référence à la largeur de la fenêtre d'affichage.
- Max-width : Définit la « largeur maximale » de la fenêtre du navigateur.
- Hauteur : Ceci fait référence à la hauteur de la fenêtre d'affichage.
- Max-height : Définit la « hauteur maximale » de la fenêtre du navigateur.
- Hauteur minimale : Définit la « hauteur minimale » de la fenêtre du navigateur.
- Orientation : Ceci fait référence à l'orientation de la fenêtre d'affichage (mode paysage ou portrait).
Opérateurs logiques
Les opérateurs logiques permettent de composer des requêtes média complexes et incluent les éléments « not », « and » et « only ». On peut également utiliser des virgules pour combiner une ou plusieurs requêtes média en une seule règle.
- Remarque : Si vous utilisez l’opérateur « not », vous devez spécifier un type de média. Généralement, l’opérateur « not » inverse une requête média.
- Et : Pour combiner deux ou plusieurs fonctionnalités média en une seule requête média, utilisez l'opérateur « et ». Cet opérateur peut également permettre de joindre des types de médias à des fonctionnalités média.
- only » est essentiel pour les navigateurs anciens. Il leur permet d'interpréter correctement la requête média, évitant ainsi des problèmes comme l'erreur « media query not working in WordPress ». De plus, spécifiez le type de média lorsque vous utilisez l'opérateur « not ».
- , (virgule) : Cet opérateur permet de combiner plusieurs requêtes média en une seule règle. Lorsqu'une virgule sépare plusieurs requêtes, chacune est traitée individuellement. De plus, si la liste des requêtes est vraie, toutes les requêtes média le restent également.
Raisons courantes pour lesquelles les requêtes média ne fonctionnent pas dans WordPress
Les requêtes média sont essentielles pour obtenir un design adaptatif sur différents appareils, mais il arrive qu'elles ne fonctionnent pas comme prévu dans WordPress. Voici les raisons les plus courantes et comment résoudre ces problèmes :
- Fichier CSS mal lié ou surchargé : L’un des problèmes les plus courants est que votre CSS personnalisé n’est pas appliqué correctement. Cela se produit souvent lorsque la feuille de style n’est pas correctement liée ou lorsqu’un autre plugin ou thème surcharge vos styles.
- Syntaxe incorrecte dans la requête média : pour fonctionner correctement, les requêtes média doivent respecter une syntaxe correcte. Des erreurs telles que des parenthèses manquantes ou une utilisation incorrecte de mots clés comme « only screen » peuvent les rendre inopérantes. Un exemple simple de structuration de vos requêtes peut vous aider à identifier le problème.
- Problèmes de cache (liés au navigateur ou aux extensions) : Même si votre CSS personnalisée et vos requêtes média sont correctement configurées, la mise en cache peut donner l’impression que rien ne change. Les extensions de cache WordPress, combinées au cache de votre navigateur, servent souvent des fichiers obsolètes.
Besoin d'aide pour corriger les requêtes média dans WordPress ?
Si vous rencontrez toujours des problèmes de réactivité ou si votre CSS personnalisée ne s'applique pas correctement, nos experts WordPress sont là pour vous aider.
Conseils pour résoudre les problèmes de requêtes média dans WordPress
Une requête média CSS peut générer une erreur pour plusieurs raisons. Il arrive qu'elle fonctionne sur un appareil mobile mais pas sur un ordinateur. Parfois, elle peut également ne pas fonctionner sur tous les appareils. Pour vérifier la requête média de votre site, utilisez les outils de développement de votre navigateur et inspectez le CSS. Cliquez sur l'onglet « Styles » pour voir quel style est appliqué à l'élément (syntaxe) en question.
Le plus souvent, l'erreur « media query not working in WordPress » est due à une cause assez courante. Voici donc quelques solutions pour la résoudre.
Vérifier la présence d'une déclaration CSS en ligne
Si vous avez déclaré le CSS directement dans le document HTML, cela peut provoquer l'erreur « La requête média ne fonctionne pas dans WordPress ». Pour résoudre ce problème, supprimez le CSS déclaré en ligne du document HTML.
Une autre méthode consiste à remplacer cette déclaration par !important . Par exemple, pour modifier la couleur du texte des paragraphes en gris sur les appareils mobiles, utilisez les lignes de CSS suivantes.
@media screen and (max-width: 1024px){ p{ couleur : gris ; }}Cependant, il arrive que cela ne fonctionne pas en raison du style en ligne appliqué au même élément. Dans ce cas, utilisez la règle !important pour remplacer le style en ligne et résoudre le problème.
@media screen and (max-width: 1024px){ p{ couleur : gris !important ; }}Positionnez correctement les requêtes média
Une autre raison de l'erreur « requête média ne fonctionne pas dans WordPress » est un positionnement incorrect des requêtes média. Pour résoudre ce problème, ajoutez la requête média à la fin de la feuille de style.
Comme les navigateurs lisent la feuille de style de haut en bas, les règles mentionnées à la fin peuvent remplacer celles du début (sauf si `!important` est utilisé). De plus, pour les petites requêtes, placez les requêtes média avant celles concernant l'écran principal.
Consultez cet exemple
corps {couleur de fond : noir ;}@media screen and (min-width: 480px) {corps {couleur de fond : bleu ;}}@media screen and (min-width: 850px) {corps {couleur de fond : bleu clair ;text-align: centre;}}- Dans la première règle, la couleur de fond est « noire » si l'écran mesure moins de 480 px.
- Dans la deuxième requête média, la couleur d'arrière-plan est « bleue » si l'écran mesure entre 480 et 849 px.
- Enfin, si l'écran mesure 580 px ou plus, la couleur de fond sera « bleu clair » avec un alignement centré.
Ordinateur de bureau vs mobile
Une fois votre requête média configurée, elle devrait fonctionner de manière optimale sur ordinateur et mobile. Toutefois, en cas d'erreur sur l'un ou l'autre appareil, suivez les conseils ci-dessous pour résoudre le problème.
La requête média ne fonctionne pas sur ordinateur
Si vous avez utilisé la fonctionnalité média « max-device-width » au lieu de « max-width », la requête média risque de ne pas fonctionner sur ordinateur. « max-width » fait référence à la taille de la zone d'affichage de l'appareil, tandis que « max-device-width » fait référence à la taille de l'écran d'un appareil mobile.
Pour corriger l'erreur « requête média ne fonctionne pas sur ordinateur », modifiez la fonctionnalité média en « max-width ». Cela spécifie la zone d'affichage du navigateur, et non la taille réelle de l'écran de l'appareil.
Les requêtes média ne fonctionnent pas sur les appareils mobiles
De même, si vous n'avez pas défini la fenêtre d'affichage et le zoom par défaut, les requêtes média pourraient ne pas fonctionner sur les appareils mobiles. Pour résoudre ce problème, ajoutez simplement le code suivant à l'en-tête de votre site. Assurez-vous que ces lignes de code sont ajoutées dans la balise `<head>`.<head></head> élément.
<meta name="viewport" content="width=device-width, initial-scale=1"/>Ici, la « largeur » correspond à la taille de la fenêtre d'affichage, définie sur la largeur de l'appareil. Elle indique au navigateur d'adapter le rendu du site web à l'écran. Quant à l'« échelle initiale », elle définit le niveau de zoom.
Lire : Comment éviter l’annotation CSS @import pour améliorer la vitesse de chargement des pages
Conclusion
Il est important de garantir l'accessibilité de votre site web à tous, quel que soit l'appareil utilisé. Un site web adaptatif (responsive design) peut vous aider à générer du trafic provenant de différentes sources. Grâce à l'indexation mobile-first de Google , vos pages web seront indexées plus rapidement. De plus, l'expérience utilisateur sera optimisée sur les appareils mobiles, ce qui pourrait améliorer le référencement de votre site.
Résoudre l'erreur « requête média ne fonctionne pas dans WordPress » est simple une fois la cause identifiée. Vous pouvez ensuite apporter les modifications nécessaires en suivant les conseils ci-dessus.
Pour éviter que l'erreur « media query not working in WordPress » ne se reproduise, utilisez des plugins comme Simple Custom CSS et WP Add Custom CSS pour ajouter une requête média à votre site web.
De plus, si vous ne parvenez pas à résoudre l'erreur « requête média ne fonctionne pas dans WordPress », n'hésitez pas à nous contacter. Nous sommes une agence WordPress spécialisée dans la résolution des erreurs courantes sur les sites web, sans interruption de service.
