From df821208c608de1b7cdc6fe69ae28724ac1f01a0 Mon Sep 17 00:00:00 2001 From: MDN Date: Thu, 14 Oct 2021 00:47:38 +0000 Subject: [CRON] sync translated content --- files/fr/_redirects.txt | 11 +- files/fr/_wikihistory.json | 56 +-- .../web/api/keyframeeffect/keyframeeffect/index.md | 56 +++ files/fr/web/api/effecttiming/delay/index.md | 73 ---- files/fr/web/api/effecttiming/index.md | 56 --- .../web/api/keyframeeffect/keyframeeffect/index.md | 73 ++++ .../media_queries/using_media_queries/index.html | 397 +++++++++++++++++++++ .../responsive/media_types/index.html | 397 --------------------- 8 files changed, 551 insertions(+), 568 deletions(-) create mode 100644 files/fr/conflicting/web/api/keyframeeffect/keyframeeffect/index.md delete mode 100644 files/fr/web/api/effecttiming/delay/index.md delete mode 100644 files/fr/web/api/effecttiming/index.md create mode 100644 files/fr/web/api/keyframeeffect/keyframeeffect/index.md create mode 100644 files/fr/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/fr/web/progressive_web_apps/responsive/media_types/index.html (limited to 'files/fr') diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 932b674e10..a425e2ef8d 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -433,7 +433,7 @@ /fr/docs/CSS/Premiers_pas/Les_sélecteurs /fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors_9bc80fea302c91cd60fb72c4e83c83e9 /fr/docs/CSS/Premiers_pas/Listes /fr/docs/conflicting/Learn/CSS/Styling_text/Styling_lists_06e9538892250c13976a84639f0dadd2 /fr/docs/CSS/Premiers_pas/Mise_en_page /fr/docs/conflicting/Learn/CSS/CSS_layout -/fr/docs/CSS/Premiers_pas/Médias /fr/docs/Web/Progressive_web_apps/Responsive/Media_types +/fr/docs/CSS/Premiers_pas/Médias /fr/docs/Web/CSS/Media_Queries/Using_media_queries /fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_ecbda2160290b96c02dcfa8276c0333a /fr/docs/CSS/Premiers_pas/Présentation_des_CSS /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_dba75d8c56ccc773f03d946ce2dbb25c /fr/docs/CSS/Premiers_pas/Styles_de_texte /fr/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_8249b1bf53d09b06ed51f43697880b5b @@ -747,7 +747,7 @@ /fr/docs/CSS:Premiers_pas:Les_sélecteurs /fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors_9bc80fea302c91cd60fb72c4e83c83e9 /fr/docs/CSS:Premiers_pas:Listes /fr/docs/conflicting/Learn/CSS/Styling_text/Styling_lists_06e9538892250c13976a84639f0dadd2 /fr/docs/CSS:Premiers_pas:Mise_en_page /fr/docs/conflicting/Learn/CSS/CSS_layout -/fr/docs/CSS:Premiers_pas:Médias /fr/docs/Web/Progressive_web_apps/Responsive/Media_types +/fr/docs/CSS:Premiers_pas:Médias /fr/docs/Web/CSS/Media_Queries/Using_media_queries /fr/docs/CSS:Premiers_pas:Pourquoi_utiliser_CSS /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_ecbda2160290b96c02dcfa8276c0333a /fr/docs/CSS:Premiers_pas:Présentation_des_CSS /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_dba75d8c56ccc773f03d946ce2dbb25c /fr/docs/CSS:Premiers_pas:Styles_de_texte /fr/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_8249b1bf53d09b06ed51f43697880b5b @@ -3459,8 +3459,8 @@ /fr/docs/Web/API/API_fichier_systeme /fr/docs/Web/API/File_and_Directory_Entries_API /fr/docs/Web/API/AbstractWorker /fr/docs/orphaned/Web/API/AbstractWorker /fr/docs/Web/API/Ambient_Light_Events /fr/docs/orphaned/Web/API/Ambient_Light_Events -/fr/docs/Web/API/AnimationEffectTimingProperties /fr/docs/Web/API/EffectTiming -/fr/docs/Web/API/AnimationEffectTimingProperties/delay /fr/docs/Web/API/EffectTiming/delay +/fr/docs/Web/API/AnimationEffectTimingProperties /fr/docs/conflicting/Web/API/KeyframeEffect/KeyframeEffect +/fr/docs/Web/API/AnimationEffectTimingProperties/delay /fr/docs/Web/API/KeyframeEffect/KeyframeEffect /fr/docs/Web/API/AnimationEvent.animationName /fr/docs/Web/API/AnimationEvent/animationName /fr/docs/Web/API/AnimationEvent.elapsedTime /fr/docs/Web/API/AnimationEvent/elapsedTime /fr/docs/Web/API/AnimationEvent.pseudoElement /fr/docs/Web/API/AnimationEvent/pseudoElement @@ -3546,6 +3546,8 @@ /fr/docs/Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C /fr/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core /fr/docs/Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple /fr/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example /fr/docs/Web/API/DoubleRange /fr/docs/Web/API/MediaTrackConstraints +/fr/docs/Web/API/EffectTiming /fr/docs/conflicting/Web/API/KeyframeEffect/KeyframeEffect +/fr/docs/Web/API/EffectTiming/delay /fr/docs/Web/API/KeyframeEffect/KeyframeEffect /fr/docs/Web/API/Element.activeElement /fr/docs/Web/API/Document/activeElement /fr/docs/Web/API/Element.addEventListener /fr/docs/Web/API/EventTarget/addEventListener /fr/docs/Web/API/Element.appendChild /fr/docs/Web/API/Node/appendChild @@ -5488,6 +5490,7 @@ /fr/docs/Web/Progressive_web_apps/Progressive /fr/docs/conflicting/Web/Progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf /fr/docs/Web/Progressive_web_apps/Re-engageable /fr/docs/conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 /fr/docs/Web/Progressive_web_apps/Relancer_Via_Notifications_Push /fr/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push +/fr/docs/Web/Progressive_web_apps/Responsive/Media_types /fr/docs/Web/CSS/Media_Queries/Using_media_queries /fr/docs/Web/Progressive_web_apps/Securisee /fr/docs/conflicting/Web/Progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b /fr/docs/Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs /fr/docs/Web/Progressive_web_apps/Add_to_home_screen /fr/docs/Web/Reference /fr/docs/orphaned/Web/Reference diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index c76201163e..44ad23bfb9 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -14638,21 +14638,6 @@ "loella16" ] }, - "Web/API/EffectTiming": { - "modified": "2019-03-23T22:28:24.754Z", - "contributors": [ - "SphinxKnight", - "HereComesJuju", - "rachelnabors" - ] - }, - "Web/API/EffectTiming/delay": { - "modified": "2019-03-23T22:28:20.379Z", - "contributors": [ - "SphinxKnight", - "HereComesJuju" - ] - }, "Web/API/Element": { "modified": "2020-11-10T21:11:37.745Z", "contributors": [ @@ -17982,6 +17967,13 @@ "tristantheb" ] }, + "Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2019-03-23T22:28:20.379Z", + "contributors": [ + "SphinxKnight", + "HereComesJuju" + ] + }, "Web/API/LocalFileSystem": { "modified": "2020-11-02T04:24:20.566Z", "contributors": [ @@ -25508,22 +25500,11 @@ ] }, "Web/CSS/Media_Queries/Using_media_queries": { - "modified": "2020-09-12T11:51:58.821Z", + "modified": "2019-03-24T00:11:03.641Z", "contributors": [ - "kgrandemange", - "tzilliox", - "SphinxKnight", - "JNa0", - "JeffD", - "Sebastianz", - "mrstork", - "malayaleecoder", - "adevoufera", "teoli", - "wakka27", - "infogenious", - "tregagnon", - "FredB", + "grandoc", + "Verruckt", "BenoitL" ] }, @@ -40379,15 +40360,6 @@ "poum" ] }, - "Web/Progressive_web_apps/Responsive/Media_types": { - "modified": "2019-03-24T00:11:03.641Z", - "contributors": [ - "teoli", - "grandoc", - "Verruckt", - "BenoitL" - ] - }, "Web/Progressive_web_apps/Responsive/responsive_design_building_blocks": { "modified": "2019-03-18T20:52:18.105Z", "contributors": [ @@ -43173,6 +43145,14 @@ "Kalwyn" ] }, + "conflicting/Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2019-03-23T22:28:24.754Z", + "contributors": [ + "SphinxKnight", + "HereComesJuju", + "rachelnabors" + ] + }, "conflicting/Web/API/MediaTrackConstraints": { "modified": "2020-10-15T22:35:00.304Z", "contributors": [ diff --git a/files/fr/conflicting/web/api/keyframeeffect/keyframeeffect/index.md b/files/fr/conflicting/web/api/keyframeeffect/keyframeeffect/index.md new file mode 100644 index 0000000000..fe343b77e6 --- /dev/null +++ b/files/fr/conflicting/web/api/keyframeeffect/keyframeeffect/index.md @@ -0,0 +1,56 @@ +--- +title: Animation Effect Timing Properties +slug: conflicting/Web/API/KeyframeEffect/KeyframeEffect +tags: + - API + - Animation + - AnimationEffectTimingProperties + - Dictionnaire + - Experimental + - Interface + - Reference +translation_of: Web/API/EffectTiming +original_slug: Web/API/EffectTiming +--- +{{SeeCompatTable}}{{APIRef("Web Animations")}} + +Le dictionnaire **`AnimationEffectTimingProperties`** est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si `duration` n'est pas paramétrée, l'animation ne sera pas lancée. + +Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (_keyframe_) et comment elle se comporte au début et à la fin. + +## Propriétés + +- {{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}} + - : Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0. +- {{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}} + - : Indique si l'animation se déroule dans le sens the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`. +- {{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}} + - : La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0. +- {{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}} + - : La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"` et `"ease-in-out"` ou une fonction `"cubic-bezier"` de la forme `"cubic-bezier(0.42, 0, 0.58, 1)"`. La valeur par défaut est `"linear"`. +- {{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}} + - : Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0. +- {{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}} + - : Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (`"backwards"`), être conservés après la fin de l'animation (`"forwards"`) ou les deux `both`. La valeur par défaut est `"none"`. +- {{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}} + - : Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0. +- {{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}} + - : Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}} | {{Spec2('Web Animations')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.EffectTiming")}} + +## Voir aussi + +- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) +- [Utiliser l'API Web Animations](/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) +- {{domxref("Element.animate()")}} +- {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} +- {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} diff --git a/files/fr/web/api/effecttiming/delay/index.md b/files/fr/web/api/effecttiming/delay/index.md deleted file mode 100644 index c8480f04d4..0000000000 --- a/files/fr/web/api/effecttiming/delay/index.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Delay -slug: Web/API/EffectTiming/delay -tags: - - API - - Animation - - AnimationEffectTimingProperties - - Experimental - - Propriété - - Reference -translation_of: Web/API/EffectTiming/delay -original_slug: Web/API/AnimationEffectTimingProperties/delay ---- -{{SeeCompatTable}}{{APIRef("Web Animations")}} - -La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. - -> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. - -## Syntaxe - - var timingProperties = { - delay: delayInMilliseconds - }; - - timingProperties.delay = delayInMilliseconds; - -### Valeur - -Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0. - -## Exemples - -Dans l'exemple _[Pool of Tears](https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010)_, chaque larme commence à un instant aléatoire grâce à l'objet de minutage : - -```js -// Générateur de valeurs plus -// ou moins aléatoires -var getRandomMsRange = function(min, max) { - return Math.random() * (max - min) + min; -} - -// On parcourt l'ensemble des larmes -tears.forEach(function(el) { - - // On anime chacune des larmes - el.animate( - tearsFalling, - { - delay: getRandomMsRange(-1000, 1000), // aléatoire pour chaque larme - duration: getRandomMsRange(2000, 6000), // aléatoire pour chaque larme - iterations: Infinity, - easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" - }); -}); -``` - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('Web Animations', '#start-delay', 'delay')}} | {{Spec2('Web Animations')}} | Brouillon d'édiiton. | - -## Compatibilité des navigateurs - -{{Compat("api.EffectTiming.delay")}} - -## Voir aussi - -- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) -- {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (`delay`) -- La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}). -- Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}} diff --git a/files/fr/web/api/effecttiming/index.md b/files/fr/web/api/effecttiming/index.md deleted file mode 100644 index a92f204fb7..0000000000 --- a/files/fr/web/api/effecttiming/index.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Animation Effect Timing Properties -slug: Web/API/EffectTiming -tags: - - API - - Animation - - AnimationEffectTimingProperties - - Dictionnaire - - Experimental - - Interface - - Reference -translation_of: Web/API/EffectTiming -original_slug: Web/API/AnimationEffectTimingProperties ---- -{{SeeCompatTable}}{{APIRef("Web Animations")}} - -Le dictionnaire **`AnimationEffectTimingProperties`** est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si `duration` n'est pas paramétrée, l'animation ne sera pas lancée. - -Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (_keyframe_) et comment elle se comporte au début et à la fin. - -## Propriétés - -- {{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}} - - : Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0. -- {{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}} - - : Indique si l'animation se déroule dans le sens the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`. -- {{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}} - - : La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0. -- {{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}} - - : La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"` et `"ease-in-out"` ou une fonction `"cubic-bezier"` de la forme `"cubic-bezier(0.42, 0, 0.58, 1)"`. La valeur par défaut est `"linear"`. -- {{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}} - - : Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0. -- {{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}} - - : Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (`"backwards"`), être conservés après la fin de l'animation (`"forwards"`) ou les deux `both`. La valeur par défaut est `"none"`. -- {{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}} - - : Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0. -- {{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}} - - : Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe. - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}} | {{Spec2('Web Animations')}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("api.EffectTiming")}} - -## Voir aussi - -- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) -- [Utiliser l'API Web Animations](/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) -- {{domxref("Element.animate()")}} -- {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} -- {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} diff --git a/files/fr/web/api/keyframeeffect/keyframeeffect/index.md b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md new file mode 100644 index 0000000000..d07b0c664f --- /dev/null +++ b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md @@ -0,0 +1,73 @@ +--- +title: Delay +slug: Web/API/KeyframeEffect/KeyframeEffect +tags: + - API + - Animation + - AnimationEffectTimingProperties + - Experimental + - Propriété + - Reference +translation_of: Web/API/EffectTiming/delay +original_slug: Web/API/EffectTiming/delay +--- +{{SeeCompatTable}}{{APIRef("Web Animations")}} + +La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. + +> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. + +## Syntaxe + + var timingProperties = { + delay: delayInMilliseconds + }; + + timingProperties.delay = delayInMilliseconds; + +### Valeur + +Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0. + +## Exemples + +Dans l'exemple _[Pool of Tears](https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010)_, chaque larme commence à un instant aléatoire grâce à l'objet de minutage : + +```js +// Générateur de valeurs plus +// ou moins aléatoires +var getRandomMsRange = function(min, max) { + return Math.random() * (max - min) + min; +} + +// On parcourt l'ensemble des larmes +tears.forEach(function(el) { + + // On anime chacune des larmes + el.animate( + tearsFalling, + { + delay: getRandomMsRange(-1000, 1000), // aléatoire pour chaque larme + duration: getRandomMsRange(2000, 6000), // aléatoire pour chaque larme + iterations: Infinity, + easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" + }); +}); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Web Animations', '#start-delay', 'delay')}} | {{Spec2('Web Animations')}} | Brouillon d'édiiton. | + +## Compatibilité des navigateurs + +{{Compat("api.EffectTiming.delay")}} + +## Voir aussi + +- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) +- {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (`delay`) +- La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}). +- Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}} diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..7c38602401 --- /dev/null +++ b/files/fr/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,397 @@ +--- +title: Médias +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - CSS + - CSS:Premiers_pas +translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Progressive_web_apps/Responsive/Media_types +--- +

 

+

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

+

Cette page revient sur le but et la structure des feuilles de style CSS.

+

Information : les médias

+

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

+

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

+

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

+ + + + + + + +
+ Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. +

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

+

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

+
+ 
+@media print {
+  #nav-area {display: none;}
+  }
+
+
+
+

Voici certains des types de média courants :

+ + + + + + + + + + + + + + + + + + + +
screenÉcran d'ordinateur en couleurs
printMédia paginé
projectionProjection sur un écran
allTous les médias (la valeur par défaut)
+

 

+ + + + + + + +
+ Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles. +

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

+

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

+

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

+

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

+

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

+
+

 

+

Impression

+

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

+

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

+

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

+

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

+ + + + + + + +
+ Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté : +
+ 
+@page {margin: 2cm;}
+
+
+

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

+
+ 
+h1 {page-break-before: always;}
+
+
+
+

 

+ + + + + + + +
+ Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS. +

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

+
+

 

+

Interfaces utilisateur

+

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

+

Il n'y a pas de type de média spécial pour ce type de périphériques.

+

Voici les cinq sélecteurs spéciaux :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelecteurSélectionne
E:hoverTout élément E survolé par le pointeur
E:focusTout élément E ayant le focus du clavier
E:activeTout élément E impliqué dans l'action courante de l'utilisateur
E:linkTout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visitedTout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment
+

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

+ + + + + + + + + + + + + + + + + + + + + + + +
ValeurIndique
pointerIndique un lien
waitIndique que le programme n'accepte aucune interaction pour le moment
progressIndique que le programme fonctionne, mais peut toujours accepter une autre commande
defaultLe curseur par défaut (habituellement une flèche)
+


+ Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

+

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

+

 

+ + + + + + + +
+ Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : +
+ 
+.bouton-vert {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.bouton-vert[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.bouton-vert:active {
+  border-style: inset;
+  }
+
+
+

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

+ + + + + + +
+ + + + + + + + + + + + + + + + +
Cliquez iciCliquez iciCliquez ici
 
disablednormalactive
+
+

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

+
+ + + + + + + +
+ Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS. +

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

+
+

Action : impression d'un document

+

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Exemple à imprimer</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
+</HEAD>
+
+<BODY>
+<H1>Section A</H1>
+<P>Ceci est la première section...</P>
+
+<H1>Section B</H1>
+<P>Ceci est la seconde section...</P>
+
+<DIV id="en-tete-impression">
+Titre pour les médias paginés
+</DIV>
+
+<DIV id="pied-de-page-impression">
+Page :
+</DIV>
+
+</BODY>
+</HTML>
+
+
+

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

+
+ 
/*** Exemple d'impression ***/
+
+/* Réglages par défaut pour l'écran */
+#en-tete-impression,
+#pied-de-page-impression {
+  display: none;
+  }
+
+/* Uniquement pour l'impression */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#en-tete-impression {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#pied-de-page-impression {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#pied-de-page-impression:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* fin des paramètres pour l'impression */
+
+
+

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

+

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

+ + + + + + + +
+ + + + + + +
+ + + + + + +
+
+ Titre
+
+ Section A
+
+ Ceci est la première section...
+
+ Page : 1
+
+
+ 		+ + + + + + +
+ + + + + + +
+
+ Titre
+
+ Section B
+
+ Ceci est la seconde section...
+
+ Page : 2
+
+
+
+

 

+ + + + + + + +
+ Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. +

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

+

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

+
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

diff --git a/files/fr/web/progressive_web_apps/responsive/media_types/index.html b/files/fr/web/progressive_web_apps/responsive/media_types/index.html deleted file mode 100644 index 05cafc4715..0000000000 --- a/files/fr/web/progressive_web_apps/responsive/media_types/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Médias -slug: Web/Progressive_web_apps/Responsive/Media_types -tags: - - CSS - - CSS:Premiers_pas -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: CSS/Premiers_pas/Médias ---- -

 

-

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

-

Cette page revient sur le but et la structure des feuilles de style CSS.

-

Information : les médias

-

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

-

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

-

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

- - - - - - - -
- Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. -

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

-

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

-
- 
-@media print {
-  #nav-area {display: none;}
-  }
-
-
-
-

Voici certains des types de média courants :

- - - - - - - - - - - - - - - - - - - -
screenÉcran d'ordinateur en couleurs
printMédia paginé
projectionProjection sur un écran
allTous les médias (la valeur par défaut)
-

 

- - - - - - - -
- Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles. -

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

-

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

-

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

-

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

-

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

-
-

 

-

Impression

-

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

-

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

-

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

-

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

- - - - - - - -
- Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté : -
- 
-@page {margin: 2cm;}
-
-
-

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

-
- 
-h1 {page-break-before: always;}
-
-
-
-

 

- - - - - - - -
- Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS. -

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

-
-

 

-

Interfaces utilisateur

-

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

-

Il n'y a pas de type de média spécial pour ce type de périphériques.

-

Voici les cinq sélecteurs spéciaux :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelecteurSélectionne
E:hoverTout élément E survolé par le pointeur
E:focusTout élément E ayant le focus du clavier
E:activeTout élément E impliqué dans l'action courante de l'utilisateur
E:linkTout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visitedTout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment
-

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

- - - - - - - - - - - - - - - - - - - - - - - -
ValeurIndique
pointerIndique un lien
waitIndique que le programme n'accepte aucune interaction pour le moment
progressIndique que le programme fonctionne, mais peut toujours accepter une autre commande
defaultLe curseur par défaut (habituellement une flèche)
-


- Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

-

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

-

 

- - - - - - - -
- Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : -
- 
-.bouton-vert {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.bouton-vert[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.bouton-vert:active {
-  border-style: inset;
-  }
-
-
-

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

- - - - - - -
- - - - - - - - - - - - - - - - -
Cliquez iciCliquez iciCliquez ici
 
disablednormalactive
-
-

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

-
- - - - - - - -
- Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS. -

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

-
-

Action : impression d'un document

-

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

-
- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Exemple à imprimer</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>Section A</H1>
-<P>Ceci est la première section...</P>
-
-<H1>Section B</H1>
-<P>Ceci est la seconde section...</P>
-
-<DIV id="en-tete-impression">
-Titre pour les médias paginés
-</DIV>
-
-<DIV id="pied-de-page-impression">
-Page :
-</DIV>
-
-</BODY>
-</HTML>
-
-
-

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

-
- 
/*** Exemple d'impression ***/
-
-/* Réglages par défaut pour l'écran */
-#en-tete-impression,
-#pied-de-page-impression {
-  display: none;
-  }
-
-/* Uniquement pour l'impression */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#en-tete-impression {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#pied-de-page-impression {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#pied-de-page-impression:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* fin des paramètres pour l'impression */
-
-
-

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

-

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

- - - - - - - -
- - - - - - -
- - - - - - -
-
- Titre
-
- Section A
-
- Ceci est la première section...
-
- Page : 1
-
-
- 		- - - - - - -
- - - - - - -
-
- Titre
-
- Section B
-
- Ceci est la seconde section...
-
- Page : 2
-
-
-
-

 

- - - - - - - -
- Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. -

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

-

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

-
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

-- cgit v1.2.3-54-g00ecf