Combinaison de plusieurs requêtes média
Utilisez les opérateurs and, or et not pour combiner des fonctionnalités média dans des requêtes complexes.
Combinaison de plusieurs requêtes média est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Opérateur and
Le mot-clé and exige que toutes les conditions soient vraies simultanément. Il est utile pour cibler ensemble des tailles et des types d’appareils précis.
<div class="box">and operator demo</div>
Plage avec and
En combinant min-width et max-width avec and, vous ciblez une plage précise de largeur de zone d’affichage (styles réservés aux tablettes) :
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
La virgule comme OR
Les requêtes séparées par des virgules fonctionnent comme OR : les styles s’appliquent si ANY des requêtes correspond :
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
L’opérateur not
not nie toute une requête multimédia. Vous devez l’utiliser avec précaution : il s’applique à toute l’expression de la requête, et pas uniquement à la première condition.
<div class="doc">not operator demo</div>
not avec des parenthèses (moderne)
Les requêtes multimédias modernes de niveau 4 autorisent not() comme fonction appliquée à des fonctionnalités individuelles :
<div class="panel">not() function demo</div>
Mot-clé only (ancien)
Le mot-clé only servait à masquer les requêtes multimédias aux anciens navigateurs qui ne prenaient pas en charge les fonctionnalités multimédias. Les navigateurs modernes l’ignorent, mais sa présence est sans conséquence.
<div class="box">only keyword demo</div>
Imbrication des requêtes multimédias (imbrication CSS)
Avec l’imbrication CSS native, vous pouvez écrire les requêtes multimédias à l’intérieur de blocs de sélecteurs :
<div class="card">Nested media query demo</div>
Combinaison mobile + DPI élevé
Ciblez spécifiquement les appareils mobiles (petits et à DPI élevé) :
<div class="icon"></div>
Impression + couleur
Plusieurs fonctionnalités multimédias pour des styles d’impression qui s’appliquent uniquement aux imprimantes couleur :
<div class="chart">Chart (color reverts when printing on a color printer)</div>
Requête multimédia dans @import
Les requêtes multimédias peuvent être appliquées au moment de l’importation afin de charger conditionnellement des feuilles de style entières (ce qui bloque toutefois le rendu et doit donc être utilisé avec parcimonie) :
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Propriétés logiques dans les requêtes complexes
En règle générale, les requêtes plus simples sont plus faciles à maintenir. Évitez d’enchaîner trop de conditions. Lorsqu’une requête devient complexe, envisagez de restructurer l’approche CSS plutôt que la requête elle-même.
Vérification rapide
Quelle requête multimédia applique des styles lorsque la zone d’affichage mesure au moins 600px de large OR lorsque l’appareil est orienté en mode paysage ?
Récapitulatif
and exige que toutes les conditions soient vraies. Les virgules jouent le rôle de OR entre les requêtes. not nie toute une requête. Combinez min-width et max-width pour cibler une plage. Les CSS modernes prennent en charge l’imbrication des requêtes multimédias dans les blocs de sélecteurs ainsi que la syntaxe des plages, pour des expressions plus claires.
Questions Fréquemment Posées
La leçon « Combinaison de plusieurs requêtes média » est-elle gratuite ?
Oui — le texte complet de « Combinaison de plusieurs requêtes média » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Combinaison de plusieurs requêtes média » ?
Utilisez les opérateurs and, or et not pour combiner des fonctionnalités média dans des requêtes complexes. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Combinaison de plusieurs requêtes média » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Syntaxe et points d’arrêt courants
- Requêtes de largeur, de hauteur et d’orientation
- Prefers-Color-Scheme et Prefers-Reduced-Motion
- Combinaison de plusieurs requêtes média