diff --git a/40-rwd.md b/40-rwd.md
index b63b3ab..dbfb46a 100644
--- a/40-rwd.md
+++ b/40-rwd.md
@@ -31,19 +31,22 @@ On utilise souvent l'attribut media `print` pour charger des styles CSS spécifi
Ou à l'intérieur d'une feuille de styles CSS, avec la syntaxe suivante:
```css
-@media screen {
- * { font-family: sans-serif }
+@media print {
+ * {
+ background: #fff;
+ color: #000;
+ }
}
```
-Pour un bon exemple de styles destinés à optimiser une page web pour l'impression, on peut se référer au [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205). Lire également [cet article](https://medium.com/@matuzo/i-totally-forgot-about-print-style-sheets-f1e6604cfd6#.npcr2tohy) de Manuel Matuzovic.
+Pour un bon exemple de styles destinés à optimiser une page web pour l'impression, on peut se référer au [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css#L182). Lire également [cet article](https://medium.com/@matuzo/i-totally-forgot-about-print-style-sheets-f1e6604cfd6#.npcr2tohy) de Manuel Matuzovic.
Références concernant @print:
- *[Faites bonne impression avec les CSS](http://www.pompage.net/traduction/impression)*, par Eric A. Meyer, 2002
- *[Maîtriser l’impression CSS](http://openweb.eu.org/articles/maitriser_impression_css)*, par Nicolas Hoffmann, 2010
- [La spécification CSS 2.1](https://www.w3.org/TR/CSS21/media.html)
-- [Les styles @print](https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L197) du HTML5Boilerplate - ces styles sont aussi utilisés [dans Bootstrap](https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L190).
+- [Les styles @print](https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css#L182) du HTML5Boilerplate - ces styles étaient aussi utilisés [dans Bootstrap 4](https://github.com/twbs/bootstrap/blob/6ffb0b48e455430f8a5359ed689ad64c1143fac2/dist/css/bootstrap.css#L10220) (mais plus depuis la version 5).
Les Media Queries du CSS3
===
@@ -57,7 +60,7 @@ RWD (Responsive Web Design)
TODO: explicatif et exemples...
-Un exemple de media query:
+Quelques exemples de Media Query:
```css
@media screen and (min-width: 20em) {
@@ -67,6 +70,41 @@ Un exemple de media query:
}
```
+On peut aussi omettre le mot-clé `screen` si on souhaite que les styles s'appliquent sur tous les supports:
+
+```css
+@media (min-width: 20em) {
+ /* Déclarations */
+}
+```
+
+On peut cumuler différents critères avec le mot-clé `and`:
+
+```css
+@media (orientation: portrait) and (min-width: 20em) {
+ /* Déclarations */
+}
+```
+
+Ce qu'on peut détecter avec des Media Queries:
+
+- Les dimensions - `width` et `height` - avec les préfixes `min-` et `max-`.
+- L’orientation de l'écran, avec les valeurs `portrait` ou `landscape` (paysage).
+- Le ratio hauteur/largeur de l’écran, avec `aspect-ratio`.
+- La résolution, mesurée en DPI.
+
+```css
+@media (aspect-ratio: 16/9) {
+ /* Déclarations */
+}
+
+@media (resolution: 150dpi) {
+ /* Déclarations */
+}
+
+
+```
+
Références:
- *[Responsive Web Design](http://alistapart.com/article/responsive-web-design)*, par Ethan Marcotte, alistapart, 2010