diff options
177 files changed, 565 insertions, 11928 deletions
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 7a241e04bc..03b0bf4097 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -104,7 +104,7 @@ /fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow /fr/docs/Learn/CSS/CSS_layout/Normal_Flow /fr/docs/Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs /fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers /fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design /fr/docs/Learn/CSS/CSS_layout/Responsive_Design -/fr/docs/Apprendre/CSS/CSS_properties /fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/fr/docs/Apprendre/CSS/CSS_properties /fr/docs/Learn/CSS/Building_blocks/Selectors /fr/docs/Apprendre/CSS/Comment /fr/docs/Learn/CSS/Howto /fr/docs/Apprendre/CSS/Comment/Créer_de_belles_boîtes /fr/docs/Learn/CSS/Howto/create_fancy_boxes /fr/docs/Apprendre/CSS/Comment/Generated_content /fr/docs/Learn/CSS/Howto/Generated_content @@ -116,7 +116,7 @@ /fr/docs/Apprendre/CSS/Introduction_à _CSS/Debugging_CSS /en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS /fr/docs/Apprendre/CSS/Introduction_à _CSS/Fundamental_CSS_comprehension /fr/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension /fr/docs/Apprendre/CSS/Introduction_à _CSS/La_cascade_et_l_héritage /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/fr/docs/Apprendre/CSS/Introduction_à _CSS/La_disposition /fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction +/fr/docs/Apprendre/CSS/Introduction_à _CSS/La_disposition /fr/docs/Learn/CSS/CSS_layout/Introduction /fr/docs/Apprendre/CSS/Introduction_à _CSS/La_syntaxe /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /fr/docs/Apprendre/CSS/Introduction_à _CSS/Le_fonctionnement_de_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /fr/docs/Apprendre/CSS/Introduction_à _CSS/Le_modèle_de_boîte /en-US/docs/Learn/CSS/Building_blocks/The_box_model @@ -126,12 +126,12 @@ /fr/docs/Apprendre/CSS/Introduction_à _CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /fr/docs/Apprendre/CSS/Les_bases /en-US/docs/Learn/CSS/First_steps /fr/docs/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/fr/docs/Apprendre/CSS/Les_bases/La_disposition /fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction +/fr/docs/Apprendre/CSS/Les_bases/La_disposition /fr/docs/Learn/CSS/CSS_layout/Introduction /fr/docs/Apprendre/CSS/Les_bases/La_syntaxe /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /fr/docs/Apprendre/CSS/Les_bases/Le_fonctionnement_de_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /fr/docs/Apprendre/CSS/Les_bases/Le_modèle_de_boîte /en-US/docs/Learn/CSS/Building_blocks/The_box_model /fr/docs/Apprendre/CSS/Les_bases/Les_sélecteurs /en-US/docs/Learn/CSS/Building_blocks/Selectors -/fr/docs/Apprendre/CSS/Les_propriétés_CSS /fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/fr/docs/Apprendre/CSS/Les_propriétés_CSS /fr/docs/Learn/CSS/Building_blocks/Selectors /fr/docs/Apprendre/CSS/Utiliser_CSS_dans_une_page_web /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works /fr/docs/Apprendre/CSS/formatage_texte_CSS /fr/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_9e7ba587262abbb02304cbc099c1f0d8 /fr/docs/Apprendre/CSS/styliser_boites /en-US/docs/Learn/CSS/Building_blocks @@ -185,13 +185,13 @@ /fr/docs/Apprendre/HTML/Comment/Annoter_des_images_et_graphiques /fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Images_in_HTML_2c0377f7605f693cad465c2b4839addc /fr/docs/Apprendre/HTML/Comment/Appliquer_du_CSS_à _une_page_web /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_cf31463f874ecd8e10e648dacde4a995 /fr/docs/Apprendre/HTML/Comment/Comment_créer_un_document_HTML_simple /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started -/fr/docs/Apprendre/HTML/Comment/Comment_identifier_et_expliquer_des_abréviations /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446 +/fr/docs/Apprendre/HTML/Comment/Comment_identifier_et_expliquer_des_abréviations /fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting /fr/docs/Apprendre/HTML/Comment/Créer_un_document_HTML_simple /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started /fr/docs/Apprendre/HTML/Comment/Créer_un_hyperlien /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks /fr/docs/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals /fr/docs/Apprendre/HTML/Comment/Découper_une_page_web_en_sections_logiques /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Document_and_website_structure /fr/docs/Apprendre/HTML/Comment/Définir_des_termes_avec_HTML /fr/docs/Learn/HTML/Howto/Define_terms_with_HTML -/fr/docs/Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446 +/fr/docs/Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations /fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting /fr/docs/Apprendre/HTML/Comment/Intégrer_une_page_web_dans_une_autre_page_web /fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d /fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hiérarchie_de_titres /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc /fr/docs/Apprendre/HTML/Comment/Mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6 @@ -309,7 +309,7 @@ /fr/docs/CSS/-moz-grab /en-US/docs/Web/CSS/cursor#grab /fr/docs/CSS/-moz-grabbing /en-US/docs/Web/CSS/cursor#grab /fr/docs/CSS/-moz-image-region /fr/docs/Web/CSS/-moz-image-region -/fr/docs/CSS/-moz-linear-gradient /fr/docs/orphaned/Web/CSS/linear-gradient() +/fr/docs/CSS/-moz-linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/CSS/-moz-margin-end /fr/docs/Web/CSS/margin-inline-end /fr/docs/CSS/-moz-margin-start /fr/docs/Web/CSS/margin-inline-start /fr/docs/CSS/-moz-opacity /fr/docs/Web/CSS/opacity @@ -585,7 +585,7 @@ /fr/docs/CSS/length /fr/docs/Web/CSS/length /fr/docs/CSS/letter-spacing /fr/docs/Web/CSS/letter-spacing /fr/docs/CSS/line-height /fr/docs/Web/CSS/line-height -/fr/docs/CSS/linear-gradient /fr/docs/orphaned/Web/CSS/linear-gradient() +/fr/docs/CSS/linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/CSS/list-style /fr/docs/Web/CSS/list-style /fr/docs/CSS/list-style-image /fr/docs/Web/CSS/list-style-image /fr/docs/CSS/list-style-position /fr/docs/Web/CSS/list-style-position @@ -3463,8 +3463,6 @@ /fr/docs/Web/API/AnimationEvent.elapsedTime /fr/docs/Web/API/AnimationEvent/elapsedTime /fr/docs/Web/API/AnimationEvent.pseudoElement /fr/docs/Web/API/AnimationEvent/pseudoElement /fr/docs/Web/API/AudioContext/createGain /fr/docs/Web/API/BaseAudioContext/createGain -/fr/docs/Web/API/Body /fr/docs/orphaned/Web/API/Body -/fr/docs/Web/API/Body/json /fr/docs/orphaned/Web/API/Body/json /fr/docs/Web/API/ByteString /fr/docs/Web/JavaScript/Reference/Global_Objects/String /fr/docs/Web/API/CSSMatrix /fr/docs/Web/API/DOMMatrix /fr/docs/Web/API/Canvas_API/Tutoriel_canvas /fr/docs/Web/API/Canvas_API/Tutorial @@ -3494,7 +3492,6 @@ /fr/docs/Web/API/DOMLocator /fr/docs/orphaned/Web/API/DOMLocator /fr/docs/Web/API/DOMTokenList/DOMTokenList.add() /fr/docs/Web/API/DOMTokenList/add /fr/docs/Web/API/DOMUserData /fr/docs/orphaned/Web/API/DOMUserData -/fr/docs/Web/API/Detecting_device_orientation /fr/docs/orphaned/Web/API/Detecting_device_orientation /fr/docs/Web/API/DeviceOrientationEvent.absolute /fr/docs/Web/API/DeviceOrientationEvent/absolute /fr/docs/Web/API/DeviceRotationRate /fr/docs/Web/API/DeviceMotionEventRotationRate /fr/docs/Web/API/DeviceRotationRate/alpha /fr/docs/Web/API/DeviceMotionEventRotationRate/alpha @@ -3885,7 +3882,7 @@ /fr/docs/Web/CSS/-moz-copy /fr/docs/Web/CSS/cursor /fr/docs/Web/CSS/-moz-grab /en-US/docs/Web/CSS/cursor#grab /fr/docs/Web/CSS/-moz-grabbing /en-US/docs/Web/CSS/cursor#grab -/fr/docs/Web/CSS/-moz-linear-gradient /fr/docs/orphaned/Web/CSS/linear-gradient() +/fr/docs/Web/CSS/-moz-linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/Web/CSS/-moz-margin-end /fr/docs/Web/CSS/margin-inline-end /fr/docs/Web/CSS/-moz-margin-start /fr/docs/Web/CSS/margin-inline-start /fr/docs/Web/CSS/-moz-opacity /fr/docs/Web/CSS/opacity @@ -3921,7 +3918,6 @@ /fr/docs/Web/CSS/:before /fr/docs/Web/CSS/::before /fr/docs/Web/CSS/:matches /fr/docs/Web/CSS/:is /fr/docs/Web/CSS/:visited_et_la_vie_privée /fr/docs/Web/CSS/Privacy_and_the_:visited_selector -/fr/docs/Web/CSS/@media/prefers-reduced-transparency /fr/docs/orphaned/Web/CSS/@media/prefers-reduced-transparency /fr/docs/Web/CSS/@media/scan /fr/docs/orphaned/Web/CSS/@media/scan /fr/docs/Web/CSS/@page/bleed /fr/docs/orphaned/Web/CSS/@page/bleed /fr/docs/Web/CSS/@page/marks /fr/docs/orphaned/Web/CSS/@page/marks @@ -4211,8 +4207,8 @@ /fr/docs/Web/CSS/image-set /fr/docs/orphaned/Web/CSS/image-set() /fr/docs/Web/CSS/image-set() /fr/docs/orphaned/Web/CSS/image-set() /fr/docs/Web/CSS/imagefunction /fr/docs/orphaned/Web/CSS/image() -/fr/docs/Web/CSS/linear-gradient /fr/docs/orphaned/Web/CSS/linear-gradient() -/fr/docs/Web/CSS/linear-gradient() /fr/docs/orphaned/Web/CSS/linear-gradient() +/fr/docs/Web/CSS/linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() +/fr/docs/Web/CSS/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/Web/CSS/longueur /fr/docs/Web/CSS/length /fr/docs/Web/CSS/marks /fr/docs/orphaned/Web/CSS/@page/marks /fr/docs/Web/CSS/max /fr/docs/Web/CSS/max() @@ -5628,7 +5624,6 @@ /fr/docs/Web/XSLT/Éléments/element /fr/docs/Web/XSLT/Element/element /fr/docs/WebAPI /fr/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 /fr/docs/WebAPI/Battery_Status /fr/docs/Web/API/Battery_status_API -/fr/docs/WebAPI/Detecting_device_orientation /fr/docs/orphaned/Web/API/Detecting_device_orientation /fr/docs/WebAPI/Network_Information /fr/docs/Web/API/Network_Information_API /fr/docs/WebAPI/Pointer_Lock /fr/docs/Web/API/Pointer_Lock_API /fr/docs/WebAPI/Proximity /fr/docs/Web/API/Proximity_Events @@ -5852,6 +5847,9 @@ /fr/docs/XSLT_dans_Gecko:Génération_de_HTML /fr/docs/Web/API/XSLTProcessor/Generating_HTML /fr/docs/Zoom_pleine_page /fr/docs/Mozilla/Firefox/Releases/3/Full_page_zoom /fr/docs/appendChild /fr/docs/Web/API/Node/appendChild +/fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors /fr/docs/Learn/CSS/Building_blocks/Selectors +/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction /fr/docs/Learn/CSS/CSS_layout/Introduction +/fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446 /fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting /fr/docs/document.createElement /fr/docs/Web/API/Document/createElement /fr/docs/document.getElementById /fr/docs/Web/API/Document/getElementById /fr/docs/en /en-US/ @@ -5861,6 +5859,7 @@ /fr/docs/inset-inline-end /fr/docs/Web/CSS/inset-inline-end /fr/docs/inset-inline-start /fr/docs/Web/CSS/inset-inline-start /fr/docs/orphaned/Introduction_à _la_cryptographie_à _clef_publique/Signatures_numériques /fr/docs/Glossary/Signature/Security +/fr/docs/orphaned/Web/CSS/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/orphaned/Web/Guide/Events/Media_events /fr/docs/Web/Events#media /fr/docs/setAttribute /fr/docs/Web/API/Element/setAttribute /fr/docs/toSource /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object/toSource diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 7dc80ddcb4..32fd0e5e7c 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -42534,13 +42534,6 @@ "BenoitL" ] }, - "conflicting/Learn/CSS/Building_blocks/Selectors": { - "modified": "2020-07-16T22:25:39.574Z", - "contributors": [ - "SphinxKnight", - "Oliviermoz" - ] - }, "conflicting/Learn/CSS/Building_blocks/Selectors_9bc80fea302c91cd60fb72c4e83c83e9": { "modified": "2019-03-24T00:11:21.423Z", "contributors": [ @@ -42583,12 +42576,6 @@ "BenoitL" ] }, - "conflicting/Learn/CSS/CSS_layout/Introduction": { - "modified": "2020-07-16T22:25:40.392Z", - "contributors": [ - "SphinxKnight" - ] - }, "conflicting/Learn/CSS/First_steps": { "modified": "2019-03-23T23:43:26.964Z", "contributors": [ @@ -42749,12 +42736,6 @@ "SphinxKnight" ] }, - "conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446": { - "modified": "2020-07-16T22:22:37.801Z", - "contributors": [ - "SphinxKnight" - ] - }, "conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682": { "modified": "2020-07-16T22:22:41.315Z", "contributors": [ @@ -44106,26 +44087,6 @@ "SphinxKnight" ] }, - "orphaned/Web/API/Body": { - "modified": "2020-10-15T22:00:04.273Z", - "contributors": [ - "Voulto", - "Retroscilo", - "Arzak656", - "SphinxKnight", - "vqrs" - ] - }, - "orphaned/Web/API/Body/json": { - "modified": "2020-10-15T22:00:00.599Z", - "contributors": [ - "SphinxKnight", - "jdvauguet", - "enkienki", - "MaximeSarrato", - "Nithramir" - ] - }, "orphaned/Web/API/ChildNode": { "modified": "2020-10-15T21:28:06.168Z", "contributors": [ @@ -44179,18 +44140,6 @@ "loella16" ] }, - "orphaned/Web/API/Detecting_device_orientation": { - "modified": "2019-03-23T23:28:22.437Z", - "contributors": [ - "mgagnon555", - "a-mt", - "tregagnon", - "Fredchat", - "FredB", - "achraf", - "darnuria" - ] - }, "orphaned/Web/API/DocumentTouch": { "modified": "2019-03-23T22:50:40.193Z", "contributors": [ @@ -44465,12 +44414,6 @@ "Aaaaaaa" ] }, - "orphaned/Web/CSS/@media/prefers-reduced-transparency": { - "modified": "2020-10-15T22:20:20.333Z", - "contributors": [ - "SphinxKnight" - ] - }, "orphaned/Web/CSS/@media/scan": { "modified": "2020-10-15T21:47:29.526Z", "contributors": [ @@ -44522,28 +44465,6 @@ "SphinxKnight" ] }, - "orphaned/Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:57:11.795Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight", - "edspeedy", - "Javarome", - "lhapaipai", - "Guillaume.Wulpes", - "Simplexible", - "wizAmit", - "slayslot", - "prayash", - "Nazcange", - "nicofrand", - "teoli", - "Golmote", - "tregagnon", - "FredB", - "thenew" - ] - }, "orphaned/Web/CSS/paint()": { "modified": "2020-11-16T12:34:32.285Z", "contributors": [ diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 6f8167820f..0000000000 --- a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Les propriétés CSS et comment s'en servir -slug: conflicting/Learn/CSS/Building_blocks/Selectors -tags: - - Beginner - - CSS - - CodingScripting - - NeedsActiveLearning -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Learn/CSS/CSS_properties -original_slug: Apprendre/CSS/Les_propriétés_CSS ---- -<div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> -<p>{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.</p> -</div> - -<table class="learn-box nostripe standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Comprendre les bases de {{Glossary("HTML")}}, <a href="/fr/Apprendre/HTML/Balises_HTML">des éléments HTML</a>, et <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web#La_balise_link">comment lier des documents HTML aux feuilles de style CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.</td> - </tr> - </tbody> -</table> - -<p>Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).</p> - -<p>La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.</p> - -<pre class="brush: css">p { - font-family: "Times New Roman", georgia, sans-serif; - font-size: 24px; -}</pre> - -<p>Dans l'exemple précédent, <code>p</code> est un sélecteur qui applique un style à tous les éléments <code>{{HTMLElement("p")}}</code> en même temps. Les propriétés CSS <code>font-family</code> et <code>font-size</code> sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.</p> - -<p>Il existe plus de <a href="/fr/docs/Web/CSS/Reference">250 propriétés</a> pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.</p> - -<h2 id="Pédagogie_active">Pédagogie active</h2> - -<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> - -<h2 id="Aller_plus_loin">Aller plus loin</h2> - -<p>Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.</p> - -<p>Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les <a href="/fr/docs/Web/CSS/Spécificité">sélecteurs les plus précis</a> prend le dessus sur les règles avec les sélecteurs plus basiques.</p> - -<h3 id="Le_sélecteur_d'élément">Le sélecteur d'élément</h3> - -<p>Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.</p> - -<p>Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :</p> - -<pre class="brush: html"><h1>Je suis un exemple.</h1> -<p>Dans cet exemple, je suis un paragraphe.</p> -<p>Et je suis un second paragraphe.</p> -</pre> - -<p>Dans la règle CSS qui suit, le sélecteur d'élement <code>p</code> applique les styles définis à tous les éléments <code>{{HTMLElement("p")}}</code> de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).</p> - -<pre class="brush: css">p { - font-family: "Helvetica", Arial, sans-serif; - font-size : 12px; -}</pre> - -<p>La prochaine règle CSS s'applique uniquement à l'élément<code> {{HTMLElement("h1")}}</code>. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.</p> - -<pre class="brush: css">h1 { - font-size : 24px; - font-weight: bold; -}</pre> - -<p>La règle CSS suivante applique les styles demandés à la fois aux éléments <code>{{HTMLElement("h1")}}</code> et aux éléments <code>{{HTMLElement("p")}}</code>, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des <code>h1</code> et à celui des paragraphes.</p> - -<pre class="brush: css">h1, p { - color: darkmagenta; -}</pre> - -<p>Voici le résultat obtenu avec ce code :</p> - -<p>{{EmbedLiveSample('Le_sélecteur_d\'élément')}}</p> - -<h3 id="Le_sélecteur_id">Le sélecteur <code>id</code></h3> - -<p>L'attribut <code>id</code><strong> </strong>d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur <code>id</code> est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.</p> - -<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p> - -<pre class="brush: html"><p id="coucou">Coucou monde !</p> </pre> - -<p>La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur <code>id</code>, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (<em>id</em>). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe, {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.</p> - -<pre class="brush: css">#coucou { - text-align: center; - border : 1px solid black; - padding : 8px; -}</pre> - -<p>Voici le résultat final obtenu:</p> - -<p>{{EmbedLiveSample('Le_sélecteur_id')}}</p> - -<h3 id="Le_sélecteur_class">Le sélecteur <code>class</code></h3> - -<p>À l'intérieur du code HTML, l'attribut <code>class</code><strong> </strong>permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.</p> - -<p>Pour notre prochain exemple, analysez le fragment de code HTML suivant :</p> - -<pre class="brush: html"><h1 class="coucou">Coucou !</h1> -<p class="coucou salut">Retrouvons-nous !</p> -<p class="salut">Et déplaçons des montagnes.</p> -</pre> - -<p>Nous allons appliquer une règle CSS à tous les éléments contenant la classe <code>coucou</code>. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.</p> - -<pre class="brush: css">.coucou { - font-style: italic; -}</pre> - -<p>En voici une autre pour tous les éléments avec la classe <code>salut</code>. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.</p> - -<pre class="brush: css">.salut { - text-decoration: line-through; -}</pre> - -<p>Voici le résultat obtenu :</p> - -<p>{{EmbedLiveSample('Le_sélecteur_class')}}</p> - -<h2 id="Prochaines_étapes">Prochaines étapes</h2> - -<p>Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en <a href="/fr/Apprendre/CSS/formatage_texte_CSS">apprendre davantage sur le formatage du texte</a> ou commencer à explorer <a href="/fr/docs/Web/CSS/Tutorials">nos tutoriels CSS</a> dès maintenant.</p> diff --git a/files/fr/conflicting/learn/css/css_layout/introduction/index.html b/files/fr/conflicting/learn/css/css_layout/introduction/index.html deleted file mode 100644 index 4c66ddf62d..0000000000 --- a/files/fr/conflicting/learn/css/css_layout/introduction/index.html +++ /dev/null @@ -1,405 +0,0 @@ ---- -title: La disposition en CSS -slug: conflicting/Learn/CSS/CSS_layout/Introduction -tags: - - Apprendre - - CSS -translation_of: Learn/CSS/CSS_layout/Introduction -translation_of_original: Learn/CSS/Basics/Layout -original_slug: Apprendre/CSS/Introduction_à _CSS/La_disposition ---- -<p>{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}</p> - -<p class="summary"><span class="seoSummary">Pour organiser un document en positionnant ses éléments pour que la forme corresponde aux spécifications, on utilisera différentes propriétés CSS afin d'organiser la disposition des élément.</span> CSS fournit de nombreux mécanismes pour organiser la disposition du contenu d'un document et les techniques modernes sont suffisamment complexes pour être décrites dans des articles séparés. Dans cet article, nous verrons les techniques de base, utilisées depuis plusieurs années.</p> - -<p>Pour organiser correctement la disposition d'un document avec CSS, il y a quelques notions qu'il est préférable de connaître. Le concept le plus important est le flux du texte {{Glossary("HTML")}} et les façons dont on peut le modifier. Ces concepts clés sont essentiels et tous les mécanismes liés à la disposition feront référence à ce qui est expliqué ici..</p> - -<h2 id="Le_flux">Le flux</h2> - -<p>Simplifié à l'extrême, un document HTML est un document texte organisé avec des {{Glossary("balise","balises")}}. Dans un tel document, le texte « coule » sur les différentes lignes. Autrement dit, le texte est affiché dans le sens de lecture (de gauche à droite pour les langages latins comme le français ou l'italien) et est fragmenté automatiquement pour passer à la ligne à chaque fois que le texte atteint le bord du document.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg" style="height: auto; max-width: 450px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg#large" style="height: auto; max-width: 450px;"></p> - -<p>Chaque {{Glossary("élément")}} du document pourra modifier ce flux de texte :</p> - -<ul> - <li>Certains éléments suivront simplement le flux, comme s'ils n'existaient pas</li> - <li>Certains éléments pourront forcer le passage à la ligne, que le texte ait atteint la limite du document ou non</li> - <li>Certains éléments pourront créer un nouveau flux de texte pour leur contenu, flux indépendant du flux de texte « extérieur ».</li> -</ul> - -<h3 id="Les_catégories_d'affichage_des_éléments">Les catégories d'affichage des éléments</h3> - -<p>CSS est utilisé pour définir la façon dont un élément HTML se comporte dans ce flux et comment il s'y inscrit. Le comportement d'un élément est défini avec la propriété {{cssxref('display')}}. Cette propriété peut prendre plusieurs valeurs mais voyons ici les quatre valeurs les plus importantes :</p> - -<dl> - <dt><code>none</code></dt> - <dd>Cette valeur retire l'élément du flux, comme si l'élément et son contenu n'existaient pas.</dd> - <dt><code>inline</code></dt> - <dd>Cette valeur rend l'élément transparent au sens où il s'inscrit dans le flux de texte global, il est donc associé au texte l'environnant.</dd> - <dt><code>block</code></dt> - <dd>Cette valeur cassera le flux de texte pour insérer l'élément. Cela provoquera donc un saut de ligne avant et après. Le contenu de cet élément ne fait donc pas partie du flux global et suit donc les contraintes de l'élément définies par <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîte</a>.</dd> - <dt><code>inline-block</code></dt> - <dd>Cette valeur est en quelque sorte un intermédiaire entre <code>inline</code> et <code>block</code>. Comme avec <code>inline</code>, les boîtes seront placées dans le flux global mais , comme avec <code>block</code>, le contenu ne fera pas partie du texte environnant..</dd> -</dl> - -<p>Prenons un exemple.</p> - -<p>Voici le code HTML qui sera utilisé :</p> - -<pre class="brush: html"><p class="none"> - 1. Je suis un chat noir, - <span>qui marche sous l'échelle </span> - et qui casse des miroirs. -</p> - -<p class="inline"> - 2. Je suis un chat noir, - <span>qui marche sous l'échelle </span> - et qui casse des miroirs. -</p> - -<p class="block"> - 3. Je suis un chat noir, - <span>wqui marche sous l'échelle </span> - et qui casse des miroirs. -</p> - -<p class="inline-block"> - 4. Je suis un chat noir, - <span>qui marche sous l'échelle </span> - et qui casse des miroirs. -</p> -</pre> - -<p>On appliquera la feuille de style CSS suivante :</p> - -<pre class="brush: css">span { - width: 5em; - background: yellow; -} - -.none span { display: none; } -.inline span { display: inline; } -.block span { display: block; } -.inline-block span { display: inline-block; }</pre> - -<p>Cela fournira le résultat suivant :</p> - -<p>{{EmbedLiveSample("Les_catégories_d'affichage_des_éléments", '100%', '300px')}}</p> - -<h2 id="Modifier_le_flux">Modifier le flux</h2> - -<p>En utilisant la propriété <code>display</code>, vous pouvez déjà modifier le flux. Il est toutefois possible d'aller plus loin.</p> - -<h3 id="La_disposition_du_texte">La disposition du texte</h3> - -<p>En fin de compte, un document n'est qu'un long flux de texte et CSS fournit de nombreuses propriétés pour gérer la disposition du texte. La disposition du texte regroupe tout ce qui touche aux règles des sauts de ligne et à la façon dont le texte est positionné par rapport à la ligne de base naturelle.</p> - -<p>Ces propriétés sont : {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}} et {{cssxref("word-wrap")}}.</p> - -<p>À l'exception de <code>text-align</code> et de <code>text-indent</code>, les autres propriétés ont des effets plutôt subtils sur le texte. Quant à <code>vertical-align</code>, il est souvent utilisé avec des boîtes en mode <code>inline-block</code>.</p> - -<p>Là encore, un exemple vaut mieux qu'un long discours.</p> - -<p>HTML :</p> - -<pre class="brush: html"><p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> -<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> -</pre> - -<p>CSS :</p> - -<pre class="brush: css">.format { - /* On « tire » la première ligne sur - une distance de 2em */ - text-indent: -2em; - - /* Il faut compenser l'indentation négative - si on veut éviter que du texte saute et - pour garder l'ensemble du texte dans la - boîte de l'élément */ - padding-left: 2em; - - /* Le texte est aligné par rapport aux deux - bords et l'espace entre les mots est ajusté - pour le remplissage de la ligne */ - text-align: justify; - - /* La dernière ligne de texte du bloc est - centrée*/ - -moz-text-align-last: center; - text-align-last: center; - - /* Plutôt que le saut de ligne se fasse entre deux mots, - il peut être fait en découpant un mot, selon les règles - de la langue utilisée. Cela permet de découper le texte - clairement avec un trait d'union. Si cela ne vous - importe pas, vous pouvez utiliser word-break ou - word-wrap à la place */ - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -}</pre> - -<div class="note"> -<p><strong>Note :</strong> Comme vous avez pu le voir, certaines propriétés sont écrites plusieurs fois avec un préfixe. Certaines propriétés sont expérimentales pour certains navigateurs et doivent donc être préfixées, c'est une bonne pratique que de les utiliser préfixées tant qu'elles sont expérimentales, tout en fournissant le nom de la propriété standard à la fin afin d'avoir la meilleure rétrocompatibilité possible.</p> -</div> - -<p>Le résultat obtenu sera :</p> - -<p>{{EmbedLiveSample('La_disposition_du_texte', '100%', '350')}}</p> - -<div class="note"> -<p><strong>Note :</strong> L'astuce utilisée pour compenser l'indentation négative est une astuce assez courante. Tout propriété qui accepte une longueur peut accepter une valeur négative. En jouant avec les valeurs négatives et en les compensant avec d'autres propriétés, il est possible de produire des effets visuels très intéressants, notamment quand on manipule les propriétés liées au modèle de boîte.</p> -</div> - -<h3 id="Le_flottement">Le flottement</h3> - -<p>C'est une chose que de gérer du texte mais on va également vouloir positionner une boîte dans le document. Pour commencer, il faut gérer les boîtes flottantes. Les boîtes flottantes sont toujours attachées au flux global de texte mais le texte « coulera » autour. Si cela vous paraît, prenons un exemple.</p> - -<h4 id="Le_flottement_simple">Le flottement simple</h4> - -<p>HTML :</p> - -<pre class="brush: html"><div> - <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p> - <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p> -</div></pre> - -<p>CSS :</p> - -<pre class="brush: css">.excerpt { - /* Une boîte flottante agira comme un bloc - quelle que soit la valeur de display */ - display: block; - - /* La boîte flottera à gauche ce qui signifie - qu'elle sera sur la partie gauche du bloc - englobant et que le texte « coulera » sur sa - droite. */ - float: left; - - /* Il est nécessaire de déclarer une largeur pour - une boîte flottante. Si on ne le fait pas, la - largeur sera calculée automatiquement et occupera - autant d'espace que possible. Cela aurait eu le - même effet qu'un bloc ordinaire. */ - width: 40%; - - /* On définit une marge à droite et en bas pour éviter - que le texte qui flotte autour soit collé à celui de - la boîte */ - margin: 0 1em 1em 0; - - /* On rend la boîte flottante plus visible avec une - oucleur d'arrière-plan */ - background: lightgrey; - - /* Puisque l'arrière-plan est opaque, on ajoute un écart - entre le contenu et les bords de la boîte */ - padding: 1em; -}</pre> - -<p>Ces éléments permettront d'avoir :</p> - -<p>{{ EmbedLiveSample('Le_flottement_simple', '100%', '280') }}</p> - -<h4 id="Organiser_une_disposition_avec_le_flottement">Organiser une disposition avec le flottement</h4> - -<p>La méthode précédente est simple et illustre comment manipuler le flux. Il est possible d'aller plus loin et d'organiser l'ensemble de la disposition du document avec. Les boîtes flottantes dans une direction donnée s'empilent horizontalement, cela permet de créer très facilement des lignes de boîtes. Les boîtes qui sont des blocs forment s'empilent elles sous forme de colonnes.</p> - -<p>Là encore, illustrons le point avec un exemple.</p> - -<p>HTML :</p> - -<pre class="brush: html"><div class="layout"> - <div class="row"> - <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p> - <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p> - </div> - <div class="row"> - <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p> - </div> - <div class="row"> - <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p> - <p class="cell size33"> - "Ding, dong!"<br> - "A quarter past," said Scrooge, counting.<br> - "Ding, dong!"<br> - "Half-past!" said Scrooge.<br> - "Ding, dong!"<br> - "A quarter to it," said Scrooge. - </p> - <p class="cell size33"> - "Ding, dong!"<br> - "The hour itself," said Scrooge, triumphantly, "and nothing else!"<br> - He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn. - </p> - </div> -</div></pre> - -<p>CSS :</p> - -<pre class="brush: css">/* Le conteneur principal pour la disposition */ -.layout { - /* On ajoute un arrière-plan pour le rendre - visible */ - background: lightgrey; - - /* On ajoute un léger interstice pour harmoniser - la distance entre le contenu des cellules et - la bordure du conteneur principal */ - padding : 0.5em; -} - -/* Ici, on empêche les boîtes flottantes de - dépasser d'un conteneur (ce qui peut arriver - si le conteneur est vide car il aura alors - une hauteur nulle). Avec overflow - hidden, la boîte flottante ne passera pas à - travers et la boîte parente sera agrandie - pour éviter un dépassement de la boîte. */ -.row { - overflow: hidden; -} - -/* Chaque cellule sera une boîte flottante à gauche */ -.cell { - float : left; - - /* On ajoute du padding pour créer un écart visuel - entre les cellules */ - padding : 0.5em; - - /* Étant donné qu'on ajoute du padding, il faut - s'assurer que cela ne touchera pas la largeur - de la boîte. */ - box-sizing: border-box; - - /* Comme la marge ne peut pas être contrôlée par - la propriété box-sizing, on s'assure d'en - avoir aucune appliquée ici. */ - margin : 0; -} - -/* Voici les tailles appliquées aux boîtes */ -.size33 { width: 33%; } /* Pas un tiers mais presque */ -.size50 { width: 50%; } /* Une moitié */ -.size100 { width: 100%; } /* Une ligne */</pre> - -<p>Cela donnera le résultat suivant :</p> - -<p>{{EmbedLiveSample('Organiser_une_disposition_avec_le_flottement', '100%', '520')}}</p> - -<p>De nombreux <em>frameworks</em> CSS utilisent ces méthodes de boîtes flottantes. C'est une technique robuste et connue mais qui a ses limites : tout doit être géré avec le flux, il n'est pas possible de gérer un ordre arbitraire pour les boîtes, de gérer des dimensionnements variables et il est impossible de centrer verticalement des éléments. Nous vous encourageons à poursuivre la réflexion, <a href="http://www.positioniseverything.net/articles/onetruelayout/">les boîtes flottantes sont étudiées depuis longtemps (article en anglais)</a> et constituent une des solutions les plus robustes pour gérer une disposition simple, compatible avec les navigateurs historiques.</p> - -<p>Si vous souhaitez en savoir plus sur les subtilités des boîtes flottantes, nous vous invitons à lire <em><a href="https://css-tricks.com/all-about-floats/">All about float</a></em> (en anglais) par Chris Coyer.</p> - -<h3 id="Le_positionnement">Le positionnement</h3> - -<p>Si les boîtes flottantes font partie du flux, il existe un autre mécanisme qui permet d'organiser une disposition en extrayant les boîtes du flux : le positionnement CSS. Le positionnement fonctionne en définissant un contexte de positionnement grâce à la propriété {{cssxref("position")}} puis en permettant aux boites de se positionner en utilisant les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}.</p> - -<p>La propriété {{cssxref("position")}} peut prendre quatre valeurs différentes :</p> - -<dl> - <dt><code>static</code></dt> - <dd>La valeur par défaut pour tous les éléments : ils font partie du flux et on ne définit pas un contexte de positionnement spécifique.</dd> - <dt><code>relative</code></dt> - <dd>Avec cette valeur, les éléments font toujours partie du flux mais peuvent être déplacés visuellement avec les valeurs des propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Ces propriétés définissent le contexte de positionnement des éléments fils.</dd> - <dt><code>absolute</code></dt> - <dd>Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Le point de position 0,0 représente le coin en haut à gauche de l'élément parent le plus proche qui définit un contexte de positionnement autre que <code>static</code>. S'il n'y a pas de tel parent, la position 0,0 représente le coin en haut à gauche du document.</dd> - <dt><code>fixed</code></dt> - <dd>Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. La position 0,0 représente le coin en haut à gauche de fenêtre du navigateur ({{Glossary("viewport")}}).</dd> -</dl> - -<p>Les boîtes positionnées de cette façon peuvent s'empiler les unes sur les autres. Dans ce cas, il est possible de changer l'ordre d'empilement grâce à la propriété {{cssxref("z-index")}}.</p> - -<p>Une dernière fois, prenons un exemple pour illustrer le concept.</p> - -<p>Le code HTML pour le document sera :</p> - -<pre class="brush: html"><p> - The curtains of his bed were drawn aside, I tell you, by a hand. Not the curtains at his feet, nor the curtains at his back, but those to which his face was addressed. The curtains of his bed were drawn aside; and Scrooge, starting up into a half-recumbent attitude, found himself face to face with the unearthly visitor who drew them: as close to it as I am now to you, and I am standing in the spirit at your elbow. - <span class="topleft">1</span> -</p> -<p class="relative"> - It was a strange figure--like a child: yet not so like a child as like an old man, viewed through some supernatural medium, which gave him the appearance of having receded from the view, and being diminished to a child's proportion. Its hair, which hung about its neck and down its back, was white as if with age; and yet the face had not a wrinkle in it, and the tenderest bloom was on the skin. The arms were very long and muscular; the hands the same, as if its hold were of uncommon strength. Its legs and feet, most delicately formed, were, like those upper members, bare. It wore a tunic of the purest white; and round its waist was bound a lustrous belt, the sheen of which was beautiful. It held a branch of fresh green holly in its hand; and, in singular contradiction of that wintry emblem, had its dress trimmed with summer flowers. But the strangest thing about it was, that from the crown of its head there sprung a bright clear jet of light, by which all this was visible; and which was doubtless the occasion of its using, in its duller moments, a great extinguisher for a cap, which it now held under its arm. - <span class="topleft">2</span> - <span class="stackdown">3</span> - <span class="stackup">4</span> -</p></pre> - -<p>La feuille de style CSS sera :</p> - -<pre class="brush: css">p { - margin: 1em -} - -span { - font : 2em sans-serif; - width : 6rem; - - /* Avoir la hauteur de l'élément et la hauteur - de la ligne avec la même valeur permet de - centrer verticalement une ligne de texte. */ - height : 6rem; - line-height: 6rem; - - text-align : center; - background : rgba(0, 255, 255, 0.8); -} - -.relative { - position: relative; -} - -/* Tous les éléments de la classe "topleft" - sont positionnés dans le coin en haut à - gauche de leur parent dans le contexte - de positionnement */ -.topleft { - position: absolute; - top : 0; - left : 0; -} - -.stackup { - position: absolute; - top : 37%; - left : 62%; - - /* Tous les éléments de la classe "stackup" - sont placés au-dessus des éléments dont - le z-index est inférieur à 2 dans le même - contexte de positionnement. */ - z-index : 2; -} - -.stackdown { - position: absolute; - top : 50%; - left : 66%; - - /* Tous les éléments de la classe "stackdown" - sont placés sous les éléments dont le - z-index est supérieur à 1 dans le même - contexte de positionnement. */ - z-index : 1; -} -</pre> - -<p>La combinaison de ces deux éléments donnera le résultat suivant :</p> - -<p>{{EmbedLiveSample('Le_positionnement', '100%', '400')}}</p> - -<p>Bien que le positionnement CSS ne soit pas réellement utile pour complètement organiser une disposition, il est généralement judicieux pour obtenir certains effets liés à la navigation, aux bulles d'informations, etc. C'est un mécanisme que vous rencontrerez fréquemment et nous vous encourageons donc à vous familiariser avec. Parmi les ressources qui existent par ailleurs, nous vous conseillons particulièrement de lire l'article <em><a href="http://alistapart.com/article/css-positioning-101">CSS positioning 101</a></em> (en anglais), de Noah Stokes.</p> - -<h2 id="La_suite">La suite</h2> - -<p>Le flux, les boîtes flottantes et le positionnement CSS sont les bases qui vous permettront d'approfondir la création d'une disposition en CSS. Suite à cette série d'articles sur les concepts théoriques de CSS, vous connaissez tout ce qu'il faut pour exploiter au mieux CSS. Après ce vernis théorique, vous pouvez aborder <a href="/fr/docs/Apprendre/CSS/Comment">les aspects pratiques de CSS</a>. Si vous souhaitez approfondir les concepts sur la disposition et découvrir les autres mécanismes à ce sujet, vous pouvez consulter les articles sur : les tableaux, <a href="/fr/docs/Web/CSS/Colonnes_CSS3">l'organisation à plusieurs colonnes</a> et <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">la disposition avec les boîtes flexibles (<em>flexbox</em>)</a>.</p> - -<p>{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}</p> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html deleted file mode 100644 index 2b074bec26..0000000000 --- a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Identifier et expliquer des abréviations avec HTML -slug: >- - conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446 -tags: - - Beginner - - HTML - - Learn - - OpenPractices -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable -original_slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations ---- -<div class="summary"> -<p>HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">créer un document HTML simple</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre à indiquer des abréviations et des acronymes avec HTML.</td> - </tr> - </tbody> -</table> - -<h2 id="À_propos_des_abréviations">À propos des abréviations</h2> - -<p>Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « <em>National Aeronautics and Space Administration</em> ».</p> - -<p>Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :</p> - -<blockquote>L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.</blockquote> - -<div> -<p>Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.</p> -</div> - -<h2 id="L'élément_<abbr>">L'élément <code><abbr></code></h2> - -<p>L'élément HTML<em> abbreviation</em> (pour abréviation en anglais) ({{HTMLElement("abbr")}}) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.</p> - -<div class="note"> -<p><strong>Note :</strong> Si vous entendez parler de l'élément <code><acronym></code>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les {{Glossary("navigateur","navigateurs")}} pourraient arrêter de le supporter à tout moment.</p> -</div> - -<pre class="brush: html"><p>Pouvez-vous m'envoyer les documents <abbr>SVP</abbr> ?</p></pre> - -<p>Il est possible d'épeler les abréviations grâce à l'attribut <code>title</code> de l'élément :</p> - -<pre class="brush: html"><p>Pouvez-vous m'envoyer les documents <abbr title="s'il vous plaît">SVP</abbr> ?</p></pre> - -<p>Quand faut-il renseigner l'attribut <code>title</code> ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.</p> - -<div class="note"> -<p><strong>Note :</strong> Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut <code>title</code> que celui de l'élément <code><abbr></code>.</p> -</div> - -<p>Grâce à {{glossary("CSS")}}, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut <code>title</code> dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :</p> - -<p>{{EmbedLiveSample("L'élément_<abbr>",'100%',90)}}</p> - -<div class="note"> -<p><strong>Important : </strong>Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut <code>title</code>. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de <code>title</code>. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec <code>title</code>.</p> -</div> - -<h2 id="Exercice">Exercice</h2> - -<p>Afin de mieux connaître l'élément {{HTMLElement('abbr')}}, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <code><abbr></code> et épelez les avec l'attribut <code>title</code>. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans <a href="/fr/docs/Glossaire">le glossaire</a>.</p> - -<div class="hidden"> -<pre class="brush: html"><div class="exercise"> - <main> -   <div class="instruction">Identifiez toutes les abréviations avec l'élément <code>&lt;abbr&gt;</code></div> -   <div class="playground"><textarea spellcheck="false"></textarea></div> -   <div class="checking"> -     <button>Afficher les résultats</button><span class="count"></span> -   </div> -   <div class="result">Les <abbr title="développeurs">dev</abbr> Web utilisent <abbr title="Hypertext Markup Language">HTML</abbr> pour structurer des documents, <abbr title="Cascading StyleSheet">CSS</abbr> pour les mettre en forme et JavaScript pour ajouter des effets spéciaux grâce à certaines <abbr title="Application Programming Interface">API</abbr> dédiées.</div> - </main> -</div></pre> - -<pre class="brush: css">body { - font: 1em/100% sans-serif; - padding: 0; - margin: 0; -} - -.exercise { - background: #F9FAFB; - border-radius: 5px; - height: 13em; - overflow: hidden; -} - -.instruction, .count { - padding: .5em; - font-style: italic; - font-size: .95em; -} - -.playground { - padding: 0 .5em; -} - -.playground textarea { - display: block; - font-size : 1em; - line-height: 1.5em; - font-family: monospace; - box-sizing: border-box; - width : 100%; - padding : .5em; - height : 9.7em; -} - -.checking { - padding: .5em; -} - -.checking button { - box-sizing: border-box; - box-shadow:inset 0 1px 0 0 #bcd9a3; - background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%); - background-color:#b4d665; - border-radius:5px; - border:1px solid #8aa164; - cursor:pointer; - font-size:1em; - padding:.5em; - text-decoration:none; -} -.checking button:hover { - background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%); - background-color:#89a646; -} -.checking button:active { - transform: translate(0, 1px); -} - -.result { - height: 10em; - line-height: 1.4em; - padding: .5em; - box-sizing: border-box; -} - -main { - transform: translate(0,0); - transition: transform 300ms; -} - -.next main { - transform: translate(0, -10em); -} - -abbr { - display: inline-block; - white-space: nowrap; -} - -abbr.ok { - color: green; -} - -abbr.ok:after { - content: ' ✔︎'; -} - -abbr.fail { - color: red; -} - -abbr.fail:after { - content: ' ✘'; -} - -abbr.warning { - color: orange; -} - -abbr.warning:after { - content: ' !'; - font-weight: bold; -} -</pre> - -<pre class="brush: js">window.addEventListener('load', function () { - var content = document.querySelector('.exercise'); - var input = document.querySelector('.playground textarea'); - var button = document.querySelector('.checking button'); - var message = document.querySelector('.checking .count'); - var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr')); - var data = { - pass : 0, fail : 0, warning : 0 - }; - - input.value = document.querySelector('.result').textContent; - - function toggleResult(e) { - e.preventDefault(); - var classList = content.className.split(' '); - - if (classList.length === 1 && checkResult()) { - content.className = 'exercise next'; - message.innerHTML = data.pass + ' correctement identifiée(s), ' + - data.warning + ' sans description complète, ' + - data.fail + ' manquée(s).'; - button.innerHTML = 'Essayez à nouveau'; - } else { - content.className = 'exercise'; - message.innerHTML = ''; - button.innerHTML = 'Afficher les résultats'; - } - } - - function checkResult() { - var i, j, node = document.createElement('div'); - node.innerHTML = input.value; - data = { pass : 0, fail : 0, warning : 0 }; - - var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr')); - - if (userAbbr.length === 0) { - alert("Vous n'avez marqué aucune abréviation (il y en a " + abbr.length + " à trouver)."); - return false; - } - - for (i in abbr) { - var txt = abbr[i].textContent; - var fail = true; - - for (j in userAbbr) { - var userText = userAbbr[j].textContent; - - if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) { - fail = false; - if (userAbbr[j].title) { - data.pass += 1; - abbr[i].className = 'ok'; - } else { - data.warning += 1; - abbr[i].className = 'warning'; - } - } - } - - if (fail) { - data.fail += 1; - abbr[i].className = 'fail'; - } - } - - return true; - } - - button.addEventListener('click', toggleResult); -}); -</pre> -</div> - -<p>{{EmbedLiveSample('Exercice','100%',220)}}</p> - -<h2 id="En_savoir_plus">En savoir plus</h2> - -<ul> - <li>La documentation de la référence sur {{HTMLElement("abbr")}}.</li> -</ul> diff --git a/files/fr/glossary/css_selector/index.html b/files/fr/glossary/css_selector/index.html index ed038c9715..b5cd5760da 100644 --- a/files/fr/glossary/css_selector/index.html +++ b/files/fr/glossary/css_selector/index.html @@ -13,60 +13,61 @@ original_slug: Glossaire/Sélecteur_CSS --- <p>Un <strong>sélecteur CSS </strong> est la partie de la règle CSS qui désigne les éléments d'un document concernés par la règle. Les éléments correspondants auront le style spécifié par la règle qui leur est appliqué.</p> +<h2>Exemple</h2> <p>Considérez ce code CSS :</p> -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">p </span><span class="punctuation token">{</span> - <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> -<span class="punctuation token">}</span> +<pre class="brush: css">p { + color: green; +} -<span class="selector token">div<span class="class token">.warning</span> </span><span class="punctuation token">{</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid yellow<span class="punctuation token">;</span> - <span class="property token">color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> darkred<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0.8</span>em <span class="number token">0.8</span>em <span class="number token">0.6</span>em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> +div.warning { + width: 100%; + border: 2px solid yellow; + color: white; + background-color: darkred; + padding: 0.8em 0.8em 0.6em; +} -<span class="selector token"><span class="id token">#customized</span> </span><span class="punctuation token">{</span> - <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">16</span>px Lucida Grande, Arial, Helvetica, sans-serif<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +#customized { + font: 16px Lucida Grande, Arial, Helvetica, sans-serif; +}</pre> <p>Les sélecteurs sont ici <code>"p"</code> (qui applique la couleur verte au texte de tout élément {{HTMLElement ("p")}}), <code>"div.warning"</code> (qui fait que tout élément {{HTMLElement ("div")}} appartenant à la {{Glossary ("Class", "classe CSS")}} <code>"warning"</code> ressemble à une boîte d'avertissement) et <code>"#customized"</code>, qui définit la police de base de l'élément avec l'ID <code>"customized"</code> à 16 -pixel Lucida Grande ou l'une des polices de secours.</p> <p>Nous pouvons ensuite appliquer ce CSS à du HTML, tel que :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>This is happy text.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<pre class="brush: html"><p>This is happy text.</p> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>warning<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<div class="warning"> Be careful! There are wizards present, and they are quick to anger! -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +</div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>customized<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>This is happy text.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<div id="customized"> + <p>This is happy text.</p> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>warning<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <div class="warning"> Be careful! There are wizards present, and they are quick to anger! - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + </div> +</div></pre> <p>Le contenu de la page résultant ressemble à ceci:</p> -<p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p> +<p>{{EmbedLiveSample("Exemple", 640, 210)}}</p> <h2 id="Pour_approfondir">Pour approfondir</h2> <h3 id="Culture_générale">Culture générale</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">Apprendre sur les sélecteurs CSS</a> dans notre introduction à CSS.</li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">Apprendre sur les sélecteurs CSS</a> dans notre introduction à CSS.</li> <li>Sélecteurs de base <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type">Sélecteurs de type</a><code> elementname</code></li> + <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type">Sélecteurs de type</a><code> elementname</code></li> <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteurs de classe</a> <code>.classname</code></li> <li><a href="/fr/docs/Web/CSS/Reference/Sélecteurs_d'ID">Sélecteurs d'ID</a> <code>#idname</code></li> <li><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteurs universels</a><code> * ns|* *|*</code></li> <li><a href="/fr/docs/Web/CSS/Reference/Sélecteurs_d'attribut">Sélecteurs d'attribut</a><code> [attr=value]</code></li> - <li><code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes">Sélecteurs d'état</a></code> <code>a:active, a:visited</code></li> + <li><code><a href="/fr/docs/Web/CSS/Pseudo-classes">Sélecteurs d'état</a></code> <code>a:active, a:visited</code></li> </ul> </li> <li>Combinaisons diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html index ad9b99b49b..9f327221dc 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html @@ -1,13 +1,6 @@ --- title: Styles des navigateurs slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles -tags: - - Add-ons - - Browser style - - Exemple - - Extensions - - Guide - - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles --- <div>{{AddonSidebar}}</div> @@ -469,4 +462,4 @@ html > body { <h4 id="Resultat">Resultat</h4> -<p>{{EmbedLiveSample("Example","640","360")}}</p> +<p>{{EmbedLiveSample("Exemple","640","360")}}</p> 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> diff --git a/files/fr/web/api/batterymanager/charging/index.md b/files/fr/web/api/batterymanager/charging/index.md index e1521666a4..88d4c3b253 100644 --- a/files/fr/web/api/batterymanager/charging/index.md +++ b/files/fr/web/api/batterymanager/charging/index.md @@ -32,7 +32,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/chargingtime/index.md b/files/fr/web/api/batterymanager/chargingtime/index.md index d469bded62..e87591bbcd 100644 --- a/files/fr/web/api/batterymanager/chargingtime/index.md +++ b/files/fr/web/api/batterymanager/chargingtime/index.md @@ -36,7 +36,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.md b/files/fr/web/api/batterymanager/dischargingtime/index.md index 4cfac1fdde..2b42f214d4 100644 --- a/files/fr/web/api/batterymanager/dischargingtime/index.md +++ b/files/fr/web/api/batterymanager/dischargingtime/index.md @@ -34,7 +34,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/level/index.md b/files/fr/web/api/batterymanager/level/index.md index dbaa9d3eca..1da93e8bfd 100644 --- a/files/fr/web/api/batterymanager/level/index.md +++ b/files/fr/web/api/batterymanager/level/index.md @@ -34,7 +34,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }} +{{ EmbedLiveSample('Exemple', '100%', 30, '', 'Web/API/BatteryManager/level') }} ## Spécifications diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 3b26e6ff1f..0cef55c848 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -1,10 +1,6 @@ --- title: API canvas slug: Web/API/Canvas_API -tags: - - API - - Canvas - - Reference translation_of: Web/API/Canvas_API --- {{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}} @@ -76,7 +72,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Références diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md index 7581b9eb2e..be0df6f74b 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -227,7 +227,7 @@ canvas.addEventListener("mouseout",function(e){ ball.draw(); ``` -{{EmbedLiveSample("deuxième_démo", "610", "310")}} +{{EmbedLiveSample("Deuxième_démo", "610", "310")}} ## Effet de traînée @@ -297,7 +297,7 @@ canvas.addEventListener("mouseout",function(e){ ball.draw(); ``` -{{EmbedLiveSample("troisième_démo", "610", "310")}} +{{EmbedLiveSample("Troisième_démo", "610", "310")}} ## Ajout d'un contrôle de souris @@ -376,7 +376,7 @@ ball.draw(); Déplacez la balle en utilisant votre souris et relâchez-la avec un click. -{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}} +{{EmbedLiveSample("Ajout_d\'un_contrôle_de_souris", "610", "310")}} ## Casse-briques diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 9449c304d0..8165c90b46 100644 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -1,12 +1,6 @@ --- title: Ajout de styles et de couleurs slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -tags: - - Canvas - - Couleurs - - Formes géométriques - - Graphismes - - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs --- @@ -65,7 +59,7 @@ draw(); Le résultat ressemble à ceci: -{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}} +{{EmbedLiveSample("Un_exemple_fillStyle", 160, 160, "canvas_fillstyle.png")}} ### Un exemple `strokeStyle` @@ -96,7 +90,7 @@ draw(); Le résultat ressemble à ceci : -{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} +{{EmbedLiveSample("Un_exemple_strokeStyle", "180", "180", "canvas_strokestyle.png")}} ## Transparence @@ -156,7 +150,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} +{{EmbedLiveSample("Un_exemple_globalAlpha", "180", "180", "canvas_globalalpha.png")}} ### Un exemple en utilisant `rgba()` @@ -194,7 +188,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}} +{{EmbedLiveSample("Un_exemple_en_utilisant_rgba", "180", "180", "canvas_rgba.png")}} ## Le style des lignes @@ -246,7 +240,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}} +{{EmbedLiveSample("Un_exemple_lineWidth", "180", "180", "canvas_linewidth.png")}} Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets. @@ -314,7 +308,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} +{{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} ### Un exemple de `lineJoin` @@ -357,7 +351,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}} +{{EmbedLiveSample("Un_exemple_de_lineJoin", "180", "180", "canvas_linejoin.png")}} ### Une démonstration de la propriété `miterLimit` @@ -432,7 +426,7 @@ document.getElementById('miterLimit').value = document.getElementById('canvas'). draw(); ``` -{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}} +{{EmbedLiveSample("Une_démonstration_de_la_propriété_miterLimit", "400", "180", "canvas_miterlimit.png")}} ### Utilisation de lignes pointillées @@ -467,7 +461,7 @@ function march() { march(); ``` -{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}} +{{EmbedLiveSample("Utilisation_de_lignes_pointillées", "120", "120", "marching-ants.png")}} ## Dégradés @@ -540,7 +534,7 @@ Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avo Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir. -{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}} +{{EmbedLiveSample("Un_exemple_de_createLinearGradient", "180", "180", "canvas_lineargradient.png")}} ### Un exemple de `createRadialGradient` @@ -595,7 +589,7 @@ Dans ce cas, nous avons légèrement décalé le point de départ du point final Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé `# 019F62 = rgba (1,159,98,1)`. -{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}} +{{EmbedLiveSample("Un_exemple_de_createRadialGradient", "180", "180", "canvas_radialgradient.png")}} ## Modèles @@ -657,7 +651,7 @@ draw(); Le résultat ressemble à ceci : -{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}} +{{EmbedLiveSample("Un_exemple_de_createPattern", "180", "180", "canvas_createpattern.png")}} ## Ombres @@ -707,7 +701,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}} +{{EmbedLiveSample("Un_exemple_de_texte_ombré", "180", "100", "shadowed-string.png")}} Nous allons regarder la propriété de la `font` _(police de caratères)_ et la méthode `fillText` dans le chapitre suivant sur le [dessin de texte](/fr/docs/Dessin_de_texte_avec_canvas). @@ -740,6 +734,6 @@ function draw() { draw(); ``` -{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}} +{{EmbedLiveSample("Règles_de_remplissage_Canvas", "110", "110", "fill-rule.png")}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/index.md index 3e0bf39741..2ad36d77c9 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md @@ -1,16 +1,12 @@ --- title: Composition et découpe slug: Web/API/Canvas_API/Tutorial/Compositing -tags: - - Canvas - - Composition - - dessin translation_of: Web/API/Canvas_API/Tutorial/Compositing original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} -Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas. +Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas. ## `globalCompositeOperation` @@ -19,9 +15,9 @@ Nous pouvons non seulement dessiner de nouvelles formes derrière des formes exi - {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}} - : Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles. -Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. +Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. -{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} +{{EmbedLiveSample("globalCompositeOperation", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} ## Détourage @@ -29,18 +25,18 @@ Un détourage (_clipping path_ en anglais) est comme une forme de canvas standar  -Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte. +Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte. -Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages. +Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages. - {{domxref("CanvasRenderingContext2D.clip", "clip()")}} - : Transforme le chemin en cours de création en détourage effectif. -Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. +Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. -Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente. +Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente. -### Un exemple de `clip` +### Un exemple de `clip` Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...). @@ -101,10 +97,10 @@ function drawStar(ctx, r) { draw(); ``` -Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à  `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable. +Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable. -Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage. +Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage. -{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}} +{{EmbedLiveSample("Un_exemple_de_clip", "180", "180", "canvas_clip.png")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md index 8cb24960db..61065903eb 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md @@ -1,11 +1,6 @@ --- title: Dessin de texte avec canvas slug: Web/API/Canvas_API/Tutorial/Drawing_text -tags: - - Canvas - - Graphismes - - HTML - - Tutoriels translation_of: Web/API/Canvas_API/Tutorial/Drawing_text original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas --- @@ -42,7 +37,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_fillText_example", 310, 110)}} +{{EmbedLiveSample("Un_exemple_fillText", 310, 110)}} ### Un exemple de strokeText @@ -64,7 +59,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_strokeText_example", 310, 110)}} +{{EmbedLiveSample("Un_exemple_de_strokeText", 310, 110)}} ## Style de texte @@ -104,7 +99,7 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); ``` -#### Playable code +#### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> @@ -144,7 +139,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('Playable_code', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Mesures de texte avancées diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 45651bb30a..1339a2cb47 100644 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -95,7 +95,7 @@ Dans cet exemple, nous utilisons la méthode [getImageData() ](/fr/docs/Web/API/ } canvas.addEventListener('mousemove', pick); -{{ EmbedLiveSample('A_color_picker', 610, 240) }} +{{ EmbedLiveSample('Une_pipette_à _couleur', 610, 240) }} ## Peinture des données pixel dans un contexte @@ -166,7 +166,7 @@ function dessiner(img) { } ``` -{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }} +{{ EmbedLiveSample('Niveaux_de_gris_et_inversion_de_couleurs', 330, 270) }} ## Zoom et anticrénelage @@ -233,7 +233,7 @@ function draw(img) { } ``` -{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }} +{{ EmbedLiveSample('Exemple_de_zoom', 620, 490) }} ## Sauvegarde des images diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.md b/files/fr/web/api/canvas_api/tutorial/using_images/index.md index 358204912c..b562f3c8f0 100644 --- a/files/fr/web/api/canvas_api/tutorial/using_images/index.md +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.md @@ -1,12 +1,6 @@ --- title: Utilisation d'images slug: Web/API/Canvas_API/Tutorial/Using_images -tags: - - Advanced - - Canvas - - Graphics - - HTML - - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Using_images original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images --- @@ -150,7 +144,7 @@ function draw() { Le graphique résultant ressemble à ceci : -{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}} +{{EmbedLiveSample("Exemple_un_graphique_linéaire_simple", 220, 160, "canvas_backdrop.png")}} ## Mise à l'échelle @@ -190,7 +184,7 @@ function draw() { Le canevas résultant ressemble à ceci : -{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}} +{{EmbedLiveSample("Exemple_mosaïque_à _partir_d\'une_image", 160, 160, "canvas_scale_image.png")}} ## Découpage @@ -237,7 +231,7 @@ function draw() { Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement), nous les avons incluses comme balises [`<img>`](/fr/docs/Web/HTML/Element/Img) directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS [`display`](/fr/docs/Web/CSS/display) qui vaut `none`. -{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}} +{{EmbedLiveSample("Exemple_encadrer_une_image", 160, 160, "canvas_drawimage2.jpg")}} Chaque [`<img>`](/fr/docs/Web/HTML/Element/Img) se voit attribuer un attribut `id`, ce qui facilite leur sélection en utilisant [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById). Nous utilisons `drawImage()` pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par-dessus en utilisant un deuxième appel `drawImage()`. @@ -323,7 +317,7 @@ function draw() { } ``` -{{EmbedLiveSample("art_gallery_example", 725, 400)}} +{{EmbedLiveSample("Exemple_d\'une_galerie_d'art", 725, 400)}} ## Contrôler la mise à l'échelle de l'image diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md index 7af56a60ec..b4a77e50dc 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.md +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -93,7 +93,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index 0656bd50da..608ac3d142 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.arc() slug: Web/API/CanvasRenderingContext2D/arc -tags: - - Canvas - - CanvasRenderingContext2D - - Method - - Reference translation_of: Web/API/CanvasRenderingContext2D/arc --- {{APIRef}} @@ -96,7 +91,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('Playable_code', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Exemple avec différentes formes @@ -132,7 +127,7 @@ for (var i = 0; i < 4; i++) { } ``` -{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }} +{{ EmbedLiveSample('Exemple_avec_différentes_formes', 160, 210, "canvas_arc.png") }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md index b663d63dd6..931290cd90 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -1,10 +1,6 @@ --- title: CanvasRenderingContext2D.beginPath() slug: Web/API/CanvasRenderingContext2D/beginPath -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/beginPath --- {{APIRef}} @@ -100,7 +96,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 460) }} +{{ EmbedLiveSample('Code_jouable', 700, 460) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index eb9c087775..6a49fdd769 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -79,7 +79,7 @@ ctx.fill(); Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus. -{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}} +{{EmbedLiveSample('Fonctionnement_de_bezierCurveTo', 315, 165)}} ### Une courbe cubique de Bézier simple @@ -107,7 +107,7 @@ contexte2D.stroke(); #### Résultat -{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}} +{{EmbedLiveSample('Une_courbe_cubique_de_Bézier_simple', 700, 180)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index f11c76ec20..6806016159 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.clearRect() slug: Web/API/CanvasRenderingContext2D/clearRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/clearRect --- {{APIRef}} @@ -110,7 +104,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 400) }} +{{ EmbedLiveSample('Code_jouable', 700, 400) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index 73798baafa..9d08469a66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -1,8 +1,6 @@ --- title: CanvasRenderingContext2D.closePath() slug: Web/API/CanvasRenderingContext2D/closePath -tags: - - Méthode translation_of: Web/API/CanvasRenderingContext2D/closePath --- {{APIRef}} @@ -84,7 +82,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 400) }} +{{ EmbedLiveSample('Code_jouable', 700, 400) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index 3fe6679a76..7257471422 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.createLinearGradient() slug: Web/API/CanvasRenderingContext2D/createLinearGradient -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Gradients - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient --- {{APIRef}} @@ -109,7 +102,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md index b56729678a..72818f6705 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.direction slug: Web/API/CanvasRenderingContext2D/direction -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/direction --- {{APIRef}} {{SeeCompatTable}} @@ -96,7 +89,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{EmbedLiveSample('code_jouable', 700, 360)}} +{{EmbedLiveSample('Code_jouable', 700, 360)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index e7bb8508f3..8f4751d083 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.drawImage() slug: Web/API/CanvasRenderingContext2D/drawImage -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/drawImage --- {{APIRef}} @@ -119,7 +113,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index 197d6aad25..445be59e65 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.ellipse() slug: Web/API/CanvasRenderingContext2D/ellipse -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Méthode translation_of: Web/API/CanvasRenderingContext2D/ellipse --- {{APIRef}} {{SeeCompatTable}} @@ -101,7 +95,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md index d7197dc21c..6d79084923 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -1,15 +1,11 @@ --- title: CanvasRenderingContext2D.fill() slug: Web/API/CanvasRenderingContext2D/fill -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/fill --- {{APIRef}} -La méthode **`CanvasRenderingContext2D`\*\***`.fill()`\*\* de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair. +La méthode **`CanvasRenderingContext2D.fill()`** de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair. ## Syntaxe @@ -91,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Utiliser l'option `fillRule` @@ -174,7 +170,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{EmbedLiveSample('code_jouable_2', 700, 360)}} +{{EmbedLiveSample('Code_jouable_2', 700, 360)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index d8fc1404f8..39a285d53f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.fillRect() slug: Web/API/CanvasRenderingContext2D/fillRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode translation_of: Web/API/CanvasRenderingContext2D/fillRect --- {{APIRef}} @@ -92,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index 539ce49e67..6ef47681ac 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.fillStyle slug: Web/API/CanvasRenderingContext2D/fillStyle -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/fillStyle --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple `fillStyle` avec les boucles `for` @@ -116,7 +110,7 @@ for (var i = 0; i < 6; i++){ Le résultat devrait ressembler à ça: -{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}} +{{EmbedLiveSample("Un_exemple_fillStyle_avec_les_boucles_for", 160, 160, "canvas_fillstyle.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index 73d1a75588..300d43b927 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.fillText() slug: Web/API/CanvasRenderingContext2D/fillText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/fillText --- {{APIRef}} @@ -96,7 +90,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 37ebc8f81b..da5771f46a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.font slug: Web/API/CanvasRenderingContext2D/font -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/font --- {{APIRef}} @@ -85,7 +79,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Chargement de polices avec l'API CSS Font Loading diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index 3ffbf48e4e..3ad6330fcf 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.globalAlpha slug: Web/API/CanvasRenderingContext2D/globalAlpha -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- {{APIRef}}La propriété **CanvasRenderingContext2D.globalAlpha** de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). @@ -95,7 +89,7 @@ zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); ``` -{{ EmbedLiveSample('code_jouable', 700, 380) }} +{{ EmbedLiveSample('Code_jouable', 700, 380) }} ### Un exemple de `globalAlpha` @@ -130,7 +124,7 @@ for (i = 0; i < 7; i++){ <canvas id="canevas" width="150" height="150"></canvas> ``` -{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} +{{EmbedLiveSample("Un_exemple_de_globalAlpha", "180", "180", "canvas_globalalpha.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index c82c88770b..232cc556c8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -15,11 +15,7 @@ Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dan `type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. -### Types - -{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}} - -## Examples +## Exemples ### Changer l'opération de composition @@ -48,7 +44,7 @@ ctx.fillRect(50, 50, 100, 100); #### Résultat -{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }} +{{ EmbedLiveSample('Exemples', 700, 180) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 27fa24574b..3ab0e43267 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -1,14 +1,6 @@ --- title: CanvasRenderingContext2D.imageSmoothingEnabled slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled -tags: - - API - - Canevas - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- {{APIRef}} {{SeeCompatTable}} @@ -26,7 +18,7 @@ Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise - `valeur` - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. -## exemples +## Exemples ### Désactiver le lissage d'image @@ -68,7 +60,7 @@ img.onload = function() { #### Résultat -{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }} +{{ EmbedLiveSample('Exemples', 700, 240) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index 033a50cd4c..e3666e004c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.lineCap slug: Web/API/CanvasRenderingContext2D/lineCap -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/lineCap --- {{APIRef}} @@ -101,7 +95,7 @@ zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple de `lineCap` @@ -138,7 +132,7 @@ for (var i = 0; i < lineCap.length; i++) { <canvas id="canevas" width="150" height="150"></canvas> ``` -{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} +{{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index c438190f71..f6d0829ac0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.lineJoin slug: Web/API/CanvasRenderingContext2D/lineJoin -tags: - - API - - Canvas - - Propriété - - arrondit - - coin - - stroke translation_of: Web/API/CanvasRenderingContext2D/lineJoin --- {{APIRef}} @@ -65,7 +58,7 @@ ctx.stroke(); #### Résultat -{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }} +{{ EmbedLiveSample('Modifier_les_jointures_d\'un_tracé', 700, 180) }} ### Comparaison des jointures de lignes @@ -92,7 +85,7 @@ for (let i = 0; i < lineJoin.length; i++) { } ``` -{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}} +{{EmbedLiveSample("Comparaison_des_jointures_de_lignes", "180", "180", "canvas_linejoin.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 776fe0223d..a262401891 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.lineTo() slug: Web/API/CanvasRenderingContext2D/lineTo -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/lineTo --- {{APIRef}} @@ -91,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index e2bd2fb269..9321ee8b6d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -1,10 +1,6 @@ --- title: CanvasRenderingContext2D.moveTo() slug: Web/API/CanvasRenderingContext2D/moveTo -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/moveTo --- {{APIRef}} @@ -89,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index 7b95e52523..d94c8c919b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -1,19 +1,6 @@ --- title: CanvasRenderingContext2D.quadraticCurveTo() slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo -tags: - - API - - Bézier - - Canevas - - Canvas - - CanvasRenderingContext2D - - Courbe - - Courbe de Bézier - - Courbe quadratique - - Courbe quadratique de Bézier - - Méthode - - Quadratique - - Reference translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo --- {{APIRef}} @@ -77,7 +64,7 @@ contexte2D.fill(); Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu. -{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}} +{{EmbedLiveSample('Comment_quadraticCurveTo_fonctionne', 315, 165)}} ### Une courbe quadratique simple @@ -105,7 +92,7 @@ contexte2D.stroke(); #### Résultat -{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}} +{{EmbedLiveSample('Une_courbe_quadratique_simple', 700, 180)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 982b8594f8..af68823cc5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.rect() slug: Web/API/CanvasRenderingContext2D/rect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode translation_of: Web/API/CanvasRenderingContext2D/rect --- {{APIRef}} @@ -89,7 +84,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index 3aec5226fa..4caa6d9e16 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.rotate() slug: Web/API/CanvasRenderingContext2D/rotate -tags: - - API - - Cancas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/rotate --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index f8ca5735cb..7e7d1fff82 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.scale() slug: Web/API/CanvasRenderingContext2D/scale -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/scale --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Utilisation de `scale` pour un retournement horizontal ou vertical @@ -140,7 +134,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable_2', 700, 360) }} +{{ EmbedLiveSample('Code_jouable_2', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index 520e2c8bb5..85d5078d2c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -1,17 +1,6 @@ --- title: CanvasRenderingContext2D.setLineDash() slug: Web/API/CanvasRenderingContext2D/setLineDash -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Lignes - - Modèle - - Méthodes - - Pointillés - - Reference - - patterns - - setLineDash translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- {{APIRef}} @@ -114,7 +103,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 10, 410) }} +{{ EmbedLiveSample('Code_jouable', 10, 410) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index a1dcc5a0f9..94c34409d5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.setTransform() slug: Web/API/CanvasRenderingContext2D/setTransform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/setTransform --- {{APIRef}} @@ -99,7 +93,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index 8d06004dc7..86f5f960aa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -79,7 +79,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index 0c696da8c0..f2b1f67edc 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.strokeRect() slug: Web/API/CanvasRenderingContext2D/strokeRect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- {{APIRef}} @@ -91,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index 1bde6b2ed5..aab6253a44 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -87,7 +87,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple `strokeStyle` @@ -113,7 +113,7 @@ for (var i = 0; i < 6; i++) { Le résultat devrait ressembler à ça: -{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} +{{EmbedLiveSample("Un_exemple_strokeStyle", "180", "180", "canvas_strokestyle.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index 3778eedf4f..2f7db41cd4 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.strokeText() slug: Web/API/CanvasRenderingContext2D/strokeText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/strokeText --- {{APIRef}} @@ -96,7 +90,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index a6da0bb4f9..a591fee3fd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.textAlign slug: Web/API/CanvasRenderingContext2D/textAlign -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/textAlign --- {{APIRef}} @@ -59,7 +53,7 @@ ctx.strokeText('Hello world', 0, 100); Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -#### Playable code +#### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> @@ -99,7 +93,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index 24253e2225..8b2b9c8b80 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.textBaseline slug: Web/API/CanvasRenderingContext2D/textBaseline -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- {{APIRef}} @@ -101,7 +95,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index 204a89deb2..e3ac8f2edd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.transform() slug: Web/API/CanvasRenderingContext2D/transform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/transform --- {{APIRef}} @@ -102,7 +96,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 561d1897b1..2c38c52591 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.translate() slug: Web/API/CanvasRenderingContext2D/translate -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/translate --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md index a0e0d2282c..a9fd2392a8 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.md +++ b/files/fr/web/api/document/caretrangefrompoint/index.md @@ -1,12 +1,6 @@ --- title: Document.caretRangeFromPoint() slug: Web/API/Document/caretRangeFromPoint -tags: - - API - - DOM - - Document - - Insertion - - Méthode translation_of: Web/API/Document/caretRangeFromPoint --- {{APIRef("DOM")}}{{Non-standard_header}} @@ -80,7 +74,7 @@ for (i=0 ; i < paragraphs.length; i++) { } ``` -{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }} +{{ EmbedLiveSample('Exemple', '', '', '', 'Web/API/Document/caretRangeFromPoint') }} ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/createdocumentfragment/index.md b/files/fr/web/api/document/createdocumentfragment/index.md index d4bf794671..e9e2ec325d 100644 --- a/files/fr/web/api/document/createdocumentfragment/index.md +++ b/files/fr/web/api/document/createdocumentfragment/index.md @@ -1,13 +1,6 @@ --- title: document.createDocumentFragment slug: Web/API/Document/createDocumentFragment -tags: - - API - - DOM - - Document - - HTML - - Méthode - - Reference translation_of: Web/API/Document/createDocumentFragment --- {{ApiRef("DOM")}} @@ -56,7 +49,7 @@ element.appendChild(fragment); ### Résultat -{{EmbedLiveSample("Example", 600, 140)}} +{{EmbedLiveSample("Exemple", 600, 140)}} ## Spécification diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md index e68fb79530..98fcfd0f37 100644 --- a/files/fr/web/api/document/createelement/index.md +++ b/files/fr/web/api/document/createelement/index.md @@ -1,13 +1,6 @@ --- title: document.createElement slug: Web/API/Document/createElement -tags: - - API - - Création - - DOM - - Document - - Elements - - Méthodes translation_of: Web/API/Document/createElement --- {{APIRef("DOM")}} @@ -68,7 +61,7 @@ function addElement () { } ``` -{{EmbedLiveSample("Basic_example", 500, 50)}} +{{EmbedLiveSample("Exemple_de_base", 500, 50)}} ### Exemple de composant web diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md index 5fa9889813..92c383e65d 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.md +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -145,7 +145,7 @@ document.addEventListener('DOMContentLoaded', (event) => { #### Résultat -{{ EmbedLiveSample('Live_example', '100%', '160px') }} +{{ EmbedLiveSample('Démonstration', '100%', '160px') }} ## Spécifications diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md index 2e0cc56f99..152aeaeb86 100644 --- a/files/fr/web/api/document/dragstart_event/index.md +++ b/files/fr/web/api/document/dragstart_event/index.md @@ -43,7 +43,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élà | `altKey` {{readonlyInline}} | boolean | `true` if the alt key was down when the event was fired. `false` otherwise. | | `metaKey` {{readonlyInline}} | boolean | `true` if the meta key was down when the event was fired. `false` otherwise. | -## Exemple：dropzone +## Exemple : dropzone ### HTML Content @@ -134,7 +134,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élà  }, false); ``` -{{ EmbedLiveSample('Example：dropzone') }} +{{ EmbedLiveSample('Exemple_dropzone') }} ## Spécifications diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md index e275e5780d..275ad2f1e8 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.md +++ b/files/fr/web/api/document/elementsfrompoint/index.md @@ -66,7 +66,7 @@ if (document.elementsFromPoint) { ### Résultat -{{EmbedLiveSample('Example', '420', '120')}} +{{EmbedLiveSample('Exemples', '420', '120')}} ## Spécifications diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index cc1a21f505..c73932122d 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -1,13 +1,6 @@ --- title: document.getElementById slug: Web/API/Document/getElementById -tags: - - API - - DOM - - Document - - Elements - - Identifiant - - Méthodes translation_of: Web/API/Document/getElementById --- {{ ApiRef("DOM") }} @@ -59,7 +52,7 @@ function changeColor(newColor) { ### Résultat -{{ EmbedLiveSample('Example1', 250, 100) }} +{{ EmbedLiveSample('Exemple', 250, 100) }} ## Notes d'utilisation @@ -67,7 +60,7 @@ L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _d Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. -## Exemple +## Autre exemple ```html <!doctype html> diff --git a/files/fr/web/api/document/keypress_event/index.md b/files/fr/web/api/document/keypress_event/index.md index f079811072..9d2fdf06f7 100644 --- a/files/fr/web/api/document/keypress_event/index.md +++ b/files/fr/web/api/document/keypress_event/index.md @@ -1,12 +1,6 @@ --- title: keypress slug: Web/API/Document/keypress_event -tags: - - DOM - - Déprécié - - Evènement - - KeyboardEvent - - Reference translation_of: Web/API/Document/keypress_event --- {{APIRef}} {{deprecated_header}} @@ -70,7 +64,7 @@ function logKey(e) { } ``` -{{EmbedLiveSample("addEventListener_keypress_example")}} +{{EmbedLiveSample("Exemples")}} ### Équivalent `onkeypress` diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md index 78199ae55a..680aae3ece 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md @@ -2,11 +2,6 @@ title: Explorer un tableau HTML avec des interfaces DOM et JavaScript slug: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces -tags: - - DOM - - Guide - - HTML - - JavaScript translation_of: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript @@ -17,7 +12,7 @@ Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondam > **Note :**Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML). -## Exemple: Création d'un tableau HTML dynamiquement (`Sample1.html`) +## Création d'un tableau HTML dynamiquement ### Contenu HTML @@ -64,7 +59,7 @@ function generate_table() { } ``` -{{ EmbedLiveSample('Overview_of_Sample1.html') }} +{{ EmbedLiveSample('Création_d\'un_tableau_HTML_dynamiquement') }} Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : @@ -113,7 +108,7 @@ Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et se Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre \<table> de la figure 1, l'élément \<table> a un enfant, l'élément \<tbody>, qui lui-même a deux enfants \<tr>, qui à leur tour ont chacun un enfant \<td>. Enfin, chacun de ces éléments \<td> a un enfant, un nœud texte. -## Exemple : Définition de la couleur d'arrière-plan d'un paragraphe +## Définition de la couleur d'arrière-plan d'un paragraphe `getElementsByTagName` est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position \[0] dans le tableau. @@ -144,13 +139,13 @@ function set_background() { } ``` -{{ EmbedLiveSample('Setting_background_of_a_paragraph') }} +{{ EmbedLiveSample('Définition_de_la_couleur_d\'arrière-plan_d\'un_paragraphe') }} Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élément `p` du corps (body). 1. On récupère d'abord une liste de tous les éléments body avec - ```html + ```js myBody = document.getElementsByTagName("body")[0] ``` @@ -158,13 +153,13 @@ Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élémen 2. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant - ```html + ```js myBodyElements = myBody.getElementsByTagName("p"); ``` 3. Pour finir on prend le deuxième élément de la liste des éléments p avec - ```html + ```js myP = myBodyElements[1]; ``` diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md index 0348ed4df2..99b70402e6 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md @@ -1,11 +1,6 @@ --- title: Utilisation du DOM Level 1 Core du W3C slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core -tags: - - Arbre - - DOM - - Noeud - - Texte translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C --- @@ -76,7 +71,7 @@ Supposons que l'auteur désire prendre le document présenté plus haut et chang } ``` -{{ EmbedLiveSample('A_simple_example', 800, 300) }} +{{ EmbedLiveSample('Un_exemple_simple', 800, 300) }} Vous pouvez voir ce script dans [un exemple complet](http://www.mozilla.org/docs/dom/technote/intro/example.html). diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md index 9052727e6e..7320b0432f 100644 --- a/files/fr/web/api/domtokenlist/add/index.md +++ b/files/fr/web/api/domtokenlist/add/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.add() slug: Web/API/DOMTokenList/add -tags: - - API - - Ajout - - Chaînes de caractères - - DOM - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/add --- {{APIRef("DOM")}} @@ -48,7 +41,7 @@ span.textContent = classes; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} Vous pouvez ajouter plusieurs _token_ : diff --git a/files/fr/web/api/domtokenlist/contains/index.md b/files/fr/web/api/domtokenlist/contains/index.md index ca3978e077..4d4b942e74 100644 --- a/files/fr/web/api/domtokenlist/contains/index.md +++ b/files/fr/web/api/domtokenlist/contains/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.contains() slug: Web/API/DOMTokenList/contains -tags: - - API - - Chaînes de caractères - - DOM - - Listes - - Méthodes - - Recherche contenu translation_of: Web/API/DOMTokenList/contains --- {{APIRef("DOM")}} @@ -52,7 +45,7 @@ if(result) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md index 113f23c1b0..784e530c17 100644 --- a/files/fr/web/api/domtokenlist/entries/index.md +++ b/files/fr/web/api/domtokenlist/entries/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.entries() slug: Web/API/DOMTokenList/entries -tags: - - API - - Chaînes de caractères - - DOM - - Itérateurs - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/entries --- {{APIRef("DOM")}} @@ -46,7 +39,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md index 917b80e9c2..b63d1bae03 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.md +++ b/files/fr/web/api/domtokenlist/foreach/index.md @@ -1,14 +1,6 @@ --- title: DOMTokenList.forEach() slug: Web/API/DOMTokenList/forEach -tags: - - API - - Boucle - - Chaînes de caractères - - DOM - - Itérateurs - - Méthodes - - Pour chaque translation_of: Web/API/DOMTokenList/forEach --- {{APIRef("DOM")}} @@ -67,7 +59,7 @@ classes.forEach( ### Résultat -{{ EmbedLiveSample('Example', '100%', 60) }} +{{ EmbedLiveSample('Exemple', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md index 8cbf548fc2..365fb85739 100644 --- a/files/fr/web/api/domtokenlist/index.md +++ b/files/fr/web/api/domtokenlist/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList slug: Web/API/DOMTokenList -tags: - - API - - Chaînes de caractères - - DOM - - Interface - - Listes - - Marques translation_of: Web/API/DOMTokenList --- {{APIRef("DOM")}} @@ -67,7 +60,7 @@ para.textContent = 'paragraph classList is "' + classes + '"'; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Découpage des espaces et suppression des doublons @@ -86,7 +79,7 @@ span.textContent = 'span classList is "' + classes + '"'; La sortie ressemble à ceci : -{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }} +{{ EmbedLiveSample('Découpage_des_espaces_et_suppression_des_doublons', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/item/index.md b/files/fr/web/api/domtokenlist/item/index.md index c1d22f88c5..eb7bbdf3e8 100644 --- a/files/fr/web/api/domtokenlist/item/index.md +++ b/files/fr/web/api/domtokenlist/item/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.item() slug: Web/API/DOMTokenList/item -tags: - - API - - Chaînes de caractères - - DOM - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/item --- {{APIRef("DOM")}} @@ -47,7 +41,7 @@ span.textContent = item; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/keys/index.md b/files/fr/web/api/domtokenlist/keys/index.md index f5408bd2c6..3c4d955edc 100644 --- a/files/fr/web/api/domtokenlist/keys/index.md +++ b/files/fr/web/api/domtokenlist/keys/index.md @@ -1,15 +1,6 @@ --- title: DOMTokenList.keys() slug: Web/API/DOMTokenList/keys -tags: - - API - - Boucle - - Clés - - DOM - - Itérateur - - Listes - - Méthodes - - for of translation_of: Web/API/DOMTokenList/keys --- {{APIRef("DOM")}} @@ -52,7 +43,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/length/index.md b/files/fr/web/api/domtokenlist/length/index.md index 877b240632..e9d508cf22 100644 --- a/files/fr/web/api/domtokenlist/length/index.md +++ b/files/fr/web/api/domtokenlist/length/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.length slug: Web/API/DOMTokenList/length -tags: - - API - - DOM - - Listes - - Longueur - - Propriétés translation_of: Web/API/DOMTokenList/length --- {{APIRef("DOM")}} @@ -43,7 +37,7 @@ span.textContent = 'classList length = ' + length; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/remove/index.md b/files/fr/web/api/domtokenlist/remove/index.md index 98f8ccbe34..4a48ffbc3f 100644 --- a/files/fr/web/api/domtokenlist/remove/index.md +++ b/files/fr/web/api/domtokenlist/remove/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.remove() slug: Web/API/DOMTokenList/remove -tags: - - API - - DOM - - Listes - - Méthodes - - Suppression translation_of: Web/API/DOMTokenList/remove --- {{APIRef("DOM")}} @@ -47,7 +41,7 @@ span.textContent = classes; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (_array_) avec la [syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition). L'ordre des classes n'a pas d'importance : diff --git a/files/fr/web/api/domtokenlist/replace/index.md b/files/fr/web/api/domtokenlist/replace/index.md index a352208494..d8f97450a8 100644 --- a/files/fr/web/api/domtokenlist/replace/index.md +++ b/files/fr/web/api/domtokenlist/replace/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.replace() slug: Web/API/DOMTokenList/replace -tags: - - API - - DOM - - Listes - - Méthodes - - Remplacement translation_of: Web/API/DOMTokenList/replace --- {{APIRef("DOM")}} @@ -53,7 +47,7 @@ try { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/value/index.md b/files/fr/web/api/domtokenlist/value/index.md index 675415f3fc..6ff0072761 100644 --- a/files/fr/web/api/domtokenlist/value/index.md +++ b/files/fr/web/api/domtokenlist/value/index.md @@ -1,11 +1,6 @@ --- title: DOMTokenList.value slug: Web/API/DOMTokenList/value -tags: - - API - - DOM - - Méthodes - - Valeur translation_of: Web/API/DOMTokenList/value --- {{APIRef("DOM")}} @@ -40,7 +35,7 @@ span.textContent = classes.value; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/values/index.md b/files/fr/web/api/domtokenlist/values/index.md index 43db920fe6..491b265cba 100644 --- a/files/fr/web/api/domtokenlist/values/index.md +++ b/files/fr/web/api/domtokenlist/values/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.values() slug: Web/API/DOMTokenList/values -tags: - - API - - DOM - - Itérateurs - - Listes - - Méthodes - - Valeurs translation_of: Web/API/DOMTokenList/values --- {{APIRef("DOM")}} @@ -50,7 +43,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md index b1370d4893..55971fdc43 100644 --- a/files/fr/web/api/element/compositionstart_event/index.md +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -1,12 +1,6 @@ --- title: compositionstart slug: Web/API/Element/compositionstart_event -tags: - - Element - - Event - - Input method - - Reference - - compositionstart translation_of: Web/API/Element/compositionstart_event original_slug: Web/Events/compositionstart --- @@ -120,7 +114,7 @@ inputElement.addEventListener('compositionend', handleEvent); #### Résultat -{{ EmbedLiveSample('Live_example', '100%', '180px') }} +{{ EmbedLiveSample('Exemple_concret', '100%', '180px') }} ## Spécifications diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md index 5e64f11e08..aa37626b39 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.md +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -1,28 +1,6 @@ --- title: Element.getBoundingClientRect() slug: Web/API/Element/getBoundingClientRect -tags: - - API - - Boundary - - Bounding - - Bounds - - CSSOM View - - Client - - Containing - - DOM - - Element - - Enclosing - - Method - - Méthode - - Minimum - - Rectangle - - Reference - - Smallest - - clientHeight - - getBoundingClientRect - - getClientRects - - offsetHeight - - scrollHeight translation_of: Web/API/Element/getBoundingClientRect --- {{APIRef("DOM")}} @@ -92,7 +70,7 @@ for (let key in rect) { } ``` -{{EmbedLiveSample('Example', '100%', 640)}} +{{EmbedLiveSample('Exemple', '100%', 640)}} Remarquez comme les `width`/`height` sont égales à `width`/`height` + `padding`. diff --git a/files/fr/web/api/element/queryselector/index.md b/files/fr/web/api/element/queryselector/index.md index bee72ee47a..876070c34a 100644 --- a/files/fr/web/api/element/queryselector/index.md +++ b/files/fr/web/api/element/queryselector/index.md @@ -1,21 +1,6 @@ --- title: Element.querySelector() slug: Web/API/Element/querySelector -tags: - - API - - CSS - - CSS Selectors - - DOM - - Element - - Elements - - Finding Elements - - Locating Elements - - Method - - Reference - - Searching Elements - - Selecting Elements - - Selectors - - querySelector translation_of: Web/API/Element/querySelector --- {{APIRef("DOM")}} @@ -82,7 +67,7 @@ document.getElementById("output").innerHTML = (baseElement.querySelector("div sp Le résultat ressemble à ceci : -{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}} +{{EmbedLiveSample('Exemple', '', 200)}} ### Plus d'exemples diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md index dd8d5f4d78..02e1c29792 100644 --- a/files/fr/web/api/element/scrollheight/index.md +++ b/files/fr/web/api/element/scrollheight/index.md @@ -17,8 +17,6 @@ L'attribut en lecture seule **`element.scrollHeight`** est une mesure de la haut ## Exemple -## Exemple - Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}). La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé. diff --git a/files/fr/web/api/element/scrolltop/index.md b/files/fr/web/api/element/scrolltop/index.md index dc72baf8f8..aabf8af9f8 100644 --- a/files/fr/web/api/element/scrolltop/index.md +++ b/files/fr/web/api/element/scrolltop/index.md @@ -1,11 +1,6 @@ --- title: Element.scrollTop slug: Web/API/Element/scrollTop -tags: - - API - - CSSOM View - - Property - - Reference translation_of: Web/API/Element/scrollTop --- {{APIRef("DOM")}} @@ -76,7 +71,7 @@ button.onclick = function () { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Spécifications diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md index ffd46a3092..f86cbf065c 100644 --- a/files/fr/web/api/element/setattribute/index.md +++ b/files/fr/web/api/element/setattribute/index.md @@ -1,12 +1,6 @@ --- title: Element.setAttribute() slug: Web/API/Element/setAttribute -tags: - - API - - Attributs - - DOM - - Element - - Méthode translation_of: Web/API/Element/setAttribute --- {{APIRef("DOM")}} @@ -63,7 +57,7 @@ Ceci démontre 2 choses : - le premier appel de `setAttribute()` ci-dessus montre la modification de la valeur de l'attribut `name` en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur ([Chrome](https://developers.google.com/web/tools/chrome-devtools/inspect-styles), [Edge](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer), [Firefox](/en-US/docs/Tools/Page_Inspector), [Safari](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html)). - Pour définir la valeur d'un attribut booléen, tel que `disabled`, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme `true` (_vraie_). L'absence de l'attribut signifie que sa valeur est `false` (_fausse_). En définissant la valeur de l'attribut `disabled` sur la chaîne vide (""), nous définissons `disabled` sur `true`, ce qui entraîne la désactivation du bouton. -{{ EmbedLiveSample('Example', '300', '50') }} +{{ EmbedLiveSample('Exemple', '300', '50') }} {{DOMAttributeMethods}} diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md index f6721c8a8d..0fa5698321 100644 --- a/files/fr/web/api/event/eventphase/index.md +++ b/files/fr/web/api/event/eventphase/index.md @@ -189,7 +189,7 @@ function Clear() { } ``` -{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }} +{{ EmbedLiveSample('Exemple', '', '700', '', 'Web/API/Event/eventPhase') }} ## Spécifications diff --git a/files/fr/web/api/event/preventdefault/index.md b/files/fr/web/api/event/preventdefault/index.md index 7e8b7057f4..ae1be51ad2 100644 --- a/files/fr/web/api/event/preventdefault/index.md +++ b/files/fr/web/api/event/preventdefault/index.md @@ -1,12 +1,6 @@ --- title: Event.preventDefault() slug: Web/API/Event/preventDefault -tags: - - API - - DOM - - Event - - Method - - Reference translation_of: Web/API/Event/preventDefault browser-compat: api.Event.preventDefault --- @@ -52,7 +46,7 @@ document.querySelector("#id-checkbox").addEventListener("click", function(event) #### Résultat -{{EmbedLiveSample("blocking_default_click_handling")}} +{{EmbedLiveSample("Bloquer_la_gestion_du_clic_par_défaut")}} ### Empêcher les pressions du clavier sur un champ texte @@ -90,7 +84,7 @@ function bloqueSaisie(evt) { #### Résultat -{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}} +{{EmbedLiveSample('Empêcher_les_pressions_du_clavier_sur_un_champ_texte', 600, 200)}} ## Notes diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md index f053b897e7..fde4ad5b7d 100644 --- a/files/fr/web/api/event/timestamp/index.md +++ b/files/fr/web/api/event/timestamp/index.md @@ -1,12 +1,6 @@ --- title: Event.timeStamp slug: Web/API/Event/timeStamp -tags: - - API - - DOM - - Evènement - - Propriétés - - temps translation_of: Web/API/Event/timeStamp --- {{ApiRef("DOM")}} @@ -49,7 +43,7 @@ document.body.addEventListener("keypress", getTime); ### Résultat -{{EmbedLiveSample("Example", "100%", 100)}} +{{EmbedLiveSample("Exemple", "100%", 100)}} ## Précision du temps réduite diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md index 854f67f717..4774093a5b 100644 --- a/files/fr/web/api/event/type/index.md +++ b/files/fr/web/api/event/type/index.md @@ -70,7 +70,7 @@ Pour une liste des types d'événements disponibles, aller voir la page [Référ ### Résultat -{{EmbedLiveSample('Example')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md index 4139ecb2de..686f4a9e63 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.md +++ b/files/fr/web/api/eventtarget/addeventlistener/index.md @@ -1,31 +1,6 @@ --- title: EventTarget.addEventListener() slug: Web/API/EventTarget/addEventListener -tags: - - API - - Cible - - DOM - - Evènement - - Gestionnaires d'évènements - - JavaScript - - Méthode - - Méthodes - - Reference - - Réception d'Évènements - - attachEvent - - Écouteurs - - Écouteurs d'Évènements - - AccessOuterData - - Detecting Events - - Event Handlers - - Event Listener - - EventTarget - - Method - - PassingData - - Receiving Events - - addEventListener - - events - - mselementresize translation_of: Web/API/EventTarget/addEventListener --- {{APIRef("DOM Events")}} @@ -179,7 +154,7 @@ Dans ce code, `modifyText()` est un écouteur pour les évènements `click` enre #### Résultat -{{EmbedLiveSample('Add_a_simple_listener')}} +{{EmbedLiveSample('Ajouter_un_écouteur_simple')}} ### Écouteur d'évènement avec une fonction anonyme @@ -212,7 +187,7 @@ Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut às #### Résultat -{{EmbedLiveSample('Event_listener_with_anonymous_function')}} +{{EmbedLiveSample('Écouteur_d\'évènement_avec_une_fonction_anonyme')}} ### Écouteur d'évènement avec une fonction fléchée @@ -245,7 +220,7 @@ el.addEventListener("click", () => { #### Résultat -{{EmbedLiveSample('Event_listener_with_an_arrow_function')}} +{{EmbedLiveSample('Écouteur_d\'évènement_avec_une_fonction_fléchée')}} Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons `this` différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons `this`, les fonctions fléchées héritent la liaison `this` de la fonction contenante. [Voir la page sur l'opérateur `this` pour plus d'informations.](fr/docs/Web/JavaScript/Reference/Operators/this#avec_les_fonctions_fléchées) @@ -363,7 +338,7 @@ function nonePassiveHandler(event) { Cliquez les conteneurs _extérieur_, _milieu_, _intérieurs_ respectivement pour voir comment les options fonctionnent. Vous pouvez ouvrir la console pour observer les différents messages émis. -{{EmbedLiveSample('Example_of_options_usage', '', '320')}} +{{EmbedLiveSample('Exemple_d\'utilisation_des_options', '', '320')}} Avant d'utiliser une valeur particulière dans l'objet `options`, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely_detecting_option_support", "Détection sûre du support des options")}} pour les détails. @@ -404,7 +379,7 @@ Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simp #### Résultat -{{EmbedLiveSample('Add_a_abortable_listener')}} +{{EmbedLiveSample('Ajout_d\'un_écouteur_annulable')}} ## Autres notes diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md index 01642d791a..bc00d1b624 100644 --- a/files/fr/web/api/filereader/readasdataurl/index.md +++ b/files/fr/web/api/filereader/readasdataurl/index.md @@ -1,12 +1,6 @@ --- title: FileReader.readAsDataURL() slug: Web/API/FileReader/readAsDataURL -tags: - - API - - API File - - Fichiers - - Méthode - - Reference translation_of: Web/API/FileReader/readAsDataURL --- {{APIRef("API File")}} @@ -51,7 +45,7 @@ function previewFile() { ### Résultat en direct -{{EmbedLiveSample("Example", "100%", 240)}} +{{EmbedLiveSample("Exemple", "100%", 240)}} diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.md b/files/fr/web/api/globaleventhandlers/onselect/index.md index f2b8e48654..4f34d3f008 100644 --- a/files/fr/web/api/globaleventhandlers/onselect/index.md +++ b/files/fr/web/api/globaleventhandlers/onselect/index.md @@ -1,12 +1,6 @@ --- title: GlobalEventHandlers.onselect slug: Web/API/GlobalEventHandlers/onselect -tags: - - API - - Gestionnaire d'événement - - HTML DOM - - Propriété - - Reference translation_of: Web/API/GlobalEventHandlers/onselect --- {{ ApiRef("HTML DOM") }} @@ -49,7 +43,7 @@ textarea.onselect = enregistrerSelection; ### Résultat -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécification diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.md b/files/fr/web/api/htmlbuttonelement/labels/index.md index 02edee6291..4740520501 100644 --- a/files/fr/web/api/htmlbuttonelement/labels/index.md +++ b/files/fr/web/api/htmlbuttonelement/labels/index.md @@ -1,10 +1,6 @@ --- title: HTMLButtonElement.labels slug: Web/API/HTMLButtonElement/labels -tags: - - API - - DOM - - Propriété translation_of: Web/API/HTMLButtonElement/labels --- {{APIRef("DOM")}} @@ -40,7 +36,7 @@ window.addEventListener("DOMContentLoaded", function() { }); ``` -{{EmbedLiveSample("Example", "100%", 30)}} +{{EmbedLiveSample("Exemple", "100%", 30)}} ## Spécifications diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md index de24c8836e..b37e99d8f3 100644 --- a/files/fr/web/api/htmlelement/beforeinput_event/index.md +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md @@ -68,7 +68,7 @@ function updateValue(e) { ### Résultat -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md index 9f239a8004..ca287d947d 100644 --- a/files/fr/web/api/htmlelement/change_event/index.md +++ b/files/fr/web/api/htmlelement/change_event/index.md @@ -1,14 +1,6 @@ --- title: change slug: Web/API/HTMLElement/change_event -tags: - - Change - - DOM - - Event - - HTML - - Reference - - Web - - Élément HTML translation_of: Web/API/HTMLElement/change_event --- {{APIRef}} @@ -97,7 +89,7 @@ selectElement.addEventListener('change', (event) => { #### Résultat -{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }} +{{ EmbedLiveSample('Lélément_select', '100%', '75px') }} ### L'élément d'entrée de texte diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md index 8cbd7090df..6c2121924c 100644 --- a/files/fr/web/api/htmlelement/hidden/index.md +++ b/files/fr/web/api/htmlelement/hidden/index.md @@ -104,7 +104,7 @@ h1 { ### Résultat -{{ EmbedLiveSample('Example', 560, 200) }} +{{ EmbedLiveSample('Exemple', 560, 200) }} ## Spécifications diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md index 717a7f65e0..f558a3446b 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.md +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md @@ -1,13 +1,6 @@ --- title: HTMLElement.isContentEditable slug: Web/API/HTMLElement/isContentEditable -tags: - - HTML DOM - - Propriété - - Reference - - lecture seule - - Édition - - Élément HTML translation_of: Web/API/HTMLElement/isContentEditable --- {{ APIRef("HTML DOM") }} @@ -39,7 +32,7 @@ document.getElementById("infoText2").innerHTML += document.getElementById("myTex ### Résultat -{{ EmbedLiveSample('Example') }} +{{ EmbedLiveSample('Exemple') }} ## Spécifications diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md index 38ce65bf91..4d9f632f14 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.md +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -64,7 +64,7 @@ addRow('my-table'); ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Spécifications diff --git a/files/fr/web/api/intersection_observer_api/index.md b/files/fr/web/api/intersection_observer_api/index.md index 1b1d75b7d3..40fdb41249 100644 --- a/files/fr/web/api/intersection_observer_api/index.md +++ b/files/fr/web/api/intersection_observer_api/index.md @@ -1,11 +1,6 @@ --- title: Intersection Observer API slug: Web/API/Intersection_Observer_API -tags: - - API - - IntersectionObserver - - Reference - - Web translation_of: Web/API/Intersection_Observer_API --- {{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}} @@ -276,7 +271,7 @@ function intersectionCallback(entries) { } ``` -{{EmbedLiveSample("exemple_de_seuil", 500, 500)}} +{{EmbedLiveSample("Exemple_de_seuil", 500, 500)}} ## Interfaces diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md index a0a0e9c050..471e63789c 100644 --- a/files/fr/web/api/keyboardevent/code/index.md +++ b/files/fr/web/api/keyboardevent/code/index.md @@ -1,13 +1,6 @@ --- title: KeyboardEvent.code slug: Web/API/KeyboardEvent/code -tags: - - API - - Code - - DOM Events - - KeyboardEvent - - Propriété - - Reference translation_of: Web/API/KeyboardEvent/code --- {{APIRef("DOM Events")}} @@ -200,7 +193,7 @@ window.addEventListener("keydown", function(event) { Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous: -{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}} +{{EmbedLiveSample("Gérer_les_événements_de_clavier_dans_un_jeu", 420, 460)}} Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de `switch`, ni de `else if`.ff diff --git a/files/fr/web/api/location/index.md b/files/fr/web/api/location/index.md index 3766646973..d66720d6a7 100644 --- a/files/fr/web/api/location/index.md +++ b/files/fr/web/api/location/index.md @@ -1,13 +1,6 @@ --- title: Location slug: Web/API/Location -tags: - - API - - HTML DOM - - Interface - - JavaScript - - Location - - Reference translation_of: Web/API/Location --- {{APIRef("HTML DOM")}} @@ -63,7 +56,7 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family: ### Result -{{EmbedLiveSample('Anatomy_Of_Location')}} +{{EmbedLiveSample('Anatomie_d\'une_Location')}} ## Propriétés diff --git a/files/fr/web/api/mouseevent/index.md b/files/fr/web/api/mouseevent/index.md index 6f9eada357..aa691d61f8 100644 --- a/files/fr/web/api/mouseevent/index.md +++ b/files/fr/web/api/mouseevent/index.md @@ -1,14 +1,6 @@ --- title: MouseEvent slug: Web/API/MouseEvent -tags: - - API - - DOM - - Interface - - Reference - - Référence(2) - - Souris - - évènements translation_of: Web/API/MouseEvent --- {{APIRef("DOM Events")}} @@ -148,7 +140,7 @@ document.getElementById("button").addEventListener('click', simulateClick); Cliquez sur le bouton pour voir comment l'exemple fonctionne : -{{ EmbedLiveSample('Example', '', '', '') }} +{{ EmbedLiveSample('Exemple', '', '', '') }} ## Spécifications diff --git a/files/fr/web/api/node/isequalnode/index.md b/files/fr/web/api/node/isequalnode/index.md index e86aa2118c..3afb00dfe7 100644 --- a/files/fr/web/api/node/isequalnode/index.md +++ b/files/fr/web/api/node/isequalnode/index.md @@ -1,12 +1,6 @@ --- title: Node.isEqualNode() slug: Web/API/Node/isEqualNode -tags: - - API - - Comparaison - - DOM - - Méthodes - - Noeuds translation_of: Web/API/Node/isEqualNode --- {{APIRef("DOM")}} @@ -59,7 +53,7 @@ output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) ### Résultats -{{ EmbedLiveSample('Example', 480) }} +{{ EmbedLiveSample('Exemple', 480) }} ## Spécifications diff --git a/files/fr/web/api/node/issamenode/index.md b/files/fr/web/api/node/issamenode/index.md index 682d50b9e7..5b57ac5cbb 100644 --- a/files/fr/web/api/node/issamenode/index.md +++ b/files/fr/web/api/node/issamenode/index.md @@ -1,11 +1,6 @@ --- title: Node.isSameNode() slug: Web/API/Node/isSameNode -tags: - - API - - DOM - - Méthodes - - Noeuds translation_of: Web/API/Node/isSameNode --- {{APIRef("DOM")}} @@ -58,7 +53,7 @@ output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) ### Résultats -{{ EmbedLiveSample('Example', 480) }} +{{ EmbedLiveSample('Exemple', 480) }} ## Spécifications diff --git a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md index 6a8a3ac80e..654b256979 100644 --- a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md @@ -242,7 +242,7 @@ window.addEventListener('load', function () { Voir le résultat de cet exemple : -{{EmbedLiveSample('tag_example', '100%', 30)}} +{{EmbedLiveSample('Exemple_d\'utilisation_des_balises', '100%', 30)}} ## Spécifications diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md index 7c551573bf..4ed46854c1 100644 --- a/files/fr/web/api/storagemanager/estimate/index.md +++ b/files/fr/web/api/storagemanager/estimate/index.md @@ -45,7 +45,7 @@ navigator.storage.estimate().then(function(estimate) { ### Résultat -{{ EmbedLiveSample('Example', 600, 40) }} +{{ EmbedLiveSample('Exemple', 600, 40) }} ## Spécifications diff --git a/files/fr/web/api/webgl_api/by_example/color_masking/index.md b/files/fr/web/api/webgl_api/by_example/color_masking/index.md index 61afaba6f3..8345a669f9 100644 --- a/files/fr/web/api/webgl_api/by_example/color_masking/index.md +++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.md @@ -1,13 +1,6 @@ --- title: Masque de couleur slug: Web/API/WebGL_API/By_example/Color_masking -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL translation_of: Web/API/WebGL_API/By_example/Color_masking original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur --- @@ -17,7 +10,7 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons. -{{EmbedLiveSample("color-masking-source",660,425)}} +{{EmbedLiveSample("Appliquer_un_masque_sur_des_couleurs_aléatoires",660,425)}} ### Appliquer un masque sur des couleurs aléatoires diff --git a/files/fr/web/api/window/find/index.md b/files/fr/web/api/window/find/index.md index 3c0ea82ff3..ee36dd5c17 100644 --- a/files/fr/web/api/window/find/index.md +++ b/files/fr/web/api/window/find/index.md @@ -62,7 +62,7 @@ findString = function findText(text) { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Notes diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.md b/files/fr/web/css/-moz-outline-radius-bottomright/index.md index 335df93637..a30ccf61fe 100644 --- a/files/fr/web/css/-moz-outline-radius-bottomright/index.md +++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.md @@ -1,11 +1,6 @@ --- title: '-moz-outline-radius-bottomright' slug: Web/CSS/-moz-outline-radius-bottomright -tags: - - CSS - - Non-standard - - Propriété - - Reference translation_of: Web/CSS/-moz-outline-radius-bottomright --- {{Non-standard_header}}{{CSSRef}} @@ -33,7 +28,7 @@ p { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemples")}} > **Note :** Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur. diff --git a/files/fr/web/css/-webkit-text-fill-color/index.md b/files/fr/web/css/-webkit-text-fill-color/index.md index 23e220dde2..826b7e9229 100644 --- a/files/fr/web/css/-webkit-text-fill-color/index.md +++ b/files/fr/web/css/-webkit-text-fill-color/index.md @@ -1,11 +1,6 @@ --- title: '-webkit-text-fill-color' slug: Web/CSS/-webkit-text-fill-color -tags: - - CSS - - Non-standard - - Propriété - - Reference translation_of: Web/CSS/-webkit-text-fill-color --- {{CSSRef}}{{Non-standard_header}} @@ -56,7 +51,7 @@ p { ### Résultat -{{EmbedLiveSample("Example", "380px", "60px")}} +{{EmbedLiveSample("Exemples", "380px", "60px")}} ## Spécifications diff --git a/files/fr/web/css/-webkit-text-security/index.md b/files/fr/web/css/-webkit-text-security/index.md index 4aa198a0e7..f60f0ea5c6 100644 --- a/files/fr/web/css/-webkit-text-security/index.md +++ b/files/fr/web/css/-webkit-text-security/index.md @@ -1,11 +1,6 @@ --- title: '-webkit-text-security' slug: Web/CSS/-webkit-text-security -tags: - - CSS - - Non-standard - - Propriété - - Reference translation_of: Web/CSS/-webkit-text-security --- {{CSSRef}} {{Non-standard_header}} @@ -42,7 +37,7 @@ input { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/css/@media/forced-colors/index.md b/files/fr/web/css/@media/forced-colors/index.md index cc33f5cca5..7dfb25ece9 100644 --- a/files/fr/web/css/@media/forced-colors/index.md +++ b/files/fr/web/css/@media/forced-colors/index.md @@ -1,10 +1,6 @@ --- title: forced-colors slug: Web/CSS/@media/forced-colors -tags: - - CSS - - Caractéristique média - - Reference translation_of: Web/CSS/@media/forced-colors --- {{CSSRef}}{{SeeCompatTable}}{{draft}} @@ -30,21 +26,25 @@ Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illis ### HTML - <div class="colors">quelques couleurs étranges</div> +```html +<div class="colors">quelques couleurs étranges</div> +``` ### CSS - .colors { - background-color: red; - color: grey; - } - - @media (forced-colors: active) { - .colors { - background-color: white; - color: black; - } - } +```css +.colors { + background-color: red; + color: grey; +} + +@media (forced-colors: active) { + .colors { + background-color: white; + color: black; + } +} +``` ### Résultat diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md index 16467d0867..33d90f2617 100644 --- a/files/fr/web/css/@media/prefers-contrast/index.md +++ b/files/fr/web/css/@media/prefers-contrast/index.md @@ -1,10 +1,6 @@ --- title: prefers-contrast slug: Web/CSS/@media/prefers-contrast -tags: - - CSS - - Caractéristique média - - Reference translation_of: Web/CSS/@media/prefers-contrast --- {{CSSRef}}{{SeeCompatTable}}{{draft}} @@ -30,19 +26,23 @@ Par défaut, cet exemple présente un contraste trop faible pour la lisibilité. ### HTML - <div class="contrast">Une boîte avec un contraste faible.</div> +```html +<div class="contrast">Une boîte avec un contraste faible.</div> +``` ### CSS - .contrast { -  color: grey; - } - - @media (prefers-contrast: high) { - .contrast { -  color: black; - } - } +```css +.contrast { + color: grey; +} + +@media (prefers-contrast: high) { + .contrast { + color: black; + } +} +``` ### Résultat diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md index 602abf4761..6bd87e7c10 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.md +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -1,13 +1,6 @@ --- title: prefers-reduced-motion slug: Web/CSS/@media/prefers-reduced-motion -tags: - - '@media' - - Accessibility - - CSS - - Media Queries - - Reference - - media feature translation_of: Web/CSS/@media/prefers-reduced-motion --- {{CSSRef}} @@ -104,7 +97,7 @@ Cet exemple possède une animation désagréable qui sera exécutée à moins d' ### Résultat -{{EmbedLiveSample("example")}} +{{EmbedLiveSample("Exemple")}} ## Spécifications diff --git a/files/fr/web/css/_colon_-moz-list-number/index.md b/files/fr/web/css/_colon_-moz-list-number/index.md index 96b4f9ca7f..0ad319b1f0 100644 --- a/files/fr/web/css/_colon_-moz-list-number/index.md +++ b/files/fr/web/css/_colon_-moz-list-number/index.md @@ -1,11 +1,6 @@ --- title: '::-moz-list-number' slug: Web/CSS/:-moz-list-number -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/:-moz-list-number original_slug: Web/CSS/::-moz-list-number --- @@ -40,7 +35,7 @@ li::-moz-list-number { ### Résultat -{{EmbedLiveSample("Exemple")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md index 55acde836f..5c0f9b29bc 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md @@ -1,12 +1,6 @@ --- title: ':-moz-only-whitespace' slug: Web/CSS/:-moz-only-whitespace -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference - - Sélecteur translation_of: Web/CSS/:-moz-only-whitespace --- {{CSSRef}}{{SeeCompatTable}} @@ -57,7 +51,7 @@ div { ### Résultat -{{EmbedLiveSample("Exemple", "100%", "50")}} +{{EmbedLiveSample("Exemples", "100%", "50")}} ## Spécifications diff --git a/files/fr/web/css/_colon_checked/index.md b/files/fr/web/css/_colon_checked/index.md index 14955f7d3e..166fc81dac 100644 --- a/files/fr/web/css/_colon_checked/index.md +++ b/files/fr/web/css/_colon_checked/index.md @@ -1,10 +1,6 @@ --- title: ':checked' slug: Web/CSS/:checked -tags: - - CSS - - Pseudo-classe - - Reference translation_of: Web/CSS/:checked --- {{CSSRef}} @@ -85,7 +81,7 @@ option:checked { #### Résultat -{{EmbedLiveSample("exemple_simple")}} +{{EmbedLiveSample("Exemple_simple")}} ## Spécifications diff --git a/files/fr/web/css/_colon_lang/index.md b/files/fr/web/css/_colon_lang/index.md index ca2ccc2a82..f9be7bd492 100644 --- a/files/fr/web/css/_colon_lang/index.md +++ b/files/fr/web/css/_colon_lang/index.md @@ -1,10 +1,6 @@ --- title: ':lang' slug: Web/CSS/:lang -tags: - - CSS - - Pseudo-classe - - Reference translation_of: Web/CSS/:lang --- {{CSSRef}} @@ -84,7 +80,7 @@ Dans cet exemple, la pseudo-classe `:lang` est utilisée pour faire correspondre ### Résultat -{{EmbedLiveSample('Exemple', '350')}} +{{EmbedLiveSample('Exemples', '350')}} ## Spécifications diff --git a/files/fr/web/css/_colon_local-link/index.md b/files/fr/web/css/_colon_local-link/index.md index 1f845e8a46..585db97844 100644 --- a/files/fr/web/css/_colon_local-link/index.md +++ b/files/fr/web/css/_colon_local-link/index.md @@ -36,7 +36,7 @@ a:local-link { ### Résultat -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/css/_colon_nth-child/index.md b/files/fr/web/css/_colon_nth-child/index.md index 46df691595..21e1859f52 100644 --- a/files/fr/web/css/_colon_nth-child/index.md +++ b/files/fr/web/css/_colon_nth-child/index.md @@ -1,10 +1,6 @@ --- title: ':nth-child' slug: Web/CSS/:nth-child -tags: - - CSS - - Pseudo-classe - - Reference translation_of: Web/CSS/:nth-child --- {{CSSRef}} @@ -162,7 +158,7 @@ span, div em { #### Résultat -{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}} +{{EmbedLiveSample('Exemple_démonstratif','100%', '550')}} ## Spécifications diff --git a/files/fr/web/css/_colon_nth-col/index.md b/files/fr/web/css/_colon_nth-col/index.md index e872c7f848..fdef2a2689 100644 --- a/files/fr/web/css/_colon_nth-col/index.md +++ b/files/fr/web/css/_colon_nth-col/index.md @@ -64,7 +64,7 @@ td { #### Résultat -{{EmbedLiveSample('basic_example', 250, 200)}} +{{EmbedLiveSample('Exemples', 250, 200)}} ## Spécifications diff --git a/files/fr/web/css/_colon_nth-last-col/index.md b/files/fr/web/css/_colon_nth-last-col/index.md index 212050450f..d9b9e3a6e2 100644 --- a/files/fr/web/css/_colon_nth-last-col/index.md +++ b/files/fr/web/css/_colon_nth-last-col/index.md @@ -64,7 +64,7 @@ td { #### Résultat -{{EmbedLiveSample('basic_example', 250, 200)}} +{{EmbedLiveSample('Exemple_basique', 250, 200)}} ## Spécifications diff --git a/files/fr/web/css/_colon_target-within/index.md b/files/fr/web/css/_colon_target-within/index.md index 83508162f1..c083b22e9a 100644 --- a/files/fr/web/css/_colon_target-within/index.md +++ b/files/fr/web/css/_colon_target-within/index.md @@ -64,7 +64,7 @@ p:target i { #### Résultat -{{EmbedLiveSample('examples', 500, 300)}} +{{EmbedLiveSample('Exemples', 500, 300)}} ## Spécifications diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md index ace0f0dc57..48496488a7 100644 --- a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md @@ -1,11 +1,6 @@ --- title: '::-webkit-meter-optimum-value' slug: Web/CSS/::-webkit-meter-optimum-value -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/::-webkit-meter-optimum-value --- {{CSSRef}}{{Non-standard_header}} @@ -36,7 +31,7 @@ meter::-webkit-meter-optimum-value { ### Résultat -{{EmbedLiveSample('Examples', '100%', 50)}} +{{EmbedLiveSample('Exemples', '100%', 50)}} ## Spécifications diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md index b7b414c9a9..b7c1be3389 100644 --- a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md @@ -1,11 +1,6 @@ --- title: '::-webkit-meter-suboptimum-value' slug: Web/CSS/::-webkit-meter-suboptimum-value -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/::-webkit-meter-suboptimum-value --- {{CSSRef}}{{Non-standard_header}} @@ -32,7 +27,7 @@ meter::-webkit-meter-suboptimum-value { ### Résultat -{{EmbedLiveSample('Examples', '100%', 50)}} +{{EmbedLiveSample('Exemples', '100%', 50)}} > **Note :** Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink. diff --git a/files/fr/web/css/accent-color/index.md b/files/fr/web/css/accent-color/index.md index b2b898ad63..3b1da90c80 100644 --- a/files/fr/web/css/accent-color/index.md +++ b/files/fr/web/css/accent-color/index.md @@ -70,7 +70,7 @@ input.custom { #### Résultat -{{EmbedLiveSample('Setting_a_custom_accent_color', 500, 200)}} +{{EmbedLiveSample('Exemples', 500, 200)}} ## Spécifications diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md index b19cf1ca40..f06d597f72 100644 --- a/files/fr/web/css/align-self/index.md +++ b/files/fr/web/css/align-self/index.md @@ -1,10 +1,6 @@ --- title: align-self slug: Web/CSS/align-self -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/align-self --- {{CSSRef}} @@ -90,6 +86,8 @@ align-self: unset; {{csssyntax}} +## Exemples + ### CSS ```css diff --git a/files/fr/web/css/all/index.md b/files/fr/web/css/all/index.md index cc10151b9d..eb9cec8e9d 100644 --- a/files/fr/web/css/all/index.md +++ b/files/fr/web/css/all/index.md @@ -1,10 +1,6 @@ --- title: all slug: Web/CSS/all -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/all --- {{CSSRef}} @@ -89,7 +85,7 @@ body { font-size: small; background-color: #F0F0F0; color:blue; } blockquote { background-color: skyblue; color: red; } ``` -{{EmbedLiveSample("ex0", "200", "125")}} +{{EmbedLiveSample("Pas_de_propriété_all", "200", "125")}} L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous. @@ -105,7 +101,7 @@ blockquote { background-color: skyblue; color: red; } blockquote { all: unset; } ``` -{{EmbedLiveSample("ex1", "200", "125")}} +{{EmbedLiveSample("all:unset", "200", "125")}} L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (_inline_) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est `transparent` (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours `small` (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée). @@ -121,7 +117,7 @@ blockquote { background-color: skyblue; color: red; } blockquote { all: initial; } ``` -{{EmbedLiveSample("ex2", "200", "125")}} +{{EmbedLiveSample("all:initial", "200", "125")}} L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut `transparent` (sa valeur initiale), {{cssxref("font-size")}} vaut `normal` (valeur initiale) et {{cssxref("color")}} vaut `black` (sa valeur initiale). @@ -137,7 +133,7 @@ blockquote { background-color: skyblue; color: red; } blockquote { all: inherit; } ``` -{{EmbedLiveSample("ex3", "200", "125")}} +{{EmbedLiveSample("all:inherit", "200", "125")}} L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut `#F0F0F0` (valeur héritée), {{cssxref("font-size")}} vaut `small` (valeur héritée) et {{cssxref("color")}} vaut `blue` (valeur héritée). diff --git a/files/fr/web/css/animation/index.md b/files/fr/web/css/animation/index.md index 18e3912edd..2c15a43411 100644 --- a/files/fr/web/css/animation/index.md +++ b/files/fr/web/css/animation/index.md @@ -1,11 +1,6 @@ --- title: animation slug: Web/CSS/animation -tags: - - Animations - - CSS - - Propriété - - Reference translation_of: Web/CSS/animation --- {{CSSRef}} @@ -216,7 +211,7 @@ window.addEventListener('load', function () { }) ``` -{{EmbedLiveSample("animation_example", "100%", 260, "", "", "example-outcome-frame")}} +{{EmbedLiveSample("Exemple_danimation", "100%", 260, "", "", "example-outcome-frame")}} [Une liste des propriétés qui peuvent être animées](/fr/docs/Web/CSS/Liste_propriétés_CSS_animées) est disponible. On notera que cette liste est également valable pour [les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS). diff --git a/files/fr/web/css/attr()/index.md b/files/fr/web/css/attr()/index.md index 89a7c5fdd1..b5bc479199 100644 --- a/files/fr/web/css/attr()/index.md +++ b/files/fr/web/css/attr()/index.md @@ -1,10 +1,6 @@ --- title: attr() slug: Web/CSS/attr() -tags: - - CSS - - Fonction - - Reference translation_of: Web/CSS/attr() --- {{CSSRef}} @@ -349,7 +345,7 @@ body, #### Résultat -{{EmbedLiveSample("Valeur_<color>", "100%", "50")}} +{{EmbedLiveSample("Valeur_color", "100%", "50")}} ## Spécifications diff --git a/files/fr/web/css/border-image/index.md b/files/fr/web/css/border-image/index.md index 83424b2d0f..b9a0348850 100644 --- a/files/fr/web/css/border-image/index.md +++ b/files/fr/web/css/border-image/index.md @@ -1,11 +1,6 @@ --- title: border-image slug: Web/CSS/border-image -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference translation_of: Web/CSS/border-image --- {{CSSRef}} @@ -81,7 +76,7 @@ On découpe l'image et on la répète pour remplir la zone entre les bordures. #### Résultat -{{EmbedLiveSample('Utiliser_une_image_matricielle_répétée')}} +{{EmbedLiveSample('Utiliser_une_image_matricielle_étirée')}} ### Utiliser un dégradé diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md index 67c293ba5a..6c2aedbb70 100644 --- a/files/fr/web/css/content/index.md +++ b/files/fr/web/css/content/index.md @@ -1,10 +1,6 @@ --- title: content slug: Web/CSS/content -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/content --- {{CSSRef}} @@ -161,7 +157,7 @@ a::before{ {{EmbedLiveSample('Utiliser_les_classes', 300, 200)}} -### Utiliser les attributs d’image et d’élément +### Utiliser les attributs d'image et d'élément Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après. @@ -201,7 +197,7 @@ li { #### Résultat -{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}} +{{EmbedLiveSample("Utiliser_les_attributs_dimage_et_délément", '100%', 160)}} ### Remplacer un élément diff --git a/files/fr/web/css/css_animations/using_css_animations/index.md b/files/fr/web/css/css_animations/using_css_animations/index.md index d2a8d98d17..df3fe53857 100644 --- a/files/fr/web/css/css_animations/using_css_animations/index.md +++ b/files/fr/web/css/css_animations/using_css_animations/index.md @@ -1,11 +1,6 @@ --- title: Utiliser les animations CSS slug: Web/CSS/CSS_Animations/Using_CSS_animations -tags: - - Avancé - - CSS - - Guide - - Reference translation_of: Web/CSS/CSS_Animations/Using_CSS_animations original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS --- @@ -95,7 +90,7 @@ her in a languid, sleepy voice.</p> > **Note :** Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle. -{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}} +{{EmbedLiveSample("Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur","100%","250")}} ### Ajouter une autre étape diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md index 44864170d2..38634a7643 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md @@ -1,2619 +1,9 @@ --- title: Générateur de border-image slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator -tags: - - CSS - - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}. -```html hidden - <div id="container"> - - <div id="gallery"> - <div id="image-gallery"> - <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/> - <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/> - <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/> - <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/> - <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/> - <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/> - </div> - </div> - - <div id="load-actions" class="group section"> - <div id="toggle-gallery" data-action="hide"> </div> - <div id="load-image" class="button"> Upload image </div> - <input id="remote-url" type="text" placeholder="Charger une image depuis une URL"/> - <div id="load-remote" class="button"> </div> - </div> - - <div id="general-controls" class="group section"> - <div class="name"> Options </div> - <div class="separator"></div> - <div class="property"> - <div class="name">Échelle</div> - <div class="ui-input-slider" data-topic="scale" - data-unit="%" data-max="300" data-sensivity="10"> - </div> - </div> - <div class="separator"></div> - <div class="property"> - <div class="name">Déplaçable</div> - <div class="ui-checkbox" data-topic='drag-subject'></div> - </div> - <div class="property right"> - <div class="name">Hauteur de la section</div> - <div class="ui-input-slider" data-topic="preview-area-height" - data-min="400" data-max="1000"> - </div> - </div> - </div> - - <div id="preview_section" class="group section"> - <div id="subject"> - <div class="guideline" data-axis="Y" data-topic="slice-top"></div> - <div class="guideline" data-axis="X" data-topic="slice-right"></div> - <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div> - <div class="guideline" data-axis="X" data-topic="slice-left"></div> - </div> - <div id="preview"> </div> - </div> - - <!-- controls --> - <div id="controls" class="group section"> - - <!-- border-image-slice --> - <div id="border-slice-control" class="category"> - <div class="title"> border-image-slice </div> - <div class="property"> - <div class="name">fill</div> - <div class="ui-checkbox" data-topic='slice-fill'></div> - </div> - </div> - - <!-- border-image-width --> - <div id="border-width-control" class="category"> - <div class="title"> border-image-width </div> - </div> - - <!-- border-image-outset --> - <div id="border-outset-control" class="category"> - <div class="title"> border-image-outset </div> - </div> - - <!-- other-settings --> - <div id="aditional-properties" class="category"> - <div class="title"> Autres propriétés </div> - <div class="property"> - <div class="name"> repeat-x </div> - <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"> - <div data-value="0">repeat</div> - <div data-value="0">stretch</div> - <div data-value="0">round</div> - </div> - </div> - <div class="property"> - <div class="name"> repeat-y </div> - <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"> - <div data-value="1">repeat</div> - <div data-value="1">stretch</div> - <div data-value="1">round</div> - </div> - </div> - <div class="property"> - <div class="ui-input-slider" data-topic="font-size" data-info="em size" - data-unit="px" data-value="12" data-sensivity="3"> - </div> - </div> - - <div class="property"> - <div class="ui-input-slider" data-topic="preview-width" data-info="width" - data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> - </div> - <div class="property"> - <div class="ui-input-slider" data-topic="preview-height" data-info="height" - data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> - </div> - </div> - </div> - - - <div id="output" class="category"> - <div class="title"> Code CSS </div> - <div class="css-property"> - <span class="name"> border-image-slice: </span> - <span id="out-border-slice" class="value"> </span> - </div> - <div class="css-property"> - <span class="name"> border-image-width: </span> - <span id="out-border-width" class="value"> </span> - </div> - <div class="css-property"> - <span class="name"> border-image-outset: </span> - <span id="out-border-outset" class="value"> </span> - </div> - <div class="css-property"> - <span class="name"> border-image-repeat: </span> - <span id="out-border-repeat" class="value"> </span> - </div> - <div class="css-property"> - <span class="name"> border-image-source: </span> - <span id="out-border-source" class="value"> </span> - </div> - </div> - - </div> - </div> -``` - -```css hidden -/* GRID OF TWELVE - * ========================================================================== */ - -.span_12 { - width: 100%; -} - -.span_11 { - width: 91.46%; -} - -.span_10 { - width: 83%; -} - -.span_9 { - width: 74.54%; -} - -.span_8 { - width: 66.08%; -} - -.span_7 { - width: 57.62%; -} - -.span_6 { - width: 49.16%; -} - -.span_5 { - width: 40.7%; -} - -.span_4 { - width: 32.24%; -} - -.span_3 { - width: 23.78%; -} - -.span_2 { - width: 15.32%; -} - -.span_1 { - width: 6.86%; -} - - -/* SECTIONS - * ========================================================================== */ - -.section { - clear: both; - padding: 0px; - margin: 0px; -} - -/* GROUPING - * ========================================================================== */ - - -.group:before, .group:after { - content: ""; - display: table; -} - -.group:after { - clear:both; -} - -.group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -/* GRID COLUMN SETUP - * ========================================================================== */ - -.col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; -} - -.col:first-child { - margin-left: 0; -} /* all browsers except IE6 and lower */ - - - -/* - * UI Component - */ - -.ui-input-slider { - height: 20px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.ui-input-slider * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Input Slider */ - -.ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; -} - -.ui-input-slider-right { - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; -} - -.ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; -} - -.ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -/*************************************************************************************/ -/*************************************************************************************/ - -/* - * UI DropDown - */ - -/* Dropdown */ - -.ui-dropdown { - height: 2em; - width: 120px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - font-size: 12px; - - background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); - background-position: right center; - background-repeat: no-repeat; - background-color: #359740; - - position: relative; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-dropdown:hover { - cursor: pointer; - background-color: #208B20; -} - -/* Dropdown Select Button */ - -.ui-dropdown-select { - height: inherit; - padding: 0 0.75em; - color: #FFF; - line-height: 2em; -} - -/* Dropdown List */ - -.ui-dropdown-list { - width: 100%; - height: 150px; - max-height: 150px; - margin: 0; - padding: 0 0.3em; - - border: 3px solid #3490D2; - border-color: #208B20; - background: #666; - background-color: #EEF1F5; - color: #000; - - position: absolute; - top: 2em; - left: 0; - z-index: 100; - - overflow: hidden; - transition: all 0.3s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-dropdown-list:hover { - overflow: auto; -} - -.ui-dropdown-list[data-hidden='true'] { - height: 0 !important; - opacity: 0; - visibility: hidden; -} - -.ui-dropdown[data-position='left'] .ui-dropdown-list { - left: -100%; - top: 0; -} - -.ui-dropdown[data-position='right'] .ui-dropdown-list { - left: 100%; - top: 0; -} - -.ui-dropdown-list > div { - width: 100%; - height: 1.6em; - margin: 0.3em 0; - padding: 0.3em; - line-height: 1em; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-dropdown-list > div:hover { - background: #3490D2; - color:#FFF; - border-radius: 2px; - cursor: pointer; -} - - -/*************************************************************************************/ -/*************************************************************************************/ - -/* - * UI Button - */ - -/* Checkbox */ - -.ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-checkbox > input { - display: none; -} - -.ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; - - background-color: #888; - background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); - background-position: center center; - background-repeat: no-repeat; - - color: #FFF; - border-radius: 2px; - font-weight: bold; - float: left; -} - -.ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; -} - -.ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; -} - -.ui-checkbox > label:hover { - cursor: pointer; -} - -.ui-checkbox > input:checked + label { - background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); - background-color: #379B4A; -} - -/*************************************************************************************/ -/*************************************************************************************/ - -/* - * BORDER IMAGE GENERATOR TOOL - */ - -body { - width: 100%; - margin: 0 auto; - padding: 0 0 20px 0; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/ - border: 1px solid #EEE; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -body[data-move='X'] { - cursor: w-resize !important; -} - -body[data-move='Y'] { - cursor: s-resize !important; -} - -#container { - width: 100%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -[data-draggable='true']:hover { - cursor: move; -} - -[data-draggable='true']:hover > * { - cursor: default; -} - - - -/******************************************************************************/ -/******************************************************************************/ - -/* - * Border Image Picker - */ - -#gallery { - box-shadow: 0 0 3px 0 #BABABA; -} - -#image-gallery { - width: 600px; - height: 100px; - margin: 0 auto; - transition: margin 0.4s; -} - -#image-gallery .image { - height: 80px; - float: left; - margin: 10px; - opacity: 0.5; - background-color: #FFF; - box-shadow: 0px 0px 3px 1px #BABABA; -} - -#image-gallery .image[selected="true"] { - box-shadow: 0px 0px 3px 1px #3BBA52; - opacity: 1; -} - -#image-gallery .image:hover { - cursor: pointer; - box-shadow: 0px 0px 3px 1px #30ACE5; - opacity: 1; -} - -#image-gallery[data-collapsed='true'] { - margin-top: -100px; -} - -/* Load Menu */ - -#load-actions { - margin: 10px 0; -} - -#toggle-gallery { - width: 30px; - height: 25px; - margin: 10px; - color: #FFF; - - background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); - background-repeat: no-repeat; - background-position: top 4px center; - background-color: #888888 !important; - - border-radius: 2px; - float: left; -} - -#toggle-gallery:hover { - cursor: pointer; -} - -#toggle-gallery[data-action='show'] { - background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png'); - background-color: #888888 !important; -} - -#toggle-gallery[data-action='hide'] { - background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); -} - -.button { - width: 100px; - height: 25px; - margin: 10px; - color: #FFF; - text-align: center; - font-size: 12px; - line-height: 25px; - background-color: #379B4A; - border-radius: 2px; - float: left; -} - -.button:hover { - cursor: pointer; - background-color: #3380C4; -} - -#load-image { - float: left; -} - -#load-remote { - width: 30px; - background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png'); - background-repeat: no-repeat; - background-position: center center; -} - -#remote-url { - width: 200px; - height: 23px; - margin: 10px; - padding: 0 5px; - border: 1px solid #379B4A; - border-radius: 2px; - float: left; - - transition: width 0.5s; -} - -#remote-url:focus { - box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */ - border-color: rgba(55, 155, 74, 0.5); - width: 450px; -} - -/* - * Visible Area - */ - -#preview_section { - position: relative; - min-height: 400px; -} - -/* Image Control */ - -#subject { - width: 300px; - height: 300px; - background-repeat: no-repeat; - background-size: 100%; - background-color: #FFF; - border: 1px solid #CCC; - - position: absolute; - z-index: 10; - top: 15%; - left: 10%; - - box-shadow: 0 0 3px 0 #BABABA; - transition-property: width, height; - transition-duration: 0.1s; -} - -#subject .guideline { - background-color: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(0, 0, 0, 0.3); - position: absolute; -} - -#subject .guideline:hover { - background-color: #F00; -} - -#subject .guideline[data-active] { - background-color: #F00; - z-index: 10; -} - -#subject .guideline[data-axis='X'] { - width: 1px; - height: 100%; - top: -1px; -} - -#subject .guideline[data-axis='Y'] { - width: 100%; - height: 1px; - left: -1px; -} - -#subject .guideline[data-axis='X']:hover { - cursor: w-resize; -} - -#subject .guideline[data-axis='Y']:hover { - cursor: s-resize; -} - - -#subject .relative { - position: relative; - font-size: 12px; -} - -#subject .tooltip, #subject .tooltip2 { - width: 40px; - height: 20px; - line-height: 20px; - font-size: 12px; - text-align: center; - - position: absolute; - opacity: 0.5; - transition: opacity 0.25s; -} - -#subject .tooltip { - background: #EEE; - border-radius: 2px; - border: 1px solid #CCC; -} - -#subject .tooltip2{ - color: #555; -} - -#subject [data-active] > * { - opacity: 1; -} - -#subject .tooltip[data-info='top'] { - top: -10px; - right: -50px; -} - -#subject .tooltip[data-info='right'] { - bottom: -30px; - right: -20px; -} - -#subject .tooltip[data-info='bottom'] { - top: -10px; - left: -50px; -} - -#subject .tooltip[data-info='left'] { - top: -30px; - right: -20px; -} - -#subject .tooltip2[data-info='top'] { - top: -10px; - left: -50px; -} - -#subject .tooltip2[data-info='right'] { - top: -30px; - right: -20px; -} - -#subject .tooltip2[data-info='bottom'] { - top: -10px; - right: -50px; -} - -#subject .tooltip2[data-info='left'] { - bottom: -30px; - right: -20px; -} - -/* Preview */ - -#preview { - width: 30%; - height: 50%; - background-color: #FFF; - text-align: center; - overflow: hidden; - position: absolute; - z-index: 10; - - left: 60%; - top: 15%; - - border-radius: 2px; - border-image-width: 20px; - border-image-repeat: round; - box-shadow: 0 0 3px 0 #BABABA; -} - -#preview .resize-handle { - width: 10px; - height: 10px; - background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; - position: absolute; - bottom: 0; - right: 0; -} - -#preview .resize-handle:hover { - cursor: nw-resize; -} - - -/* - * General controls MENU - */ - -#general-controls { - padding: 10px 30px; - background-color: #FFF; - opacity: 0.95; - color: #888; - /*border-radius: 2px;*/ - box-shadow: 0 0 3px 0 #BABABA; -} - -#general-controls .property { - width: 130px; - float: left; -} - -#general-controls .name { - height: 20px; - margin: 0 10px 0 0; - line-height: 100%; - text-align: right; - float: left; -} - -#general-controls .right { - width: 200px; - float: right; -} - -#general-controls .ui-checkbox label { - height: 10px; -} - -#general-controls .separator { - height: 40px; - width: 1px; - margin: -10px 15px; - background-color: #EEE; - float: left; -} - -/* - * Controls - */ - -#controls { - color: #444; - margin: 10px 0 0 0; -} - -#controls .category { - height: 190px; - min-width: 260px; - margin: 10px; - padding: 10px; - border: 1px solid #CCC; - border-radius: 3px; - float: left; - - box-shadow: 0 0 3px 0 #BABABA; - transition: all 0.25s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -@media (min-width: 880px) { - #controls .category { - width: 30%; - margin-left: 1.66%; - margin-right: 1.66%; - } -} - -@media (max-width: 879px) { - #controls .category { - width: 37%; - margin-left: 6.5%; - margin-right: 6.5%; - } -} - -#controls .category .title { - width: 100%; - height: 30px; - margin: 0 0 10px 0; - line-height: 25px; - - text-align: center; - color: #AAA; -} - -#controls .category:hover .title { - color: #777; -} - -#controls .category > .group { - border: 1px solid #CCC; - border-radius: 2px; -} - - -/* property */ - -#controls .property { - width: 250px; - height: 20px; - margin: 5px auto; -} - -#controls .property .ui-input-slider { - margin: 0; - float: left; -} - -#controls .property .ui-input-slider-info { - width: 60px; -} - -#controls .property .ui-input-slider-left { - transition: opacity 0.15s; - opacity: 0; -} - -#controls .property .ui-input-slider-right { - transition: opacity 0.15s; - opacity: 0; -} - -#controls .property .name { - width: 60px; - height: 20px; - padding: 0px 10px 0px 0px; - text-align: right; - line-height: 100%; - float: left; -} - -#controls .property .config { - width: 20px; - height: 20px; - float: left; - background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat; - opacity: 0.5; -} - -#controls .property .config:hover { - cursor: pointer; - opacity: 1; -} - -#controls .ui-input-slider:hover .ui-input-slider-right { - opacity: 1; -} - -#controls .ui-input-slider:hover .ui-input-slider-left { - opacity: 1; -} - -#controls .property .ui-dropdown { - margin: 0 10px; - float: left; -} - - -#controls .property .ui-checkbox { - margin: 0 0 0 16px; - float: left; -} - -#controls .property .ui-checkbox label { - height: 0.85em; - width: 10px; -} - -/* dropdowns */ -#controls .ui-dropdown { - width: 50px; - height: 1.7em; - border-radius: 2px; -} - -#controls .ui-dropdown-select { - line-height: 1.6em; -} - -#controls .ui-dropdown-list { - top: 20px; -} - -#controls .ui-dropdown-list { - border-width: 1px; - text-align: center; -} - -#controls .ui-dropdown-list:hover { - overflow: hidden; -} - -#controls .border-repeat { - margin: 0 0 0 16px !important; - width: 80px; -} - -#controls .border-repeat .ui-dropdown-list { - height: 6.2em; - border-width: 1px; - text-align: center; -} - -/* border-image-slice */ - - -#border-slice-control .ui-dropdown-list { - height: 4.3em; -} - -/* border-image-width */ - -#border-width-control .ui-dropdown-list { - height: 6.2em; -} - -/* border-image-outset */ - -#border-outset-control .ui-dropdown-list { - height: 4.3em; -} - -#aditional-properties .property { - width: 200px; -} - -#aditional-properties .ui-input-slider > input { - width: 80px !important; -} - -/* unit settings panel */ - -#unit-settings { - padding: 10px; - position: absolute; - - background: #FFF; - - font-size: 12px; - border-radius: 3px; - border: 1px solid #CCC; - text-align: center; - color: #555; - - position: absolute; - z-index: 1000; - - box-shadow: 0 0 3px 0 #BABABA; - transition: all 0.25s; -} - -#unit-settings .title { - width: 100%; - margin: -5px auto 0; - - color: #666; - font-size: 14px; - font-weight: bold; - line-height: 25px; - border-bottom: 1px solid #E5E5E5; -} - -#unit-settings .ui-input-slider { - margin: 10px 0 0 0; -} - -#unit-settings .ui-input-slider-info { - width: 50px; - line-height: 1.5em; -} - -#unit-settings input { - font-size: 12px; - width: 40px !important; -} - -#unit-settings .close { - width: 16px; - height: 16px; - background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center; - background-size: 75%; - - position: absolute; - top: 4px; - right: 4px; - opacity: 0.5; -} - -#unit-settings .close:hover { - cursor: pointer; - opacity: 1; -} - -#unit-settings[data-active='true'] { - opacity: 1; -} - -#unit-settings[data-active='false'] { - opacity: 0; - top: -100px !important; -} - -/* - * CSS Output Code - */ - -#output { - padding: 10px; - border: 2px dashed #888 !important; - box-shadow: none !important; - border-radius: 3px; - overflow: hidden; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; - user-select: text; -} - - -@media (min-width: 880px) { - #output { - width: 63.33% !important; - } -} - -@media (max-width: 879px) { - #output { - width: 87% !important; - } -} - - -#output .title { - width: 100%; - height: 30px; - margin: 0 0 10px 0; - line-height: 25px; - - text-align: center; - color: #AAA; -} - -#output .css-property { - width: 100%; - margin: 0; - color: #555; - font-size: 14px; - line-height: 18px; - float: left; -} - -#output .css-property .name { - width: 30%; - font-weight: bold; - text-align: right; - float: left; -} - -#output .css-property .value { - width: 65%; - padding: 0 2.5%; - word-break: break-all; - float: left; -} -``` - -```js hidden -'use strict'; - -/** - * UI-SlidersManager - */ - -var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - input.style.width = 50 + obj.precision * 10 + 'px'; - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseFloat(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - return input; - }; - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - document.removeEventListener("mousemove", sliderMotion); - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - - document.addEventListener("mouseup", slideEnd); - document.addEventListener("mousemove", sliderMotion); - }); - - var slideEnd = function slideEnd(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }; - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - }; - - return slider; - }; - - var InputSlider = function(node) { - var min = parseFloat(node.getAttribute('data-min')); - var max = parseFloat(node.getAttribute('data-max')); - var step = parseFloat(node.getAttribute('data-step')); - var value = parseFloat(node.getAttribute('data-value')); - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensivity = node.getAttribute('data-sensivity') | 0; - var precision = node.getAttribute('data-precision') | 0; - - this.min = isNaN(min) ? 0 : min; - this.max = isNaN(max) ? 100 : max; - this.precision = precision >= 0 ? precision : 0; - this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); - this.topic = topic; - this.node = node; - this.unit = unit === null ? '' : unit; - this.sensivity = sensivity > 0 ? sensivity : 5; - value = isNaN(value) ? this.min : value; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - }; - - InputSlider.prototype.setInputValue = function setInputValue() { - this.input.value = this.value.toFixed(this.precision) + this.unit; - }; - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = parseFloat(value.toFixed(slider.precision)); - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - slider.setInputValue(); - - if (send_notify === false) - return; - - notify.call(slider); - }; - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - }; - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - }; - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - }; - - var setStep = function setStep(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.step = parseFloat(value); - setValue(topic, slider.value); - }; - - var setPrecision = function setPrecision(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - slider.precision = value; - - var step = parseFloat(slider.step.toFixed(value)); - if (step === 0) - slider.step = 1 / Math.pow(10, value); - - setValue(topic, slider.value); - }; - - var setSensivity = function setSensivity(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - - slider.sensivity = value > 0 ? value : 5; - }; - - var getNode = function getNode(topic) { - return sliders[topic].node; - }; - - var getPrecision = function getPrecision(topic) { - return sliders[topic].precision; - }; - - var getStep = function getStep(topic) { - return sliders[topic].step; - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.value); - }; - - var createSlider = function createSlider(topic, label) { - var slider = document.createElement('div'); - slider.className = 'ui-input-slider'; - slider.setAttribute('data-topic', topic); - - if (label !== undefined) - slider.setAttribute('data-info', label); - - new InputSlider(slider); - return slider; - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - }; - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - setStep : setStep, - getNode : getNode, - getStep : getStep, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPrecision : setPrecision, - setSensivity : setSensivity, - getPrecision : getPrecision, - createSlider : createSlider, - }; - -})(); - - -/** - * UI-DropDown Select - */ - -var DropDownManager = (function DropdownManager() { - - var subscribers = {}; - var dropdowns = []; - var active = null; - - var visbility = ["hidden", "visible"]; - - - var DropDown = function DropDown(node) { - var topic = node.getAttribute('data-topic'); - var label = node.getAttribute('data-label'); - var selected = node.getAttribute('data-selected') | 0; - - var select = document.createElement('div'); - var list = document.createElement('div'); - var uval = 0; - var option = null; - var option_value = null; - - list.className = 'ui-dropdown-list'; - select.className = 'ui-dropdown-select'; - - while (node.firstElementChild !== null) { - option = node.firstElementChild; - option_value = option.getAttribute('data-value'); - - if (option_value === null) - option.setAttribute('data-value', uval); - - list.appendChild(node.firstElementChild); - uval++; - } - - node.appendChild(select); - node.appendChild(list); - - select.onclick = this.toggle.bind(this); - list.onclick = this.updateValue.bind(this); - document.addEventListener('click', clickOut); - - this.state = 0; - this.time = 0; - this.dropmenu = list; - this.select = select; - this.toggle(false); - this.value = {}; - this.topic = topic; - - if (label) - select.textContent = label; - else - this.setNodeValue(list.children[selected]); - - dropdowns[topic] = this; - - }; - - DropDown.prototype.toggle = function toggle(state) { - if (typeof(state) === 'boolean') - this.state = state === false ? 0 : 1; - else - this.state = 1 ^ this.state; - - if (active !== this) { - if (active) - active.toggle(false); - active = this; - } - - if (this.state === 0) - this.dropmenu.setAttribute('data-hidden', 'true'); - else - this.dropmenu.removeAttribute('data-hidden'); - - }; - - var clickOut = function clickOut(e) { - if (active.state === 0 || - e.target === active.dropmenu || - e.target === active.select) - return; - - active.toggle(false); - }; - - DropDown.prototype.updateValue = function updateValue(e) { - - if (Date.now() - this.time < 500) - return; - - if (e.target.className !== "ui-dropdown-list") { - this.setNodeValue(e.target); - this.toggle(false); - } - - this.time = Date.now(); - }; - - DropDown.prototype.setNodeValue = function setNodeValue(node) { - this.value['name'] = node.textContent; - this.value['value'] = node.getAttribute('data-value'); - - this.select.textContent = node.textContent; - this.select.setAttribute('data-value', this.value['value']); - - notify.call(this); - }; - - var createDropDown = function createDropDown(topic, options) { - - var dropdown = document.createElement('div'); - dropdown.setAttribute('data-topic', topic); - dropdown.className = 'ui-dropdown'; - - for (var i in options) { - var x = document.createElement('div'); - x.setAttribute('data-value', i); - x.textContent = options[i]; - dropdown.appendChild(x); - } - - new DropDown(dropdown); - - return dropdown; - }; - - var setValue = function setValue(topic, index) { - if (dropdowns[topic] === undefined || - index >= dropdowns[topic].dropmenu.children.length) - return; - - dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - var index = subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - }; - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-dropdown'); - size = elem.length; - for (var i = 0; i < size; i++) - new DropDown(elem[i]); - - }; - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - createDropDown : createDropDown - }; - -})(); - - -/** - * UI-ButtonManager - */ - -var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - }; - - var getNode = function getNode(topic) { - return buttons[topic].node; - }; - - var setValue = function setValue(topic, value) { - var obj = buttons[topic]; - if (obj === undefined) - return; - - obj.checkbox.checked = value; - notify.call(obj); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - }; - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - }; - -})(); - -window.addEventListener("load", function() { - BorderImage.init(); -}); - -var BorderImage = (function BorderImage() { - - var getElemById = document.getElementById.bind(document); - - var subject; - var preview; - var guidelines = []; - var positions = ['top', 'right', 'bottom', 'left']; - - var makeDraggable = function makeDraggable(elem) { - - var offsetTop; - var offsetLeft; - - elem.setAttribute('data-draggable', 'true'); - - var dragStart = function dragStart(e) { - if (e.target.getAttribute('data-draggable') !== 'true' || - e.target !== elem || e.button !== 0) - return; - - offsetLeft = e.clientX - elem.offsetLeft; - offsetTop = e.clientY - elem.offsetTop; - - document.addEventListener('mousemove', mouseDrag); - document.addEventListener('mouseup', dragEnd); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - document.removeEventListener('mousemove', mouseDrag); - document.removeEventListener('mouseup', dragEnd); - }; - - var mouseDrag = function mouseDrag(e) { - - elem.style.left = e.clientX - offsetLeft + 'px'; - elem.style.top = e.clientY - offsetTop + 'px'; - }; - - elem.addEventListener('mousedown', dragStart, false); - }; - - var PreviewControl = function PreviewControl() { - - var dragging = false; - var valueX = null; - var valueY = null; - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - valueX = e.clientX - preview.clientWidth; - valueY = e.clientY - preview.clientHeight; - dragging = true; - - document.addEventListener('mousemove', mouseDrag); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0 || dragging === false) - return; - - document.removeEventListener('mousemove', mouseDrag); - dragging = false; - }; - - var mouseDrag = function mouseDrag(e) { - InputSliderManager.setValue('preview-width', e.clientX - valueX); - InputSliderManager.setValue('preview-height', e.clientY - valueY); - }; - - var init = function init() { - - makeDraggable(preview); - makeDraggable(subject); - - var handle = document.createElement('div'); - handle.className = 'resize-handle'; - - handle.addEventListener('mousedown', dragStart); - document.addEventListener('mouseup', dragEnd); - - preview.appendChild(handle); - - }; - - return { - init: init - }; - - }(); - - var ImageReader = (function ImageReader() { - - var fReader = new FileReader(); - var browse = document.createElement('input'); - - var loadImage = function loadImage(e) { - if (browse.files.length === 0) - return; - - var file = browse.files[0]; - - if (file.type.slice(0, 5) !== 'image') - return; - - fReader.readAsDataURL(file); - - return false; - }; - - fReader.onload = function(e) { - ImageControl.loadRemoteImage(e.target.result); - }; - - var load = function load() { - browse.click(); - }; - - browse.setAttribute('type', 'file'); - browse.style.display = 'none'; - browse.onchange = loadImage; - - return { - load: load - }; - - })(); - - var ImageControl = (function ImageControl() { - - var scale = 0.5; - var imgSource = new Image(); - var imgState = null; - var selected = null; - - - var topics = ['slice', 'width', 'outset']; - var properties = {}; - properties['border1'] = { - fill : false, - - slice_values : [27, 27, 27, 27], - width_values : [20, 20, 20, 20], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [1, 1], - size : [300, 200], - preview_area : 400 - }; - - properties['border2'] = { - fill : false, - - slice_values : [33, 33, 33, 33], - width_values : [1.5, 1.5, 1.5, 1.5], - outset_values : [0, 0, 0, 0], - - slice_units : [1, 1, 1, 1], - width_units : [2, 2, 2, 2], - outset_units : [0, 0, 0, 0], - - repeat : [2, 2], - size : [300, 200], - preview_area : 400 - }; - - properties['border3'] = { - fill : true, - - slice_values : [15, 15, 15, 15], - width_values : [10, 10, 10, 10], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [2, 2], - size : [300, 200], - preview_area : 400 - }; - - properties['border4'] = { - fill : false, - - slice_values : [13, 13, 13, 13], - width_values : [13, 13, 13, 13], - outset_values : [13, 13, 13, 13], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [0, 0], - size : [300, 200], - preview_area : 400 - }; - - properties['border5'] = { - fill : false, - - slice_values : [0, 12, 0, 12], - width_values : [0, 12, 0, 12], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [0, 0], - size : [300, 200], - preview_area : 400, - }; - - properties['border6'] = { - fill : false, - - slice_values : [42, 42, 42, 42], - width_values : [42, 42, 42, 42], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [2, 2], - size : [350, 350], - preview_area : 500, - }; - - - var loadLocalImage = function loadLocalImage(source) { - var location = "images/" + source; - imgSource.src = location; - }; - - var loadRemoteImage = function loadRemoteImage(source) { - imgSource.src = source; - if (selected) - selected.removeAttribute('selected'); - Tool.setOutputCSS('source', 'url("' + source + '")'); - }; - - var pickImage = function pickImage(e) { - if (e.target.className === 'image') { - selected = e.target; - selected.setAttribute('selected', 'true'); - loadRemoteImage(e.target.src); - imgState = e.target.getAttribute('data-stateID'); - } - }; - - var loadImageState = function loadImageState(stateID) { - if (properties[stateID] === undefined) - return; - - var prop = properties[stateID]; - var topic; - var unit_array; - var value_array; - - for (var i in topics) { - for (var j=0; j<4; j++) { - topic = topics[i] + '-' + positions[j]; - unit_array = topics[i] + '_units'; - value_array = topics[i] + '_values'; - InputSliderManager.setValue(topic, prop[value_array][j]); - DropDownManager.setValue(topic, prop[unit_array][j]); - } - } - - ButtonManager.setValue('slice-fill', prop['fill']); - DropDownManager.setValue('image-repeat-X', prop['repeat'][0]); - DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]); - InputSliderManager.setValue('preview-width', prop['size'][0]); - InputSliderManager.setValue('preview-height', prop['size'][1]); - InputSliderManager.setValue('preview-area-height', prop['preview_area']); - }; - - var update = function update() { - scale = Math.min(300, (30000 / this.width) | 0); - setScale(scale); - InputSliderManager.setValue('scale', scale, false); - - subject.style.backgroundImage = 'url("' + this.src + '")'; - preview.style.borderImageSource = 'url("' + this.src + '")'; - - guidelines['slice-top'].setMax(this.height); - guidelines['slice-right'].setMax(this.width); - guidelines['slice-bottom'].setMax(this.height); - guidelines['slice-left'].setMax(this.width); - - if (imgState) - loadImageState(imgState); - }; - - var setScale = function setScale(value) { - scale = value; - var w = imgSource.width * scale / 100 | 0; - var h = imgSource.height * scale / 100 | 0; - subject.style.width = w + 'px'; - subject.style.height = h + 'px'; - - for (var i = 0; i < positions.length; i++) - guidelines['slice-' + positions[i]].updateGuidelinePos(); - }; - - var getScale = function getScale() { - return scale/100; - }; - - var toggleGallery = function toggleGallery() { - var gallery = getElemById('image-gallery'); - var button = getElemById('toggle-gallery'); - var state = 1; - button.addEventListener('click', function() { - state = 1 ^ state; - if (state === 0) { - gallery.setAttribute('data-collapsed', 'true'); - button.setAttribute('data-action', 'show'); - } - else { - gallery.removeAttribute('data-collapsed'); - button.setAttribute('data-action', 'hide'); - } - }); - }; - - var init = function init() { - var gallery = getElemById('image-gallery'); - var browse = getElemById('load-image'); - var remote = getElemById('remote-url'); - var load_remote = getElemById('load-remote'); - - remote.addEventListener('change', function(){ - loadRemoteImage(this.value); - }); - - load_remote.addEventListener('click', function(){ - loadRemoteImage(remote.value); - }); - - browse.addEventListener('click', ImageReader.load); - gallery.addEventListener('click', pickImage); - imgSource.addEventListener('load', update); - - InputSliderManager.subscribe('scale', setScale); - InputSliderManager.setValue('scale', scale); - imgState = 'border1'; - loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png'); - toggleGallery(); - }; - - return { - init: init, - getScale : getScale, - loadRemoteImage: loadRemoteImage - }; - - })(); - - var GuideLine = function GuideLine(node) { - var topic = node.getAttribute('data-topic'); - var axis = node.getAttribute('data-axis'); - - this.node = node; - this.topic = topic; - this.axis = axis; - this.info = topic.split('-')[1]; - - this.position = 0; - this.value = 0; - this.unit = 0; - this.max = 0; - this.pos = positions.indexOf(this.info); - - guidelines[topic] = this; - - var relative_container = document.createElement('div'); - var tooltip = document.createElement('div'); - var tooltip2 = document.createElement('div'); - - tooltip.className = 'tooltip'; - tooltip.setAttribute('data-info', this.info); - - tooltip2.className = 'tooltip2'; - tooltip2.textContent = this.info; - tooltip2.setAttribute('data-info', this.info); - - this.tooltip = tooltip; - - relative_container.appendChild(tooltip); - relative_container.appendChild(tooltip2); - node.appendChild(relative_container); - - var startX = 0; - var startY = 0; - var start = 0; - - var startDrag = function startDrag(e) { - startX = e.clientX; - startY = e.clientY; - start = guidelines[topic].position; - document.body.setAttribute('data-move', axis); - relative_container.setAttribute('data-active', ''); - node.setAttribute('data-active', ''); - - document.addEventListener('mousemove', updateGuideline); - document.addEventListener('mouseup', endDrag); - }; - - var endDrag = function endDrag() { - document.body.removeAttribute('data-move'); - relative_container.removeAttribute('data-active'); - node.removeAttribute('data-active'); - - document.removeEventListener('mousemove', updateGuideline); - }; - - var updateGuideline = function updateGuideline(e) { - var value; - if (topic === 'slice-top') - value = e.clientY - startY + start; - - if (topic === 'slice-right') - value = startX - e.clientX + start; - - if (topic === 'slice-bottom') - value = startY - e.clientY + start; - - if (topic === 'slice-left') - value = e.clientX - startX + start; - - if (this.unit === 0) - InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0); - else { - InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0); - } - - }.bind(this); - - node.addEventListener("mousedown", startDrag); - - InputSliderManager.subscribe(topic, this.setPosition.bind(this)); - InputSliderManager.setValue(topic, this.position); - }; - - - GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() { - if (this.unit === 0) - this.position = this.value * ImageControl.getScale() | 0; - else - this.position = this.value * this.max * ImageControl.getScale() / 100 | 0; - - this.node.style[this.info] = this.position + 'px'; - }; - - GuideLine.prototype.setPosition = function setPosition(value) { - this.value = value; - this.tooltip.textContent = value; - this.updateGuidelinePos(); - Tool.setBorderSlice(this.pos, value); - }; - - GuideLine.prototype.setMax = function setMax(max) { - this.max = max; - this.updateLimit(); - }; - - GuideLine.prototype.updateLimit = function updateLimit() { - if (this.unit === 1) - InputSliderManager.setMax(this.topic, 100); - else - InputSliderManager.setMax(this.topic, this.max); - }; - - GuideLine.prototype.setUnit = function setUnit(type) { - if (type === '%') this.unit = 1; - if (type === '') this.unit = 0; - this.updateLimit(); - }; - - /* - * Unit panel - */ - var UnitPanel = (function UnitPanel () { - - var panel; - var title; - var precision; - var step; - var unit_topic = null; // settings are made for this topic - var step_option = [1, 0.1, 0.01]; - - var updatePrecision = function updatePrecision(value) { - InputSliderManager.setPrecision('unit-step', value); - InputSliderManager.setStep('unit-step', step_option[value]); - InputSliderManager.setMin('unit-step', step_option[value]); - - if (unit_topic) - InputSliderManager.setPrecision(unit_topic, value); - }; - - var updateUnitSettings = function updateUnitSettings(value) { - if (unit_topic) - InputSliderManager.setStep(unit_topic, value); - }; - - var show = function show(e) { - var topic = e.target.getAttribute('data-topic'); - var precision = InputSliderManager.getPrecision(topic); - var step = InputSliderManager.getStep(topic); - - unit_topic = topic; - title.textContent = topic; - - panel.setAttribute('data-active', 'true'); - panel.style.top = e.target.offsetTop - 40 + 'px'; - panel.style.left = e.target.offsetLeft + 30 + 'px'; - - InputSliderManager.setValue('unit-precision', precision); - InputSliderManager.setValue('unit-step', step); - }; - - var init = function init() { - panel = document.createElement('div'); - title = document.createElement('div'); - var close = document.createElement('div'); - - step = InputSliderManager.createSlider('unit-step', 'step'); - precision = InputSliderManager.createSlider('unit-precision', 'precision'); - - InputSliderManager.setStep('unit-precision', 1); - InputSliderManager.setMax('unit-precision', 2); - InputSliderManager.setValue('unit-precision', 2); - InputSliderManager.setSensivity('unit-precision', 20); - - InputSliderManager.setValue('unit-step', 1); - InputSliderManager.setStep('unit-step', 0.01); - InputSliderManager.setPrecision('unit-step', 2); - - InputSliderManager.subscribe('unit-precision', updatePrecision); - InputSliderManager.subscribe('unit-step', updateUnitSettings); - - close.addEventListener('click', function () { - panel.setAttribute('data-active', 'false'); - }); - - title.textContent = 'Properties'; - title.className = 'title'; - close.className = 'close'; - panel.id = 'unit-settings'; - panel.setAttribute('data-active', 'false'); - panel.appendChild(title); - panel.appendChild(precision); - panel.appendChild(step); - panel.appendChild(close); - document.body.appendChild(panel); - }; - - return { - init : init, - show : show - }; - - })(); - - /** - * Tool Manager - */ - var Tool = (function Tool() { - var preview_area; - var dropdown_unit_options = [ - { '' : '--', '%' : '%'}, - { 'px' : 'px', '%' : '%', 'em' : 'em'}, - { 'px' : 'px', 'em' : 'em'}, - ]; - - var border_slice = []; - var border_width = []; - var border_outset = []; - - var border_slice_values = []; - var border_width_values = []; - var border_outset_values = []; - - var border_slice_units = ['', '', '', '']; - var border_width_units = ['px', 'px', 'px', 'px']; - var border_outset_units = ['px', 'px', 'px', 'px']; - - var border_fill = false; - var border_repeat = ['round', 'round']; - var CSS_code = { - 'source' : null, - 'slice' : null, - 'width' : null, - 'outset' : null, - 'repeat' : null - }; - - var setBorderSlice = function setBorderSlice(positionID, value) { - border_slice[positionID] = value + border_slice_units[positionID]; - updateBorderSlice(); - }; - - var updateBorderSlice = function updateBorderSlice() { - var value = border_slice.join(' '); - if (border_fill === true) - value += ' fill'; - - preview.style.borderImageSlice = value; - setOutputCSS('slice', value); - }; - - var setBorderFill = function setBorderFill(value) { - border_fill = value; - var bimgslice = border_slice.join(' ');; - if (value === true) - bimgslice += ' fill'; - - preview.style.borderImageSlice = bimgslice; - }; - - var updateBorderWidth = function updateBorderWidth() { - var value = border_width.join(' '); - preview.style.borderImageWidth = value; - setOutputCSS('width', value); - }; - - var updateBorderOutset = function updateBorderOutset() { - var value = border_outset.join(' '); - preview.style.borderImageOutset = border_outset.join(' '); - setOutputCSS('outset', value); - }; - - var setBorderRepeat = function setBorderRepeat(obj) { - border_repeat[obj.value] = obj.name; - var value = border_repeat.join(' '); - preview.style.borderImageRepeat = value; - setOutputCSS('repeat', value); - }; - - var setOutputCSS = function setOutputCSS(topic, value) { - CSS_code[topic].textContent = value + ';'; - }; - - var setPreviewFontSize = function setPreviewFontSize(value) { - preview.style.fontSize = value + 'px'; - }; - - var setPreviewWidth = function setPreviewWidth(value) { - preview.style.width = value + 'px'; - }; - - var setPreviewHeight = function setPreviewHeight(value) { - preview.style.height = value + 'px'; - }; - - var setPreviewAreaHeight = function setPreviewAreaHeight(value) { - preview_area.style.height = value + 'px'; - }; - - var updateDragOption = function updateDragOption(value) { - if (value === true) - subject.setAttribute('data-draggable', 'true'); - else - subject.removeAttribute('data-draggable'); - }; - - var createProperty = function createProperty(topic, labelID, optionsID) { - - var slider = InputSliderManager.createSlider(topic, positions[labelID]); - var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]); - - InputSliderManager.setSensivity(topic, 3); - InputSliderManager.setPrecision(topic, 1); - - var property = document.createElement('div'); - var config = document.createElement('div'); - - property.className = 'property'; - config.className = 'config'; - config.setAttribute('data-topic', topic); - config.addEventListener('click', UnitPanel.show); - - property.appendChild(slider); - property.appendChild(dropdown); - property.appendChild(config); - - return property; - }; - - var initBorderSliceControls = function initBorderSliceControls() { - var container = getElemById('border-slice-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_slice_values[id] = value; - border_slice[id] = value + border_slice_units[id]; - updateBorderSlice(); - }); - - DropDownManager.subscribe(topic, function(obj) { - guidelines[topic].setUnit(obj.value); - border_slice_units[id] = obj.value; - border_slice[id] = border_slice_values[id] + obj.value; - updateBorderSlice(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'slice-' + positions[i]; - var property = createProperty(topic, i, 0); - listenForChanges(topic, i); - - container.appendChild(property); - } - - container.appendChild(container.children[1]); - - }; - - var initBorderWidthControls = function initBorderWidthControls() { - var container = getElemById('border-width-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_width_values[id] = value; - border_width[id] = value + border_width_units[id]; - updateBorderWidth(); - }); - - DropDownManager.subscribe(topic, function(obj) { - if (obj.value === '%') - InputSliderManager.setMax(topic, 100); - else - InputSliderManager.setMax(topic, 1000); - - border_width_units[id] = obj.value; - border_width[id] = border_width_values[id] + obj.value; - updateBorderWidth(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'width-' + positions[i]; - var property = createProperty(topic, i, 1); - InputSliderManager.setMax(topic, 1000); - listenForChanges(topic, i); - - container.appendChild(property); - } - }; - - var initBorderOutsetControls = function initBorderOutsetControls() { - - var container = getElemById('border-outset-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_outset_values[id] = value; - border_outset[id] = value + border_outset_units[id]; - updateBorderOutset(); - }); - - DropDownManager.subscribe(topic, function(obj) { - border_outset_units[id] = obj.value; - border_outset[id] = border_outset_values[id] + obj.value; - updateBorderOutset(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'outset-' + positions[i]; - var property = createProperty(topic, i, 2); - InputSliderManager.setMax(topic, 1000); - listenForChanges(topic, i); - - container.appendChild(property); - } - }; - - var init = function init() { - - var gallery = - subject = getElemById('subject'); - preview = getElemById("preview"); - preview_area = getElemById("preview_section"); - - - CSS_code['source'] = getElemById("out-border-source"); - CSS_code['slice'] = getElemById("out-border-slice"); - CSS_code['width'] = getElemById("out-border-width"); - CSS_code['outset'] = getElemById("out-border-outset"); - CSS_code['repeat'] = getElemById("out-border-repeat"); - - initBorderSliceControls(); - initBorderWidthControls(); - initBorderOutsetControls(); - - var elem = document.querySelectorAll('.guideline'); - var size = elem.length; - for (var i = 0; i < size; i++) - new GuideLine(elem[i]); - - PreviewControl.init(); - - ButtonManager.subscribe('slice-fill',setBorderFill); - ButtonManager.subscribe('drag-subject', updateDragOption); - ButtonManager.setValue('drag-subject', false); - - DropDownManager.subscribe('image-repeat-X', setBorderRepeat); - DropDownManager.subscribe('image-repeat-Y', setBorderRepeat); - - InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight); - InputSliderManager.subscribe('preview-width', setPreviewWidth); - InputSliderManager.subscribe('preview-height', setPreviewHeight); - InputSliderManager.subscribe('font-size', setPreviewFontSize); - InputSliderManager.setValue('preview-width', 300); - InputSliderManager.setValue('preview-height', 200); - }; - - return { - init: init, - setOutputCSS: setOutputCSS, - setBorderSlice: setBorderSlice - }; - - })(); - - /** - * Init Tool - */ - var init = function init() { - InputSliderManager.init(); - DropDownManager.init(); - ButtonManager.init(); - UnitPanel.init(); - Tool.init(); - ImageControl.init(); - }; - - return { - init : init - }; - -})(); -``` - -{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}} +{{EmbedGHLiveSample("css-examples/tools/border-image-generator/", '100%', 1200)}} diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md index 5fb89998da..511e904324 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md @@ -1,2875 +1,12 @@ --- title: Générateur de box-shadow slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator -tags: - - CSS - - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style. -```html hidden -<div id="container"> - <div class="group section"> - <div id="layer_manager"> - <div class="group section"> - <div class="button" data-type="add"> </div> - <div class="button" data-type="move-up"> </div> - <div class="button" data-type="move-down"> </div> - </div> - <div id="stack_container"></div> - </div> - - <div id="preview_zone"> - <div id="layer_menu" class="col span_12"> - <div class="button" id="element" data-type="subject" data-title="element"> element </div> - <div class="button" id="before" data-type="subject" data-title=":before"> - :before - <span class="delete" data-type="disable"></span> - </div> - <div class="button" id="after" data-type="subject" data-title=":after"> - :after - <span class="delete" data-type="disable"></span> - </div> - <div class="ui-checkbox" data-topic='before' data-label=":before"></div> - <div class="ui-checkbox" data-topic='after' data-label=":after"></div> - </div> - - <div id="preview"> - <div id="obj-element"> - <div class="content"> </div> - <div id="obj-before"> </div> - <div id="obj-after"> </div> - </div> - </div> - </div> - </div> - - <div id="controls" class="group section"> - <div class="wrap-left"> - <div class="colorpicker category"> - <div class="title"> </div> - <div id="colorpicker" class="group"> - <div id="gradient" class="gradient"> - <div id="gradient_picker"> </div> - </div> - <div id="hue" data-topic="hue" class="hue"> - <div id="hue_selector"> </div> - </div> - <div class="info"> - <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div> - <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div> - <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div> - </div> - <div class="alpha"> - <div id="alpha" data-topic="alpha"> - <div id="alpha_selector"> </div> - </div> - </div> - <div class="info"> - <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div> - <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div> - <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div> - </div> - <div class="preview block"> - <div id="output_color"> </div> - </div> - <div class="block info"> - <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> - <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> - </div> - </div> - </div> - </div> - - <div class="wrap-right"> - - <div id="shadow_properties" class="category"> - <div class="title"> Propriétés d'ombre </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> inset </div> - <div class="ui-checkbox" data-topic='inset'></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position x </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div> - <div class="ui-slider" data-topic="posX" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div> - <div class="ui-slider-input" data-topic="posX" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position y </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div> - <div class="ui-slider" data-topic="posY" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div> - <div class="ui-slider-input" data-topic="posY" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Blur </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> - <div class="ui-slider" data-topic="blur" - data-min="0" data-max="200" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> - <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Spread </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> - <div class="ui-slider" data-topic="spread" - data-min="-100" data-max="100" data-step="1" data-value="50"> - </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> - <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> - </div> - </div> - </div> - - <div id="element_properties" class="category"> - <div class="title"> Propriétés d'ombre </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> border </div> - <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> - </div> - <div id="z-index" class="slidergroup"> - <div class="ui-slider-name"> z-index </div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> - <div class="ui-slider" data-topic="z-index" - data-min="-10" data-max="10" data-step="1"></div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> - <div class="ui-slider-input" data-topic="z-index"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> top </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div> - <div class="ui-slider" data-topic="top" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div> - <div class="ui-slider-input" data-topic="top" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> left </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> - <div class="ui-slider" data-topic="left" - data-min="-300" data-max="700" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> - <div class="ui-slider-input" data-topic="left" data-unit="px"></div> - </div> - <div id="transform_rotate" class="slidergroup"> - <div class="ui-slider-name"> Rotate </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> - <div class="ui-slider" data-topic="rotate" - data-min="-360" data-max="360" data-step="1" data-value="0"> - </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> - <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Width </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> - <div class="ui-slider" data-topic="width" - data-min="0" data-max="1000" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> - <div class="ui-slider-input" data-topic="width" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Height </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> - <div class="ui-slider" data-topic="height" - data-min="0" data-max="400" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> - <div class="ui-slider-input" data-topic="height" data-unit="px"></div> - </div> - </div> - </div> - - <div id="output" class="category"> - <div id="menu" class="menu"></div> - <div class="title"> Code CSS </div> - <div class="group" style="border-top-left-radius: 0;"> - <div class="output" data-topic="element" data-name="element" - data-prop="width height background-color position=[relative] box-shadow"> - </div> - <div class="output" data-topic="before" data-name="element:before" - data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - <div class="output" data-topic="after" data-name="element:after" - data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - </div> - </div> - </div> - </div> -</div> -``` - -```css hidden -/* GRID OF TWELVE - * ========================================================================== */ - -.span_12 { - width: 100%; -} - -.span_11 { - width: 91.46%; -} - -.span_10 { - width: 83%; -} - -.span_9 { - width: 74.54%; -} - -.span_8 { - width: 66.08%; -} - -.span_7 { - width: 57.62%; -} - -.span_6 { - width: 49.16%; -} - -.span_5 { - width: 40.7%; -} - -.span_4 { - width: 32.24%; -} - -.span_3 { - width: 23.78%; -} - -.span_2 { - width: 15.32%; -} - -.span_1 { - width: 6.86%; -} - - -/* SECTIONS - * ========================================================================== */ - -.section { - clear: both; - padding: 0px; - margin: 0px; -} - -/* GROUPING - * ========================================================================== */ - - -.group:before, .group:after { - content: ""; - display: table; -} - -.group:after { - clear:both; -} - -.group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -/* GRID COLUMN SETUP - * ========================================================================== */ - -.col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; -} - -.col:first-child { - margin-left: 0; -} /* all browsers except IE6 and lower */ - -/* - * UI Slider - */ - -.slidergroup { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.slidergroup * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -.ui-slider { - height: 10px; - width: 200px; - margin: 4px 10px; - display: block; - border: 1px solid #999; - border-radius: 3px; - background: #EEE; -} - -.ui-slider:hover { - cursor: pointer; -} - -.ui-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-slider-pointer { - width: 13px; - height: 13px; - background-color: #EEE; - border: 1px solid #2C9FC9; - border-radius: 3px; - position: relative; - top: -3px; - left: 0%; -} - -.ui-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 3px; - color: #FFF; - font-weight: bold; - text-align: center; -} - -.ui-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -.ui-slider-input > input { - margin: 0 10px; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/* - * UI Button - */ - -/* Checkbox */ - -.ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-checkbox > input { - display: none; -} - -.ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; - - background-color: #888; - background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); - background-position: center center; - background-repeat: no-repeat; - - color: #FFF; - border-radius: 3px; - font-weight: bold; - float: left; -} - -.ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; -} - -.ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; -} - -.ui-checkbox > label:hover { - cursor: pointer; -} - -.ui-checkbox > input:checked + label { - background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); - background-color: #379B4A; -} - -/* - * BOX SHADOW GENERATOR TOOL - */ - -body { - max-width: 1000px; - height: 800px; - margin: 20px auto 0; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} - -#container { - width: 100%; - padding: 2px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* container with shadows stacks */ -#stack_container { - height: 400px; - overflow: hidden; - position: relative; - border: 1px solid #CCC; - border-radius: 3px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#stack_container .container { - height: 100%; - width: 100%; - position: absolute; - left: 100%; - transition-property: left; - transition-duration: 0.5s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -#stack_container .title { - text-align: center; - font-weight: bold; - line-height: 2em; - border-bottom: 1px solid #43A6E1; - color: #666; -} - - -/* - * Stack of Layers for shadow - */ - -#layer_manager { - width: 17%; - background-color: #FEFEFE; - margin: 0 1% 0 0; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - - -#layer_manager .button { - width: 30%; - height: 25px; - margin:0 0 10px; - color: #333; - background-color: #EEE; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - border: 1px solid #CCC; - border-radius: 3px; - - display: block; - background-position: center center; - background-repeat: no-repeat; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - -#layer_manager .button:hover { - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_manager [data-type='add'] { - background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); -} - -#layer_manager [data-type='add']:hover { - background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); -} - -#layer_manager [data-type='move-up'] { - background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); - margin-left: 5%; - margin-right: 5%; -} - -#layer_manager [data-type='move-up']:hover { - background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png"); -} - -#layer_manager [data-type='move-down'] { - background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); -} - -#layer_manager [data-type='move-down']:hover { - background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); -} - -/* shadows classes */ - -#layer_manager .node { - width: 100%; - margin: 5px 0; - padding: 5px; - text-align: center; - background-color: #EEE; - border: 1px solid #DDD; - font-size: 0.75em; - line-height: 1.5em; - color: #333; - border-radius: 3px; - - position: relative; - display: block; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_manager .node:hover { - color: #FFF; - background-color: #3380C4; - cursor: pointer; -} - -/* active element styling */ - -#layer_manager [data-active='layer'] { - color: #FFF; - border: none; - background-color: #379B4A; -} - -#layer_manager [data-active='subject'] { - color: #FFF; - background-color: #467FC9; -} - -/* delete button */ - -#layer_manager .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 10px; - display: none; -} - -#layer_manager .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_manager .node:hover .delete { - display: block; -} - - -#layer_manager .stack { - padding: 0 5px; - max-height: 90%; - overflow: auto; - overflow-x: hidden; -} - - -/* - * Layer Menu - */ - -#layer_menu { - margin: 0 0 10px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button { - width: 100px; - margin: 0 5px 0 0; - padding: 2.5px; - color: #333; - background-color: #EEE; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - - position: relative; - display: block; - float: left; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button:hover { - color: #FFF; - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_menu .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 5px; - display: none; -} - -#layer_menu .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_menu .button:hover .delete { - display: block; -} - - -/* - * active element styling - */ - -#layer_menu [data-active='subject'] { - color: #FFF; - background-color: #379B4A; - border: 1px solid #379B4A; -} - - -/* Checkbox */ - -#layer_menu .ui-checkbox > label { - height: 15px; - line-height: 17px; - font-weight: normal; - width: 46px; - margin: 0 5px 0 0; -} - -#layer_menu .ui-checkbox > input:checked + label { - display: none; -} - - -/******************************************************************************/ -/******************************************************************************/ -/* - * Preview Area - */ - -#preview_zone { - width: 82%; - float: left; - -} - - -#preview { - width: 100%; - height: 400px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - cursor: move; - float: left; -} - -#preview .content { - width: 100%; - height: 100%; - display: block; -} - -#obj-element { - width: 300px; - height: 100px; - border: 1px solid #CCC; - background: #FFF; - position: relative; -} - - -#obj-before { - height: 100%; - width: 100%; - background: #999; - border: 1px solid #CCC; - text-align: left; - display : block; - position: absolute; - z-index: -1; -} - -#obj-after { - height: 100%; - width: 100%; - background: #DDD; - border: 1px solid #CCC; - text-align: right; - display : block; - position: absolute; - z-index: -1; -} - - -/******************************************************************************/ -/******************************************************************************/ - -/** - * Controls - */ - -.wrap-left { - float: left; - overflow: hidden; -} - -.wrap-right { - float: right; - overflow: hidden; -} - -.wrap-left > * { - float: left; -} - -.wrap-right > * { - float: right; -} - -@media (min-width: 960px) { - - .wrap-left { - width: 45%; - } - - .wrap-right { - width: 55%; - } -} - - -@media (max-width: 959px) { - - .wrap-left { - width: 30%; - } - - .wrap-right { - width: 70%; - } -} - - -#controls { - color: #444; - margin: 10px 0 0 0; -} - - -#controls .category { - width: 500px; - margin: 0 auto 20px; - padding: 0; - -} - -#controls .category .title { - width: 100%; - height: 1.5em; - line-height: 1.5em; - color: #AAA; - text-align: right; -} - -#controls .category > .group { - border: 1px solid #CCC; - border-radius: 3px; -} - - -/** - * Color Picker - */ - -@media (min-width: 960px) { - #controls .colorpicker { - width: 420px; - } -} - -@media (max-width: 959px) { - #controls .colorpicker { - width: 210px; - } -} - -#colorpicker { - width: 100%; - margin: 0 auto; -} - -#colorpicker .gradient { - width: 200px; - height: 200px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background-color: #F00; - float: left; -} - -#colorpicker .hue { - width: 200px; - height: 30px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5701/hue.png"); - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - float: left; -} - -#colorpicker .alpha { - width: 200px; - height: 30px; - margin: 5px; - border: 1px solid #CCC; - float: left; - background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker #alpha { - width: 100%; - height: 100%; - background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png"); - background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); -} - -#colorpicker #gradient_picker { - width: 0.5em; - height: 0.5em; - border-radius: 0.4em; - border: 2px solid #CCC; - position: relative; - top: 20%; - left: 20%; -} - -#colorpicker #hue_selector, -#colorpicker #alpha_selector { - width: 3px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; - left: 0%; -} - -/* input HSV and RGB */ -#colorpicker .info { - width: 200px; - margin: 5px; - float: left; -} - -#colorpicker .info * { - float: left; -} - -#colorpicker .info input { - margin: 0; - text-align: center; - width: 30px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#colorpicker .info span { - height: 20px; - width: 30px; - text-align: center; - line-height: 20px; - display: block; -} - -/* Preview color */ -#colorpicker .block { - width: 95px; - height: 54px; - float: left; - position: relative; -} - -#colorpicker .preview { - margin: 5px; - border: 1px solid #CCC; - background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker .preview:before { - height: 100%; - width: 50%; - left: 50%; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; -} - -#colorpicker .preview > * { - width: 50%; - height: 100%; -} - -#colorpicker #output_color { - width: 100%; - height: 100%; - position: absolute; - z-index: 2; -} - -#colorpicker .block .input { - float: right; -} - -#colorpicker [data-topic="a"] > span { - width: 50px; -} - -#colorpicker [data-topic="hexa"] { - float: right; - margin: 10px 0 0 0; -} - -#colorpicker [data-topic="hexa"] > span { - display: none; -} - -#colorpicker [data-topic="hexa"] > input { - width: 85px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* - * UI Components - */ - -/* Property */ - -.property { - height: 20px; - margin: 10px 0; -} - -.property * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -#controls .ui-slider-name { - margin: 0 10px 0 0; -} - -/* - * Output code styling - */ - -#output { - position: relative; -} - -#output .menu { - max-width: 70%; - height: 20px; - position: absolute; - top: 2px; -} - -#output .button { - width: 90px; - height: 22px; - margin: 0 5px 0 0; - text-align: center; - line-height: 20px; - font-size: 14px; - color: #FFF; - background-color: #999; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - bottom: -5px; - float:left; -} - -#output .button:hover { - color: #FFF; - background-color: #666; - cursor: pointer; -} - -#output .menu [data-active="true"] { - color: #777; - background-color: #FFF; - border: 1px solid #CCC; - border-bottom: none; -} - -#output .menu [data-topic="before"] { - left: 100px; -} - -#output .menu [data-topic="after"] { - left: 200px; -} - -#output .output { - width: 480px; - margin: 10px; - padding: 10px; - overflow: hidden; - color: #555; - font-size: 14px; - border: 1px dashed #CCC; - border-radius: 3px; - display: none; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#output .css-property { - width: 100%; - float: left; - white-space: pre; -} - -#output .name { - width: 35%; - float: left; -} - -#output .value { - width: 65%; - float: left; -} -``` - -```js hidden - - -'use strict'; - -/** - * UI-SlidersManager - */ - -var SliderManager = (function SliderManager() { - - var subscribers = {}; - var sliders = []; - - var Slider = function(node) { - var min = node.getAttribute('data-min') | 0; - var max = node.getAttribute('data-max') | 0; - var step = node.getAttribute('data-step') | 0; - var value = node.getAttribute('data-value') | 0; - var snap = node.getAttribute('data-snap'); - var topic = node.getAttribute('data-topic'); - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; - this.snap = snap === "true" ? true : false; - this.topic = topic; - this.node = node; - - var pointer = document.createElement('div'); - pointer.className = 'ui-slider-pointer'; - node.appendChild(pointer); - this.pointer = pointer; - - setMouseTracking(node, updateSlider.bind(this)); - - sliders[topic] = this; - setValue(topic, this.value); - } - - var setButtonComponent = function setButtonComponent(node) { - var type = node.getAttribute('data-type'); - var topic = node.getAttribute('data-topic'); - if (type === "sub") { - node.textContent = '-'; - node.addEventListener("click", function() { - decrement(topic); - }); - } - if (type === "add") { - node.textContent = '+'; - node.addEventListener("click", function() { - increment(topic); - }); - } - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var unit_type = node.getAttribute('data-unit'); - - var input = document.createElement('input'); - var unit = document.createElement('span'); - unit.textContent = unit_type; - - input.setAttribute('type', 'text'); - node.appendChild(input); - node.appendChild(unit); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - setValue(topic, e.target.value | 0); - }); - - subscribe(topic, function(value) { - node.children[0].value = value; - }); - } - - var increment = function increment(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value + slider.step <= slider.max) { - slider.value += slider.step; - setValue(slider.topic, slider.value) - notify.call(slider); - } - }; - - var decrement = function decrement(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value - slider.step >= slider.min) { - slider.value -= slider.step; - setValue(topic, slider.value) - notify.call(slider); - } - } - - // this = Slider object - var updateSlider = function updateSlider(e) { - var node = this.node; - var pos = e.pageX - node.offsetLeft; - var width = node.clientWidth; - var delta = this.max - this.min; - var offset = this.pointer.clientWidth + 4; // border width * 2 - - if (pos < 0) pos = 0; - if (pos > width) pos = width; - - var value = pos * delta / width | 0; - var precision = value % this.step; - value = value - precision + this.min; - if (precision > this.step / 2) - value = value + this.step; - - if (this.snap) - pos = (value - this.min) * width / delta; - - this.pointer.style.left = pos - offset/2 + "px"; - this.value = value; - node.setAttribute('data-value', value); - notify.call(this); - } - - var setValue = function setValue(topic, value) { - var slider = sliders[topic]; - - if (value > slider.max || value < slider.min) - return; - - var delta = slider.max - slider.min; - var width = slider.node.clientWidth; - var offset = slider.pointer.clientWidth; - var pos = (value - slider.min) * width / delta; - slider.value = value; - slider.pointer.style.left = pos - offset / 2 + "px"; - slider.node.setAttribute('data-value', value); - notify.call(slider); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-slider-btn-set'); - size = elem.length; - for (var i = 0; i < size; i++) - setButtonComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider-input'); - size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider'); - size = elem.length; - for (var i = 0; i < size; i++) - new Slider(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - -/** - * UI-ButtonManager - */ - -var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - } - - var getNode = function getNode(topic) { - return buttons[topic].node; - } - - var setValue = function setValue(topic, value) { - try { - buttons[topic].checkbox.checked = value; - notify.call(buttons[topic]); - } - catch(error) { - console.log(error, topic, value); - } - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - - -window.addEventListener("load", function(){ - BoxShadow.init(); -}); - -var BoxShadow = (function BoxShadow() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * RGBA Color class - */ - - function Color() { - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - } - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (red != undefined) - this.r = red | 0; - if (green != undefined) - this.g = green | 0; - if (blue != undefined) - this.b = blue | 0; - if (alpha != undefined) - this.a = alpha | 0; - } - - /** - * HSV/HSB (hue, saturation, value / brightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - */ - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.updateRGB(); - } - - Color.prototype.updateRGB = function updateRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision; - X = (X + m) * precision; - m = m * precision; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - } - - Color.prototype.updateHSV = function updateHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - } - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - } - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - } - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = "(" + this.r + ", " + this.g + ", " + this.b; - var a = ''; - var v = ''; - if (this.a !== 1) { - a = 'a'; - v = ', ' + this.a; - } - - var value = "rgb" + a + rgb + v + ")"; - return value; - } - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - } - - /** - * Shadow Object - */ - function Shadow() { - this.inset = false; - this.posX = 5; - this.posY = -5; - this.blur = 5; - this.spread = 0; - this.color = new Color(); - - var hue = (Math.random() * 360) | 0; - var saturation = (Math.random() * 75) | 0; - var value = (Math.random() * 50 + 50) | 0; - this.color.setHSV(hue, saturation, value, 1); - } - - Shadow.prototype.computeCSS = function computeCSS() { - var value = ""; - if (this.inset === true) - value += "inset "; - value += this.posX + "px "; - value += this.posY + "px "; - value += this.blur + "px "; - value += this.spread + "px "; - value += this.color.getColor(); - - return value; - } - - Shadow.prototype.toggleInset = function toggleInset(value) { - if (value !== undefined || typeof value === "boolean") - this.inset = value; - else - this.inset = this.inset === true ? false : true; - } - - Shadow.prototype.copy = function copy(obj) { - if(obj instanceof Shadow !== true) { - console.log("Typeof instance not Shadow"); - return; - } - - this.inset = obj.inset; - this.posX = obj.posX; - this.posY = obj.posY; - this.blur = obj.blur; - this.spread = obj.spread; - this.color.copy(obj.color); - } - - /** - * Color Picker - */ - var ColoPicker = (function ColoPicker() { - - var colorpicker; - var hue_area; - var gradient_area; - var alpha_area; - var gradient_picker; - var hue_selector; - var alpha_selector; - var pick_object; - var info_rgb; - var info_hsv; - var info_hexa; - var output_color; - var color = new Color(); - var subscribers = []; - - var updateColor = function updateColor(e) { - var x = e.pageX - gradient_area.offsetLeft; - var y = e.pageY - gradient_area.offsetTop; - - // width and height should be the same - var size = gradient_area.clientWidth; - - if (x > size) - x = size; - if (y > size) - y = size; - - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - color.setHSV(color.hue, saturation, value); - // should update just - // color pointer location - updateUI(); - notify("color", color); - } - - var updateHue = function updateHue(e) { - var x = e.pageX - hue_area.offsetLeft; - var width = hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - var hue = ((360 * x) / width) | 0; - if (hue === 360) hue = 359; - - color.setHSV(hue, color.saturation, color.value); - - // should update just - // hue pointer location - // picker area background - // alpha area background - updateUI(); - notify("color", color); - } - - var updateAlpha = function updateAlpha(e) { - var x = e.pageX - alpha_area.offsetLeft; - var width = alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - color.a = (x / width).toFixed(2); - - // should update just - // alpha pointer location - updateUI(); - notify("color", color); - } - - var setHueGfx = function setHueGfx(hue) { - var sat = color.saturation; - var val = color.value; - var alpha = color.a; - - color.setHSV(hue, 100, 100); - gradient_area.style.backgroundColor = color.getHexa(); - - color.a = 0; - var start = color.getRGBA(); - color.a = 1; - var end = color.getRGBA(); - color.a = alpha; - - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - } - - var updateUI = function updateUI() { - var x, y; // coordinates - var size; // size of the area - var offset; // pointer graphic selector offset - - // Set color pointer location - size = gradient_area.clientWidth; - offset = gradient_picker.clientWidth / 2 + 2; - - x = (color.saturation * size / 100) | 0; - y = size - (color.value * size / 100) | 0; - - gradient_picker.style.left = x - offset + "px"; - gradient_picker.style.top = y - offset + "px"; - - // Set hue pointer location - size = hue_area.clientWidth; - offset = hue_selector.clientWidth/2; - x = (color.hue * size / 360 ) | 0; - hue_selector.style.left = x - offset + "px"; - - // Set alpha pointer location - size = alpha_area.clientWidth; - offset = alpha_selector.clientWidth/2; - x = (color.a * size) | 0; - alpha_selector.style.left = x - offset + "px"; - - // Set picker area background - var nc = new Color(); - nc.copy(color); - if (nc.hue === 360) nc.hue = 0; - nc.setHSV(nc.hue, 100, 100); - gradient_area.style.backgroundColor = nc.getHexa(); - - // Set alpha area background - nc.copy(color); - nc.a = 0; - var start = nc.getRGBA(); - nc.a = 1; - var end = nc.getRGBA(); - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - - // Update color info - notify("color", color); - notify("hue", color.hue); - notify("saturation", color.saturation); - notify("value", color.value); - notify("r", color.r); - notify("g", color.g); - notify("b", color.b); - notify("a", color.a); - notify("hexa", color.getHexa()); - output_color.style.backgroundColor = color.getRGBA(); - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var title = node.getAttribute('data-title'); - var action = node.getAttribute('data-action'); - title = title === null ? '' : title; - - var input = document.createElement('input'); - var info = document.createElement('span'); - info.textContent = title; - - input.setAttribute('type', 'text'); - input.setAttribute('data-action', 'set-' + action + '-' + topic); - node.appendChild(info); - node.appendChild(input); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - if (action === 'HSV') - inputChangeHSV(topic); - if (action === 'RGB') - inputChangeRGB(topic); - if (action === 'alpha') - inputChangeAlpha(topic); - if (action === 'hexa') - inputChangeHexa(topic); - }); - - subscribe(topic, function(value) { - node.children[1].value = value; - }); - } - - var inputChangeHSV = function actionHSV(topic) { - var selector = "[data-action='set-HSV-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value < 360) - color[topic] = value; - - color.updateRGB(); - updateUI(); - } - - var inputChangeRGB = function inputChangeRGB(topic) { - var selector = "[data-action='set-RGB-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 255) - color[topic] = value; - - color.updateHSV(); - updateUI(); - } - - var inputChangeAlpha = function inputChangeAlpha(topic) { - var selector = "[data-action='set-alpha-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseFloat(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - color.a = value.toFixed(2); - - updateUI(); - } - - var inputChangeHexa = function inputChangeHexa(topic) { - var selector = "[data-action='set-hexa-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = node.value; - color.setHexa(value); - color.updateHSV(); - updateUI(); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - /* - * Observer - */ - var setColor = function setColor(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - color.copy(obj); - updateUI(); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(topic, value) { - for (var i in subscribers[topic]) - subscribers[topic][i](value); - } - - var init = function init() { - colorpicker = getElemById("colorpicker"); - hue_area = getElemById("hue"); - gradient_area = getElemById("gradient"); - alpha_area = getElemById("alpha"); - gradient_picker = getElemById("gradient_picker"); - hue_selector = getElemById("hue_selector"); - alpha_selector = getElemById("alpha_selector"); - output_color = getElemById("output_color"); - - var elem = document.querySelectorAll('#colorpicker .input'); - var size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - setMouseTracking(gradient_area, updateColor); - setMouseTracking(hue_area, updateHue); - setMouseTracking(alpha_area, updateAlpha); - - } - - return { - init : init, - setColor : setColor, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /** - * Shadow dragging - */ - var PreviewMouseTracking = (function Drag() { - var active = false; - var lastX = 0; - var lastY = 0; - var subscribers = []; - - var init = function init(id) { - var elem = getElemById(id); - elem.addEventListener('mousedown', dragStart, false); - document.addEventListener('mouseup', dragEnd, false); - } - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - active = true; - lastX = e.clientX; - lastY = e.clientY; - document.addEventListener('mousemove', mouseDrag, false); - } - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - if (active === true) { - active = false; - document.removeEventListener('mousemove', mouseDrag, false); - } - } - - var mouseDrag = function mouseDrag(e) { - notify(e.clientX - lastX, e.clientY - lastY); - lastX = e.clientX; - lastY = e.clientY; - } - - var subscribe = function subscribe(callback) { - subscribers.push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - var index = subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(deltaX, deltaY) { - for (var i in subscribers) - subscribers[i](deltaX, deltaY); - } - - return { - init : init, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /* - * Element Class - */ - var CssClass = function CssClass(id) { - this.left = 0; - this.top = 0; - this.rotate = 0; - this.width = 300; - this.height = 100; - this.display = true; - this.border = true; - this.zIndex = -1; - this.bgcolor = new Color(); - this.id = id; - this.node = getElemById('obj-' + id); - this.object = getElemById(id); - this.shadowID = null; - this.shadows = [] - this.render = []; - this.init(); - } - - CssClass.prototype.init = function init() { - this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; - this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; - - this.setTop(this.top); - this.setLeft(this.left); - this.setHeight(this.height); - this.setWidth(this.width); - this.bgcolor.setHSV(0, 0, 100); - this.updateBgColor(this.bgcolor); - } - - CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { - this.left += deltaX; - this.top += deltaY; - this.node.style.top = this.top + "px"; - this.node.style.left = this.left + "px"; - SliderManager.setValue("left", this.left); - SliderManager.setValue("top", this.top); - } - - CssClass.prototype.setLeft = function setLeft(value) { - this.left = value; - this.node.style.left = this.left + "px"; - OutputManager.updateProperty(this.id, 'left', this.left + 'px'); - } - - CssClass.prototype.setTop = function setTop(value) { - this.top = value; - this.node.style.top = this.top + 'px'; - OutputManager.updateProperty(this.id, 'top', this.top + 'px'); - } - - CssClass.prototype.setWidth = function setWidth(value) { - this.width = value; - this.node.style.width = this.width + 'px'; - OutputManager.updateProperty(this.id, 'width', this.width + 'px'); - } - - CssClass.prototype.setHeight = function setHeight(value) { - this.height = value; - this.node.style.height = this.height + 'px'; - OutputManager.updateProperty(this.id, 'height', this.height + 'px'); - } - - // Browser support - CssClass.prototype.setRotate = function setRotate(value) { - var cssvalue = 'rotate(' + value +'deg)'; - - this.node.style.transform = cssvalue; - this.node.style.webkitTransform = cssvalue; - this.node.style.msTransform = cssvalue; - - if (value !== 0) { - if (this.rotate === 0) { - OutputManager.toggleProperty(this.id, 'transform', true); - OutputManager.toggleProperty(this.id, '-webkit-transform', true); - OutputManager.toggleProperty(this.id, '-ms-transform', true); - } - } - else { - OutputManager.toggleProperty(this.id, 'transform', false); - OutputManager.toggleProperty(this.id, '-webkit-transform', false); - OutputManager.toggleProperty(this.id, '-ms-transform', false); - } - - OutputManager.updateProperty(this.id, 'transform', cssvalue); - OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); - OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); - this.rotate = value; - } - - CssClass.prototype.setzIndex = function setzIndex(value) { - this.node.style.zIndex = value; - OutputManager.updateProperty(this.id, 'z-index', value); - this.zIndex = value; - } - - CssClass.prototype.toggleDisplay = function toggleDisplay(value) { - if (typeof value !== "boolean" || this.display === value) - return; - - this.display = value; - var display = this.display === true ? "block" : "none"; - this.node.style.display = display; - this.object.style.display = display; - } - - CssClass.prototype.toggleBorder = function toggleBorder(value) { - if (typeof value !== "boolean" || this.border === value) - return; - - this.border = value; - var border = this.border === true ? "1px solid #CCC" : "none"; - this.node.style.border = border; - } - - CssClass.prototype.updateBgColor = function updateBgColor(color) { - this.bgcolor.copy(color); - this.node.style.backgroundColor = color.getColor(); - OutputManager.updateProperty(this.id, 'background-color', color.getColor()); - } - - CssClass.prototype.updateShadows = function updateShadows() { - if (this.render.length === 0) - OutputManager.toggleProperty(this.id, 'box-shadow', false); - if (this.render.length === 1) - OutputManager.toggleProperty(this.id, 'box-shadow', true); - - this.node.style.boxShadow = this.render.join(", "); - OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); - - } - - - /** - * Tool Manager - */ - var Tool = (function Tool() { - - var preview; - var classes = []; - var active = null; - var animate = false; - - /* - * Toll actions - */ - var addCssClass = function addCssClass(id) { - classes[id] = new CssClass(id); - } - - var setActiveClass = function setActiveClass(id) { - active = classes[id]; - active.shadowID = null; - ColoPicker.setColor(classes[id].bgcolor); - SliderManager.setValue("top", active.top); - SliderManager.setValue("left", active.left); - SliderManager.setValue("rotate", active.rotate); - SliderManager.setValue("z-index", active.zIndex); - SliderManager.setValue("width", active.width); - SliderManager.setValue("height", active.height); - ButtonManager.setValue("border-state", active.border); - active.updateShadows(); - } - - var disableClass = function disableClass(topic) { - classes[topic].toggleDisplay(false); - ButtonManager.setValue(topic, false); - } - - var addShadow = function addShadow(position) { - if (animate === true) - return -1; - - active.shadows.splice(position, 0, new Shadow()); - active.render.splice(position, 0, null); - } - - var swapShadow = function swapShadow(id1, id2) { - var x = active.shadows[id1]; - active.shadows[id1] = active.shadows[id2]; - active.shadows[id2] = x; - updateShadowCSS(id1); - updateShadowCSS(id2); - } - - var deleteShadow = function deleteShadow(position) { - active.shadows.splice(position, 1); - active.render.splice(position, 1); - active.updateShadows(); - } - - var setActiveShadow = function setActiveShadow(id, glow) { - active.shadowID = id; - ColoPicker.setColor(active.shadows[id].color); - ButtonManager.setValue("inset", active.shadows[id].inset); - SliderManager.setValue("blur", active.shadows[id].blur); - SliderManager.setValue("spread", active.shadows[id].spread); - SliderManager.setValue("posX", active.shadows[id].posX); - SliderManager.setValue("posY", active.shadows[id].posY); - if (glow === true) - addGlowEffect(id); - } - - var addGlowEffect = function addGlowEffect(id) { - if (animate === true) - return; - - animate = true; - var store = new Shadow(); - var shadow = active.shadows[id]; - - store.copy(shadow); - shadow.color.setRGBA(40, 125, 200, 1); - shadow.blur = 10; - shadow.spread = 10; - - active.node.style.transition = "box-shadow 0.2s"; - updateShadowCSS(id); - - setTimeout(function() { - shadow.copy(store); - updateShadowCSS(id); - setTimeout(function() { - active.node.style.removeProperty("transition"); - animate = false; - }, 100); - }, 200); - } - - var updateActivePos = function updateActivePos(deltaX, deltaY) { - if (active.shadowID === null) - active.updatePos(deltaX, deltaY); - else - updateShadowPos(deltaX, deltaY); - } - - /* - * Shadow properties - */ - var updateShadowCSS = function updateShadowCSS(id) { - active.render[id] = active.shadows[id].computeCSS(); - active.updateShadows(); - } - - var toggleShadowInset = function toggleShadowInset(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].toggleInset(value); - updateShadowCSS(active.shadowID); - } - - var updateShadowPos = function updateShadowPos(deltaX, deltaY) { - var shadow = active.shadows[active.shadowID]; - shadow.posX += deltaX; - shadow.posY += deltaY; - SliderManager.setValue("posX", shadow.posX); - SliderManager.setValue("posY", shadow.posY); - updateShadowCSS(active.shadowID); - } - - var setShadowPosX = function setShadowPosX(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posX = value; - updateShadowCSS(active.shadowID); - } - - var setShadowPosY = function setShadowPosY(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posY = value; - updateShadowCSS(active.shadowID); - } - - var setShadowBlur = function setShadowBlur(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].blur = value; - updateShadowCSS(active.shadowID); - } - - var setShadowSpread = function setShadowSpread(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].spread = value; - updateShadowCSS(active.shadowID); - } - - var updateShadowColor = function updateShadowColor(color) { - active.shadows[active.shadowID].color.copy(color); - updateShadowCSS(active.shadowID); - } - - /* - * Element Properties - */ - var updateColor = function updateColor(color) { - if (active.shadowID === null) - active.updateBgColor(color); - else - updateShadowColor(color); - } - - var init = function init() { - preview = getElemById("preview"); - - ColoPicker.subscribe("color", updateColor); - PreviewMouseTracking.subscribe(updateActivePos); - - // Affects shadows - ButtonManager.subscribe("inset", toggleShadowInset); - SliderManager.subscribe("posX", setShadowPosX); - SliderManager.subscribe("posY", setShadowPosY); - SliderManager.subscribe("blur", setShadowBlur); - SliderManager.subscribe("spread", setShadowSpread); - - // Affects element - SliderManager.subscribe("top", function(value){ - active.setTop(value); - }); - SliderManager.subscribe("left", function(value){ - active.setLeft(value); - }); - SliderManager.subscribe("rotate", function(value) { - if (active == classes["element"]) - return; - active.setRotate(value); - }); - - SliderManager.subscribe("z-index", function(value) { - if (active == classes["element"]) - return; - active.setzIndex(value); - }); - - SliderManager.subscribe("width", function(value) { - active.setWidth(value) - }); - - SliderManager.subscribe("height", function(value) { - active.setHeight(value) - }); - - // Actions - classes['before'].top = -30; - classes['before'].left = -30; - classes['after'].top = 30; - classes['after'].left = 30; - classes['before'].toggleDisplay(false); - classes['after'].toggleDisplay(false); - ButtonManager.setValue('before', false); - ButtonManager.setValue('after', false); - - ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); - ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); - - ButtonManager.subscribe("border-state", function(value) { - active.toggleBorder(value); - }); - - } - - return { - init : init, - addShadow : addShadow, - swapShadow : swapShadow, - addCssClass : addCssClass, - disableClass : disableClass, - deleteShadow : deleteShadow, - setActiveClass : setActiveClass, - setActiveShadow : setActiveShadow - } - - })(); - - /** - * Layer Manager - */ - var LayerManager = (function LayerManager() { - var stacks = []; - var active = { - node : null, - stack : null - } - var elements = {}; - - var mouseEvents = function mouseEvents(e) { - var node = e.target; - var type = node.getAttribute('data-type'); - - if (type === 'subject') - setActiveStack(stacks[node.id]); - - if (type === 'disable') { - Tool.disableClass(node.parentNode.id); - setActiveStack(stacks['element']); - } - - if (type === 'add') - active.stack.addLayer(); - - if (type === 'layer') - active.stack.setActiveLayer(node); - - if (type === 'delete') - active.stack.deleteLayer(node.parentNode); - - if (type === 'move-up') - active.stack.moveLayer(1); - - if (type === 'move-down') - active.stack.moveLayer(-1); - } - - var setActiveStack = function setActiveStack(stackObj) { - active.stack.hide(); - active.stack = stackObj; - active.stack.show(); - } - - /* - * Stack object - */ - var Stack = function Stack(subject) { - var S = document.createElement('div'); - var title = document.createElement('div'); - var stack = document.createElement('div'); - - S.className = 'container'; - stack.className = 'stack'; - title.className = 'title'; - title.textContent = subject.getAttribute('data-title'); - S.appendChild(title); - S.appendChild(stack); - - this.id = subject.id; - this.container = S; - this.stack = stack; - this.subject = subject; - this.order = []; - this.uid = 0; - this.count = 0; - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.addLayer = function addLayer() { - if (Tool.addShadow(this.layerID) == -1) - return; - - var uid = this.getUID(); - var layer = this.createLayer(uid); - - if (this.layer === null && this.stack.children.length >= 1) - this.layer = this.stack.children[0]; - - this.stack.insertBefore(layer, this.layer); - this.order.splice(this.layerID, 0, uid); - this.count++; - this.setActiveLayer(layer); - } - - Stack.prototype.createLayer = function createLayer(uid) { - var layer = document.createElement('div'); - var del = document.createElement('span'); - - layer.className = 'node'; - layer.setAttribute('data-shid', uid); - layer.setAttribute('data-type', 'layer'); - layer.textContent = 'Ombre ' + uid; - - del.className = 'delete'; - del.setAttribute('data-type', 'delete'); - - layer.appendChild(del); - return layer; - } - - Stack.prototype.getUID = function getUID() { - return this.uid++; - } - - // SOLVE IE BUG - Stack.prototype.moveLayer = function moveLayer(direction) { - if (this.count <= 1 || this.layer === null) - return; - if (direction === -1 && this.layerID === (this.count - 1) ) - return; - if (direction === 1 && this.layerID === 0 ) - return; - - if (direction === -1) { - var before = null; - Tool.swapShadow(this.layerID, this.layerID + 1); - this.swapOrder(this.layerID, this.layerID + 1); - this.layerID += 1; - - if (this.layerID + 1 !== this.count) - before = this.stack.children[this.layerID + 1]; - - this.stack.insertBefore(this.layer, before); - Tool.setActiveShadow(this.layerID, false); - } - - if (direction === 1) { - Tool.swapShadow(this.layerID, this.layerID - 1); - this.swapOrder(this.layerID, this.layerID - 1); - this.layerID -= 1; - this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); - Tool.setActiveShadow(this.layerID, false); - } - } - - Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { - var x = this.order[pos1]; - this.order[pos1] = this.order[pos2]; - this.order[pos2] = x; - } - - Stack.prototype.deleteLayer = function deleteLayer(node) { - var shadowID = node.getAttribute('data-shid') | 0; - var index = this.order.indexOf(shadowID); - this.stack.removeChild(this.stack.children[index]); - this.order.splice(index, 1); - this.count--; - - Tool.deleteShadow(index); - - if (index > this.layerID) - return; - - if (index == this.layerID) { - if (this.count >= 1) { - this.layerID = 0; - this.setActiveLayer(this.stack.children[0], true); - } - else { - this.layer = null; - this.show(); - } - } - - if (index < this.layerID) { - this.layerID--; - Tool.setActiveShadow(this.layerID, true); - } - - } - - Stack.prototype.setActiveLayer = function setActiveLayer(node) { - elements.shadow_properties.style.display = 'block'; - elements.element_properties.style.display = 'none'; - - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = node; - this.layer.setAttribute('data-active', 'layer'); - - var shadowID = node.getAttribute('data-shid') | 0; - this.layerID = this.order.indexOf(shadowID); - Tool.setActiveShadow(this.layerID, true); - } - - Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.hide = function hide() { - this.unsetActiveLayer(); - this.subject.removeAttribute('data-active'); - var style = this.container.style; - style.left = '100%'; - style.zIndex = '0'; - } - - Stack.prototype.show = function show() { - elements.shadow_properties.style.display = 'none'; - elements.element_properties.style.display = 'block'; - - if (this.id === 'element') { - elements.zIndex.style.display = 'none'; - elements.transform_rotate.style.display = 'none'; - } - else { - elements.zIndex.style.display = 'block'; - elements.transform_rotate.style.display = 'block'; - } - - this.subject.setAttribute('data-active', 'subject'); - var style = this.container.style; - style.left = '0'; - style.zIndex = '10'; - Tool.setActiveClass(this.id); - } - - function init() { - - var elem, size; - var layerManager = getElemById("layer_manager"); - var layerMenu = getElemById("layer_menu"); - var container = getElemById("stack_container"); - - elements.shadow_properties = getElemById('shadow_properties'); - elements.element_properties = getElemById('element_properties'); - elements.transform_rotate = getElemById('transform_rotate'); - elements.zIndex = getElemById('z-index'); - - elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); - size = elem.length; - - for (var i = 0; i < size; i++) { - var S = new Stack(elem[i]); - stacks[elem[i].id] = S; - container.appendChild(S.container); - Tool.addCssClass(elem[i].id); - } - - active.stack = stacks['element']; - stacks['element'].show(); - - layerManager.addEventListener("click", mouseEvents); - layerMenu.addEventListener("click", mouseEvents); - - ButtonManager.subscribe("before", function(value) { - if (value === false && active.stack === stacks['before']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['before']) - setActiveStack(stacks['before']) - }); - - ButtonManager.subscribe("after", function(value) { - if (value === false && active.stack === stacks['after']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['after']) - setActiveStack(stacks['after']) - }); - } - - return { - init : init - } - })(); - - /* - * OutputManager - */ - var OutputManager = (function OutputManager() { - var classes = []; - var buttons = []; - var active = null; - var menu = null; - var button_offset = 0; - - var crateOutputNode = function(topic, property) { - - var prop = document.createElement('div'); - var name = document.createElement('span'); - var value = document.createElement('span'); - - var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); - - name.textContent = '\t' + pmatch[4]; - - if (pmatch[3] !== undefined) { - name.textContent = '\t' + pmatch[2]; - value.textContent = pmatch[3] + ';'; - } - - name.textContent += ': '; - prop.className = 'css-property'; - name.className = 'name'; - value.className = 'value'; - prop.appendChild(name); - prop.appendChild(value); - - classes[topic].node.appendChild(prop); - classes[topic].line[property] = prop; - classes[topic].prop[property] = value; - } - - var OutputClass = function OutputClass(node) { - var topic = node.getAttribute('data-topic'); - var prop = node.getAttribute('data-prop'); - var name = node.getAttribute('data-name'); - var properties = prop.split(' '); - - classes[topic] = {}; - classes[topic].node = node; - classes[topic].prop = []; - classes[topic].line = []; - classes[topic].button = new Button(topic); - - var open_decl = document.createElement('div'); - var end_decl = document.createElement('div'); - - open_decl.textContent = name + ' {'; - end_decl.textContent = '}'; - node.appendChild(open_decl); - - for (var i in properties) - crateOutputNode(topic, properties[i]); - - node.appendChild(end_decl); - } - - var Button = function Button(topic) { - var button = document.createElement('div'); - - button.className = 'button'; - button.textContent = topic; - button.style.left = button_offset + 'px'; - button_offset += 100; - - button.addEventListener("click", function() { - toggleDisplay(topic); - }) - - menu.appendChild(button); - return button; - } - - var toggleDisplay = function toggleDisplay(topic) { - active.button.removeAttribute('data-active'); - active.node.style.display = 'none'; - active = classes[topic]; - active.node.style.display = 'block'; - active.button.setAttribute('data-active', 'true'); - } - - var toggleButton = function toggleButton(topic, value) { - var display = (value === true) ? 'block' : 'none'; - classes[topic].button.style.display = display; - - if (value === true) - toggleDisplay(topic); - else - toggleDisplay('element'); - } - - var updateProperty = function updateProperty(topic, property, data) { - try { - classes[topic].prop[property].textContent = data + ';'; - } - catch(error) { - // console.log("ERROR undefined : ", topic, property, data); - } - } - - var toggleProperty = function toggleProperty(topic, property, value) { - var display = (value === true) ? 'block' : 'none'; - try { - classes[topic].line[property].style.display = display; - } - catch(error) { - // console.log("ERROR undefined : ",classes, topic, property, value); - } - } - - var init = function init() { - - menu = getElemById('menu'); - - var elem = document.querySelectorAll('#output .output'); - var size = elem.length; - for (var i = 0; i < size; i++) - OutputClass(elem[i]); - - active = classes['element']; - toggleDisplay('element'); - - ButtonManager.subscribe("before", function(value) { - toggleButton('before', value); - }); - - ButtonManager.subscribe("after", function(value) { - toggleButton('after', value); - }); - } - - return { - init : init, - updateProperty : updateProperty, - toggleProperty : toggleProperty - } - - })(); - - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - OutputManager.init(); - ColoPicker.init(); - SliderManager.init(); - LayerManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - -})(); -``` - -{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}} +{{EmbedGHLiveSample("css-examples/tools/box-shadow-generator/", '100%', 900)}} ## Voir aussi diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md index af2dc6baba..418c5a9568 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -1,22 +1,18 @@ --- title: Utiliser plusieurs arrière-plans slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - Guide - - Reference translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans --- {{CSSRef}} -Avec [CSS3](/fr/docs/Web/CSS/CSS3), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur. +Avec [CSS](/fr/docs/Web/CSS), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur. Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} : ```css .maClasse { - background: background1, background 2, ..., backgroundN; + background: background1, background2, ..., backgroundN; } ``` @@ -46,7 +42,7 @@ Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégra ### Résultat -{{EmbedLiveSample('Exemple','100%','400')}} +{{EmbedLiveSample('Exemples','100%','400')}} Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.). diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.md b/files/fr/web/css/css_colors/color_picker_tool/index.md index 73a7886456..0ef84de19a 100644 --- a/files/fr/web/css/css_colors/color_picker_tool/index.md +++ b/files/fr/web/css/css_colors/color_picker_tool/index.md @@ -1,3253 +1,8 @@ --- title: Sélecteur de couleurs CSS slug: Web/CSS/CSS_Colors/Color_picker_tool -tags: - - CSS - - Outil translation_of: Web/CSS/CSS_Colors/Color_picker_tool original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs --- -```html hidden - <div id="container"> - <div id="palette" class="block"> - <div id="color-palette"></div> - <div id="color-info"> - <div class="title">Couleurs CSS </div> - </div> - </div> - <div id="picker" class="block"> - <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> - <div id="picker-samples" sample-id="master"></div> - <div id="controls"> - <div id="delete"> - <div id="trash-can"></div> - </div> - <div id="void-sample" class="icon"></div> - </div> - </div> - - <div id="canvas" data-tutorial="drop"> - <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" - data-max="20" data-sensivity="10"></div> - </div> - </div> - -/* - * COLOR PICKER TOOL - */ - -.ui-color-picker { - width: 420px; - margin: 0; - border: 1px solid #DDD; - background-color: #FFF; - display: table; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-color-picker .picking-area { - width: 198px; - height: 198px; - margin: 5px; - border: 1px solid #DDD; - position: relative; - float: left; - display: table; -} - -.ui-color-picker .picking-area:hover { - cursor: default; -} - -/* HSV format - Hue-Saturation-Value(Brightness) */ -.ui-color-picker .picking-area { - background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; - - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - - background-color: #F00; -} - -/* HSL format - Hue-Saturation-Lightness */ -.ui-color-picker[data-mode='HSL'] .picking-area { - background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background-color: #F00; -} - -.ui-color-picker .picker { - width: 10px; - height: 10px; - border-radius: 50%; - border: 1px solid #FFF; - position: absolute; - top: 45%; - left: 45%; -} - -.ui-color-picker .picker:before { - width: 8px; - height: 8px; - content: ""; - position: absolute; - border: 1px solid #999; - border-radius: 50%; -} - -.ui-color-picker .hue, -.ui-color-picker .alpha { - width: 198px; - height: 28px; - margin: 5px; - border: 1px solid #FFF; - float: left; -} - -.ui-color-picker .hue { - background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); -} - -.ui-color-picker .alpha { - border: 1px solid #CCC; - background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); -} - -.ui-color-picker .alpha-mask { - width: 100%; - height: 100%; - background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); -} - -.ui-color-picker .slider-picker { - width: 2px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; -} - -/* input HSV and RGB */ - -.ui-color-picker .info { - width: 200px; - margin: 5px; - float: left; -} - -.ui-color-picker .info * { - float: left; -} - -.ui-color-picker .input { - width: 64px; - margin: 5px 2px; - float: left; -} - -.ui-color-picker .input .name { - height: 20px; - width: 30px; - text-align: center; - font-size: 14px; - line-height: 18px; - float: left; -} - -.ui-color-picker .input input { - width: 30px; - height: 18px; - margin: 0; - padding: 0; - border: 1px solid #DDD; - text-align: center; - float: right; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -.ui-color-picker .input[data-topic="lightness"] { - display: none; -} - -.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { - display: none; -} - -.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { - display: block; -} - -.ui-color-picker .input[data-topic="alpha"] { - margin-top: 10px; - width: 93px; -} - -.ui-color-picker .input[data-topic="alpha"] > .name { - width: 60px; -} - -.ui-color-picker .input[data-topic="alpha"] > input { - float: right; -} - -.ui-color-picker .input[data-topic="hexa"] { - width: auto; - float: right; - margin: 6px 8px 0 0; -} - -.ui-color-picker .input[data-topic="hexa"] > .name { - display: none; -} - -.ui-color-picker .input[data-topic="hexa"] > input { - width: 90px; - height: 24px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/* Preview color */ -.ui-color-picker .preview { - width: 95px; - height: 53px; - margin: 5px; - margin-top: 10px; - border: 1px solid #DDD; - background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - float: left; - position: relative; -} - -.ui-color-picker .preview:before { - height: 100%; - width: 50%; - left: 50%; - top: 0; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; -} - -.ui-color-picker .preview-color { - width: 100%; - height: 100%; - background-color: rgba(255, 0, 0, 0.5); - position: absolute; - z-index: 1; -} - -.ui-color-picker .switch_mode { - width: 10px; - height: 20px; - position: relative; - border-radius: 5px 0 0 5px; - border: 1px solid #DDD; - background-color: #EEE; - left: -12px; - top: -1px; - z-index: 1; - transition: all 0.5s; -} - -.ui-color-picker .switch_mode:hover { - background-color: #CCC; - cursor: pointer; -} - -/* - * UI Component - */ - -.ui-input-slider { - height: 20px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.ui-input-slider * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Input Slider */ - -.ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; -} - -.ui-input-slider-right { - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; -} - -.ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; -} - -.ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -/* - * COLOR PICKER TOOL - */ - -body { - max-width: 1000px; - margin: 0 auto; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - box-shadow: 0 0 5px 0 #999; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -} - -/** - * Resize Handle - */ -.resize-handle { - width: 10px; - height: 10px; - background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; - position: absolute; - bottom: 0; - right: 0; -} - -[data-resize='both']:hover { - cursor: nw-resize !important; -} - -[data-resize='width']:hover { - cursor: w-resize !important; -} - -[data-resize='height']:hover { - cursor: n-resize !important; -} - -[data-hidden='true'] { - display: none; -} - -[data-collapsed='true'] { - height: 0 !important; -} - -.block { - display: table; -} - - -/** - * Container - */ -#container { - width: 100%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - display: table; -} - -/** - * Picker Zone - */ - -#picker { - padding: 10px; - width: 980px; -} - -.ui-color-picker { - padding: 3px 5px; - float: left; - border-color: #FFF; -} - -.ui-color-picker .switch_mode { - display: none; -} - -.ui-color-picker .preview-color:hover { - cursor: move; -} - -/** - * Picker Container - */ - -#picker-samples { - width: 375px; - height: 114px; - max-height: 218px; - margin: 0 10px 0 30px; - overflow: hidden; - position: relative; - float: left; - - transition: all 0.2s; -} - -#picker-samples .sample { - width: 40px; - height: 40px; - margin: 5px; - border: 1px solid #DDD; - position: absolute; - float: left; - transition: all 0.2s; -} - -#picker-samples .sample:hover { - cursor: pointer; - border-color: #BBB; - transform: scale(1.15); - border-radius: 3px; -} - -#picker-samples .sample[data-active='true'] { - border-color: #999; -} - -#picker-samples .sample[data-active='true']:after { - content: ""; - position: absolute; - background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; - width: 100%; - height: 12px; - top: -12px; - z-index: 2; -} - -#picker-samples #add-icon { - width: 100%; - height: 100%; - position: relative; - box-shadow: inset 0px 0px 2px 0px #DDD; -} - -#picker-samples #add-icon:hover { - cursor: pointer; - border-color: #DDD; - box-shadow: inset 0px 0px 5px 0px #CCC; -} - -#picker-samples #add-icon:before, -#picker-samples #add-icon:after { - content: ""; - position: absolute; - background-color: #EEE; - box-shadow: 0 0 1px 0 #EEE; -} - -#picker-samples #add-icon:before { - width: 70%; - height: 16%; - top: 42%; - left: 15%; -} - -#picker-samples #add-icon:after { - width: 16%; - height: 70%; - top: 15%; - left: 42%; -} - -#picker-samples #add-icon:hover:before, -#picker-samples #add-icon:hover:after { - background-color: #DDD; - box-shadow: 0 0 1px 0 #DDD; -} - -/** - * Controls - */ - -#controls { - width: 110px; - padding: 10px; - float: right; -} - -#controls #picker-switch { - text-align: center; - float: left; -} - -#controls .icon { - width: 48px; - height: 48px; - margin: 10px 0; - background-repeat: no-repeat; - background-position: center; - border: 1px solid #DDD; - display: table; - float: left; -} - -#controls .icon:hover { - cursor: pointer; -} - -#controls .picker-icon { - background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); -} - -#controls #void-sample { - margin-right: 10px; - background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); - background-position: center left; -} - -#controls #void-sample[data-active='true'] { - border-color: #CCC; - background-position: center right; -} - -#controls .switch { - width: 106px; - padding: 1px; - border: 1px solid #CCC; - font-size: 14px; - text-align: center; - line-height: 24px; - overflow: hidden; - float: left; -} - -#controls .switch:hover { - cursor: pointer; -} - -#controls .switch > * { - width: 50%; - padding: 2px 0; - background-color: #EEE; - float: left; -} - -#controls .switch [data-active='true'] { - color: #FFF; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-color: #777; -} - -/** - * Trash Can - */ - -#delete { - width: 100%; - height: 94px; - background-color: #DDD; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - - text-align: center; - color: #777; - - position: relative; - float: right; -} - -#delete #trash-can { - width: 80%; - height: 80%; - border: 2px dashed #FFF; - border-radius: 5px; - background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; - - position: absolute; - top: 10%; - left: 10%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - transition: all 0.2s; -} - -#delete[drag-state='enter'] { - background-color: #999; -} - -/** - * Color Theme - */ - -#color-theme { - margin: 0 8px 0 0; - border: 1px solid #EEE; - display: inline-block; - float: right; -} - -#color-theme .box { - width: 80px; - height: 92px; - float: left; -} - -/** - * Color info box - */ -#color-info { - width: 360px; - float: left; -} - -#color-info .title { - width: 100%; - padding: 15px; - font-size: 18px; - text-align: center; - background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); - background-repeat:no-repeat; - background-position: center left 28%; -} - -#color-info .copy-container { - position: absolute; - top: -100%; -} - -#color-info .property { - min-width: 280px; - height: 30px; - margin: 10px 0; - text-align: center; - line-height: 30px; -} - -#color-info .property > * { - float: left; -} - -#color-info .property .type { - width: 60px; - height: 100%; - padding: 0 16px 0 0; - text-align: right; -} - -#color-info .property .value { - width: 200px; - height: 100%; - padding: 0 10px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - font-size: 16px; - color: #777; - text-align: center; - background-color: #FFF; - border: none; -} - -#color-info .property .value:hover { - color: #37994A; -} - -#color-info .property .value:hover + .copy { - background-position: center right; -} - -#color-info .property .copy { - width: 24px; - height: 100%; - padding: 0 5px; - background-color: #FFF; - background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); - background-repeat: no-repeat; - background-position: center left; - border-left: 1px solid #EEE; - text-align: right; - float: left; -} - -#color-info .property .copy:hover { - background-position: center right; -} - - -/** - * Color Palette - */ - -#palette { - width: 1000px; - padding: 10px 0; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - background-color: #EEE; - color: #777; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#color-palette { - width: 640px; - font-family: Arial, Helvetica, sans-serif; - color: #777; - float: left; -} - -#color-palette .container { - width: 100%; - height: 50px; - line-height: 50px; - overflow: hidden; - float: left; - transition: all 0.5s; -} - -#color-palette .container > * { - float: left; -} - -#color-palette .title { - width: 100px; - padding: 0 10px; - text-align: right; - line-height: inherit; -} - -#color-palette .palette { - width: 456px; - height: 38px; - margin: 3px; - padding: 3px; - display: table; - background-color: #FFF; -} - -#color-palette .palette .sample { - width: 30px; - height: 30px; - margin: 3px; - position: relative; - border: 1px solid #DDD; - float: left; - transition: all 0.2s; -} - -#color-palette .palette .sample:hover { - cursor: pointer; - border-color: #BBB; - transform: scale(1.15); - border-radius: 3px; -} - -#color-palette .controls { -} - -#color-palette .controls > * { - float: left; -} - -#color-palette .controls > *:hover { - cursor: pointer; -} - -#color-palette .controls .lock { - width: 24px; - height: 24px; - margin: 10px; - padding: 3px; - background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); - background-repeat: no-repeat; - background-position: bottom right; -} - -#color-palette .controls .lock:hover { - /*background-image: url('images/unlocked-hover.png');*/ - background-position: bottom left; -} - -#color-palette .controls .lock[locked-state='true'] { - /*background-image: url('images/locked.png');*/ - background-position: top left ; -} - -#color-palette .controls .lock[locked-state='true']:hover { - /*background-image: url('images/lock-hover.png');*/ - background-position: top right; -} - -/** - * Canvas - */ - -#canvas { - width: 100%; - height: 300px; - min-height: 250px; - border-top: 1px solid #DDD; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - position: relative; - float: left; -} - -#canvas[data-tutorial='drop'] { - text-align: center; - font-size: 30px; - color: #777; -} - -#canvas[data-tutorial='drop']:before { - content: "Déposez vos couleurs ici"; - width: 40%; - padding: 30px 9% 70px 11%; - - background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); - background-repeat: no-repeat; - background-position: left 35px top 60%; - - text-align: center; - - border: 3px dashed rgb(221, 221, 221); - border-radius: 15px; - - position: absolute; - top: 50px; - left: 20%; -} - -#canvas[data-tutorial='drop']:after { - content: "pour les comparer, les ajuster ou les modifier."; - width: 40%; - font-size: 24px; - position: absolute; - top: 130px; - left: 32%; - z-index: 2; -} - -#canvas [data-tutorial='dblclick'] { - background-color: #999 !important; -} - -#canvas [data-tutorial='dblclick']:before { - content: "double click pour activer"; - width: 80px; - color: #FFF; - position: absolute; - top: 10%; - left: 20%; - z-index: 2; -} - -#canvas .sample { - width: 100px; - height: 100px; - min-width: 20px; - min-height: 20px; - position: absolute; - border: 1px solid rgba(255, 255, 255, 0.3); -} - -#canvas .sample:hover { - cursor: move; -} - -#canvas .sample[data-active='true']:after { - content: ""; - position: absolute; - background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; - width: 100%; - height: 12px; - top: -12px; - z-index: 2; -} - -#canvas .sample:hover > * { - cursor: pointer; - display: block !important; -} - -#canvas .sample .resize-handle { - display: none; -} - -#canvas .sample .pick { - width: 10px; - height: 10px; - margin: 5px; - background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; - position: absolute; - top: 0; - left: 0; - display: none; -} - -#canvas .sample .delete { - width: 10px; - height: 10px; - margin: 5px; - background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; - position: absolute; - top: 0; - right: 0; - display: none; -} - - -/** - * Canvas controls - */ - -#canvas .toggle-bg { - width: 16px; - height: 16px; - margin: 5px; - background: url("images/canvas-controls.png") center left no-repeat; - position: absolute; - top: 0; - right: 0; -} - -#canvas .toggle-bg:hover { - cursor: pointer; -} - -#canvas[data-bg='true'] { - background: none; -} - -#canvas[data-bg='true'] .toggle-bg { - background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; -} - -#zindex { - height: 20px; - margin: 5px; - font-size: 16px; - position: absolute; - opacity: 0; - top: -10000px; - left: 0; - color: #777; - float: left; - transition: opacity 1s; -} - -#zindex input { - border: 1px solid #DDD; - font-size: 16px; - color: #777; -} - -#zindex .ui-input-slider-info { - width: 60px; -} - -#zindex[data-active='true'] { - top: 0; - opacity: 1; -} - - - -JavaScript Content - -'use strict'; - -var UIColorPicker = (function UIColorPicker() { - - function getElemById(id) { - return document.getElementById(id); - } - - var subscribers = []; - var pickers = []; - - /** - * RGBA Color class - * - * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - * @param lightness 0-100 - */ - - function Color(color) { - - if(color instanceof Color === true) { - this.copy(color); - return; - } - - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - this.lightness = 0; - this.format = 'HSV'; - } - - function RGBColor(r, g, b) { - var color = new Color(); - color.setRGBA(r, g, b, 1); - return color; - } - - function RGBAColor(r, g, b, a) { - var color = new Color(); - color.setRGBA(r, g, b, a); - return color; - } - - function HSVColor(h, s, v) { - var color = new Color(); - color.setHSV(h, s, v); - return color; - } - - function HSVAColor(h, s, v, a) { - var color = new Color(); - color.setHSV(h, s, v); - color.a = a; - return color; - } - - function HSLColor(h, s, l) { - var color = new Color(); - color.setHSL(h, s, l); - return color; - } - - function HSLAColor(h, s, l, a) { - var color = new Color(); - color.setHSL(h, s, l); - color.a = a; - return color; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log('Typeof parameter not Color'); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - this.format = '' + obj.format; - this.lightness = obj.lightness; - }; - - Color.prototype.setFormat = function setFormat(format) { - if (format === 'HSV') - this.format = 'HSV'; - if (format === 'HSL') - this.format = 'HSL'; - }; - - /*========== Methods to set Color Properties ==========*/ - - Color.prototype.isValidRGBValue = function isValidRGBValue(value) { - return (typeof(value) === 'number' && isNaN(value) === false && - value >= 0 && value <= 255); - }; - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (this.isValidRGBValue(red) === false || - this.isValidRGBValue(green) === false || - this.isValidRGBValue(blue) === false) - return; - - this.r = red | 0; - this.g = green | 0; - this.b = blue | 0; - - if (this.isValidRGBValue(alpha) === true) - this.a = alpha | 0; - }; - - Color.prototype.setByName = function setByName(name, value) { - if (name === 'r' || name === 'g' || name === 'b') { - if(this.isValidRGBValue(value) === false) - return; - - this[name] = value; - this.updateHSX(); - } - }; - - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.HSVtoRGB(); - }; - - Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { - this.hue = hue; - this.saturation = saturation; - this.lightness = lightness; - this.HSLtoRGB(); - }; - - Color.prototype.setHue = function setHue(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 359) - return; - this.hue = value; - this.updateRGB(); - }; - - Color.prototype.setSaturation = function setSaturation(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.saturation = value; - this.updateRGB(); - }; - - Color.prototype.setValue = function setValue(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.value = value; - this.HSVtoRGB(); - }; - - Color.prototype.setLightness = function setLightness(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.lightness = value; - this.HSLtoRGB(); - }; - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); - - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - this.RGBtoHSV(); - }; - - /*========== Conversion Methods ==========*/ - - Color.prototype.convertToHSL = function convertToHSL() { - if (this.format === 'HSL') - return; - - this.setFormat('HSL'); - this.RGBtoHSL(); - }; - - Color.prototype.convertToHSV = function convertToHSV() { - if (this.format === 'HSV') - return; - - this.setFormat('HSV'); - this.RGBtoHSV(); - }; - - /*========== Update Methods ==========*/ - - Color.prototype.updateRGB = function updateRGB() { - if (this.format === 'HSV') { - this.HSVtoRGB(); - return; - } - - if (this.format === 'HSL') { - this.HSLtoRGB(); - return; - } - }; - - Color.prototype.updateHSX = function updateHSX() { - if (this.format === 'HSV') { - this.RGBtoHSV(); - return; - } - - if (this.format === 'HSL') { - this.RGBtoHSL(); - return; - } - }; - - Color.prototype.HSVtoRGB = function HSVtoRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision | 0; - X = (X + m) * precision | 0; - m = m * precision | 0; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - }; - - Color.prototype.HSLtoRGB = function HSLtoRGB() { - var sat = this.saturation / 100; - var light = this.lightness / 100; - var C = sat * (1 - Math.abs(2 * light - 1)); - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = light - C/2; - var precision = 255; - - C = (C + m) * precision | 0; - X = (X + m) * precision | 0; - m = m * precision | 0; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - }; - - Color.prototype.RGBtoHSV = function RGBtoHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - }; - - Color.prototype.RGBtoHSL = function RGBtoHSL() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - var lightness = (cmax + cmin) / 2; - var X = (1 - Math.abs(2 * lightness - 1)); - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / X; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.lightness = (lightness * 100) | 0; - }; - - /*========== Get Methods ==========*/ - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - }; - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; - var a = ''; - var v = ''; - var x = parseFloat(this.a); - if (x !== 1) { - a = 'a'; - v = ', ' + x; - } - - var value = 'rgb' + a + rgb + v + ')'; - return value; - }; - - Color.prototype.getHSLA = function getHSLA() { - if (this.format === 'HSV') { - var color = new Color(this); - color.setFormat('HSL'); - color.updateHSX(); - return color.getHSLA(); - } - - var a = ''; - var v = ''; - var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; - var x = parseFloat(this.a); - if (x !== 1) { - a = 'a'; - v = ', ' + x; - } - - var value = 'hsl' + a + hsl + v + ')'; - return value; - }; - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - }; - - /*=======================================================================*/ - /*=======================================================================*/ - - /*========== Capture Mouse Movement ==========*/ - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener('mousedown', function(e) { - callback(e); - document.addEventListener('mousemove', callback); - }); - - document.addEventListener('mouseup', function(e) { - document.removeEventListener('mousemove', callback); - }); - }; - - /*====================*/ - // Color Picker Class - /*====================*/ - - function ColorPicker(node) { - this.color = new Color(); - this.node = node; - this.subscribers = []; - - var type = this.node.getAttribute('data-mode'); - var topic = this.node.getAttribute('data-topic'); - - this.topic = topic; - this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; - this.color.setFormat(this.picker_mode); - - this.createPickingArea(); - this.createHueArea(); - - this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); - this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); - this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); - this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); - - this.createAlphaArea(); - - this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); - this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); - this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); - - this.createPreviewBox(); - this.createChangeModeButton(); - - this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); - this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); - - this.setColor(this.color); - pickers[topic] = this; - } - - /*************************************************************************/ - // Function for generating the color-picker - /*************************************************************************/ - - ColorPicker.prototype.createPickingArea = function createPickingArea() { - var area = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'picking-area'; - picker.className = 'picker'; - - this.picking_area = area; - this.color_picker = picker; - setMouseTracking(area, this.updateColor.bind(this)); - - area.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createHueArea = function createHueArea() { - var area = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'hue'; - picker.className ='slider-picker'; - - this.hue_area = area; - this.hue_picker = picker; - setMouseTracking(area, this.updateHueSlider.bind(this)); - - area.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createAlphaArea = function createAlphaArea() { - var area = document.createElement('div'); - var mask = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'alpha'; - mask.className = 'alpha-mask'; - picker.className = 'slider-picker'; - - this.alpha_area = area; - this.alpha_mask = mask; - this.alpha_picker = picker; - setMouseTracking(area, this.updateAlphaSlider.bind(this)); - - area.appendChild(mask); - mask.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { - var preview_box = document.createElement('div'); - var preview_color = document.createElement('div'); - - preview_box.className = 'preview'; - preview_color.className = 'preview-color'; - - this.preview_color = preview_color; - - preview_box.appendChild(preview_color); - this.node.appendChild(preview_box); - }; - - ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { - var wrapper = document.createElement('div'); - var input = document.createElement('input'); - var info = document.createElement('span'); - - wrapper.className = 'input'; - wrapper.setAttribute('data-topic', topic); - info.textContent = title; - info.className = 'name'; - input.setAttribute('type', 'text'); - - wrapper.appendChild(info); - wrapper.appendChild(input); - this.node.appendChild(wrapper); - - input.addEventListener('change', onChangeFunc); - input.addEventListener('click', function() { - this.select(); - }); - - this.subscribe(topic, function(value) { - input.value = value; - }); - }; - - ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { - - var button = document.createElement('div'); - button.className = 'switch_mode'; - button.addEventListener('click', function() { - if (this.picker_mode === 'HSV') - this.setPickerMode('HSL'); - else - this.setPickerMode('HSV'); - - }.bind(this)); - - this.node.appendChild(button); - }; - - /*************************************************************************/ - // Updates properties of UI elements - /*************************************************************************/ - - ColorPicker.prototype.updateColor = function updateColor(e) { - var x = e.pageX - this.picking_area.offsetLeft; - var y = e.pageY - this.picking_area.offsetTop; - var picker_offset = 5; - - // width and height should be the same - var size = this.picking_area.clientWidth; - - if (x > size) x = size; - if (y > size) y = size; - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - if (this.picker_mode === 'HSV') - this.color.setHSV(this.color.hue, saturation, value); - if (this.picker_mode === 'HSL') - this.color.setHSL(this.color.hue, saturation, value); - - this.color_picker.style.left = x - picker_offset + 'px'; - this.color_picker.style.top = y - picker_offset + 'px'; - - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('value', value); - this.notify('lightness', value); - this.notify('saturation', saturation); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - - notify(this.topic, this.color); - }; - - ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { - var x = e.pageX - this.hue_area.offsetLeft; - var width = this.hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - // TODO 360 => 359 - var hue = ((359 * x) / width) | 0; - // if (hue === 360) hue = 359; - - this.updateSliderPosition(this.hue_picker, x); - this.setHue(hue); - }; - - ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { - var x = e.pageX - this.alpha_area.offsetLeft; - var width = this.alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - this.color.a = (x / width).toFixed(2); - - this.updateSliderPosition(this.alpha_picker, x); - this.updatePreviewColor(); - - this.notify('alpha', this.color.a); - notify(this.topic, this.color); - }; - - ColorPicker.prototype.setHue = function setHue(value) { - this.color.setHue(value); - - this.updatePickerBackground(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - this.notify('hue', this.color.hue); - - notify(this.topic, this.color); - }; - - // Updates when one of Saturation/Value/Lightness changes - ColorPicker.prototype.updateSLV = function updateSLV() { - this.updatePickerPosition(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - - notify(this.topic, this.color); - }; - - /*************************************************************************/ - // Update positions of various UI elements - /*************************************************************************/ - - ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { - var size = this.picking_area.clientWidth; - var value = 0; - var offset = 5; - - if (this.picker_mode === 'HSV') - value = this.color.value; - if (this.picker_mode === 'HSL') - value = this.color.lightness; - - var x = (this.color.saturation * size / 100) | 0; - var y = size - (value * size / 100) | 0; - - this.color_picker.style.left = x - offset + 'px'; - this.color_picker.style.top = y - offset + 'px'; - }; - - ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { - elem.style.left = Math.max(pos - 3, -2) + 'px'; - }; - - ColorPicker.prototype.updateHuePicker = function updateHuePicker() { - var size = this.hue_area.clientWidth; - var offset = 1; - var pos = (this.color.hue * size / 360 ) | 0; - this.hue_picker.style.left = pos - offset + 'px'; - }; - - ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { - var size = this.alpha_area.clientWidth; - var offset = 1; - var pos = (this.color.a * size) | 0; - this.alpha_picker.style.left = pos - offset + 'px'; - }; - - /*************************************************************************/ - // Update background colors - /*************************************************************************/ - - ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { - var nc = new Color(this.color); - nc.setHSV(nc.hue, 100, 100); - this.picking_area.style.backgroundColor = nc.getHexa(); - }; - - ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { - this.alpha_mask.style.backgroundColor = this.color.getHexa(); - }; - - ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { - this.preview_color.style.backgroundColor = this.color.getColor(); - }; - - /*************************************************************************/ - // Update input elements - /*************************************************************************/ - - ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { - var value = parseInt(e.target.value); - this.setHue(value); - this.updateHuePicker(); - }; - - ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { - var value = parseInt(e.target.value); - this.color.setSaturation(value); - e.target.value = this.color.saturation; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { - var value = parseInt(e.target.value); - this.color.setValue(value); - e.target.value = this.color.value; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { - var value = parseInt(e.target.value); - this.color.setLightness(value); - e.target.value = this.color.lightness; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { - var value = parseInt(e.target.value); - this.color.setByName('r', value); - e.target.value = this.color.r; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { - var value = parseInt(e.target.value); - this.color.setByName('g', value); - e.target.value = this.color.g; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { - var value = parseInt(e.target.value); - this.color.setByName('b', value); - e.target.value = this.color.b; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { - var value = parseFloat(e.target.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - this.color.a = value.toFixed(2); - - e.target.value = this.color.a; - this.updateAlphaPicker(); - }; - - ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { - var value = e.target.value; - this.color.setHexa(value); - this.setColor(this.color); - }; - - /*************************************************************************/ - // Internal Pub/Sub - /*************************************************************************/ - - ColorPicker.prototype.subscribe = function subscribe(topic, callback) { - this.subscribers[topic] = callback; - }; - - ColorPicker.prototype.notify = function notify(topic, value) { - if (this.subscribers[topic]) - this.subscribers[topic](value); - }; - - /*************************************************************************/ - // Set Picker Properties - /*************************************************************************/ - - ColorPicker.prototype.setColor = function setColor(color) { - if(color instanceof Color !== true) { - console.log('Typeof parameter not Color'); - return; - } - - if (color.format !== this.picker_mode) { - color.setFormat(this.picker_mode); - color.updateHSX(); - } - - this.color.copy(color); - this.updateHuePicker(); - this.updatePickerPosition(); - this.updatePickerBackground(); - this.updateAlphaPicker(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - - this.notify('hue', this.color.hue); - this.notify('saturation', this.color.saturation); - this.notify('value', this.color.value); - this.notify('lightness', this.color.lightness); - - this.notify('alpha', this.color.a); - this.notify('hexa', this.color.getHexa()); - notify(this.topic, this.color); - }; - - ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { - if (mode !== 'HSV' && mode !== 'HSL') - return; - - this.picker_mode = mode; - this.node.setAttribute('data-mode', this.picker_mode); - this.setColor(this.color); - }; - - /*************************************************************************/ - // UNUSED - /*************************************************************************/ - - var setPickerMode = function setPickerMode(topic, mode) { - if (pickers[topic]) - pickers[topic].setPickerMode(mode); - }; - - var setColor = function setColor(topic, color) { - if (pickers[topic]) - pickers[topic].setColor(color); - }; - - var getColor = function getColor(topic) { - if (pickers[topic]) - return new Color(pickers[topic].color); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - }; - - var notify = function notify(topic, value) { - if (subscribers[topic] === undefined || subscribers[topic].length === 0) - return; - - var color = new Color(value); - for (var i in subscribers[topic]) - subscribers[topic][i](color); - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-color-picker'); - var size = elem.length; - for (var i = 0; i < size; i++) - new ColorPicker(elem[i]); - }; - - return { - init : init, - Color : Color, - RGBColor : RGBColor, - RGBAColor : RGBAColor, - HSVColor : HSVColor, - HSVAColor : HSVAColor, - HSLColor : HSLColor, - HSLAColor : HSLAColor, - setColor : setColor, - getColor : getColor, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPickerMode : setPickerMode - }; - -})(); - - - -/** - * UI-SlidersManager - */ - -var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - input.style.width = 50 + obj.precision * 10 + 'px'; - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseFloat(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - return input; - }; - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - document.removeEventListener("mousemove", sliderMotion); - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - - document.addEventListener("mouseup", slideEnd); - document.addEventListener("mousemove", sliderMotion); - }); - - var slideEnd = function slideEnd(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }; - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - }; - - return slider; - }; - - var InputSlider = function(node) { - var min = parseFloat(node.getAttribute('data-min')); - var max = parseFloat(node.getAttribute('data-max')); - var step = parseFloat(node.getAttribute('data-step')); - var value = parseFloat(node.getAttribute('data-value')); - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensivity = node.getAttribute('data-sensivity') | 0; - var precision = node.getAttribute('data-precision') | 0; - - this.min = isNaN(min) ? 0 : min; - this.max = isNaN(max) ? 100 : max; - this.precision = precision >= 0 ? precision : 0; - this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); - this.topic = topic; - this.node = node; - this.unit = unit === null ? '' : unit; - this.sensivity = sensivity > 0 ? sensivity : 5; - value = isNaN(value) ? this.min : value; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - }; - - InputSlider.prototype.setInputValue = function setInputValue() { - this.input.value = this.value.toFixed(this.precision) + this.unit; - }; - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = parseFloat(value.toFixed(slider.precision)); - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - slider.setInputValue(); - - if (send_notify === false) - return; - - notify.call(slider); - }; - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - }; - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - }; - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - }; - - var setStep = function setStep(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.step = parseFloat(value); - setValue(topic, slider.value); - }; - - var setPrecision = function setPrecision(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - slider.precision = value; - - var step = parseFloat(slider.step.toFixed(value)); - if (step === 0) - slider.step = 1 / Math.pow(10, value); - - setValue(topic, slider.value); - }; - - var setSensivity = function setSensivity(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - - slider.sensivity = value > 0 ? value : 5; - }; - - var getNode = function getNode(topic) { - return sliders[topic].node; - }; - - var getPrecision = function getPrecision(topic) { - return sliders[topic].precision; - }; - - var getStep = function getStep(topic) { - return sliders[topic].step; - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.value); - }; - - var createSlider = function createSlider(topic, label) { - var slider = document.createElement('div'); - slider.className = 'ui-input-slider'; - slider.setAttribute('data-topic', topic); - - if (label !== undefined) - slider.setAttribute('data-info', label); - - new InputSlider(slider); - return slider; - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - }; - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - setStep : setStep, - getNode : getNode, - getStep : getStep, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPrecision : setPrecision, - setSensivity : setSensivity, - getPrecision : getPrecision, - createSlider : createSlider, - }; - -})(); - - -'use strict'; - -window.addEventListener("load", function() { - ColorPickerTool.init(); -}); - -var ColorPickerTool = (function ColorPickerTool() { - - /*========== Get DOM Element By ID ==========*/ - - function getElemById(id) { - return document.getElementById(id); - } - - function allowDropEvent(e) { - e.preventDefault(); - } - - /*========== Make an element resizable relative to it's parent ==========*/ - - var UIComponent = (function UIComponent() { - - function makeResizable(elem, axis) { - var valueX = 0; - var valueY = 0; - var action = 0; - - var resizeStart = function resizeStart(e) { - e.stopPropagation(); - e.preventDefault(); - if (e.button !== 0) - return; - - valueX = e.clientX - elem.clientWidth; - valueY = e.clientY - elem.clientHeight; - - document.body.setAttribute('data-resize', axis); - document.addEventListener('mousemove', mouseMove); - document.addEventListener('mouseup', resizeEnd); - }; - - var mouseMove = function mouseMove(e) { - if (action >= 0) - elem.style.width = e.clientX - valueX + 'px'; - if (action <= 0) - elem.style.height = e.clientY - valueY + 'px'; - }; - - var resizeEnd = function resizeEnd(e) { - if (e.button !== 0) - return; - - document.body.removeAttribute('data-resize', axis); - document.removeEventListener('mousemove', mouseMove); - document.removeEventListener('mouseup', resizeEnd); - }; - - var handle = document.createElement('div'); - handle.className = 'resize-handle'; - - if (axis === 'width') action = 1; - else if (axis === 'height') action = -1; - else axis = 'both'; - - handle.className = 'resize-handle'; - handle.setAttribute('data-resize', axis); - handle.addEventListener('mousedown', resizeStart); - elem.appendChild(handle); - }; - - /*========== Make an element draggable relative to it's parent ==========*/ - - var makeDraggable = function makeDraggable(elem, endFunction) { - - var offsetTop; - var offsetLeft; - - elem.setAttribute('data-draggable', 'true'); - - var dragStart = function dragStart(e) { - e.preventDefault(); - e.stopPropagation(); - - if (e.target.getAttribute('data-draggable') !== 'true' || - e.target !== elem || e.button !== 0) - return; - - offsetLeft = e.clientX - elem.offsetLeft; - offsetTop = e.clientY - elem.offsetTop; - - document.addEventListener('mousemove', mouseDrag); - document.addEventListener('mouseup', dragEnd); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - document.removeEventListener('mousemove', mouseDrag); - document.removeEventListener('mouseup', dragEnd); - }; - - var mouseDrag = function mouseDrag(e) { - elem.style.left = e.clientX - offsetLeft + 'px'; - elem.style.top = e.clientY - offsetTop + 'px'; - }; - - elem.addEventListener('mousedown', dragStart, false); - }; - - return { - makeResizable : makeResizable, - makeDraggable : makeDraggable - }; - - })(); - - /*========== Color Class ==========*/ - - var Color = UIColorPicker.Color; - var HSLColor = UIColorPicker.HSLColor; - - /** - * ColorPalette - */ - var ColorPalette = (function ColorPalette() { - - var samples = []; - var color_palette; - var complementary; - - var hideNode = function(node) { - node.setAttribute('data-hidden', 'true'); - }; - - var ColorSample = function ColorSample(id) { - var node = document.createElement('div'); - node.className = 'sample'; - - this.uid = samples.length; - this.node = node; - this.color = new Color(); - - node.setAttribute('sample-id', this.uid); - node.setAttribute('draggable', 'true'); - node.addEventListener('dragstart', this.dragStart.bind(this)); - node.addEventListener('click', this.pickColor.bind(this)); - - samples.push(this); - }; - - ColorSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - ColorSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { - this.color.copy(color); - var hue = (steps * degree + this.color.hue) % 360; - if (hue < 0) hue += 360; - this.color.setHue(hue); - this.updateBgColor(); - }; - - ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { - var saturation = color.saturation + value * steps; - if (saturation <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setSaturation(saturation); - this.updateBgColor(); - }; - - ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { - var lightness = color.lightness + value * steps; - if (lightness <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setLightness(lightness); - this.updateBgColor(); - }; - - ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { - var brightness = color.value + value * steps; - if (brightness <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setValue(brightness); - this.updateBgColor(); - }; - - ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { - var alpha = parseFloat(color.a) + value * steps; - if (alpha <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.a = parseFloat(alpha.toFixed(2)); - this.updateBgColor(); - }; - - ColorSample.prototype.pickColor = function pickColor() { - UIColorPicker.setColor('picker', this.color); - }; - - ColorSample.prototype.dragStart = function dragStart(e) { - e.dataTransfer.setData('sampleID', this.uid); - e.dataTransfer.setData('location', 'palette-samples'); - }; - - var Palette = function Palette(text, size) { - this.samples = []; - this.locked = false; - - var palette = document.createElement('div'); - var title = document.createElement('div'); - var controls = document.createElement('div'); - var container = document.createElement('div'); - var lock = document.createElement('div'); - - container.className = 'container'; - title.className = 'title'; - palette.className = 'palette'; - controls.className = 'controls'; - lock.className = 'lock'; - title.textContent = text; - - controls.appendChild(lock); - container.appendChild(title); - container.appendChild(controls); - container.appendChild(palette); - - lock.addEventListener('click', function () { - this.locked = !this.locked; - lock.setAttribute('locked-state', this.locked); - }.bind(this)); - - for(var i = 0; i < size; i++) { - var sample = new ColorSample(); - this.samples.push(sample); - palette.appendChild(sample.node); - } - - this.container = container; - this.title = title; - }; - - var createHuePalette = function createHuePalette() { - var palette = new Palette('Teinte', 12); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 12; i++) { - palette.samples[i].updateHue(color, 30, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var createSaturationPalette = function createSaturationPalette() { - var palette = new Palette('Saturation', 11); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 11; i++) { - palette.samples[i].updateSaturation(color, -10, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - /* Brightness or Lightness - depends on the picker mode */ - var createVLPalette = function createSaturationPalette() { - var palette = new Palette('Lightness', 11); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - if(color.format === 'HSL') { - palette.title.textContent = 'Luminosité'; - for(var i = 0; i < 11; i++) - palette.samples[i].updateLightness(color, -10, i); - } - else { - palette.title.textContent = 'Valeur'; - for(var i = 0; i < 11; i++) - palette.samples[i].updateBrightness(color, -10, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var isBlankPalette = function isBlankPalette(container, value) { - if (value === 0) { - container.setAttribute('data-collapsed', 'true'); - return true; - } - - container.removeAttribute('data-collapsed'); - return false; - }; - - var createAlphaPalette = function createAlphaPalette() { - var palette = new Palette('Alpha', 10); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 10; i++) { - palette.samples[i].updateAlpha(color, -0.1, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var getSampleColor = function getSampleColor(id) { - if (samples[id] !== undefined && samples[id]!== null) - return new Color(samples[id].color); - }; - - var init = function init() { - color_palette = getElemById('color-palette'); - - createHuePalette(); - createSaturationPalette(); - createVLPalette(); - createAlphaPalette(); - - }; - - return { - init : init, - getSampleColor : getSampleColor - }; - - })(); - - /** - * ColorInfo - */ - var ColorInfo = (function ColorInfo() { - - var info_box; - var select; - var RGBA; - var HEXA; - var HSLA; - - var updateInfo = function updateInfo(color) { - if (color.a | 0 === 1) { - RGBA.info.textContent = 'RGB'; - HSLA.info.textContent = 'HSL'; - } - else { - RGBA.info.textContent = 'RGBA'; - HSLA.info.textContent = 'HSLA'; - } - - RGBA.value.value = color.getRGBA(); - HSLA.value.value = color.getHSLA(); - HEXA.value.value = color.getHexa(); - }; - - var InfoProperty = function InfoProperty(info) { - - var node = document.createElement('div'); - var title = document.createElement('div'); - var value = document.createElement('input'); - var copy = document.createElement('div'); - - node.className = 'property'; - title.className = 'type'; - value.className = 'value'; - copy.className = 'copy'; - - title.textContent = info; - value.setAttribute('type', 'text'); - - copy.addEventListener('click', function() { - value.select(); - }); - - node.appendChild(title); - node.appendChild(value); - node.appendChild(copy); - - this.node = node; - this.value = value; - this.info = title; - - info_box.appendChild(node); - }; - - var init = function init() { - - info_box = getElemById('color-info'); - - RGBA = new InfoProperty('RGBA'); - HSLA = new InfoProperty('HSLA'); - HEXA = new InfoProperty('HEXA'); - - UIColorPicker.subscribe('picker', updateInfo); - - }; - - return { - init: init - }; - - })(); - - /** - * ColorPicker Samples - */ - var ColorPickerSamples = (function ColorPickerSamples() { - - var samples = []; - var nr_samples = 0; - var active = null; - var container = null; - var samples_per_line = 10; - var trash_can = null; - var base_color = new HSLColor(0, 50, 100); - var add_btn; - var add_btn_pos; - - var ColorSample = function ColorSample() { - var node = document.createElement('div'); - node.className = 'sample'; - - this.uid = samples.length; - this.index = nr_samples++; - this.node = node; - this.color = new Color(base_color); - - node.setAttribute('sample-id', this.uid); - node.setAttribute('draggable', 'true'); - - node.addEventListener('dragstart', this.dragStart.bind(this)); - node.addEventListener('dragover' , allowDropEvent); - node.addEventListener('drop' , this.dragDrop.bind(this)); - - this.updatePosition(this.index); - this.updateBgColor(); - samples.push(this); - }; - - ColorSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - ColorSample.prototype.updatePosition = function updatePosition(index) { - this.index = index; - this.posY = 5 + ((index / samples_per_line) | 0) * 52; - this.posX = 5 + ((index % samples_per_line) | 0) * 52; - this.node.style.top = this.posY + 'px'; - this.node.style.left = this.posX + 'px'; - }; - - ColorSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - ColorSample.prototype.activate = function activate() { - UIColorPicker.setColor('picker', this.color); - this.node.setAttribute('data-active', 'true'); - }; - - ColorSample.prototype.deactivate = function deactivate() { - this.node.removeAttribute('data-active'); - }; - - ColorSample.prototype.dragStart = function dragStart(e) { - e.dataTransfer.setData('sampleID', this.uid); - e.dataTransfer.setData('location', 'picker-samples'); - }; - - ColorSample.prototype.dragDrop = function dragDrop(e) { - e.stopPropagation(); - this.color = Tool.getSampleColorFrom(e); - this.updateBgColor(); - }; - - ColorSample.prototype.deleteSample = function deleteSample() { - container.removeChild(this.node); - samples[this.uid] = null; - nr_samples--; - }; - - var updateUI = function updateUI() { - updateContainerProp(); - - var index = 0; - var nr = samples.length; - for (var i=0; i < nr; i++) - if (samples[i] !== null) { - samples[i].updatePosition(index); - index++; - } - - AddSampleButton.updatePosition(index); - }; - - var deleteSample = function deleteSample(e) { - trash_can.parentElement.setAttribute('drag-state', 'none'); - - var location = e.dataTransfer.getData('location'); - if (location !== 'picker-samples') - return; - - var sampleID = e.dataTransfer.getData('sampleID'); - samples[sampleID].deleteSample(); - console.log(samples); - - updateUI(); - }; - - var createDropSample = function createDropSample() { - var sample = document.createElement('div'); - sample.id = 'drop-effect-sample'; - sample.className = 'sample'; - container.appendChild(sample); - }; - - var setActivateSample = function setActivateSample(e) { - if (e.target.className !== 'sample') - return; - - unsetActiveSample(active); - Tool.unsetVoidSample(); - CanvasSamples.unsetActiveSample(); - active = samples[e.target.getAttribute('sample-id')]; - active.activate(); - }; - - var unsetActiveSample = function unsetActiveSample() { - if (active) - active.deactivate(); - active = null; - }; - - var getSampleColor = function getSampleColor(id) { - if (samples[id] !== undefined && samples[id]!== null) - return new Color(samples[id].color); - }; - - var updateContainerProp = function updateContainerProp() { - samples_per_line = ((container.clientWidth - 5) / 52) | 0; - var height = 52 * (1 + (nr_samples / samples_per_line) | 0); - container.style.height = height + 10 + 'px'; - }; - - var AddSampleButton = (function AddSampleButton() { - var node; - var _index = 0; - var _posX; - var _posY; - - var updatePosition = function updatePosition(index) { - _index = index; - _posY = 5 + ((index / samples_per_line) | 0) * 52; - _posX = 5 + ((index % samples_per_line) | 0) * 52; - - node.style.top = _posY + 'px'; - node.style.left = _posX + 'px'; - }; - - var addButtonClick = function addButtonClick() { - var sample = new ColorSample(); - container.appendChild(sample.node); - updatePosition(_index + 1); - updateUI(); - }; - - var init = function init() { - node = document.createElement('div'); - var icon = document.createElement('div'); - - node.className = 'sample'; - icon.id = 'add-icon'; - node.appendChild(icon); - node.addEventListener('click', addButtonClick); - - updatePosition(0); - container.appendChild(node); - }; - - return { - init : init, - updatePosition : updatePosition - }; - })(); - - var init = function init() { - container = getElemById('picker-samples'); - trash_can = getElemById('trash-can'); - - AddSampleButton.init(); - - for (var i=0; i<16; i++) { - var sample = new ColorSample(); - container.appendChild(sample.node); - } - - AddSampleButton.updatePosition(samples.length); - updateUI(); - - active = samples[0]; - active.activate(); - - container.addEventListener('click', setActivateSample); - - trash_can.addEventListener('dragover', allowDropEvent); - trash_can.addEventListener('dragenter', function() { - this.parentElement.setAttribute('drag-state', 'enter'); - }); - trash_can.addEventListener('dragleave', function(e) { - this.parentElement.setAttribute('drag-state', 'none'); - }); - trash_can.addEventListener('drop', deleteSample); - - UIColorPicker.subscribe('picker', function(color) { - if (active) - active.updateColor(color); - }); - - }; - - return { - init : init, - getSampleColor : getSampleColor, - unsetActiveSample : unsetActiveSample - }; - - })(); - - /** - * Canvas Samples - */ - var CanvasSamples = (function CanvasSamples() { - - var active = null; - var canvas = null; - var samples = []; - var zindex = null; - var tutorial = true; - - var CanvasSample = function CanvasSample(color, posX, posY) { - - var node = document.createElement('div'); - var pick = document.createElement('div'); - var delete_btn = document.createElement('div'); - node.className = 'sample'; - pick.className = 'pick'; - delete_btn.className = 'delete'; - - this.uid = samples.length; - this.node = node; - this.color = color; - this.updateBgColor(); - this.zIndex = 1; - - node.style.top = posY - 50 + 'px'; - node.style.left = posX - 50 + 'px'; - node.setAttribute('sample-id', this.uid); - - node.appendChild(pick); - node.appendChild(delete_btn); - - var activate = function activate() { - setActiveSample(this); - }.bind(this); - - node.addEventListener('dblclick', activate); - pick.addEventListener('click', activate); - delete_btn.addEventListener('click', this.deleteSample.bind(this)); - - UIComponent.makeDraggable(node); - UIComponent.makeResizable(node); - - samples.push(this); - canvas.appendChild(node); - return this; - }; - - CanvasSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - CanvasSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - CanvasSample.prototype.updateZIndex = function updateZIndex(value) { - this.zIndex = value; - this.node.style.zIndex = value; - }; - - CanvasSample.prototype.activate = function activate() { - this.node.setAttribute('data-active', 'true'); - zindex.setAttribute('data-active', 'true'); - - UIColorPicker.setColor('picker', this.color); - InputSliderManager.setValue('z-index', this.zIndex); - }; - - CanvasSample.prototype.deactivate = function deactivate() { - this.node.removeAttribute('data-active'); - zindex.removeAttribute('data-active'); - }; - - CanvasSample.prototype.deleteSample = function deleteSample() { - if (active === this) - unsetActiveSample(); - canvas.removeChild(this.node); - samples[this.uid] = null; - }; - - CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { - this.node.style.top = posY - this.startY + 'px'; - this.node.style.left = posX - this.startX + 'px'; - }; - - var canvasDropEvent = function canvasDropEvent(e) { - var color = Tool.getSampleColorFrom(e); - - if (color) { - var offsetX = e.pageX - canvas.offsetLeft; - var offsetY = e.pageY - canvas.offsetTop; - var sample = new CanvasSample(color, offsetX, offsetY); - if (tutorial) { - tutorial = false; - canvas.removeAttribute('data-tutorial'); - var info = new CanvasSample(new Color(), 100, 100); - info.node.setAttribute('data-tutorial', 'dblclick'); - } - } - - }; - - var setActiveSample = function setActiveSample(sample) { - ColorPickerSamples.unsetActiveSample(); - Tool.unsetVoidSample(); - unsetActiveSample(); - active = sample; - active.activate(); - }; - - var unsetActiveSample = function unsetActiveSample() { - if (active) - active.deactivate(); - active = null; - }; - - var createToggleBgButton = function createToggleBgButton() { - var button = document.createElement('div'); - var state = false; - button.className = 'toggle-bg'; - canvas.appendChild(button); - - button.addEventListener('click', function() { - console.log(state); - state = !state; - canvas.setAttribute('data-bg', state); - }); - }; - - var init = function init() { - canvas = getElemById('canvas'); - zindex = getElemById('zindex'); - - canvas.addEventListener('dragover', allowDropEvent); - canvas.addEventListener('drop', canvasDropEvent); - - createToggleBgButton(); - - UIColorPicker.subscribe('picker', function(color) { - if (active) active.updateColor(color); - }); - - InputSliderManager.subscribe('z-index', function (value) { - if (active) active.updateZIndex(value); - }); - - UIComponent.makeResizable(canvas, 'height'); - }; - - return { - init : init, - unsetActiveSample : unsetActiveSample - }; - - })(); - - var StateButton = function StateButton(node, state) { - this.state = false; - this.callback = null; - - node.addEventListener('click', function() { - this.state = !this.state; - if (typeof this.callback === "function") - this.callback(this.state); - }.bind(this)); - }; - - StateButton.prototype.set = function set() { - this.state = true; - if (typeof this.callback === "function") - this.callback(this.state); - }; - - StateButton.prototype.unset = function unset() { - this.state = false; - if (typeof this.callback === "function") - this.callback(this.state); - }; - - StateButton.prototype.subscribe = function subscribe(func) { - this.callback = func; - }; - - - /** - * Tool - */ - var Tool = (function Tool() { - - var samples = []; - var controls = null; - var void_sw; - - var createPickerModeSwitch = function createPickerModeSwitch() { - var parent = getElemById('controls'); - var icon = document.createElement('div'); - var button = document.createElement('div'); - var hsv = document.createElement('div'); - var hsl = document.createElement('div'); - var active = null; - - icon.className = 'icon picker-icon'; - button.className = 'switch'; - button.appendChild(hsv); - button.appendChild(hsl); - - hsv.textContent = 'HSV'; - hsl.textContent = 'HSL'; - - active = hsl; - active.setAttribute('data-active', 'true'); - - function switchPickingModeTo(elem) { - active.removeAttribute('data-active'); - active = elem; - active.setAttribute('data-active', 'true'); - UIColorPicker.setPickerMode('picker', active.textContent); - }; - - var picker_sw = new StateButton(icon); - picker_sw.subscribe(function() { - if (active === hsv) - switchPickingModeTo(hsl); - else - switchPickingModeTo(hsv); - }); - - hsv.addEventListener('click', function() { - switchPickingModeTo(hsv); - }); - hsl.addEventListener('click', function() { - switchPickingModeTo(hsl); - }); - - parent.appendChild(icon); - parent.appendChild(button); - }; - - var setPickerDragAndDrop = function setPickerDragAndDrop() { - var preview = document.querySelector('#picker .preview-color'); - var picking_area = document.querySelector('#picker .picking-area'); - - preview.setAttribute('draggable', 'true'); - preview.addEventListener('drop', drop); - preview.addEventListener('dragstart', dragStart); - preview.addEventListener('dragover', allowDropEvent); - - picking_area.addEventListener('drop', drop); - picking_area.addEventListener('dragover', allowDropEvent); - - function drop(e) { - var color = getSampleColorFrom(e); - UIColorPicker.setColor('picker', color); - }; - - function dragStart(e) { - e.dataTransfer.setData('sampleID', 'picker'); - e.dataTransfer.setData('location', 'picker'); - }; - }; - - var getSampleColorFrom = function getSampleColorFrom(e) { - var sampleID = e.dataTransfer.getData('sampleID'); - var location = e.dataTransfer.getData('location'); - - if (location === 'picker') - return UIColorPicker.getColor(sampleID); - if (location === 'picker-samples') - return ColorPickerSamples.getSampleColor(sampleID); - if (location === 'palette-samples') - return ColorPalette.getSampleColor(sampleID); - }; - - var setVoidSwitch = function setVoidSwitch() { - var void_sample = getElemById('void-sample'); - void_sw = new StateButton(void_sample); - void_sw.subscribe( function (state) { - void_sample.setAttribute('data-active', state); - if (state === true) { - ColorPickerSamples.unsetActiveSample(); - CanvasSamples.unsetActiveSample(); - } - }); - }; - - var unsetVoidSample = function unsetVoidSample() { - void_sw.unset(); - }; - - var init = function init() { - controls = getElemById('controls'); - - var color = new Color(); - color.setHSL(0, 51, 51); - UIColorPicker.setColor('picker', color); - - setPickerDragAndDrop(); - createPickerModeSwitch(); - setVoidSwitch(); - }; - - return { - init : init, - unsetVoidSample : unsetVoidSample, - getSampleColorFrom : getSampleColorFrom - }; - - })(); - - var init = function init() { - UIColorPicker.init(); - InputSliderManager.init(); - ColorInfo.init(); - ColorPalette.init(); - ColorPickerSamples.init(); - CanvasSamples.init(); - Tool.init(); - }; - - return { - init : init - }; - -})(); - - - - - -{{CSSRef}} - - - - -Cet outil vous permet de définir des couleurs web personnalisées. - - - - - -L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé RGB en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé HSL en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla). - - - - - -Chaque couleur est prédéfinie dans les 3 formats standard CSS. - - - - - -En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha). - - - - - -Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation). - - - - - -{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}} - - - -Voir aussi - - - Appliquer des couleurs sur des éléments HTML avec CSS - La mise en forme du texte et les polices - Mettre en forme des bordures avec CSS - Modifier l'arrière-plan avec CSS - Les couleurs et le contraste -``` +{{EmbedGHLiveSample("css-examples/tools/color-picker/", '100%', 900)}}
\ No newline at end of file diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index ebb8984bf0..3975a675e2 100644 --- a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -1,12 +1,6 @@ --- title: Les concepts de base des grilles CSS slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base --- @@ -135,7 +129,7 @@ Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque é } ``` -{{ EmbedLiveSample('grid_first', '610', '140') }} +{{ EmbedLiveSample('Les_pistes', '610', '140') }} ### L'unité fr diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md index 3a3d192874..2ae251e3d2 100644 --- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md @@ -1,12 +1,6 @@ --- title: L'alignement des boîtes avec les grilles CSS slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout -tags: - - CSS - - CSS Grid - - Grille CSS - - Guides - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS --- @@ -102,7 +96,7 @@ Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la pro </div> ``` -{{EmbedLiveSample('utiliser_align-items', '500', '450')}} +{{EmbedLiveSample('Utiliser_align-items', '500', '450')}} Lorsqu'on utilise `align-self: start`, la hauteur de chaque `<div>` sera déterminée par le contenu du `<div>`. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque `<div>` sera étiré afin de remplir la zone de la grille. @@ -168,7 +162,7 @@ Dans le prochain exemple, on utilise la propriété `align-self` afin d'illustre </div> ``` -{{EmbedLiveSample('utiliser_align-self', '500', '450')}} +{{EmbedLiveSample('Utiliser_align-self', '500', '450')}} ### Gestion des objets avec un ratio intrinsèque @@ -250,9 +244,7 @@ Là encore, la valeur par défaut `stretch` pour les objets qui n'ont pas de rat </div> ``` -Justifier_les_objets_sur_laxe_en_ligne_inline_axis - -{{EmbedLiveSample('alignment_3', '500', '450')}} +{{EmbedLiveSample('Justifier_les_objets_sur_laxe_en_ligne_inline_axis', '500', '450')}} Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille. @@ -389,7 +381,7 @@ La propriété `align-content` s'applique sur le conteneur de la grille car elle </div> ``` -{{EmbedLiveSample('alignement_par_defaut', '500', '520')}} +{{EmbedLiveSample('Alignement_par_défaut', '500', '520')}} ### Utiliser align-content: end @@ -450,7 +442,7 @@ Si on ajoute `align-content` avec la valeur `end` sur le conteneur, les pistes s </div> ``` -{{EmbedLiveSample('align-content_end', '500', '520')}} +{{EmbedLiveSample('Utiliser_align-content_end', '500', '520')}} ### Utiliser align-content: space-between @@ -511,7 +503,7 @@ Pour cette propriété, on peut également utiliser des valeurs qu'on manipule a </div> ``` -{{EmbedLiveSample('align-content_end_space-between', '500', '1570')}} +{{EmbedLiveSample('Utiliser_align-content_space-between', '500', '1570')}} On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer. diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md index 6291e0ad41..2bddcda1bb 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md @@ -1,12 +1,6 @@ --- title: Les grilles CSS et l'amélioration progressive slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive --- @@ -182,7 +176,7 @@ Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du f </div> ``` -{{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}} +{{EmbedLiveSample('Un_exemple_plus_complexe', '550', '400')}} Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée. @@ -291,7 +285,7 @@ On utilise donc `@supports` pour vérifier la prise en charge de `display: grid` </div> ``` -{{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}} +{{EmbedLiveSample('Une_solution_avec_les_requêtes_de_fonctionnalité', '550', '480')}} ## Surcharger les autres valeurs pour `display` diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md index 9cf0afc469..f22c645dc6 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md @@ -1,12 +1,6 @@ --- title: Les grilles CSS, les valeurs logiques et les modes d'écriture slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guides - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes original_slug: >- Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture @@ -184,7 +178,7 @@ Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir </div> ``` -{{EmbedLiveSample("definir_writing-mode", '500', '330')}} +{{EmbedLiveSample("Définir_writing-mode", '500', '330')}}  @@ -313,7 +307,7 @@ Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne </div> ``` -{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à _droite", '500', '330')}} +{{EmbedLiveSample("Placement_sur_les_lignes_pour_du_texte_de_gauche_à _droite", '500', '330')}} ### Placement sur les lignes pour du texte de droite à gauche @@ -365,7 +359,7 @@ Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur `rtl` </div> ``` -{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à _gauche", '500', '330')}} +{{EmbedLiveSample("Placement_sur_les_lignes_pour_du_texte_de_droite_à _gauche", '500', '330')}} On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet. diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md index b340f23c01..aba4861212 100644 --- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md @@ -1,11 +1,6 @@ --- title: Définir des zones sur une grille slug: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille --- @@ -232,7 +227,7 @@ La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n' La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide. -## Redéfinir une grille à avec des _media queries_ +## Redéfinir une grille avec des _media queries_ Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément. diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md index 4b6a3c350d..73115758da 100644 --- a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md @@ -286,7 +286,7 @@ On peut également utiliser le mot-clé `span`. Avec la règle suivante, le deux </div> ``` -{{EmbedLiveSample("une_grille_à _12_colonnes_avec_repeat", '500', '330')}} +{{EmbedLiveSample("Une_grille_à _12_colonnes_avec_repeat", '500', '330')}} Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes : @@ -426,7 +426,7 @@ Pour placer ces éléments, on utilise la grille de la façon suivante : } ``` -{{ EmbedLiveSample('cadre_d_une_grille_à _12_colonnes', '500', '330') }} +{{ EmbedLiveSample('Cadre_dune_grille_à _12_colonnes', '500', '330') }} Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne : diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md index 2bfa068958..50b9b76b05 100644 --- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md @@ -1,12 +1,6 @@ --- title: Construire des dispositions courantes avec des grilles CSS slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout original_slug: >- Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS @@ -550,7 +544,7 @@ h2 { } ``` -{{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}} +{{EmbedLiveSample('Empêcher_les_espaces_avec_dense', '800', '900')}} Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML. diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md index 5272f1bbdb..b02c8290f6 100644 --- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md @@ -510,7 +510,7 @@ Si on utilise `display:` `contents` sur un élément, la boîte qu'il aurait nor } ``` -{{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}} +{{EmbedLiveSample('Utiliser_display_contents_avant', '400', '420')}} ### Utiliser display contents après @@ -567,7 +567,7 @@ Si on ajoute `display:` `contents` aux règles qui ciblent `box1`, la boîte de } ``` -{{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}} +{{EmbedLiveSample('Utiliser_display_contents_après', '400', '330')}} Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (_subgrids_) lorsqu'elles seront implémentées. Vous pouvez également utiliser `display:` `contents` de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles. diff --git a/files/fr/web/css/css_images/using_css_gradients/index.md b/files/fr/web/css/css_images/using_css_gradients/index.md index 87cb6a287b..48f6374f00 100644 --- a/files/fr/web/css/css_images/using_css_gradients/index.md +++ b/files/fr/web/css/css_images/using_css_gradients/index.md @@ -1,10 +1,6 @@ --- title: Utilisation de dégradés CSS slug: Web/CSS/CSS_Images/Using_CSS_gradients -tags: - - Avancé - - CSS - - Guide translation_of: Web/CSS/CSS_Images/Using_CSS_gradients original_slug: Web/CSS/Utilisation_de_dégradés_CSS --- @@ -188,7 +184,7 @@ div { #### Résultat -{{EmbedLiveSample("Arrêts_de_couleur",120,120)}} +{{EmbedLiveSample("Arrêts_de_couleurs",120,120)}} Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas. diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md index 7344ca0196..964ea9c510 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md @@ -1,14 +1,6 @@ --- title: Empilement et éléments flottants slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -tags: - - Avancé - - CSS - - Contextes d’empilement - - Guide - - Ordre d’empilement - - float - - z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float --- @@ -35,7 +27,7 @@ Ce comportement peut être expliqué en améliorant la liste précédente : > **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)). -{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}} +{{EmbedLiveSample("Code_source_de_lexemple", 600, 250)}} ## Code source de l'exemple diff --git a/files/fr/web/css/cursor/index.md b/files/fr/web/css/cursor/index.md index b480e8503f..faa7a59133 100644 --- a/files/fr/web/css/cursor/index.md +++ b/files/fr/web/css/cursor/index.md @@ -1,17 +1,6 @@ --- title: cursor slug: Web/CSS/cursor -tags: - - Arrow - - CSS - - CSS Property - - Cursor - - Custom Cursor - - Reference - - UI - - mouse - - pointer - - recipe:css-property translation_of: Web/CSS/cursor browser-compat: css.properties.cursor --- @@ -402,7 +391,7 @@ Pour plus d'informations, voir le tableau de compatibilité ci-après. ### Résultat -{{EmbedLiveSample("examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md index 5846c64b47..59d50659ec 100644 --- a/files/fr/web/css/display-box/index.md +++ b/files/fr/web/css/display-box/index.md @@ -1,10 +1,6 @@ --- title: <display-box> slug: Web/CSS/display-box -tags: - - CSS - - Reference - - Type de donnée translation_of: Web/CSS/display-box --- {{CSSRef}} @@ -78,7 +74,7 @@ Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge #### Résultat -{{EmbedLiveSample("Display_contents", 300, 60)}} +{{EmbedLiveSample("display_contents", 300, 60)}} ## Accessibilité diff --git a/files/fr/web/css/easing-function/index.md b/files/fr/web/css/easing-function/index.md index 283017f125..f29b7fb730 100644 --- a/files/fr/web/css/easing-function/index.md +++ b/files/fr/web/css/easing-function/index.md @@ -253,7 +253,7 @@ selectElem.addEventListener("change", () => { #### Résultat -{{EmbedLiveSample('comparaison_des_fonctions_de_transition', '100%', 300)}} +{{EmbedLiveSample('Comparaison_des_fonctions_de_transition', '100%', 300)}} ### Exemples avec cubic-bezier() diff --git a/files/fr/web/css/env()/index.md b/files/fr/web/css/env()/index.md index 2cdb018289..059664aaf8 100644 --- a/files/fr/web/css/env()/index.md +++ b/files/fr/web/css/env()/index.md @@ -1,13 +1,6 @@ --- title: env() slug: Web/CSS/env() -tags: - - CSS - - CSS Function - - CSS Variables - - Fonction - - Reference - - env() translation_of: Web/CSS/env() --- {{CSSRef}} @@ -57,7 +50,7 @@ env(safe-area-inset-left, 1.4rem); {{csssyntax}} -## Examples +## Exemples Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle `env()` afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible. diff --git a/files/fr/web/css/flex-wrap/index.md b/files/fr/web/css/flex-wrap/index.md index 606e97356d..c5453671f5 100644 --- a/files/fr/web/css/flex-wrap/index.md +++ b/files/fr/web/css/flex-wrap/index.md @@ -1,10 +1,6 @@ --- title: flex-wrap slug: Web/CSS/flex-wrap -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/flex-wrap --- {{CSSRef}} @@ -36,7 +32,7 @@ La propriété `flex-wrap` peut être défini grâce à l'un des mots-clés suiv - `nowrap` - : Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne **cross-start** est équivalente à **start** ou à **before** selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut. - `wrap` - - : Les éléments flexibles sont disposé sur plusieurs lignes. La ligne **cross-start** est équivalente à  **start** ou **before** en fonction de la valeur de `flex-direction` et la ligne **cross-end** est à l'opposée **cross-start**. + - : Les éléments flexibles sont disposé sur plusieurs lignes. La ligne **cross-start** est équivalente à **start** ou **before** en fonction de la valeur de `flex-direction` et la ligne **cross-end** est à l'opposée **cross-start**. - `wrap-reverse` - : Se comporte comme `wrap` mais **cross-start** et **cross-end** sont permutées. @@ -77,52 +73,53 @@ La propriété `flex-wrap` peut être défini grâce à l'un des mots-clés suiv .contenu, .contenu1, .contenu2 { - color: #fff; - font: 100 24px/100px sans-serif; - height: 150px; - text-align: center; + color: #fff; + font: 100 24px/100px sans-serif; + height: 150px; + width: 897px; + text-align: center; } .contenu div, .contenu1 div, .contenu2 div { - height: 50%; - width: 300px; + height: 50%; + width: 300px; } .rouge { - background: orangered; + background: orangered; } .vert { - background: yellowgreen; + background: yellowgreen; } .bleu { - background: steelblue; + background: steelblue; } /* Styles pour les boîtes flexibles*/ .contenu { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .contenu1 { - display: flex; - flex-wrap: nowrap; + display: flex; + flex-wrap: nowrap; } .contenu2 { - display: flex; - flex-wrap: wrap-reverse; + display: flex; + flex-wrap: wrap-reverse; } ``` ### Résultat -{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}} +{{EmbedLiveSample('Exemples', '700px', '700px')}} ## Spécifications -| Spécification | État | Commentaires | +| Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}} | {{Spec2('CSS3 Flexbox')}} |  | +| {{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}} | {{Spec2('CSS3 Flexbox')}} | | {{cssinfo}} diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md index a2d14125d5..a0e2170ebb 100644 --- a/files/fr/web/css/flex/index.md +++ b/files/fr/web/css/flex/index.md @@ -1,10 +1,6 @@ --- title: flex slug: Web/CSS/flex -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/flex --- {{CSSRef}} @@ -111,7 +107,7 @@ Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initi } ``` -{{EmbedLiveSample("description", "100%","370")}} +{{EmbedLiveSample("Description", "100%","370")}} Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}. diff --git a/files/fr/web/css/forced-color-adjust/index.md b/files/fr/web/css/forced-color-adjust/index.md index eb8aa42f4d..821fa8e2da 100644 --- a/files/fr/web/css/forced-color-adjust/index.md +++ b/files/fr/web/css/forced-color-adjust/index.md @@ -84,7 +84,7 @@ En utilisant la fonctionnalité média [`forced-colors`](/fr/docs/Web/CSS/@media #### Résultat -{{EmbedLiveSample("preserving_colors", 640, 260)}} +{{EmbedLiveSample("Exemples", 640, 260)}}  diff --git a/files/fr/web/css/gap/index.md b/files/fr/web/css/gap/index.md index e8142808f4..37dacfdc85 100644 --- a/files/fr/web/css/gap/index.md +++ b/files/fr/web/css/gap/index.md @@ -1,11 +1,6 @@ --- title: gap (grid-gap) slug: Web/CSS/gap -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference translation_of: Web/CSS/gap --- {{CSSRef}} @@ -177,7 +172,7 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su #### Résultat -{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}} +{{EmbedLiveSample("Multi-colonnes", "auto", "120px")}} ## Spécifications diff --git a/files/fr/web/css/gradient/index.md b/files/fr/web/css/gradient/index.md index 9889e81e8d..301d0cd05e 100644 --- a/files/fr/web/css/gradient/index.md +++ b/files/fr/web/css/gradient/index.md @@ -1,10 +1,6 @@ --- title: <gradient> slug: Web/CSS/gradient -tags: - - CSS - - Reference - - Type translation_of: Web/CSS/gradient --- {{CSSRef}} @@ -72,7 +68,7 @@ body { {{EmbedLiveSample('Les_dégradés_répétés', 600, 20)}} -#### Dégradé conique +### Dégradé conique Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}. @@ -93,7 +89,7 @@ div { } ``` -{{EmbedLiveSample('dégradé_conique', 240, 80)}} +{{EmbedLiveSample('Dégradé_conique', 240, 80)}} ## Spécifications diff --git a/files/fr/web/css/gradient/linear-gradient()/index.md b/files/fr/web/css/gradient/linear-gradient()/index.md new file mode 100644 index 0000000000..c32f3caf0b --- /dev/null +++ b/files/fr/web/css/gradient/linear-gradient()/index.md @@ -0,0 +1,194 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient() +translation-of: Web/CSS/gradient/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +{{CSSRef}} + +La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`linear-gradient()`** crée une image qui est un dégradé entre deux ou plusieurs couleurs le long d'une ligne droite. Elle fournit une valeur de type [`<gradient>`](/fr/docs/Web/CSS/gradient) qui est un type spécial d'image ([`<image>`](/fr/docs/Web/CSS/image)). + +{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} + +## Syntaxe + +```css +/* Un dégradé incliné de 45 degrés, + commençant en bleu et finissant en rouge. */ +linear-gradient(45deg, blue, red); + +/* Un dégradé commençant en bas à droite et + allant jusqu'au coin supérieur gauche, + commençant en bleu et finissant en rouge. */ +linear-gradient(to left top, blue, red); + +/* Un arrêt de couleur : un dégradé allant de bas + en haut, commençant en bleu, devenant vert à 40% + de sa longueur et finissant en rouge. */ +linear-gradient(0deg, blue, green 40%, red); + +/* Une indication de couleur : un dégradé allant de + gauche à droite, commençant en rouge atteignant la + couleur intermédiaire à 10% de la longueur du + dégradé et prenant les 90% restant pour passer + au bleu. */ +linear-gradient(.25turn, red, 10%, blue); + +/* Un dégradé avec plusieurs arrêts de couleur : + un dégradé incliné de 45 degrés commençant en bas à + gauche avec une moitié rouge et avec une moitié bleue + en haut à droite où une ligne dure marque le + changement entre rouge et bleu */ +linear-gradient(45deg, red 0 50%, blue 50% 100%); +``` + +### Values + +- `<side-or-corner>` + + - : La position du point de départ de la ligne selon laquelle évolue le dégradé. Si elle est indiquée, elle se compose du mot `to` et peut contenir jusqu'à deux mots-clés : le premier indiquant le côté horizontal (`left` ou `right` pour indiquer respectivement gauche ou droite), et le second indiquant le côté vertical (`top` ou `bottom` pour indiquer respectivement haut ou bas). L'ordre des deux mots-clés n'a pas d'importance. Si aucun n'est utilisé, la valeur par défaut sera `to bottom`. + + Les valeurs `to top`, `to bottom`, `to left`, et `to right` sont respectivement équivalentes aux angles `0deg`, `180deg`, `270deg`, et `90deg`. Les autres valeurs sont traduites en un angle. + +- [`<angle>`](/fr/docs/Web/CSS/angle) + - : L'angle de la ligne du dégradé. Une valeur de `0deg` sera équivalente à `to top` ; les valeurs plus élevées évoluant dans le sens horaire. +- `<linear-color-stop>` + - : Un arrêt de couleur indiqué par une valeur [`<color>`](/fr/docs/Web/CSS/color) suivie d'une ou deux positions d'arrêt (chacune étant indiquée comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) ou une longueur ([`<length>`](/fr/docs/Web/CSS/length)) le long de l'axe du dégradé). +- `<color-hint>` + - : Une indication d'interpolation qui définit la progression du dégradé entre deux arrêts de couleur adjacents. La longueur définit à quel point entre les deux arrêts le dégradé doit atteindre la couleur intermédiaire. Si cette valeur est absente, la valeur intermédiaire sera atteinte à mi-parcours entre les deux arrêts. + +> **Note :** Le rendu des [arrêts de couleur pour les dégradés CSS](#dégradé_avec_plusieurs_arrêts_de_couleur) suit les mêmes règles que [celui des arrêts de couleur pour les dégradés SVG](/fr/docs/Web/SVG/Tutorial/Gradients). + +## Description + +Comme tout autre dégradé, un dégradé linéaire [ne possède pas de dimensions intrinsèques](/fr/docs/Web/CSS/image#description) ; c'est-à -dire qu'il n'a pas de taille naturelle ou préférée ni de ratio d'affichage préféré. Sa taille réelle correspondra à celle de l'élément auquel il s'applique. + +Pour créer un dégradé linéaire qui se répète jusqu'à remplir son conteneur, on utilisera plutôt la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()). + +Étant donné que le type `<gradient>` est un sous-type du type `<image>`, on peut utiliser des dégradés à tout endroit où on peut utiliser une image. C'est également pour cette raison que `linear-gradient()` ne fonctionnera pas pour la propriété [`background-color`](/fr/docs/Web/CSS/background-color) et pour les autres propriétés qui utilisent le type de données [`<color>`](/fr/docs/Web/CSS/color). + +### Composition d'un dégradé linéaire + +Un dégradé linéaire est défini par un axe : la _ligne du dégradé_ et deux ou plusieurs _arrêts de couleur_. Chaque point sur l'axe aura une couleur distincte. Pour créer un dégradé doux, la fonction `linear-gradient()` dessine une suite de lignes colorées, perpendiculaires à l'axe du dégradé, dont la couleur de chacune correspond à la couleur du point d'intersection sur la ligne du dégradé. + + + +La ligne du dégradé est définie par le centre de la boîte contenant l'image et par un angle. Les couleurs du dégradé sont déterminées par deux ou plusieurs points : le point de départ, le point d'arrivée et, éventuellement entre, des points d'arrêts de couleur. + +Le _point de départ_ est situé sur la ligne du dégradé où la première couleur commence. Le _point d'arrivée_ est situé là où la dernière couleur finit. Chacun de ces deux points est défini par l'intersection de la ligne du dégradé avec une ligne perpendiculaire du coin de la boîte correspondant. Le point de fin peut être considéré comme le symétrique du point de départ. Ces définitions relativement complexes peuvent mener à des effets intéressants intitulés « coins magiques » : les coins les plus proches des points de départ et d'arrivée ont la même couleur (respectivement) que ces deux points. + +#### Personnaliser des dégradés + +En ajoutant plusieurs arrêts de couleur sur la ligne du dégradé, il est possible de créer une transition personnalisée entre plusieurs couleurs. La position d'un point d'arrêt de couleur peut être explicitement définie en utilisant une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Si on n'indique pas l'emplacement d'un arrêt de couleur, celui-ci sera placé à la position intermédiaire entre celui qui précède et le suivant. Ainsi, les deux dégradés qui suivent sont équivalents : + +```css +linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); +``` + +Par défaut, les couleurs évoluent de façon progressive entre deux arrêts de couleur successifs et la couleur intermédiaire est atteinte au milieu de ces deux points. Il est possible de déplacer ce point intermédiaire entre les deux arrêts de couleurs en ajoutant une indication de couleur entre les deux arrêts afin d'indiquer l'emplacement souhaité, exprimé en pourcentage. Dans l'exemple suivant, on commence par un rouge allant du début jusqu'à 10% de la ligne et finissant par un bleu à partir de 90% jusqu'à la fin. Entre 10% et 90%, les couleurs passent du rouge au bleu. Toutefois, le point intermédiaire est atteint à 30% entre les deux plutôt qu'à 50%. + +```css +linear-gradient(red 10%, 30%, blue 90%); +``` + +Si deux arrêts de couleur sont situés au même endroit, la transition sera une ligne dure entre la première et la dernière couleur déclarées à cet emplacement. + +Les arrêts de couleur doivent être listés dans l'ordre croissant. Les arrêts de couleur qui suivent avec une valeur inférieure écraseront les valeurs des arrêts de couleur précédents et créeront une transition dure. Dans l'exemple qui suit, on passe du rouge au jaune à 40% puis la transition se fait entre le jaune et le bleu pour 25% du dégradé. + +```css +linear-gradient(red 40%, yellow 30%, blue 65%); +``` + +Il est possible d'avoir des arrêts de couleur à plusieurs positions pour une même couleur. On peut déclarer une couleur comme deux arrêts de couleur adjacents en incluant les deux positions dans la déclaration CSS. Les trois dégradés qui suivent sont équivalents : + +```css +linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); +linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); +linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); +``` + +Par défaut, s'il n'y a pas de couleur avec un arrêt situé à 0%, ce sera la première couleur déclarée qui sera utilisée à ce point. De même la dernière couleur déclarée continuera jusqu'à 100%. + +## Exemples + +### Un dégradé avec un angle de 45 degrés + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(45deg, red, blue); +} +``` + +{{EmbedLiveSample("Un_dégradé_avec_un_angle_de_45_degrés", 120, 120)}} + +### Un dégradé commençant à 60% de la ligne du dégradé + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(135deg, orange 60%, cyan); +} +``` + +{{EmbedLiveSample("Un_dégradé_commençant_à _60%_de_la_ligne_du_dégradé", 120, 120)}} + +### Un dégradé avec des arrêts de couleur à plusieurs positions + +Cet exemple illustre des arrêts de couleur avec plusieurs positions et avec des arrêts adjacents utilisant la même couleur, créant ainsi des bandes. + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +} +``` + +{{EmbedLiveSample("Un_dégradé_avec_des_arrêts_de_couleur_à _plusieurs_positions", 120, 120)}} + +### D'autres exemples de dégradés linéaires + +Voir la page [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) pour plus d'exemples. + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- Les autres fonctions de dégradés : + - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) + - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) + - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) + - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) + - [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) +- [`<image>`](/fr/docs/Web/CSS/image) +- [`element()`](/fr/docs/Web/CSS/element()) +- [`image()`](/fr/docs/Web/CSS/image/image()) +- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) +- [`cross-fade()`](/fr/docs/Web/CSS/cross-fade()) diff --git a/files/fr/web/css/hanging-punctuation/index.md b/files/fr/web/css/hanging-punctuation/index.md index 29e4113d9c..f16e25b598 100644 --- a/files/fr/web/css/hanging-punctuation/index.md +++ b/files/fr/web/css/hanging-punctuation/index.md @@ -1,11 +1,6 @@ --- title: hanging-punctuation slug: Web/CSS/hanging-punctuation -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/hanging-punctuation --- {{CSSRef}}{{SeeCompatTable}} @@ -97,7 +92,7 @@ p { ### Résultat -{{EmbedLiveSample('Exemple')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/css/list-style-image/index.md b/files/fr/web/css/list-style-image/index.md index e0ef94d86c..f7c9dc9012 100644 --- a/files/fr/web/css/list-style-image/index.md +++ b/files/fr/web/css/list-style-image/index.md @@ -1,10 +1,6 @@ --- title: list-style-image slug: Web/CSS/list-style-image -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/list-style-image --- {{CSSRef}} @@ -62,7 +58,7 @@ ul { ### Résultat -{{EmbedLiveSample('Exemple')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/css/mask-type/index.md b/files/fr/web/css/mask-type/index.md index 0e7e4ecdc5..cb2525cdba 100644 --- a/files/fr/web/css/mask-type/index.md +++ b/files/fr/web/css/mask-type/index.md @@ -1,11 +1,6 @@ --- title: mask-type slug: Web/CSS/mask-type -tags: - - CSS - - Propriété - - Reference - - SVG translation_of: Web/CSS/mask-type --- {{CSSRef}} @@ -72,7 +67,7 @@ La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci- #### Résultat -{{EmbedLiveSample('setting_an_alpha_mask', '100%', '102')}} +{{EmbedLiveSample('Définir_un_masque_alpha', '100%', '102')}} ### Définir un masque de luminance @@ -106,7 +101,7 @@ La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci- #### Result -{{EmbedLiveSample('setting_a_luminance_mask', '100%', '102')}} +{{EmbedLiveSample('Définir_un_masque_de_luminance', '100%', '102')}} ## Spécifications diff --git a/files/fr/web/css/min()/index.md b/files/fr/web/css/min()/index.md index 5060118985..137a90ffc8 100644 --- a/files/fr/web/css/min()/index.md +++ b/files/fr/web/css/min()/index.md @@ -1,10 +1,6 @@ --- title: min() slug: Web/CSS/min() -tags: - - CSS - - Fonction - - Reference translation_of: Web/CSS/min() --- {{CSSRef}} @@ -37,28 +33,6 @@ Il est tout à fait possible de combiner des valeurs avec différentes unités d ## Exemples -### Garantir une taille maximale pour des images - -`min()` permet de simplifier la définition d'une taille **maximale**, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les moins larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média. - -#### CSS - -```css -.logo { - width: min(50vw, 300px); -} -``` - -#### HTML - -```html -<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"> -``` - -#### Résultat - -{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', '100%', '110')}} - ### Définir une taille maximale pour un champ de saisie et son libellé La fonction `min()` peut également être utilisée pour définir la taille maximale d'un contrôle dans un formulaire et permettre de réduire le champ et le libellé associé lorsque la largeur de l'écran diminue. diff --git a/files/fr/web/css/minmax()/index.md b/files/fr/web/css/minmax()/index.md index 56a234a0f1..6d9a7f6dfa 100644 --- a/files/fr/web/css/minmax()/index.md +++ b/files/fr/web/css/minmax()/index.md @@ -1,14 +1,6 @@ --- title: minmax() slug: Web/CSS/minmax() -tags: - - CSS - - CSS Function - - CSS Grid - - Function - - Layout - - Reference - - Web translation_of: Web/CSS/minmax() --- {{CSSRef}} @@ -120,7 +112,7 @@ Si _max_ est inférieur à _min_, alors _max_ sera ignoré et `minmax(min,max)` ### Résultat -{{EmbedLiveSample("Examples", "100%", 200)}} +{{EmbedLiveSample("Exemples", "100%", 200)}} ## Spécifications diff --git a/files/fr/web/css/mix-blend-mode/index.md b/files/fr/web/css/mix-blend-mode/index.md index f2971d234b..01d5aa2e52 100644 --- a/files/fr/web/css/mix-blend-mode/index.md +++ b/files/fr/web/css/mix-blend-mode/index.md @@ -1,10 +1,6 @@ --- title: mix-blend-mode slug: Web/CSS/mix-blend-mode -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/mix-blend-mode --- {{CSSRef}} @@ -559,7 +555,7 @@ html,body { .luminosity .item { mix-blend-mode: luminosity; } ``` -{{EmbedLiveSample("exemples", "100%", 1600, "", "", "example-outcome-frame")}} +{{EmbedLiveSample("Exemples", "100%", 1600, "", "", "example-outcome-frame")}} ### Exemple avec SVG diff --git a/files/fr/web/css/outline-style/index.md b/files/fr/web/css/outline-style/index.md index 022491b85b..0689091d9b 100644 --- a/files/fr/web/css/outline-style/index.md +++ b/files/fr/web/css/outline-style/index.md @@ -1,10 +1,6 @@ --- title: outline-style slug: Web/CSS/outline-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/outline-style --- {{CSSRef}} @@ -119,7 +115,7 @@ La valeur `auto` indique une bordure sur mesure selon l'interface du système d' #### Résulat -{{EmbedLiveSample('Example_0_-_auto')}} +{{EmbedLiveSample('Utilisation_de_la_valeur_auto')}} ## Spécifications diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md index 4797a73518..65ac2e7b86 100644 --- a/files/fr/web/css/overflow/index.md +++ b/files/fr/web/css/overflow/index.md @@ -1,11 +1,6 @@ --- title: overflow slug: Web/CSS/overflow -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference translation_of: Web/CSS/overflow --- {{CSSRef}} @@ -146,7 +141,7 @@ p.auto { #### Résultat -{{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}} +{{EmbedLiveSample("Exemples", "600", "250")}} ## Spécifications diff --git a/files/fr/web/css/repeat()/index.md b/files/fr/web/css/repeat()/index.md index 177611244b..9b0833a486 100644 --- a/files/fr/web/css/repeat()/index.md +++ b/files/fr/web/css/repeat()/index.md @@ -1,12 +1,6 @@ --- title: repeat() slug: Web/CSS/repeat() -tags: - - CSS - - Fonction - - Grille CSS - - Reference - - Web translation_of: Web/CSS/repeat() --- {{CSSRef}} @@ -122,7 +116,7 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) ### Résultat -{{EmbedLiveSample("Example", "100%", 200)}} +{{EmbedLiveSample("Exemples", "100%", 200)}} ## Spécifications diff --git a/files/fr/web/css/scale/index.md b/files/fr/web/css/scale/index.md index 01560c9176..2d6a6ebcc5 100644 --- a/files/fr/web/css/scale/index.md +++ b/files/fr/web/css/scale/index.md @@ -1,10 +1,6 @@ --- title: scale slug: Web/CSS/scale -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/scale --- {{CSSRef}}{{seecompattable}} @@ -91,7 +87,7 @@ div:hover .scale { ### Résultat -{{EmbedLiveSample('Examples')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/css/text-overflow/index.md b/files/fr/web/css/text-overflow/index.md index bc587851cb..4fd812b457 100644 --- a/files/fr/web/css/text-overflow/index.md +++ b/files/fr/web/css/text-overflow/index.md @@ -1,10 +1,6 @@ --- title: text-overflow slug: Web/CSS/text-overflow -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/text-overflow --- {{CSSRef}} @@ -77,8 +73,6 @@ Chacune des valeurs se compose : ## Exemples -## Examples - ### Syntaxe avec une valeur Cet exemple illustre différentes valeurs pour `text-overflow`, appliquée à un paragraphe, pour des textes écrits de gauche à droite et de droite à gauche. @@ -149,7 +143,7 @@ body { #### Résultat -{{EmbedLiveSample('one-value_syntax', 600, 320)}} +{{EmbedLiveSample('Syntaxe_avec_une_valeur', 600, 320)}} ### Syntaxe avec deux valeurs @@ -211,7 +205,7 @@ for (let para of paras) { #### Résultat -{{EmbedLiveSample('two-value_syntax', 600, 360)}} +{{EmbedLiveSample('Syntaxe_avec_deux_valeurs', 600, 360)}} ## Spécifications diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md index 7df9a97ea6..33daa71ad3 100644 --- a/files/fr/web/css/text-shadow/index.md +++ b/files/fr/web/css/text-shadow/index.md @@ -1,10 +1,6 @@ --- title: text-shadow slug: Web/CSS/text-shadow -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/text-shadow --- {{CSSRef}} @@ -75,9 +71,9 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud totam rem aperiam, eaque ipsa quae ab illo inventore.</p> ``` -{{EmbedLiveSample('ombre_simple', '660px', '90px')}} +{{EmbedLiveSample('Ombre_simple', '660px', '90px')}} -### Ombres multiples +### Ombres multiples ```css .white-text-with-blue-shadow { @@ -93,7 +89,7 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud totam rem aperiam, eaque ipsaquae ab illo inventore.</p> ``` -{{EmbedLiveSample('ombres_multiples', '660px', '170px')}} +{{EmbedLiveSample('Ombres_multiples', '660px', '170px')}} ## Spécifications diff --git a/files/fr/web/css/transform-origin/index.md b/files/fr/web/css/transform-origin/index.md index 86a3c0a462..0f9747fc4e 100644 --- a/files/fr/web/css/transform-origin/index.md +++ b/files/fr/web/css/transform-origin/index.md @@ -1,13 +1,6 @@ --- title: transform-origin slug: Web/CSS/transform-origin -tags: - - CSS - - CSS Transoforms - - Propriété CSS - - Reference - - transform-origin - - 'valeur par défaut : center' translation_of: Web/CSS/transform-origin --- {{CSSRef}} @@ -301,7 +294,7 @@ transform-origin: 100% -30%; } ``` -{{EmbedLiveSample('a_demonstration_of_various_transform_values', '', 1350) }} +{{EmbedLiveSample('Exemples', '', 1350) }} ## Spécifications diff --git a/files/fr/web/css/transition-delay/index.md b/files/fr/web/css/transition-delay/index.md index 44205206ea..779c0c591b 100644 --- a/files/fr/web/css/transition-delay/index.md +++ b/files/fr/web/css/transition-delay/index.md @@ -1,11 +1,6 @@ --- title: transition-delay slug: Web/CSS/transition-delay -tags: - - CSS - - Propriété - - Reference - - Transitions translation_of: Web/CSS/transition-delay --- {{CSSRef}} @@ -116,7 +111,7 @@ changeButton.addEventListener("click", change); #### Résultat -{{EmbedLiveSample("exemple_illustrant_differentes_temporisations",275,200)}} +{{EmbedLiveSample("Exemple_illustrant_différentes_temporisations",275,200)}} ## Spécifications diff --git a/files/fr/web/css/transition-duration/index.md b/files/fr/web/css/transition-duration/index.md index 2e58524571..0dba9af1d9 100644 --- a/files/fr/web/css/transition-duration/index.md +++ b/files/fr/web/css/transition-duration/index.md @@ -1,11 +1,6 @@ --- title: transition-duration slug: Web/CSS/transition-duration -tags: - - CSS - - Propriété - - Reference - - Transitions translation_of: Web/CSS/transition-duration --- {{CSSRef}} @@ -110,7 +105,7 @@ changeButton.addEventListener("click", change); #### Résultat -{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}} +{{EmbedLiveSample("Exemples",275,200)}} ## Spécifications diff --git a/files/fr/web/css/using_css_custom_properties/index.md b/files/fr/web/css/using_css_custom_properties/index.md index 1de1a63118..8151f52856 100644 --- a/files/fr/web/css/using_css_custom_properties/index.md +++ b/files/fr/web/css/using_css_custom_properties/index.md @@ -1,11 +1,6 @@ --- title: Les variables CSS slug: Web/CSS/Using_CSS_custom_properties -tags: - - CSS - - Guide - - Intermédiaire - - Web translation_of: Web/CSS/Using_CSS_custom_properties --- {{CSSRef}} @@ -106,7 +101,7 @@ Appliquons-le à ce code HTML : ce qui donne ceci : -{{EmbedLiveSample("exemple_1",600,180)}} +{{EmbedLiveSample("Exemple_1",600,180)}} Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable. @@ -259,7 +254,7 @@ Comme on pourrait s'y attendre, le valeur applique la substitution aec `--text-c ### Résultat -{{EmbedLiveSample('Gestion_des_valeurs_invalides')}} +{{EmbedLiveSample('Gestion_des_variables_invalides')}} > **Note :** La couleur du paragraphe ne sera pas bleue car une substitution invalide est remplacée par la valeur héritée ou la valeur initiale, pas par les valeurs provenant d'éventuelles autres règles. > diff --git a/files/fr/web/css/word-break/index.md b/files/fr/web/css/word-break/index.md index d033cc3230..cb51291d36 100644 --- a/files/fr/web/css/word-break/index.md +++ b/files/fr/web/css/word-break/index.md @@ -1,10 +1,6 @@ --- title: word-break slug: Web/CSS/word-break -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/word-break --- {{CSSRef}} @@ -90,7 +86,7 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci ### Résultat -{{EmbedLiveSample('Exemple','100%',600)}} +{{EmbedLiveSample('Exemples','100%',600)}} ## Spécifications diff --git a/files/fr/webassembly/understanding_the_text_format/index.html b/files/fr/webassembly/understanding_the_text_format/index.html index bd74f464d3..7ed8645381 100644 --- a/files/fr/webassembly/understanding_the_text_format/index.html +++ b/files/fr/webassembly/understanding_the_text_format/index.html @@ -1,36 +1,11 @@ --- title: Comprendre le format texte de WebAssembly slug: WebAssembly/Understanding_the_text_format -tags: - - JavaScript - - Texte - - WebAssembly - - wasm translation_of: WebAssembly/Understanding_the_text_format --- -<h2 id="drame">drame</h2> -<p>HTML</p> - -<dl> -</dl> - -<pre class="brush: html notranslate">Contenu HTML de l'exemple</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">Contenu CSS de l'exemple -</pre> - -<h3 id="Résultat">Résultat</h3> - -<dl> - <dt>{{EmbedLiveSample}}</dt> - <dd>Afin de permettre aux humains de lire et d'éditer du code WebAssembly, il y a une représentation textuelle du format binaire wasm. C'est une forme intermédiaire conçue pour être affic<span class="hidden"> </span><span class="hidden"> </span>hée dans les éditeurs de texte, les outils de développeurs intégrés aux navigateurs web, etc. Cet article montre comment ce format fonctionne sur le plan syntaxique, mais aussi comment il se combine avec le code binaire sous-jacent — ainsi que l'objet JavaScript englobant qui représente wasm.</dd> - <dt><strong>Note</strong>: Ceci est potentiellement exagéré si vous êtes un développeur web cherchant uniquement à charger un module wasm dans une page pour l'utiliser dans votre code (voir <a href="https://developer.mozilla.org/fr/docs/WebAssembly/Using_the_JavaScript_API">Utilisez l'API JavaScript de WebAssembly</a>). Mais il est plus utile si, en revanche, vous voulez écrite des modules wasm pour optimiser les performances de votre librairies Javascript, ou construire votre propre compilateur WebAssembl</dt> -</dl> - -<div class="note"></div> +<p>Afin de permettre aux humains de lire et d'éditer du code WebAssembly, il y a une représentation textuelle du format binaire wasm. C'est une forme intermédiaire conçue pour être affic<span class="hidden"> </span><span class="hidden"> </span>hée dans les éditeurs de texte, les outils de développeurs intégrés aux navigateurs web, etc. Cet article montre comment ce format fonctionne sur le plan syntaxique, mais aussi comment il se combine avec le code binaire sous-jacent — ainsi que l'objet JavaScript englobant qui représente wasm.</p> + <div><p><strong>Note :</strong> Ceci est potentiellement exagéré si vous êtes un développeur web cherchant uniquement à charger un module wasm dans une page pour l'utiliser dans votre code (voir <a href="https://developer.mozilla.org/fr/docs/WebAssembly/Using_the_JavaScript_API">Utilisez l'API JavaScript de WebAssembly</a>). Mais il est plus utile si, en revanche, vous voulez écrite des modules wasm pour optimiser les performances de votre librairies Javascript, ou construire votre propre compilateur WebAssembly</p></div> <h2 id="S-expressions">S-expressions</h2> @@ -38,7 +13,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Tout d'abord, regardons à quoi ressemble une S-expression. Chaque noeud de l'arbre se situe à l'intérieur d'un couple de parenthèses — <code>( ... )</code>. Le premier label dans ces parenthèses indique le type de noeud. Ensuite, il y a une liste de noeufs ou d'attributs séparés par des espaces. Donc si l'on considère la S-expression WebAssembly suivante :</p> -<pre class="notranslate">(module (memory 1) (func))</pre> +<pre>(module (memory 1) (func))</pre> <p>Celle-ci représente un arbre avec un noeud racine "module" ainsi que deux noeuds enfants, un "memory" avec l'attribut 1, ainsi qu'un noeud "func". Nous allons bientôt voir ce que ces noeuds signifient.</p> @@ -46,13 +21,13 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Commençons avec la version la plus simple et la plus courte possible d'un module wasm.</p> -<pre class="notranslate">(module) (commençons avec la version la plus simple et la plus courte possible d'un module wasm.) </pre> +<pre>(module) (commençons avec la version la plus simple et la plus courte possible d'un module wasm.) </pre> <p>Celui-ci est totalement vide, mais reste un module valide.</p> <p>Si l'on convertit notre module en binaire (voir <a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a>), nous obtenons l'en-tête de module de 8 octets, décrite dans le <a href="https://webassembly.org/docs/binary-encoding/#high-level-structure">format binaire</a>.</p> -<pre class="notranslate">0000000: 0061 736d ; WASM_BINARY_MAGIC +<pre>0000000: 0061 736d ; WASM_BINARY_MAGIC 0000004: 0100 0000 ; WASM_BINARY_VERSION</pre> <h3 id="Ajouter_des_fonctionnalités_à _votre_module">Ajouter des fonctionnalités à votre module</h3> @@ -61,7 +36,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Tout code dans un module WebAssembly est regroupé en fonctions, qui ont la structure suivante (en pseudo-code):</p> -<pre class="notranslate">( func <signature> <locals> <body> )</pre> +<pre>( func <signature> <locals> <body> )</pre> <ul> <li>La <strong>signature </strong>déclare les arguments de la fonction ainsi que ses valeurs de retour.</li> @@ -82,344 +57,7 @@ translation_of: WebAssembly/Understanding_the_text_format -<div class="blockIndicator warning"> -<p>Chaque argument possède un type déclaré explicitement. Quatre types sont actuellement</p> - -<table class="standard-table"> - <caption>préparation</caption> - <thead> - <tr> - <th scope="col"> - <ul> - <li> - <div class="blockIndicator note"> - <div class="blockIndicator warning"> - <p>Mathematique</p> - </div> - </div> - </li> - </ul> - </th> - <th scope="col"> - <ul> - <li> - <div class="blockIndicator note"> - <div class="blockIndicator warning"> - <p>histoire-goegraphie</p> - </div> - </div> - </li> - </ul> - </th> - <th scope="col"> - <ul> - <li> - <div class="blockIndicator note"> - <div class="blockIndicator warning"> - <p>sciense applique </p> - </div> - </div> - </li> - </ul> - </th> - <th scope="col"> - <ul> - <li> - <div class="blockIndicator warning"> - <p>sciense naturel </p> - </div> - </li> - </ul> - </th> - <th scope="col"> - <h5 id="sect1"></h5> - </th> - <th scope="col"></th> - </tr> - </thead> - <tbody> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - </tbody> -</table> - -<blockquote> -<h5 class="brush: bash" id="disponible_dans_wasm">disponible dans wasm:</h5> -</blockquote> - -<dl> -</dl> -</div> +<p>Chaque argument possède un type déclaré explicitement. Quatre types sont actuellement disponibles dans wasm</p> <ul> <li><code>i32</code>: Entier 32-bit</li> @@ -430,7 +68,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Un argument seul s'écrit <code>(param i32)</code> et le type de retour s'écrit <code>(result i32)</code>, donc une fonction binaire prenant deux entiers 32-bit and et retournant un nombre à virgule flottante 64-bit s'écrirait ainsi :</p> -<pre class="notranslate">(func (param i32) (param i32) (result f64) ... )</pre> +<pre>(func (param i32) (param i32) (result f64) ... )</pre> <p>Après la signature, les variables locales sont listées avec leur type, par exemple <code>(local i32)</code>. Les arguments sont juste des variables locales initialisées avec avec la valeur de l'argument correspondant, passé par la fonction appelante.</p> @@ -440,7 +78,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Les commandes <code>get_local</code>/<code>set_local</code> désignent l'élément à récupérer/définir par son index numérique : les arguments sont référencés en premier, par ordre de déclaration, suivis par les variables locales, par ordre de déclaration également. Donc, en considérant la fonction suivante :</p> -<pre class="notranslate">(func (param i32) (param f32) (local f64) +<pre>(func (param i32) (param f32) (local f64) get_local 0 get_local 1 get_local 2)</pre> @@ -451,7 +89,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Ainsi, vous pourriez ré-écrire la signature précédente ainsi :</p> -<pre class="notranslate">(func (param $p1 i32) (param $p2 f32) (local $loc i32) …)</pre> +<pre>(func (param $p1 i32) (param $p2 f32) (local $loc i32) …)</pre> <p>Et ensuite, vous pourriez écrire <code>get_local $p1</code> en lieu et place de <code>get_local 0</code>, etc. (Lorsque ce texte sera converti en binaire, le code de sortie contiendra uniquement l'entier)</p> @@ -463,7 +101,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Lorsqu'une fonction est appelée, elle débute avec une pile vide qui est peu à peu remplie et vidée durant l'exécution du corps de la fonction. Par exemple, après l'exécution de la fonction suivante :</p> -<pre class="notranslate">(func (param $p i32) +<pre>(func (param $p i32) get_local $p get_local $p i32.add)</pre> @@ -476,7 +114,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Comme mentionné plus haut, le corps de la fonction est simplement une liste d'instructions qui s'enchaînent lorsque la fonction est appelée. En reprenant tout ce que nous avons déjà appris, nous pouvons enfin définir un module contenant notre simple fonction :</p> -<pre class="notranslate">(module +<pre>(module (func (param $lhs i32) (param $rhs i32) (result i32) get_local $lhs get_local $rhs @@ -492,17 +130,17 @@ translation_of: WebAssembly/Understanding_the_text_format <p>A l'image des variables locales, les fonctions sont identifiées par un index, mais par commodité, elle peuvent être nommées. Commençons par cela en premier : nous allons ajouter un nom précédé d'un symbole dollar, juste après le mot-clé <code>func</code>:</p> -<pre class="notranslate">(func $add … )</pre> +<pre>(func $add … )</pre> <p>Maintenant, nous allons ajouter la déclaration d'export, qui prend cette forme :</p> -<pre class="notranslate">(export "add" (func $add))</pre> +<pre>(export "add" (func $add))</pre> <p>Ici, <code>add</code> est le nom par lequel la fonction sera identifiée dans JavaScript, tandis que <code>$add</code> correspond à la fonction WebAssembly dans le module qui sera exportée.</p> <p>Notre module final ressemble à ceci (pour l'instant) :</p> -<pre class="notranslate">(module +<pre>(module (func $add (param $lhs i32) (param $rhs i32) (result i32) get_local $lhs get_local $rhs @@ -514,7 +152,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Ensuite, nous allons charger notre binaire dans un tableau typé appelé <code>addCode</code> (comme décrit dans <a href="/en-US/docs/WebAssembly/Fetching_WebAssembly_bytecode">Fetching WebAssembly Bytecode</a>), le compiler et l'instantier, puis exécuter notre fonction <code>add</code> dans JavaScript (nous pouvons désormais obtenir <code>add()</code> dans la propriété <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">exports</a></code> de l'instance):</p> -<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('add.wasm')) +<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('add.wasm')) .then(obj => {   console.log(obj.instance.exports.add(1, 2)); // "3" });</pre> @@ -531,7 +169,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>L'instruction <code>call</code> appelle une fonction à partir de son index ou de son nom. Par exemple, le module suivant contient deux fonctions — l'une d'entre elle retourne la valeur 42, tandis que l'autre retourne le résultat de l'appel de la première plus un:</p> -<pre class="notranslate">(module +<pre>(module (func $getAnswer (result i32) i32.const 42) (func (export "getAnswerPlus1") (result i32) @@ -547,11 +185,11 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Ceci revient à inclure une déclaration de fonction séparée en dehors de la fonction, autre part dans le module, de la même façon que ce que nous avons déjà fait précédemment :</p> -<pre class="notranslate">(export "getAnswerPlus1" (func $functionName))</pre> +<pre>(export "getAnswerPlus1" (func $functionName))</pre> <p>Voici le code JavaScript pour appeler notre module ci-dessus :</p> -<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('call.wasm')) +<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('call.wasm')) .then(obj => {   console.log(obj.instance.exports.getAnswerPlus1()); // "43" });</pre> @@ -564,7 +202,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Nous avons déjà vu du JavaScript appeler des fonctions WebAssembly, mais que dites-vous d'appeler des fonctions JavaScript depuis WebAssembly ? En fait, WebAssembly n'a pas nativement connaissance de JavaScript, mais il possède une méthode générique d'import de fonctions qui peut accepter des fonctions wasm ou JavaScript. Voici un exemple :</p> -<pre class="notranslate">(module +<pre>(module (import "console" "log" (func $log (param i32))) (func (export "logIt") i32.const 13 @@ -580,7 +218,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>This would look like the following:</p> -<pre class="brush: js notranslate">var importObject = { +<pre class="brush: js">var importObject = { console: { log: function(arg) { console.log(arg); @@ -611,11 +249,11 @@ WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) <p>While there are many different ways to encode a string’s length in the string itself (for example, C strings); for simplicity here we just pass both offset and length as parameters:</p> -<pre class="notranslate">(import "console" "log" (func $log (param i32) (param i32)))</pre> +<pre>(import "console" "log" (func $log (param i32) (param i32)))</pre> <p>On the JavaScript side, we can use the <a href="/en-US/docs/Web/API/TextDecoder">TextDecoder API</a> to easily decode our bytes into a JavaScript string. (We specify <code>utf8</code> here, but many other encodings are supported.)</p> -<pre class="brush: js notranslate">consoleLogString(offset, length) { +<pre class="brush: js">consoleLogString(offset, length) { var bytes = new Uint8Array(memory.buffer, offset, length); var string = new TextDecoder('utf8').decode(bytes); console.log(string); @@ -625,7 +263,7 @@ WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) <p>For simplicity, let's create it in JavaScript then import it into WebAssembly. Our <code>import</code> statement is written as follows:</p> -<pre class="notranslate">(import "js" "mem" (memory 1))</pre> +<pre>(import "js" "mem" (memory 1))</pre> <p>The <code>1</code> indicates that the imported memory must have at least 1 page of memory (WebAssembly defines a page to be 64KB.)</p> @@ -633,7 +271,7 @@ WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) <p>Our final wasm module looks like this:</p> -<pre class="notranslate">(module +<pre>(module (import "console" "log" (func $log (param i32 i32))) (import "js" "mem" (memory 1)) (data (i32.const 0) "Hi") @@ -648,7 +286,7 @@ WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) <p>Now from JavaScript we can create a Memory with 1 page and pass it in. This results in "Hi" being printed to the console:</p> -<pre class="brush: js notranslate">var memory = new WebAssembly.Memory({initial:1}); +<pre class="brush: js">var memory = new WebAssembly.Memory({initial:1}); var importObj = { console: { log: consoleLogString }, js: { mem: memory } }; @@ -683,7 +321,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>So how do we place wasm functions in our table? Just like <code>data</code> sections can be used to initialize regions of linear memory with bytes, <code>elem</code> sections can be used to initialize regions of tables with functions:</p> -<pre class="notranslate">(module +<pre>(module (table 2 anyfunc) (elem (i32.const 0) $f1 $f2) (func $f1 (result i32) @@ -706,7 +344,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>In JavaScript, the equivalent calls to create such a table instance would look something like this:</p> -<pre class="brush: js notranslate">function() { +<pre class="brush: js">function() { // table section var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); @@ -723,7 +361,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>Moving on, now we’ve defined the table we need to use it somehow. Let's use this section of code to do so:</p> -<pre class="notranslate">(type $return_i32 (func (result i32))) ;; if this was f32, type checking would fail +<pre>(type $return_i32 (func (result i32))) ;; if this was f32, type checking would fail (func (export "callByIndex") (param $i i32) (result i32) get_local $i call_indirect (type $return_i32))</pre> @@ -737,7 +375,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>You could also declare the <code>call_indirect</code> parameter explicitly during the command call instead of before it, like this:</p> -<pre class="notranslate">(call_indirect (type $return_i32) (get_local $i))</pre> +<pre>(call_indirect (type $return_i32) (get_local $i))</pre> <p>In a higher level, more expressive language like JavaScript, you could imagine doing the same thing with an array (or probably more likely, object) containing functions. The pseudo code would look something like <code>tbl[i]()</code>.</p> @@ -745,11 +383,11 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>So what links the <code>call_indirect</code> to the table we are calling? The answer is that there is only one table allowed right now per module instance, and that is what <code>call_indirect</code> is implicitly calling. In the future, when multiple tables are allowed, we would also need to specify a table identifier of some kind, along the lines of</p> -<pre class="notranslate">call_indirect $my_spicy_table (type $i32_to_void)</pre> +<pre>call_indirect $my_spicy_table (type $i32_to_void)</pre> <p>The full module all together looks like this, and can be found in our <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.wat">wasm-table.wat</a> example file:</p> -<pre class="notranslate">(module +<pre>(module (table 2 anyfunc) (func $f1 (result i32) i32.const 42) @@ -764,7 +402,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>We load it into a webpage using the following JavaScript:</p> -<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('wasm-table.wasm')) +<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('wasm-table.wasm')) .then(obj => {  console.log(obj.instance.exports.callByIndex(0)); // returns 42  console.log(obj.instance.exports.callByIndex(1)); // returns 13 @@ -791,7 +429,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p><code>shared0.wat</code>:</p> -<pre class="notranslate">(module +<pre>(module (import "js" "memory" (memory 1)) (import "js" "table" (table 1 anyfunc)) (elem (i32.const 0) $shared0func) @@ -802,7 +440,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p><code>shared1.wat</code>:</p> -<pre class="notranslate">(module +<pre>(module (import "js" "memory" (memory 1)) (import "js" "table" (table 1 anyfunc)) (type $void_to_i32 (func (result i32))) @@ -827,13 +465,13 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <div class="note"> <p><strong>Note</strong>: The above expressions again pop values from the stack implicitly, but you could declare these explicitly inside the command calls instead, for example:</p> -<pre class="notranslate">(i32.store (i32.const 0) (i32.const 42)) +<pre>(i32.store (i32.const 0) (i32.const 42)) (call_indirect (type $void_to_i32) (i32.const 0))</pre> </div> <p>After converting to assembly, we then use <code>shared0.wasm</code> and <code>shared1.wasm</code> in JavaScript via the following code:</p> -<pre class="brush: js notranslate">var importObj = { +<pre class="brush: js">var importObj = { js: { memory : new WebAssembly.Memory({ initial: 1 }), table : new WebAssembly.Table({ initial: 1, element: "anyfunc" }) |