diff options
Diffstat (limited to 'files/fr/orphaned')
5 files changed, 0 insertions, 782 deletions
diff --git a/files/fr/orphaned/web/api/body/index.html b/files/fr/orphaned/web/api/body/index.html deleted file mode 100644 index 89c70bbba0..0000000000 --- a/files/fr/orphaned/web/api/body/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - Reference - - TopicStub - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<div>{{ APIRef("Fetch") }}</div> - -<p><span class="seoSummary">Le {{glossary("mixin")}} <strong><code>Body</code></strong> de l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> représente le corps de d'une requête ou d'une réponse, vous permettant de déclarer le type de son contenu et comment le manipuler.</span></p> - -<p><code>Body</code> est implémenté par {{domxref("Request")}} et {{domxref("Response")}}. Ces derniers fournissent un objet avec un un corps associé (un <a href="/fr/docs/Web/API/Streams_API">stream</a>), un drapeaux pour indiquer si le corps a déjà été utilisé (initialisé à faux), et un type MIME (au début, une séquence vide d'octet).</p> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>Un simple <em>getter</em> utilisé pour obtenir un {{domxref("ReadableStream")}} du contenu.</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>Un {{jsxref("Boolean")}} qui indique si le corps a déjà été lu.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Prend un flux {{domxref("Response")}}, le lit en entier, et le retourne sous forme d'un {{jsxref("ArrayBuffer")}} au travers d'une promesse.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Prends un flux {{domxref("Response")}}, le lit en entier, et le retourne dans un {{domxref("Blob")}} au travers d'une promesse.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Prends un flux {{domxref("Response")}}, le lit en entier, et le retourne dans un objet {{domxref("FormData")}} au travers d'une promesse.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>Prends un flux {{domxref("Response")}}, le lit en entier et retourne une promesse résolue avec le résultat textuel interprété comme du {{jsxref("JSON")}}.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Prend un flux {{domxref("Response")}}, le lit en entier, et le retourne dans une {{domxref("USVString")}} (texte) au travers d'une promesse. La réponse est <em>toujours</em> décodée en utilisant l'UTF-8.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<p>L'exemple suivant utilise un simple appel <code>fetch</code> pour récupérer une image et l'afficher dans un élément {{htmlelement("img")}}. Notez qu'une fois l'image téléchargée, nous devons appeler {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implémente body) pour connaître le MIME type correcte.</p> - -<h3 id="Code_HTML">Code HTML</h3> - -<pre class="brush: html notranslate"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="Code_JavaScript">Code JavaScript</h3> - -<pre class="brush: js notranslate">const myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') - .then(res => res.blob()) - .then(res => { - const objectURL = URL.createObjectURL(res); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécifications</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("api.Body")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/fr/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li> - <li><a href="/fr/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/fr/orphaned/web/api/body/json/index.html b/files/fr/orphaned/web/api/body/json/index.html deleted file mode 100644 index 923ef65ebf..0000000000 --- a/files/fr/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -tags: - - API - - BODY - - Experimental - - Fetch - - JSON - - Méthode - - Reference -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -<div>{{APIRef("Fetch")}}</div> - -<p>La méthode <strong><code>json()</code></strong> de {{domxref("Body")}} lit un Stream {{domxref("Response")}} jusqu'au bout. Elle retourne une promesse qui s'auto-résout en renvoyant le corps de la requête parsée au format {{jsxref("JSON")}}.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: js">response.json().then(function(data) { - // faire quelque chose avec les données -});</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<p>Aucun.</p> - -<h3 id="Valeur_de_retour">Valeur de retour</h3> - -<p>Une promesse résolue contenant le corps de la requête (au format JSON) converti sous la forme d'un objet JavaScript. Cet objet peut correspondre à n'importe quel contenu représentable dans le format JSON -- un objet, un tableau, une chaîne de caractère, un nombre…</p> - -<h2 id="Exemple">Exemple</h2> - -<p>Dans l'exemple <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json</a> (lancer <a href="http://mdn.github.io/fetch-examples/fetch-json/">cet exemple</a>), nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request", "Request()")}}, puis utilisons celle-ci pour récupérer un fichier <code>.json</code>. Lorsque l'appel à <strong>fetch </strong>réussit, on lit les données et on les parse en utilisant <code>json()</code> pour les convertir en un objet JS, puis enfin on utilise les valeurs de l'objet obtenu pour les insérer dans une liste de noeuds, de manière à afficher nos produits. </p> - -<pre>const myList = document.querySelector('ul'); -const myRequest = new Request('products.json'); - -fetch(myRequest) - .then(response => response.json()) - .then(data => { - for (const product of data.products) { - let listItem = document.createElement('li'); - listItem.appendChild( - document.createElement('strong') - ).textContent = product.Name; - listItem.append( - ` can be found in ${ - product.Location - }. Cost: ` - ); - listItem.appendChild( - document.createElement('strong') - ).textContent = `£${product.Price}`; - myList.appendChild(listItem); - } - });</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-json','Body.json()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/fr/orphaned/web/api/detecting_device_orientation/index.html b/files/fr/orphaned/web/api/detecting_device_orientation/index.html deleted file mode 100644 index 42b8cec296..0000000000 --- a/files/fr/orphaned/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Détecter l'orientation de l'appareil -slug: orphaned/Web/API/Detecting_device_orientation -tags: - - Device Orientation - - Firefox OS - - Mobile - - Motion - - Orientation -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation ---- -<p>{{SeeCompatTable}}</p> - -<h2 id="Résumé">Résumé</h2> - -<p>De plus en plus d'appareils connectés à Internet sont capable de déterminer leur <strong>orientation</strong>. C'est-à-dire qu'ils peuvent fournir des données indiquant des changements dans leur orientation par rapport à la gravité. En particulier les appareils portables, comme les téléphones mobiles, peuvent utiliser cette information pour effectuer automatiquement une rotation de l'écran, afin de toujours proposer la meilleure disposition possible pour le contenu à afficher.</p> - -<p>Il existe deux événements JavaScript pour gérer l'orientation. Le premier est {{domxref("DeviceOrientationEvent")}}, qui est envoyé quand l'accéléromètre détecte un changement d'orientation de l'appareil. En recevant et en analysant les données fournies par ces événements d'orientation, il est possible de répondre de manière interactive aux changements d'orientation et d'élévation causés par les mouvements imprimés à l'appareil par l'utilisateur.</p> - -<p>Le second événement est {{ domxref("DeviceMotionEvent") }}, qui est envoyé quand un changement d’accélération est ajouté. Il est différent de {{domxref("DeviceOrientationEvent")}}, car il écoute les changements d'accélération par opposition à l'orientation. Parmi les capteurs capables de détecter {{ domxref("DeviceMotionEvent") }}, on trouve les capteurs des ordinateurs portables utilisés pour protéger des chutes les périphériques de stockage. Ils sont communément présents dans les appareils mobiles (tablettes, téléphones intelligents).</p> - -<h2 id="Traitement_des_événements_d'orientation">Traitement des événements d'orientation</h2> - -<p>Tout ce dont vous avez besoin pour commencer à recevoir les changements d'orientation est d’écouter l’événement {{ event("deviceorientation") }} :</p> - -<div class="note"> -<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> est un polyfill <span id="result_box" lang="fr"><span>pour normaliser les données de l'accéléromètre et du gyroscope sur les appareils mobiles.</span> C'<span>est utile pour surmonter certaines différences dans la prise en charge des périphériques pour l'orientation du périphérique.</span></span></p> -</div> - -<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true); -</pre> - -<p>Après l’enregistrement de votre gestionnaire d'événements (<em>event listener</em> en anglais), dans ce cas, une fonction JS appelée handleOrientation(), votre fonction d'écoute est appelée périodiquement pour récupérer les données de l'orientation mise à jour.</p> - -<p>L'événement d'orientation contient quatre valeurs ::</p> - -<ul> - <li>{{domxref("DeviceOrientationEvent.absolute")}}</li> - <li>{{domxref("DeviceOrientationEvent.alpha")}}</li> - <li>{{domxref("DeviceOrientationEvent.beta")}}</li> - <li>{{domxref("DeviceOrientationEvent.gamma")}}</li> -</ul> - -<p>La fonction gérant l’événement pourrait ressembler à ceci :</p> - -<pre class="brush: js">function handleOrientation(event) { - var absolute = event.absolute; - var alpha = event.alpha; - var beta = event.beta; - var gamma = event.gamma; - - // Faites quelque chose avec les données acquises. ;) -} -</pre> - -<h3 id="Détail_des_valeurs_d'orientation">Détail des valeurs d'orientation</h3> - -<p>La valeur reportée pour chaque axe indique l'angle de rotation autour d'un axe donné, en référence à un système de coordonnées standard. Ces valeurs sont décrites de façon plus détaillée dans cet article <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation et déplacement expliquée">Orientation et déplacement expliquée</a>.</p> - -<ul> - <li>La valeur {{ domxref("DeviceOrientationEvent.alpha") }} représente le mouvement de l'appareil, autour de l'axe « z », en degrés sur une échelle de 0° à 360° ;</li> - <li>La valeur {{ domxref("DeviceOrientationEvent.beta") }} représente le mouvement de l'appareil autour de l'axe « y » en degrés, sur une échelle de -180° à 180°. Cela représente le mouvement d'avant en arrière de l'appareil ;</li> - <li>La valeur {{ domxref("DeviceOrientationEvent.gamma") }} représente le mouvement de l'appareil autour de l'axe « x », exprimée en degrés sur une échelle de -90° à 90°. Cela représente le mouvement de gauche à droite de l'appareil.</li> -</ul> - -<h3 id="Exemple_d'orientation">Exemple d'orientation</h3> - -<p>Cet exemple fonctionne sur tout navigateur supportant l’événement {{event("deviceorientation")}} et sur tout appareil capable de détecter son orientation.</p> - -<p>Imaginons une balle dans un jardin :</p> - -<pre class="brush: html"><div class="jardin"> - <div class="balle"></div> -</div> - -<pre class="resultat"></pre> -</pre> - -<p>Ce jardin fait 200 pixels de long (Oui c'est un « petit » jardin !), et la balle est au centre :</p> - -<pre class="brush: css">.jardin { - position: relative; - width : 200px; - height: 200px; - border: 5px solid #CCC; - border-radius: 10px; -} - -.balle { - position: absolute; - top : 90px; - left : 90px; - width : 20px; - height: 20px; - background: green; - border-radius: 100%; -} -</pre> - -<p>Maintenant, on définit le déplacement de la balle en fonction de celui de l'appareil :</p> - -<pre class="brush: js">var jardin = document.querySelector('.jardin'), - balle = document.querySelector('.balle'), - resultat = document.querySelector('.resultat'), - maxX = jardin.clientWidth - balle.clientWidth, - maxY = jardin.clientHeight - balle.clientHeight; - -function handleOrientation(event) { - var x = event.beta, // En degré sur l'interval [-180,180]. - y = event.gamma; // En degré sur l'interval [-90,90]. - - resultat.innerHTML = "beta : " + x + "<br />"; - resultat.innerHTML += "gamma: " + y + "<br />"; - - // Parce-que l'on ne veut pas avoir l'appareil à l'envers. - // On restreint les valeurs de x à l'intervalle [-90,90]. - if (x > 90) { x = 90}; - if (x < -90) { x = -90}; - // Pour rendre le calcul plus simple. - // On délimite l'intervalle de x et y sur [0, 180]. - x += 90; - y += 90; - - // 10 est la moitié de la taille de la balle. - // Cela centre le point de positionnement au centre de la balle. - - balle.style.top = (maxX * x / 180 - 10) + "px"; - balle.style.left = (maxY * y / 180 - 10) + "px"; -} - -window.addEventListener('deviceorientation', handleOrientation); -</pre> - -<p>Et voici le résultat en temps réel :</p> - -<div>{{EmbedLiveSample("Exemple_d'orientation", '230', '260')}}</div> - -<div> </div> - -<div>{{LiveSampleLink("Exemple_d'orientation", "Cliquez ici")}} pour ouvrir cet exemple dans une nouvelle fenêtre; l'événement {{event("deviceorientation")}} ne marche pas dans les {{HTMLElement("iframe", "iframes")}} cross-origin dans tous les navigateurs.</div> - -<div> </div> - -<div class="warning"> -<p><strong>Attention :</strong> Chrome et Firefox ne gèrent pas les angles de la même façon, certaines directions sur les axes sont inversées.</p> -</div> - -<h2 id="Traiter_les_événement_de_mouvement">Traiter les événement de mouvement</h2> - -<p>Les événements de mouvement gèrent l'orientation de la même façon à l'exception près qu’ils portent un nom d’événement différent : {{event("devicemotion")}}</p> - -<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true); -</pre> - -<p>Ce qui change réellement est l'information fournie par l'objet {{ domxref("DeviceMotionEvent") }} passée comme paramètre par la fonction <em>HandleMotion</em>.</p> - -<p>Les événements de mouvement contiennent quatre propriétés :</p> - -<ul> - <li>{{domxref("DeviceMotionEvent.acceleration")}}</li> - <li>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}}</li> - <li>{{domxref("DeviceMotionEvent.rotationRate")}}</li> - <li>{{domxref("DeviceMotionEvent.interval")}}</li> -</ul> - -<h3 id="Explication_des_valeurs_de_mouvement">Explication des valeurs de mouvement</h3> - -<p>L'objet {{ domxref("DeviceMotionEvent") }} fourni aux développeurs Web des informations sur la vitesse de changement d'orientation et de position de l'appareil. Les changements rapportés sont fournis pour les trois axes (voir <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation et déplacement expliquées</a> pour les détails).</p> - -<p>Pour {{domxref("DeviceMotionEvent.acceleration","acceleration")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, Les axes correspondent à :</p> - -<ul> - <li><code>x</code> : représente l'axe d'Ouest en Est ;</li> - <li><code>y</code> : représente l'axe Sud vers Nord :</li> - <li><code>z</code> : représente l'axe perpendiculaire au sol.</li> -</ul> - -<p>Pour {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, c'est un peu différent. L'information correspond à :</p> - -<ul> - <li><code>alpha</code> : représente le ratio de rotation le long de l'axe perpendiculaire à l'écran (ou du clavier au bureau) ;</li> - <li><code>bêta</code> : représente le ratio de rotation le long de l'axe allant de la gauche vers la droite de l'écran (ou du clavier au bureau) ;</li> - <li><code>gamma</code> : représente le ratio de rotation le long de l'axe allant du bas vers le haut de l'écran (ou clavier vers le bureau).</li> -</ul> - -<p>Au final, {{domxref("DeviceMotionEvent.interval","interval")}} représente l'intervalle de temps, en millisecondes, pour les données générées par l'appareil.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Spécification initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.DeviceOrientationEvent")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> -</ul> diff --git a/files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html b/files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html deleted file mode 100644 index d073af9ab2..0000000000 --- a/files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: prefers-reduced-transparency -slug: orphaned/Web/CSS/@media/prefers-reduced-transparency -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/prefers-reduced-transparency -original_slug: Web/CSS/@media/prefers-reduced-transparency ---- -<p>{{CSSRef}}{{SeeCompatTable}}{{draft}}</p> - -<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-reduced-transparency</code></strong> permet de détecter si un utilisateur préfère (via un paramètre du système d'exploitation ou du navigateur) minimiser l'utilisation des effets de transparence.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<dl> - <dt><code><dfn>no-preference</dfn></code></dt> - <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à <code>false</code> lorsqu'il est utilisé dans un contexte booléen.</dd> - <dt><code><dfn>reduce</dfn></code></dt> - <dd>Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.</dd> -</dl> - -<h2 id="Préférences_utilisateur">Préférences utilisateur</h2> - -<p>À l'heure actuelle, aucun navigateur ou agent utilisateur n'implémente cette préférence malgré la présence de réglages correspondants dans les systèmes d'exploitation.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.</p> - -<h3 id="HTML">HTML</h3> - -<pre><div class="transparency">Boîte transparente</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre>.transparency { - opacity: 0.5; -} - -@media (prefers-reduced-transparency: reduce) { - .transparency { - opacity: 1; - } -} -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.at-rules.media.prefers-reduced-transparency")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="https://bugs.webkit.org/show_bug.cgi?id=175497">Le bug WebKit 175497</a></li> -</ul> - -<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p> diff --git a/files/fr/orphaned/web/css/linear-gradient()/index.html b/files/fr/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index c2612557dd..0000000000 --- a/files/fr/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: linear-gradient -slug: orphaned/Web/CSS/linear-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p>La fonction <strong><code>linear-gradient()</code></strong> permet de créer une image (type {{cssxref("<image>")}}) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS {{cssxref("<gradient>")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>Comme pour les autres types de dégradés, la valeur obtenue n'est pas une couleur CSS (type {{cssxref("<color>")}} mais une image <a href="fr/docs/Web/CSS/image">sans dimension intrinsèque</a>. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée.</p> - -<p>Les dégradés linéaires sont définis par un axe : la <em>ligne du dégradé</em>. Chaque point de cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce niveau.</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> - -<p>La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Les couleurs du dégradé sont définies par différents points : le point de départ et le point d'arrivée. Entre ces deux points, on peut avoir différents points d'arrêt définissant la couleur à ce niveau.</p> - -<p>Le point de départ utilise la couleur initiale du dégradé. Ce point est défini comme l'intersection de la ligne du dégradé et de la ligne perpendiculaire à cette droite et qui passe par le coin de la boîte situé dans le même quadrant.</p> - -<p>De la même façon, le point d'arrivée est le point de la ligne du dégradé où la couleur finale est atteinte. Il peut également être défini comme l'intersection entre la ligne du dégradé et une ligne perpendiculaire, passant par le coin le plus proche.</p> - -<p>Ces définitions plutôt complexes ont des conséquence plutôt intéressantes : les coins les plus proches de ces deux points (parfois appelés « coins magiques ») ont les couleurs de départ et de fin.</p> - -<p>Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé. </p> - -<p>Lorsque la position d'un point d'arrêt est définie de façon implicite, celui-ci sera placé à mi-chemin entre le point précédent et le point suivant. Sa position pourra aussi être définie explicitement grâce à une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.</p> - -<p>La fonction <code>linear-gradient</code> ne permet pas de répéter le motif du dégradé. Pour cela, on pourra utiliser la propriété {{cssxref("repeating-linear-gradient")}}.</p> - -<div class="note"><strong>Note : </strong>Les dégradés sont des valeurs de type <code><image></code> et non des couleurs (type {{cssxref("<color>")}}. Aussi, <code>linear-gradient</code> ne pourra pas être utilisée sur {{cssxref("background-color")}} et sur les autres propriétés qui n'acceptent que des valeurs de type <code><color></code>.</div> - -<h2 id="Paramétrer_des_dégradés">Paramétrer des dégradés</h2> - -<p>En ajoutant plus de points d'arrêt de couleurs sur la ligne du dégradé, il est possible de créer des transitions complexes entre plusieurs couleurs. La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type {{cssxref("<length>")}}) ou un pourcentage (valeur de type {{cssxref("<percentage>")}}). Si l'emplacement du point d'arrêt n'est pas indiqué, il sera placé à mi-chemin entre les deux points d'arrêt adjacents. Aussi, les deux instructions suivantes sont synonymes :</p> - -<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); -</pre> - -<p>Par défaut, la transition entre les couleurs de deux points d'arrêt se fait de façon linéaire et la couleur intermédiaire se situera à mi-chemin. Toutefois, il est possible de déplacer cette couleur intermédiaire entre les deux points d'arrêt en fournissant une indication sur l'emplacement du milieu de la transition. L'instruction qui suit permet de définir un dégradé qui commence par du rouge allant jusqu'à 10%, passe du rouge au bleu avec la couleur intermédiaire située à 30% de la ligne puis finit en bleu pur sur les 10% de la fin de la longueur.</p> - -<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre> - -<p>Si deux points d'arrêt de couleur sont situés au même emplacement, il y aura une ligne de rupture brutale entre les deux couleus des deux points d'arrêts.</p> - -<p>L'ordre des points d'arrêt est important. Si les points d'arrêt ne sont pas déclarés dans l'ordre, les points d'arrêts de valeur inférieure et situés après surchargeront les points précédents. Autrement dit, si une valeur supérieure est située avant une valeur inférieure, la première n'aura aucun effet. Avec le fragment de code qui suit, on obtient un dégradé qui commence en rouge, passe en jaune à 30% puis à bleu à 65%.</p> - -<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%); -</pre> - -<p>Il est possible de définir plusieurs positions d'arrêt sur une même couleur pour des points d'arrêt adjacents. Ainsi, les trois dégradés suivants sont équivalents :</p> - -<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); -</pre> - -<p>Par défaut, lorsqu'aucune couleur n'est définie pour le point d'arrêt 0%, c'est la couleur du premier point d'arrêt qui est utilisée au début du dégradé. De même, si aucune couleur n'est explicitement déclarée pour la position 100%, c'est la couleur du dernier point d'arrêt qui sera prolongée.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush:css notranslate">/* Un dégradé suivant une ligne à 45° - qui démarre en bleu et finit en rouge */ -linear-gradient(45deg, blue, red); - -/* Un dégradé qui démarre en bas à droite, - qui démarre en bleu et finit en rouge */ -linear-gradient(to left top, blue, red); - -/* Un dégradé qui démarre du bas et va vers le haut - qui commence en bleu, passe en vert à 40% et termine - en rouge */ -linear-gradient(0deg, blue, green 40%, red); - -/* Indication de couleur : un dégradé de gauche à droite - qui commmence en rouge et dont la couleur intermédiaire - est située à 10% et laisse les 90% pour la seconde - moitié de la transition vers le bleu */ -linear-gradient(.25turn, red, 10%, blue); - -/* Plusieurs points d'arrêt par couleur : un dégradé - orienté de 45° avec une moitié inférieure gauche - rouge et une moitié supérieure droite bleue avec - une ligne franche au milieu */ -linear-gradient(45deg, red 0 50%, blue 50% 100%); -</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : <code>left</code> ou <code>right</code> ; le second indique le côté vertical : <code>top</code> ou <code>bottom</code>. L'ordre n'est pas pertinent et chaque mot-clé est optionnel. Si la valeur est absente, elle vaudra <code>to bottom</code> par défaut. Les valeurs <code>to top</code>, <code>to bottom</code>, <code>to left</code> et <code>to right</code> correspondent respectivement aux angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>. Les autres valeurs sont traduites en angles à partir de <code>to top</code> et dans le sens des aiguilles d'une montre. Le point d'arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte.</dd> - <dt><code><angle></code></dt> - <dd>L'angle de la direction du dégradé. L'angle démarre à partir de <code>to top</code> et progresse dans le sens des aiguilles d'une montre. Pour plus de détails, voir {{cssxref("<angle>")}}.</dd> - <dt><code><linear-color-stop></code></dt> - <dd>Un valeur composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position (un pourcentage ou une longueur {{cssxref("<length>")}}) sur l'axe du dégradé. L'affichage des points d'arrêt de couleur en CSS suit les mêmes règles que les <a href="/fr/docs/Web/SVG/Tutorial/Gradients">dégradés SVG</a>.</dd> - <dt><code><color-hint></code></dt> - <dd>Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à équidistance entre les deux points d'arrêt.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> Le rendu des points d'arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui pour les points d'arrêts de couleur pour les <a href="/fr/docs/Web/SVG/Tutoriel/Gradients">dégradés SVG</a>.</p> -</div> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - -<pre class="syntaxbox notranslate">linear-gradient( - [ <a href="/fr/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \----------------------------/ - Définition de la ligne du dégradé Liste des arrêts de couleur - -où <side-or-corner> = [ left | right ] || [ top | bottom ] - et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> - et <linear-color-stop> = <color> [ <color-stop-length> ]? - et <color-stop-length> = [ <percentage> | <length> ]{1,2} - et <color-hint> = [ <percentage> | <length> ]</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Dégradé_à_45_degrés">Dégradé à 45 degrés</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">div { - background: linear-gradient(135deg, red, blue); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div style="width: 200px; height: 200px;"></div></pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample("Dégradé_à_45_degrés")}}</p> - -<h3 id="Décalage_du_début">Décalage du début</h3> - -<p>Parfois, on veut que le dégradé commence après le début de la ligne. Pour cela, on ajoute un point d'arrêt de la même couleur que la couleur de début.</p> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css notranslate">div { - background: linear-gradient(135deg, red, red 60%, blue); -}</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><div style="width: 200px; height: 200px;"></div></pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Décalage_du_début")}}</p> - -<h3 id="Un_dégradé_avec_plusieurs_couleurs">Un dégradé avec plusieurs couleurs</h3> - -<p>Si la position du premier point d'arrêt n'est pas définie par une valeur <code><length></code> ou <code><percentage></code>, sa valeur par défaut sera 0%. Si la position du dernier point d'arrêt n'est pas définie par une valeur <code><length></code> ou <code><percentage></code>, sa valeur par défaut sera 100%. Si un point d'arrêt n'a aucune indication de position et que ce n'est ni le premier ni le dernier, celui-ci sera situé à mi-chemin entre les deux points d'arrêts qui l'entourent.</p> - -<p>Les points d'arrêt doivent être définis dans l'ordre. Une fois les valeurs associées au premier et au dernier point d'arrêt, si la position d'un point d'arrêt intermédiaire est définie « avant » un point d'arrêt déclaré avant, la position réelle du point d'arrêt intermédiaire sera ramenée à la position du point d'arrêt précédent.</p> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css notranslate">div { - background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -} -</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html notranslate"><div>Un arc-en-ciel dégradé</div></pre> - -<h4 id="Résultat_3">Résultat</h4> - -<p>{{EmbedLiveSample("Un_dégradé_avec_plusieurs_couleurs")}}</p> - -<h3 id="Répéter_un_dégradé_linéaire">Répéter un dégradé linéaire</h3> - -<p>La fonction <code>linear-gradient</code> ne permet pas de répéter un dégradé (par défaut le dégradé sera étiré pour remplir tout l'élément). Pour obtenir cette répétition, il faudra utiliser la fonction {{cssxref("repeating-linear-gradient")}}.</p> - -<h3 id="Utiliser_la_transparence">Utiliser la transparence</h3> - -<h4 id="CSS_4">CSS</h4> - -<pre class="brush: css notranslate">div { - background: linear-gradient(to bottom right, red, rgba(0,0,0,0)); -}</pre> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html notranslate"><div>Un dégradé linéaire avec de la transparence</div></pre> - -<h4 id="Résultat_4">Résultat</h4> - -<p>{{EmbedLiveSample("Utiliser_la_transparence")}}</p> - -<h3 id="Des_dégradés_pour_les_différents_navigateurs">Des dégradés pour les différents navigateurs</h3> - -<p>Chaque moteur possède des préfixes différents. Voici un dégradé allant du rose vers le vert et de haut en base, exprimé avec les différents préfixes :</p> - -<pre class="brush: css notranslate">.grad { - background-color: #F07575; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ - background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */ - background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ -} -</pre> - -<p>Le préfixe <code>-moz-</code> est utilisé pour une compatibilité avec Firefox 3.6 jusqu'à Firefox 15. L (Fx 3.6 to Fx 15). Le préfixe <code>-webkit-</code> est le seul qui doit toujours être inclus pour Android 4.3-, iOS jusqu'à la version 6.1 et Safari 6. Lorsqu'on utilise une version préfixée, il ne faut pas utiliser <code>to</code>.</p> - -<h3 id="Un_dégradé_avec_des_points_d’arrêt_à_plusieurs_couleurs">Un dégradé avec des points d’arrêt à plusieurs couleurs</h3> - -<p>Cet exemple utilise des points d'arrêt situés à la même position et avec des couleurs différentes. La transition est donc franche et on obtient ainsi des bandes de couleurs.</p> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -}</pre> - -<p>{{EmbedLiveSample("Un_dégradé_avec_des_points_d’arrêts_à_plusieurs_couleurs", 120, 120)}}</p> - -<div class="note"> -<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a> pour plus d'exemples.</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Ajout des indices d'interpolation.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.types.image.gradient.linear-gradient")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a> - - <ul> - <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li> - <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li> - <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> - <li>{{cssxref("conic-gradient")}}</li> - <li>{{cssxref("repeating-conic-gradient")}}</li> - </ul> - </li> - <li>Des propriétés sur lesquelles cette fonction peut être utilisée : - <ul> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background")}}</li> - </ul> - </li> - <li><a class="external" href="https://lea.verou.me/css3patterns/">Une collection de motifs construits avec des dégradés CSS, par Léa Verou</a></li> - <li><a href="https://cssgenerator.org/gradient-css-generator.html">Générateur de dégradés CSS</a></li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> |