diff options
Diffstat (limited to 'files/fr')
303 files changed, 3799 insertions, 5115 deletions
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 3bc4db62c8..f18598385c 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -214,7 +214,7 @@ /fr/docs/Apprendre/HTML/Tableaux/Basics /fr/docs/Learn/HTML/Tables/Basics /fr/docs/Apprendre/HTML/Tableaux/Structuring_planet_data /fr/docs/Learn/HTML/Tables/Structuring_planet_data /fr/docs/Apprendre/HTML/Écrire_une_simple_page_HTML /fr/docs/conflicting/Learn/Getting_started_with_the_web -/fr/docs/Apprendre/Index /fr/docs/Learn/Index +/fr/docs/Apprendre/Index /fr/docs/conflicting/Learn /fr/docs/Apprendre/Infrastructure /fr/docs/Learn/Common_questions /fr/docs/Apprendre/JavaScript /fr/docs/Learn/JavaScript /fr/docs/Apprendre/JavaScript/Building_blocks /fr/docs/Learn/JavaScript/Building_blocks @@ -1262,6 +1262,7 @@ /fr/docs/Firefox_8_for_developers /fr/docs/Mozilla/Firefox/Releases/8 /fr/docs/Firefox_9_for_developers /fr/docs/Mozilla/Firefox/Releases/9 /fr/docs/Firefox_pour_les_développeurs /fr/docs/Mozilla/Firefox/Releases +/fr/docs/Games/Index /fr/docs/conflicting/Games /fr/docs/Games/Workflows /fr/docs/Games/Tutorials /fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript /fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript /fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field /fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field @@ -1473,7 +1474,7 @@ /fr/docs/Glossaire/Identificateur /fr/docs/Glossary/Identifier /fr/docs/Glossaire/Image_matricielle /fr/docs/Glossary/Raster_image /fr/docs/Glossaire/Immuable /fr/docs/Glossary/Immutable -/fr/docs/Glossaire/Index /fr/docs/Glossary/Index +/fr/docs/Glossaire/Index /fr/docs/conflicting/Glossary /fr/docs/Glossaire/IndexedDB /fr/docs/Glossary/IndexedDB /fr/docs/Glossaire/Injection_SQL /fr/docs/Glossary/SQL_Injection /fr/docs/Glossaire/Input_method_editor /fr/docs/Glossary/Input_method_editor @@ -1747,6 +1748,7 @@ /fr/docs/Glossary/Client_hints /fr/docs/Web/HTTP/Client_hints /fr/docs/Glossary/Gaia /fr/docs/orphaned/Glossary/Gaia /fr/docs/Glossary/Gonk /fr/docs/orphaned/Glossary/Gonk +/fr/docs/Glossary/Index /fr/docs/conflicting/Glossary /fr/docs/Glossary/Modern_web_apps /fr/docs/orphaned/Glossary/Modern_web_apps /fr/docs/Glossary/Node/réseau /fr/docs/Glossary/Node/networking /fr/docs/Glossary/Origine /fr/docs/Glossary/Origin @@ -2014,7 +2016,7 @@ /fr/docs/HTTP/Headers/Vary /fr/docs/Web/HTTP/Headers/Vary /fr/docs/HTTP/Headers/WWW-Authenticate /fr/docs/Web/HTTP/Headers/WWW-Authenticate /fr/docs/HTTP/Headers/X-Frame-Options /fr/docs/Web/HTTP/Headers/X-Frame-Options -/fr/docs/HTTP/Index /fr/docs/Web/HTTP/Index +/fr/docs/HTTP/Index /fr/docs/conflicting/Web/HTTP /fr/docs/HTTP/Méthode /fr/docs/Web/HTTP/Methods /fr/docs/HTTP/Méthode/CONNECT /fr/docs/Web/HTTP/Methods/CONNECT /fr/docs/HTTP/Méthode/DELETE /fr/docs/Web/HTTP/Methods/DELETE @@ -2964,7 +2966,7 @@ /fr/docs/Jeux /fr/docs/Games /fr/docs/Jeux/Anatomie /fr/docs/Games/Anatomy /fr/docs/Jeux/Exemples /fr/docs/Games/Examples -/fr/docs/Jeux/Index /fr/docs/Games/Index +/fr/docs/Jeux/Index /fr/docs/conflicting/Games /fr/docs/Jeux/Introduction /fr/docs/Games/Introduction /fr/docs/Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary) /fr/docs/Games/Introduction_to_HTML5_Game_Development /fr/docs/Jeux/Publier_jeux /fr/docs/Games/Publishing_games @@ -2997,6 +2999,11 @@ /fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS /fr/docs/Learn/CSS/First_steps/What_is_CSS /fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens /fr/docs/Learn/CSS/Styling_text/Styling_links /fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte /fr/docs/Learn/CSS/Styling_text/Fundamentals +/fr/docs/Learn/Index /fr/docs/conflicting/Learn +/fr/docs/Learn/JavaScript/Asynchronous/Async_await /fr/docs/conflicting/Learn/JavaScript/Asynchronous/Promises +/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach /fr/docs/conflicting/Learn/JavaScript/Asynchronous +/fr/docs/Learn/JavaScript/Asynchronous/Concepts /fr/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing +/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals /fr/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df /fr/docs/Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux /fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays /fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile /fr/docs/Learn/JavaScript/First_steps/Useful_string_methods /fr/docs/Learn/JavaScript/First_steps/tableaux /fr/docs/Learn/JavaScript/First_steps/Arrays @@ -3079,6 +3086,7 @@ /fr/docs/Mozilla/Add-ons/WebExtensions/Differences_entre_les_implementations_api /fr/docs/Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations /fr/docs/Mozilla/Add-ons/WebExtensions/Exemples /fr/docs/Mozilla/Add-ons/WebExtensions/Examples /fr/docs/Mozilla/Add-ons/WebExtensions/Incompatibilités_Chrome /fr/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +/fr/docs/Mozilla/Add-ons/WebExtensions/Index /fr/docs/conflicting/Mozilla/Add-ons/WebExtensions /fr/docs/Mozilla/Add-ons/WebExtensions/Intercepter_requêtes_HTTP /fr/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests /fr/docs/Mozilla/Add-ons/WebExtensions/Travailler_avec_l_API_Tabs /fr/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API /fr/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs /fr/docs/Mozilla/Add-ons/WebExtensions/API @@ -3215,7 +3223,7 @@ /fr/docs/Outils/Eyedropper /fr/docs/Tools/Eyedropper /fr/docs/Outils/Firefox_OS_Simulator_clone /fr/docs/Tools/Firefox_OS_Simulator_clone /fr/docs/Outils/Frise_chronologique /fr/docs/conflicting/Tools/Performance/Waterfall -/fr/docs/Outils/Index /fr/docs/Tools/Index +/fr/docs/Outils/Index /fr/docs/conflicting/Tools /fr/docs/Outils/Inspecteur /fr/docs/Tools/Page_Inspector /fr/docs/Outils/Inspecteur/3-pane_mode /fr/docs/Tools/Page_Inspector/3-pane_mode /fr/docs/Outils/Inspecteur/Comment /fr/docs/Tools/Page_Inspector/How_to @@ -3400,6 +3408,7 @@ /fr/docs/Tools/Debugger/How_to/Break_on_a_DOM_event /fr/docs/Tools/Debugger/Break_on_DOM_mutation /fr/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables /fr/docs/conflicting/Tools/Debugger/How_to/Set_Watch_Expressions /fr/docs/Tools/Debugger/Keyboard_shortcuts /fr/docs/orphaned/Tools/Debugger/Keyboard_shortcuts +/fr/docs/Tools/Index /fr/docs/conflicting/Tools /fr/docs/Tools/Page_Inspector/How_to/Examiner_et_éditer_le_code_HTML /fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML /fr/docs/Tools/Page_Inspector/Keyboard_shortcuts /fr/docs/orphaned/Tools/Page_Inspector/Keyboard_shortcuts /fr/docs/Tools/Web_Console/Keyboard_shortcuts /fr/docs/orphaned/Tools/Web_Console/Keyboard_shortcuts @@ -3642,6 +3651,7 @@ /fr/docs/Web/API/Event.stopPropagation /fr/docs/Web/API/Event/stopPropagation /fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements /fr/docs/Web/API/Event/Comparison_of_Event_Targets /fr/docs/Web/API/Event/createEvent /fr/docs/conflicting/Web/API/Document/createEvent +/fr/docs/Web/API/EventSource/onopen /fr/docs/Web/API/EventSource/open_event /fr/docs/Web/API/EventTarget/attachEvent /fr/docs/Web/API/EventTarget/addEventListener /fr/docs/Web/API/EventTarget/detachEvent /fr/docs/Web/API/EventTarget/removeEventListener /fr/docs/Web/API/EventTarget/fireEvent /fr/docs/Web/API/EventTarget/dispatchEvent @@ -3713,6 +3723,7 @@ /fr/docs/Web/API/PasswordCredential/idName /fr/docs/conflicting/Web/API/PasswordCredential_cbf7b306e83a3f58ff06bccf89637c12 /fr/docs/Web/API/PasswordCredential/passwordName /fr/docs/conflicting/Web/API/PasswordCredential_bc57d5dfa87242b4fb83497887124f41 /fr/docs/Web/API/Performance.now() /fr/docs/Web/API/Performance/now +/fr/docs/Web/API/Performance/onresourcetimingbufferfull /fr/docs/conflicting/Web/API/Performance/resourcetimingbufferfull_event /fr/docs/Web/API/Pointer_events/gestes_pincer_zoom /fr/docs/Web/API/Pointer_events/Pinch_zoom_gestures /fr/docs/Web/API/PositionOptions /fr/docs/conflicting/Web/API/Geolocation/getCurrentPosition_5852407122355d2ab39863042583c266 /fr/docs/Web/API/PositionOptions/enableHighAccuracy /fr/docs/conflicting/Web/API/Geolocation/getCurrentPosition @@ -4499,6 +4510,7 @@ /fr/docs/Web/HTML/HTML5/Liste_des_éléments_HTML5 /fr/docs/conflicting/Web/HTML/Element /fr/docs/Web/HTML/Image_avec_ressources_origines_multiples_CORS_activees /fr/docs/Web/HTML/CORS_enabled_image /fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP /fr/docs/Web/HTML/CORS_enabled_image +/fr/docs/Web/HTML/Index /fr/docs/conflicting/Web/HTML /fr/docs/Web/HTML/Inline_elemente /fr/docs/Web/HTML/Inline_elements /fr/docs/Web/HTML/Introduction /fr/docs/Learn/HTML/Introduction_to_HTML /fr/docs/Web/HTML/Introduction_to_HTML5 /fr/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 @@ -4529,6 +4541,7 @@ /fr/docs/Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent /fr/docs/Web/HTTP/Browser_detection_using_the_user_agent /fr/docs/Web/HTTP/FAQ_sur_le_préchargement_des_liens /fr/docs/Web/HTTP/Link_prefetching_FAQ /fr/docs/Web/HTTP/Headers/Serveur /fr/docs/Web/HTTP/Headers/Server +/fr/docs/Web/HTTP/Index /fr/docs/conflicting/Web/HTTP /fr/docs/Web/HTTP/Méthode /fr/docs/Web/HTTP/Methods /fr/docs/Web/HTTP/Méthode/CONNECT /fr/docs/Web/HTTP/Methods/CONNECT /fr/docs/Web/HTTP/Méthode/DELETE /fr/docs/Web/HTTP/Methods/DELETE @@ -5493,6 +5506,7 @@ /fr/docs/Web/MathML/Exemples /fr/docs/Web/MathML/Examples /fr/docs/Web/MathML/Exemples/Dériver_la_Formule_Quadratique /fr/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula /fr/docs/Web/MathML/Exemples/MathML_Theoreme_de_Pythagore /fr/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem +/fr/docs/Web/MathML/Index /fr/docs/conflicting/Web/MathML /fr/docs/Web/Media/Formats/Questions_sur_le_soutien /fr/docs/Web/Media/Formats/Support_issues /fr/docs/Web/Media/Formats/Types_des_images /fr/docs/Web/Media/Formats/Image_types /fr/docs/Web/Performance/Budgets_de_performance /fr/docs/Web/Performance/Performance_budgets @@ -5512,6 +5526,7 @@ /fr/docs/Web/Reference/API /fr/docs/orphaned/Web/Reference/API /fr/docs/Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML /fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content /fr/docs/Web/SVG/Element/cercle /fr/docs/Web/SVG/Element/circle +/fr/docs/Web/SVG/Index /fr/docs/conflicting/Web/SVG /fr/docs/Web/SVG/SVG_en_tant_qu_image /fr/docs/Web/SVG/SVG_as_an_Image /fr/docs/Web/SVG/Sources_compatibilite /fr/docs/Web/SVG/Compatibility_sources /fr/docs/Web/SVG/Tutoriel /fr/docs/Web/SVG/Tutorial @@ -5589,6 +5604,7 @@ /fr/docs/Web/XPath/Fonctions/translate /fr/docs/Web/XPath/Functions/translate /fr/docs/Web/XPath/Fonctions/true /fr/docs/Web/XPath/Functions/true /fr/docs/Web/XPath/Fonctions/unparsed-entity-url /fr/docs/Web/XPath/Functions/unparsed-entity-url +/fr/docs/Web/XSLT/Index /fr/docs/conflicting/Web/XSLT /fr/docs/Web/XSLT/Interface_XSLT_JS_dans_Gecko /fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko /fr/docs/Web/XSLT/Interface_XSLT_JS_dans_Gecko/Définition_de_paramètres /fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters /fr/docs/Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_avancé /fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example @@ -5602,7 +5618,7 @@ /fr/docs/Web/XSLT/L'interface_XSLT_JavaScript_dans_Gecko/Les_liaisons_JavaScript_XSLT /fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/JavaScript_XSLT_Bindings /fr/docs/Web/XSLT/L'interface_XSLT_JavaScript_dans_Gecko/Ressources /fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Resources /fr/docs/Web/XSLT/Paramètres_des_instructions_de_traitement /fr/docs/Web/XSLT/PI_Parameters -/fr/docs/Web/XSLT/Sommaire /fr/docs/Web/XSLT/Index +/fr/docs/Web/XSLT/Sommaire /fr/docs/conflicting/Web/XSLT /fr/docs/Web/XSLT/Transformations_XML_avec_XSLT /fr/docs/Web/XSLT/Transforming_XML_with_XSLT /fr/docs/Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources /fr/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading /fr/docs/Web/XSLT/Transformations_XML_avec_XSLT/La_référence_XSLT_XPath_de_Netscape /fr/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 7032f73e7a..db7fabbb59 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -29,13 +29,6 @@ "BNedry" ] }, - "Games/Index": { - "modified": "2019-01-16T21:55:43.323Z", - "contributors": [ - "wbamberg", - "xdelatour" - ] - }, "Games/Introduction": { "modified": "2019-04-23T09:34:16.784Z", "contributors": [ @@ -1715,12 +1708,6 @@ "xdelatour" ] }, - "Glossary/Index": { - "modified": "2019-01-16T21:55:44.075Z", - "contributors": [ - "xdelatour" - ] - }, "Glossary/IndexedDB": { "modified": "2019-03-23T22:46:35.134Z", "contributors": [ @@ -4794,12 +4781,6 @@ "tonybengue" ] }, - "Learn/Index": { - "modified": "2020-07-16T22:33:36.900Z", - "contributors": [ - "SphinxKnight" - ] - }, "Learn/JavaScript": { "modified": "2020-07-16T22:29:38.759Z", "contributors": [ @@ -9328,12 +9309,6 @@ "RoyalPanda" ] }, - "Mozilla/Add-ons/WebExtensions/Index": { - "modified": "2019-03-18T21:01:44.832Z", - "contributors": [ - "hellosct1" - ] - }, "Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard": { "modified": "2019-07-03T05:46:49.789Z", "contributors": [ @@ -10666,13 +10641,6 @@ "xdelatour" ] }, - "Tools/Index": { - "modified": "2020-07-16T22:36:03.885Z", - "contributors": [ - "wbamberg", - "xdelatour" - ] - }, "Tools/JSON_viewer": { "modified": "2020-07-16T22:36:31.458Z", "contributors": [ @@ -15556,7 +15524,7 @@ "Plotisateur" ] }, - "Web/API/EventSource/onopen": { + "Web/API/EventSource/open_event": { "modified": "2020-10-15T22:17:18.152Z", "contributors": [ "SphinxKnight", @@ -32084,13 +32052,6 @@ "SphinxKnight" ] }, - "Web/HTML/Index": { - "modified": "2019-01-16T18:47:13.379Z", - "contributors": [ - "SphinxKnight", - "tregagnon" - ] - }, "Web/HTML/Inline_elements": { "modified": "2019-04-06T13:04:18.081Z", "contributors": [ @@ -32917,14 +32878,6 @@ "mmahouachi" ] }, - "Web/HTTP/Index": { - "modified": "2019-03-23T22:26:53.499Z", - "contributors": [ - "tonybengue", - "SphinxKnight", - "xdelatour" - ] - }, "Web/HTTP/Link_prefetching_FAQ": { "modified": "2019-03-23T23:46:22.581Z", "contributors": [ @@ -40091,12 +40044,6 @@ "Powlow" ] }, - "Web/MathML/Index": { - "modified": "2019-01-16T22:05:50.107Z", - "contributors": [ - "xdelatour" - ] - }, "Web/Media": { "modified": "2019-03-18T21:32:54.694Z", "contributors": [ @@ -41020,12 +40967,6 @@ "Nothus" ] }, - "Web/SVG/Index": { - "modified": "2019-01-16T21:57:35.980Z", - "contributors": [ - "xdelatour" - ] - }, "Web/SVG/SVG_animation_with_SMIL": { "modified": "2019-08-24T09:55:45.297Z", "contributors": [ @@ -42141,12 +42082,6 @@ "Fredchat" ] }, - "Web/XSLT/Index": { - "modified": "2019-06-17T11:21:18.591Z", - "contributors": [ - "Arzak656" - ] - }, "Web/XSLT/PI_Parameters": { "modified": "2019-03-23T23:44:06.266Z", "contributors": [ @@ -42318,6 +42253,19 @@ "dattaz" ] }, + "conflicting/Games": { + "modified": "2019-01-16T21:55:43.323Z", + "contributors": [ + "wbamberg", + "xdelatour" + ] + }, + "conflicting/Glossary": { + "modified": "2019-01-16T21:55:44.075Z", + "contributors": [ + "xdelatour" + ] + }, "conflicting/Glossary/Chrome": { "modified": "2019-03-23T23:48:48.795Z", "contributors": [ @@ -42351,7 +42299,7 @@ ] }, "conflicting/Learn": { - "modified": "2020-07-16T22:22:13.196Z", + "modified": "2020-07-16T22:33:36.900Z", "contributors": [ "SphinxKnight" ] @@ -42744,6 +42692,12 @@ "Sheppy" ] }, + "conflicting/Mozilla/Add-ons/WebExtensions": { + "modified": "2019-03-18T21:01:44.832Z", + "contributors": [ + "hellosct1" + ] + }, "conflicting/Mozilla/Add-ons/WebExtensions/API/menus/overrideContext": { "modified": "2019-07-03T07:58:27.877Z", "contributors": [ @@ -42756,6 +42710,13 @@ "hellosct1" ] }, + "conflicting/Tools": { + "modified": "2020-07-16T22:36:03.885Z", + "contributors": [ + "wbamberg", + "xdelatour" + ] + }, "conflicting/Tools/Debugger/How_to/Set_Watch_Expressions": { "modified": "2020-07-16T22:35:12.981Z", "contributors": [ @@ -43481,6 +43442,13 @@ "Fredchat" ] }, + "conflicting/Web/HTML": { + "modified": "2019-01-16T18:47:13.379Z", + "contributors": [ + "SphinxKnight", + "tregagnon" + ] + }, "conflicting/Web/HTML/Element": { "modified": "2019-03-23T23:39:45.493Z", "contributors": [ @@ -43499,6 +43467,14 @@ "xdelatour" ] }, + "conflicting/Web/HTTP": { + "modified": "2019-03-23T22:26:53.499Z", + "contributors": [ + "tonybengue", + "SphinxKnight", + "xdelatour" + ] + }, "conflicting/Web/HTTP/Basics_of_HTTP/MIME_types": { "modified": "2020-04-19T02:52:23.292Z", "contributors": [ @@ -43878,6 +43854,12 @@ "SphinxKnight" ] }, + "conflicting/Web/MathML": { + "modified": "2019-01-16T22:05:50.107Z", + "contributors": [ + "xdelatour" + ] + }, "conflicting/Web/Progressive_web_apps": { "modified": "2019-03-18T20:52:18.657Z", "contributors": [ @@ -43935,6 +43917,12 @@ "JeffD" ] }, + "conflicting/Web/SVG": { + "modified": "2019-01-16T21:57:35.980Z", + "contributors": [ + "xdelatour" + ] + }, "conflicting/Web/Web_Components": { "modified": "2020-10-15T22:12:01.555Z", "contributors": [ @@ -43951,6 +43939,12 @@ "Fredchat" ] }, + "conflicting/Web/XSLT": { + "modified": "2019-06-17T11:21:18.591Z", + "contributors": [ + "Arzak656" + ] + }, "orphaned/Glossary/Gaia": { "modified": "2019-03-23T22:42:05.161Z", "contributors": [ diff --git a/files/fr/games/index/index.md b/files/fr/conflicting/games/index.md index e71dad980f..a2f1287d53 100644 --- a/files/fr/games/index/index.md +++ b/files/fr/conflicting/games/index.md @@ -1,10 +1,10 @@ --- title: Index -slug: Games/Index +slug: conflicting/Games tags: - Meta translation_of: Games/Index -original_slug: Jeux/Index +original_slug: Games/Index --- {{GamesSidebar}}{{IncludeSubnav("/fr/docs/Jeux")}} diff --git a/files/fr/glossary/index/index.md b/files/fr/conflicting/glossary/index.md index 4cdb0f3a01..84c7e9bb13 100644 --- a/files/fr/glossary/index/index.md +++ b/files/fr/conflicting/glossary/index.md @@ -1,11 +1,11 @@ --- title: Index -slug: Glossary/Index +slug: conflicting/Glossary tags: - Glossaire - Index - Navigation translation_of: Glossary/Index -original_slug: Glossaire/Index +original_slug: Glossary/Index --- {{Index("/fr/docs/Glossaire")}} diff --git a/files/fr/learn/index/index.md b/files/fr/conflicting/learn/index.md index 9edb6a5134..71cdb8736f 100644 --- a/files/fr/learn/index/index.md +++ b/files/fr/conflicting/learn/index.md @@ -1,12 +1,12 @@ --- title: Index -slug: Learn/Index +slug: conflicting/Learn tags: - Index - Learn - MDN - Meta translation_of: Learn/Index -original_slug: Apprendre/Index +original_slug: Learn/Index --- {{Index("/fr/docs/Apprendre")}} diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md b/files/fr/conflicting/learn/javascript/asynchronous/index.md index 679212748d..b2b9afbcd1 100644 --- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md +++ b/files/fr/conflicting/learn/javascript/asynchronous/index.md @@ -1,6 +1,6 @@ --- title: Choisir la bonne approche -slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +slug: conflicting/Learn/JavaScript/Asynchronous tags: - Beginner - Intervals @@ -16,6 +16,7 @@ tags: - setTimeout - timeouts translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach --- {{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}} diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.md b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md index 03dc27feaf..2fadd1a162 100644 --- a/files/fr/learn/javascript/asynchronous/concepts/index.md +++ b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md @@ -1,6 +1,6 @@ --- title: Concepts généraux de programmation asynchrone -slug: Learn/JavaScript/Asynchronous/Concepts +slug: conflicting/Learn/JavaScript/Asynchronous/Introducing tags: - JavaScript - Learn @@ -9,6 +9,7 @@ tags: - asynchronous - blocking translation_of: Learn/JavaScript/Asynchronous/Concepts +original_slug: Learn/JavaScript/Asynchronous/Concepts --- {{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}} diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.md b/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md index a7578c08e1..93a26dd1b8 100644 --- a/files/fr/learn/javascript/asynchronous/async_await/index.md +++ b/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md @@ -1,6 +1,6 @@ --- title: Faciliter la programmation asynchrone avec async et await -slug: Learn/JavaScript/Asynchronous/Async_await +slug: conflicting/Learn/JavaScript/Asynchronous/Promises tags: - Beginner - CodingScripting @@ -12,6 +12,7 @@ tags: - asynchronous - await translation_of: Learn/JavaScript/Asynchronous/Async_await +original_slug: Learn/JavaScript/Asynchronous/Async_await --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}} diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md b/files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md index c179da9e18..11ea92030f 100644 --- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md +++ b/files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md @@ -1,6 +1,6 @@ --- title: 'JavaScript asynchrone coopératif : délais et intervalles' -slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals +slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df tags: - Animation - Beginner @@ -15,6 +15,7 @@ tags: - setTimeout - timeouts translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals +original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}} @@ -373,7 +374,7 @@ Assez avec la théorie ! Construisons votre propre exemple personnel de `request ``` 4. Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`. -5. Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div> ; `à l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`. +5. Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div>`. l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`. ```js const spinner = document.querySelector('div'); diff --git a/files/fr/mozilla/add-ons/webextensions/index/index.md b/files/fr/conflicting/mozilla/add-ons/webextensions/index.md index 1631e2d620..7236a454ab 100644 --- a/files/fr/mozilla/add-ons/webextensions/index/index.md +++ b/files/fr/conflicting/mozilla/add-ons/webextensions/index.md @@ -1,10 +1,11 @@ --- title: Index -slug: Mozilla/Add-ons/WebExtensions/Index +slug: conflicting/Mozilla/Add-ons/WebExtensions tags: - Add-ons - Index - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/Index +original_slug: Mozilla/Add-ons/WebExtensions/Index --- {{AddonSidebar}}{{Index("/fr/Add-ons/WebExtensions")}} diff --git a/files/fr/tools/index/index.html b/files/fr/conflicting/tools/index.html index 427a08ab27..afaa168566 100644 --- a/files/fr/tools/index/index.html +++ b/files/fr/conflicting/tools/index.html @@ -1,9 +1,9 @@ --- title: Index -slug: Tools/Index +slug: conflicting/Tools tags: - Outils translation_of: Tools/Index -original_slug: Outils/Index +original_slug: Tools/Index --- <div>{{ToolsSidebar}}</div><p>{{Index("/fr/docs/Outils")}}</p> diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md b/files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md index d904faab49..d1073d834b 100644 --- a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md +++ b/files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md @@ -1,6 +1,6 @@ --- title: performance.onresourcetimingbufferfull -slug: Web/API/Performance/onresourcetimingbufferfull +slug: conflicting/Web/API/Performance/resourcetimingbufferfull_event tags: - API - Method @@ -8,6 +8,7 @@ tags: - Reference - Performance web translation_of: Web/API/Performance/onresourcetimingbufferfull +original_slug: Web/API/Performance/onresourcetimingbufferfull --- {{APIRef("Resource Timing API")}} diff --git a/files/fr/web/html/index/index.md b/files/fr/conflicting/web/html/index.md index 73f68028a6..14022f7307 100644 --- a/files/fr/web/html/index/index.md +++ b/files/fr/conflicting/web/html/index.md @@ -1,9 +1,10 @@ --- title: Index de la documentation HTML -slug: Web/HTML/Index +slug: conflicting/Web/HTML tags: - HTML - Index translation_of: Web/HTML/Index +original_slug: Web/HTML/Index --- {{Index("/fr/docs/Web/HTML")}} diff --git a/files/fr/web/http/index/index.md b/files/fr/conflicting/web/http/index.md index da1d0de1ff..655176157f 100644 --- a/files/fr/web/http/index/index.md +++ b/files/fr/conflicting/web/http/index.md @@ -1,10 +1,11 @@ --- title: Index -slug: Web/HTTP/Index +slug: conflicting/Web/HTTP tags: - HTTP - Index translation_of: Web/HTTP/Index +original_slug: Web/HTTP/Index --- {{HTTPSidebar}} diff --git a/files/fr/web/mathml/index/index.md b/files/fr/conflicting/web/mathml/index.md index 36ce8ae063..f3bb5bd189 100644 --- a/files/fr/web/mathml/index/index.md +++ b/files/fr/conflicting/web/mathml/index.md @@ -1,8 +1,9 @@ --- title: Index de la documentation MathML -slug: Web/MathML/Index +slug: conflicting/Web/MathML tags: - MathML translation_of: Web/MathML/Index +original_slug: Web/MathML/Index --- {{Index("/fr/docs/Web/MathML")}} diff --git a/files/fr/web/svg/index/index.md b/files/fr/conflicting/web/svg/index.md index 50edd31d3b..b645f9da52 100644 --- a/files/fr/web/svg/index/index.md +++ b/files/fr/conflicting/web/svg/index.md @@ -1,8 +1,9 @@ --- title: Index de la documentation SVG -slug: Web/SVG/Index +slug: conflicting/Web/SVG tags: - SVG translation_of: Web/SVG/Index +original_slug: Web/SVG/Index --- {{Index("/fr/docs/Web/SVG")}} diff --git a/files/fr/web/xslt/index/index.md b/files/fr/conflicting/web/xslt/index.md index 0e4fb850a3..9c09d87728 100644 --- a/files/fr/web/xslt/index/index.md +++ b/files/fr/conflicting/web/xslt/index.md @@ -1,8 +1,8 @@ --- title: Sommaire -slug: Web/XSLT/Index +slug: conflicting/Web/XSLT translation_of: Web/XSLT/Index -original_slug: Web/XSLT/Sommaire +original_slug: Web/XSLT/Index --- {{XSLTRef}}{{QuickLinksWithSubpages("/fr/docs/Web/XSLT")}} diff --git a/files/fr/games/index.md b/files/fr/games/index.md index 3677ee611b..075f879758 100644 --- a/files/fr/games/index.md +++ b/files/fr/games/index.md @@ -38,25 +38,25 @@ Pour une liste d'exemples de jeux, voir notre [page exemples](/fr/docs/Games/Exa ## Voir aussi -- [Build New Games ](http://buildnewgames.com/)(en) +- [Build New Games (en anglais)](http://buildnewgames.com/) - : Un site collaboratif avec de nombreux tutoriels concernant le développement de jeux vidéo sur le Web. N'a pas été très actif récemment, mais détient toujours de belles ressources. -- [Creative JS ](http://creativejs.com/)(en) +- [Creative JS (en anglais)](http://creativejs.com/) - : Un ensemble de techniques et d'expérimentations JavaScript, pas nécessairement liées au domaine vidéo-ludique mais qui se révèlent plutôt utiles et impressionnantes. N'a pas été très actif récemment, mais détient toujours de belles ressources. -- [Game programming patterns ](http://gameprogrammingpatterns.com/)(en) +- [Game programming patterns (en anglais)](http://gameprogrammingpatterns.com/) - : Un livre en ligne, écrit par Bob Nystrom, qui traite des modèles de programmation dans le contexte du développement de jeux, dans le but d'aider les développeurs de jeux à produire un code plus réussi et plus opérationnel. -- [Gamedev.js Weekly ](http://gamedevjsweekly/games.com/)(en) +- [Gamedev.js Weekly (en anglais)](http://gamedevjsweekly/games.com/) - : Bulletin hebdomadaire sur le développement de jeux HTML5, envoyé tous les vendredis. Contient les derniers articles, didacticiels, outils et ressources. -- [HTML5 Game Devs Forum ](http://www.html5gamedevs.com/)(en) +- [HTML5 Game Devs Forum (en anglais)](http://www.html5gamedevs.com/) - : Forums pour développeurs, créateurs de "framework" et éditeurs. Posez des questions, obtenez des commentaires, aidez les autres. -- [HTML5 Game Engine ](http://html5gameengine.com/)(en) +- [HTML5 Game Engine (en anglais)](http://html5gameengine.com/) - : Liste des architectures de jeux HTML5 les plus populaires ainsi que leurs classement, fonctionnalités et exemples. -- [JSBreakouts](http://www.jsbreakouts.org/) (en) +- [JSBreakouts (en anglais)](http://www.jsbreakouts.org/) - : Comparez les clones JavaScript Breakout dans différents systèmes pour vous aider à choisir le bon pour vous. -- [Tuts+ Game Development ](http://gamedevelopment.tutsplus.com/)(en) +- [Tuts+ Game Development (en anglais)](http://gamedevelopment.tutsplus.com/) - : Tutoriels et articles sur le developpement de jeux en général. -- [HTML5 Gamedev Starter ](http://html5devstarter.enclavegames.com/)(en) +- [HTML5 Gamedev Starter (en anglais)](http://html5devstarter.enclavegames.com/) - : De quoi démarrer pour les nouveaux développeurs de jeux, une liste organisée de liens vers diverses ressources utiles sur le web. -- [js13kGames ](http://js13kgames.com/)(en) +- [js13kGames (en anglais)](http://js13kgames.com/) - : Concours de codage JavaScript pour les développeurs de jeux HTML5 avec une limite de taille de fichier fixée à 13 kilo-octets. Tous les jeux soumis sont disponibles sous forme lisible sur GitHub. -- [Mozilla Hacks blog ](https://hacks.mozilla.org/category/games/)(en) +- [Mozilla Hacks blog (en anglais)](https://hacks.mozilla.org/category/games/) - : Catégorie Jeux sur le blog "Hacks" de Mozilla contenant des articles connexes intéressants. diff --git a/files/fr/games/publishing_games/index.md b/files/fr/games/publishing_games/index.md index d95350c1e0..bebb0c271e 100644 --- a/files/fr/games/publishing_games/index.md +++ b/files/fr/games/publishing_games/index.md @@ -26,4 +26,4 @@ Développer et finaliser un jeu ne suffit pas. Vous devez informer le monde que ## Monétiser votre jeu -Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. [Monétiser son jeu ](/fr/docs/Games/Publishing_games/Game_monetization)est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous. +Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. [Monétiser son jeu](/fr/docs/Games/Publishing_games/Game_monetization) est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous. diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md index a90a0ff795..e4074f5f75 100644 --- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md +++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md @@ -112,6 +112,6 @@ Maintenant vous connaissez les bases de la théorie derrière la manipulation 3D - [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) - [Construction d'une démo de base avec Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js) - [Construction d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) -- [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) +- [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) Allez-y et faites quelques expémentations 3D sympas par vous-même ! diff --git a/files/fr/games/techniques/3d_on_the_web/index.md b/files/fr/games/techniques/3d_on_the_web/index.md index e921ad5af4..7d294a7a53 100644 --- a/files/fr/games/techniques/3d_on_the_web/index.md +++ b/files/fr/games/techniques/3d_on_the_web/index.md @@ -55,7 +55,7 @@ La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.o ### Construction d'une démo de base avec A-Frame -A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo . +A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo . ### Construction d'une démo de base avec Babylon.js @@ -102,4 +102,4 @@ Vous pouvez trouver tous les codes source de cette série de [démos sur GitHub] - [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) - [Construction d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) - [Construction d'une démo de base avec Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js) -- [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) +- [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) diff --git a/files/fr/games/techniques/index.md b/files/fr/games/techniques/index.md index 0a46bbdb6e..d5493a42f2 100644 --- a/files/fr/games/techniques/index.md +++ b/files/fr/games/techniques/index.md @@ -25,5 +25,5 @@ Cette page liste un ensemble de techniques utiles à toute personne qui voudrait - : L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère. L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier. Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes. - [Détection de collisions en 2D](/fr/docs/Games/Techniques/2D_collision_detection "/fr/docs/Games/Techniques/2D_collision_detection") - : Une introduction aux techniques de détection de collisions pour les jeux en deux dimensions. -- [Carrelage ](/fr/docs/Games/Techniques/Tilemaps)[ ](/fr/docs/Games/Techniques/Tilemaps) +- [Carrelage](/fr/docs/Games/Techniques/Tilemaps) - : Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu. Ces articles fournissent une introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas. diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index b28c6c8b26..e0a0d0f3e4 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -119,4 +119,4 @@ Vérifions encore une fois le code fini pour cette partie par rapport à ce que ## Dans le prochain chapitre -Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir[ Raquette et contrôle au clavier](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls). {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}} +Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir [Raquette et contrôle au clavier](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls). {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}} diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md index 1c89ff4260..ab190b5bfc 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -71,7 +71,7 @@ function drawBricks() { } ``` -Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position `x` et `y `à chaque brique, et nous dessinons les briques — de taille : `brickWidth` x `brickHeight` — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées `(0,0)`. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position `x` et `y` de chaque brique à chaque passage dans la boucle : +Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position `x` et `y` à chaque brique, et nous dessinons les briques — de taille : `brickWidth` x `brickHeight` — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées `(0,0)`. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position `x` et `y` de chaque brique à chaque passage dans la boucle : ```js var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft; @@ -119,6 +119,6 @@ Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ## Prochaines étapes Nous avons donc maintenant des briques ! -Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : [Détection des collisions ](/fr/docs/) +Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : [Détection des collisions](/fr/docs/) {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}} diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md index 4f2db9ffc5..f1d656f550 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md @@ -134,6 +134,6 @@ Exercice: changez la couleur de la balle lorsqu'elle frappe une brique. ## Prochaine étape -Nous ne sommes plus très loin de la fin ; poursuivons ! Dans le huitième chapitre, nous verrons comment[ Track the score and win](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win). +Nous ne sommes plus très loin de la fin ; poursuivons ! Dans le huitième chapitre, nous verrons comment [Track the score and win](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}} diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md index 272bb78632..d5c7702d58 100644 --- a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md +++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -8,7 +8,7 @@ original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR {{IncludeSubnav("/fr/docs/Jeux")}} -Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API [Device Orientation](/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes) et [Vibration](/fr/docs/Web/API/Vibration_API) pour améliorer le "gameplay" et est construit avec le "framework" [Phaser ](http://phaser.io/). La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel. +Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API [Device Orientation](/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes) et [Vibration](/fr/docs/Web/API/Vibration_API) pour améliorer le "gameplay" et est construit avec le "framework" [Phaser](http://phaser.io/). La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel. ## Exemple de jeu @@ -18,7 +18,7 @@ A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu ## Le framework Phaser -[Phaser](http://phaser.io/) est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement. Les sources sont[ sur Github](https://github.com/photonstorm/phaser), lisez y la [documentation](http://docs.phaser.io/) de base, jetez un œil aux [exemples](http://examples.phaser.io/). Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un jeu. +[Phaser](http://phaser.io/) est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement. Les sources sont [sur GitHub](https://github.com/photonstorm/phaser), lisez y la [documentation](http://docs.phaser.io/) de base, jetez un œil aux [exemples](http://examples.phaser.io/). Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un jeu. ## Mise en place du projet @@ -34,7 +34,7 @@ Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a ## Mettre en place le canevas -Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier` index.html` avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre : +Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier `index.html` avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre : ```html <!DOCTYPE html> @@ -92,7 +92,7 @@ La première valeur est le nom de l'état et la seconde est l'objet que nous vou ## Gestion des états du jeu -Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : `Boot (démarrage)`, `Preloader (préchargement)`, `MainMenu (menu principal), ` `Howto` _(comment jouer)_ et `Game (jeu)`. `Boot` s'occupe d'initialiser quelques paramètres, `Preloader` charge tous les graphismes et les sons, `MainMenu` est le menu avec le bouton start, `Howto` affiche les instructions "comment jouer" et `Game`, est l'état qui permet de jouer. Passons rapidement au contenu de ces états. +Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : `Boot (démarrage)`, `Preloader (préchargement)`, `MainMenu (menu principal)`, `Howto` _(comment jouer)_ et `Game (jeu)`. `Boot` s'occupe d'initialiser quelques paramètres, `Preloader` charge tous les graphismes et les sons, `MainMenu` est le menu avec le bouton start, `Howto` affiche les instructions "comment jouer" et `Game`, est l'état qui permet de jouer. Passons rapidement au contenu de ces états. ### Boot.js _(démarrage)_ diff --git a/files/fr/glossary/accessibility/index.md b/files/fr/glossary/accessibility/index.md index f6b1153583..43e08e5087 100644 --- a/files/fr/glossary/accessibility/index.md +++ b/files/fr/glossary/accessibility/index.md @@ -18,6 +18,6 @@ _L'Accessibilité du web_ (**A11Y**) correspond aux bonnes pratiques assurant qu ### Informations techniques -- [La Documentation ARIA ](/fr/docs/Accessibilité/ARIA)sur MDN -- [La page d'accueil de la Web Accessibility Initiative ](http://www.w3.org/WAI/)sur le site du W3C (en) +- [La Documentation ARIA](/fr/docs/Accessibilité/ARIA) sur MDN +- [La page d'accueil de la Web Accessibility Initiative](http://www.w3.org/WAI/) sur le site du W3C (en) - [La recommandation WAI-ARIA](http://www.w3.org/TR/wai-aria/) sur le site du W3C (en). diff --git a/files/fr/glossary/adobe_flash/index.md b/files/fr/glossary/adobe_flash/index.md index d9614b09ba..e2942a7548 100644 --- a/files/fr/glossary/adobe_flash/index.md +++ b/files/fr/glossary/adobe_flash/index.md @@ -16,4 +16,4 @@ _Adobe Flash_ est une technologie obsolescente, développée par Adobe Systems, - [Site officiel d'Adobe](http://www.adobe.com/fr) - [Shumway](https://mozilla.github.io/shumway/), une implémentation libre par Mozilla -- [Présentation du projet Gnash ](http://gnashdev.org/)sur Sourceforge, une implémentation libre par GNU. +- [Présentation du projet Gnash](http://gnashdev.org/) sur Sourceforge, une implémentation libre par GNU. diff --git a/files/fr/glossary/api/index.md b/files/fr/glossary/api/index.md index 320392db06..f64d3ef82f 100644 --- a/files/fr/glossary/api/index.md +++ b/files/fr/glossary/api/index.md @@ -16,11 +16,11 @@ Par exemple : L'API [getUserMedia](/fr/docs/Web/API/MediaDevices/getUserMedia) peut être utilisée pour capturer l'audio et la vidéo de la webcam d'un utilisateur, pour ensuite en faire ce que le développeur souhaite comme par exemple les enregistrer, les diffuser à un autre utilisateur lors d'une conférence téléphonique ou capturer des clichés à partir de la vidéo. -L' [API Geolocation ](/fr/docs/Web/API/Geolocation)peut être utilisée pour récupérer des informations de localisation à partir de n'importe quel service disponible sur les appareils d'un utilisateur (GPS par exemple), qui peuvent ensuite être utilisées conjointement avec l'API [Google Maps](https://developers.google.com/maps/) pour par exemple tracer la position géographique de l'utilisateur sur une carte personnalisée et lui montrer les attractions touristiques proches de lui. +L'[API Geolocation](/fr/docs/Web/API/Geolocation) peut être utilisée pour récupérer des informations de localisation à partir de n'importe quel service disponible sur les appareils d'un utilisateur (GPS par exemple), qui peuvent ensuite être utilisées conjointement avec l'API [Google Maps](https://developers.google.com/maps/) pour par exemple tracer la position géographique de l'utilisateur sur une carte personnalisée et lui montrer les attractions touristiques proches de lui. -L' [API Twitter ](https://dev.twitter.com/overview/api)peut être utilisée pour récupérer les données d'un compte utilisateur Twitter, par exemple pour afficher ses derniers tweets sur une page web. +L'[API Twitter](https://dev.twitter.com/overview/api) peut être utilisée pour récupérer les données d'un compte utilisateur Twitter, par exemple pour afficher ses derniers tweets sur une page web. -L' [API Web Animations ](/fr/docs/Web/API/Web_Animations_API)peut être utilisée pour animer des parties d'une page web, par exemple pour faire bouger ou pivoter des images. +L'[API Web Animations](/fr/docs/Web/API/Web_Animations_API) peut être utilisée pour animer des parties d'une page web, par exemple pour faire bouger ou pivoter des images. ## Pour approfondir diff --git a/files/fr/glossary/aria/index.md b/files/fr/glossary/aria/index.md index 09694c3559..dd293ade7a 100644 --- a/files/fr/glossary/aria/index.md +++ b/files/fr/glossary/aria/index.md @@ -13,4 +13,4 @@ Par exemple, vous pouvez ajouter l'attribut `role="alert"` à un élément {{H ## Pour approfondir -- [ARIA ](/fr/docs/Accessibilit%C3%A9/ARIA)sur MDN +- [ARIA](/fr/docs/Accessibilit%C3%A9/ARIA) sur MDN diff --git a/files/fr/glossary/base64/index.md b/files/fr/glossary/base64/index.md index c8c8d6b7e0..d66a830181 100644 --- a/files/fr/glossary/base64/index.md +++ b/files/fr/glossary/base64/index.md @@ -46,7 +46,7 @@ Les deux méthodes, `atob()` et `btoa()`, fonctionnent sur des chaînes de carac - : Dans cet article, nous publions une bibliothèque dont les buts sont : - - de créer une interface pour les chaînes de caractères à la façon du langage [C](https://fr.wikipedia.org/wiki/C_%28langage%29) (i.e. un tableau de code de caractères —[ `ArrayBufferView`](/fr/docs/Web/API/ArrayBufferView) en JavaScript) basée sur l'interface JavaScript [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer), + - de créer une interface pour les chaînes de caractères à la façon du langage [C](https://fr.wikipedia.org/wiki/C_%28langage%29) (i.e. un tableau de code de caractères — [`ArrayBufferView`](/fr/docs/Web/API/ArrayBufferView) en JavaScript) basée sur l'interface JavaScript [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer), - de créer un ensemble de méthodes pour ces objets qui fonctionnent **sur des tableaux de nombres** plutôt que sur chaînes de caractères JavaScript immuables, - de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les [`DOMString`](/fr/docs/Web/API/DOMString). diff --git a/files/fr/glossary/caret/index.md b/files/fr/glossary/caret/index.md index a5fa8ae27c..d58e6668b3 100644 --- a/files/fr/glossary/caret/index.md +++ b/files/fr/glossary/caret/index.md @@ -30,7 +30,7 @@ Ces éléments fournissent des champs ou des zones de saisie de texte et utilise - [`<input type="password">`](/fr/docs/Web/HTML/Element/input/password) - [`<input type="search">`](/fr/docs/Web/HTML/Element/input/search) - [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), [`<input type="datetime">`](/fr/docs/Web/HTML/Element/input/datetime) et [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local) -- [`<input type="number">`](/fr/docs/Web/HTML/Element/input/number)[, ](/fr/docs/Web/HTML/Element/input/number)[`<input type="range">`](/fr/docs/Web/HTML/Element/input/range) +- [`<input type="number">`](/fr/docs/Web/HTML/Element/input/number), [`<input type="range">`](/fr/docs/Web/HTML/Element/input/range) - [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email), [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/%3Cinput_type=_tel_%3E) et [`<input type="url">`](/fr/docs/Web/HTML/Element/input/url) - {{HTMLElement("textarea")}} - Tout élément avec son attribut défini {{htmlattrxref("contenteditable")}} diff --git a/files/fr/glossary/character_encoding/index.md b/files/fr/glossary/character_encoding/index.md index fe8a602681..4c13827748 100644 --- a/files/fr/glossary/character_encoding/index.md +++ b/files/fr/glossary/character_encoding/index.md @@ -23,5 +23,5 @@ Ceci nous permet de nous assurer que nous pouvons utiliser des caractères issus ### Culture générale -- [Character encoding on W3C ](https://www.w3.org/International/articles/definitions-characters/)(en) +- [Character encoding on W3C (en anglais)](https://www.w3.org/International/articles/definitions-characters/) - Le [Codage des Caractères](https://fr.wikipedia.org/wiki/Codage_des_caract%C3%A8res) sur Wikipédia diff --git a/files/fr/glossary/css_selector/index.md b/files/fr/glossary/css_selector/index.md index e7c3376392..daf25029b1 100644 --- a/files/fr/glossary/css_selector/index.md +++ b/files/fr/glossary/css_selector/index.md @@ -66,11 +66,11 @@ Le contenu de la page résultant ressemble à ceci: - [Apprendre sur les sélecteurs CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) dans notre introduction à CSS. - Sélecteurs de base - - [Sélecteurs de type](/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type)` elementname` + - [Sélecteurs de type](/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type) `elementname` - [Sélecteurs de classe](/fr/docs/Web/CSS/Sélecteurs_de_classe) `.classname` - [Sélecteurs d'ID](/fr/docs/Web/CSS/Reference/Sélecteurs_d'ID) `#idname` - - [Sélecteurs universels](/fr/docs/Web/CSS/Sélecteurs_universels)` * ns|* *|*` - - [Sélecteurs d'attribut](/fr/docs/Web/CSS/Reference/Sélecteurs_d'attribut)` [attr=value]` + - [Sélecteurs universels](/fr/docs/Web/CSS/Sélecteurs_universels) `* ns|* *|*` + - [Sélecteurs d'attribut](/fr/docs/Web/CSS/Reference/Sélecteurs_d'attribut) `[attr=value]` - [`Sélecteurs d'état`](/fr/docs/Web/CSS/Pseudo-classes) `a:active, a:visited` - Combinaisons diff --git a/files/fr/glossary/entity/index.md b/files/fr/glossary/entity/index.md index a16bc0fa3d..7667368963 100644 --- a/files/fr/glossary/entity/index.md +++ b/files/fr/glossary/entity/index.md @@ -11,7 +11,7 @@ original_slug: Glossaire/Entity --- Une **entité** {{glossary("HTML")}} est une chaîne de texte _(string)_ qui commence par (`&)` et se termine avec `(;)`. Les entités sont fréquemment utilisées pour afficher des caractères réservés (qui seraient autrement interprétés comme du code HTML) et des caractères invisibles (comme des espaces insécables). Vous pouvez également les utiliser à la place d'autres caractères difficiles à taper avec un clavier standard. -De nombreux caractères sont des entités mnémoniques. Par exemple, l'entité pour le copyright symbole (`©`) est `©`. Pour les caractères non mémorisables, comme `— ou ` `—` , vous pouvez utiliser un [tableau de référence](https://dev.w3.org/html5/html-author/charref) ou [un outil décodeur](https://mothereff.in/html-entities). +De nombreux caractères sont des entités mnémoniques. Par exemple, l'entité pour le copyright symbole (`©`) est `©`. Pour les caractères non mémorisables, comme `—` ou `—`, vous pouvez utiliser un [tableau de référence](https://dev.w3.org/html5/html-author/charref) ou [un outil décodeur](https://mothereff.in/html-entities). ## Caractères réservés diff --git a/files/fr/glossary/forbidden_header_name/index.md b/files/fr/glossary/forbidden_header_name/index.md index d87df6a034..e872451fb7 100644 --- a/files/fr/glossary/forbidden_header_name/index.md +++ b/files/fr/glossary/forbidden_header_name/index.md @@ -10,7 +10,7 @@ tags: translation_of: Glossary/Forbidden_header_name original_slug: Glossaire/Forbidden_header_name --- -*Un nom d'en-tête interdit est un *nom d'[en-tête HTTP](/fr/docs/HTTP/Headers) qui ne peut être modifié par programmation, spécifiquement, un nom d'en-tête de **requête** HTTP (contraste avec {{Glossary("Forbidden response header name","Nom d'en-tête de réponse interdit")}}). +**Un nom d'en-tête interdit** est un nom d'[en-tête HTTP](/fr/docs/HTTP/Headers) qui ne peut être modifié par programmation, spécifiquement, un nom d'en-tête de **requête** HTTP (contraste avec {{Glossary("Forbidden response header name","Nom d'en-tête de réponse interdit")}}). Les modifications de ces en-têtes sont interdites pour que l'agent utilisateur garde un total contrôle sur eux. Les noms commençant par \``Sec-`\` sont réservés à la création de nouveaux en-têtes à l'abri des {{glossary("API","API")}} utilisant [Fetch](/fr/docs/Web/API/Fetch_API) qui accordent aux développeurs le contrôle des en-têtes, tels que {{domxref("XMLHttpRequest")}}. diff --git a/files/fr/glossary/iife/index.md b/files/fr/glossary/iife/index.md index 016a66ba75..fda1e1d151 100644 --- a/files/fr/glossary/iife/index.md +++ b/files/fr/glossary/iife/index.md @@ -12,7 +12,7 @@ original_slug: Glossaire/IIFE C'est un modèle de conception qui est également connu sous le nom de {{glossary("Self-Executing Anonymous Function","Fonction anonyme auto-exécutable")}} et contient deux parties principales. La première est la fonction anonyme avec portée lexicale incluse dans le {{jsxref("Operators/Grouping", "groupement opérateur")}}`()`. Cela empêche l'accès aux variables dans l'expression idiomatique IIFE ainsi que la pollution de la portée globale. -La deuxième partie crée la fonction immédiatement exécutable` ()`, à travers laquelle le moteur JavaScript interprétera directement la fonction. +La deuxième partie crée la fonction immédiatement exécutable `()`, à travers laquelle le moteur JavaScript interprétera directement la fonction. ## Exemples diff --git a/files/fr/glossary/mime/index.md b/files/fr/glossary/mime/index.md index f07a8cda84..554bdb06fc 100644 --- a/files/fr/glossary/mime/index.md +++ b/files/fr/glossary/mime/index.md @@ -17,4 +17,4 @@ Voir aussi [Type Mime](/fr/docs/Glossary/MIME_type) ### Culture générale -- [MIME ](https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions)sur Wikipédia +- [MIME](https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions) sur Wikipédia diff --git a/files/fr/glossary/png/index.md b/files/fr/glossary/png/index.md index 32e1d33806..6cd6df7556 100644 --- a/files/fr/glossary/png/index.md +++ b/files/fr/glossary/png/index.md @@ -16,4 +16,4 @@ original_slug: Glossaire/PNG ### Culture générale -- [PNG ](https://fr.wikipedia.org/wiki/Portable_Network_Graphics)sur Wikipédia +- [PNG](https://fr.wikipedia.org/wiki/Portable_Network_Graphics) sur Wikipédia diff --git a/files/fr/glossary/progressive_web_apps/index.md b/files/fr/glossary/progressive_web_apps/index.md index 9c45050b6b..c9bc8d815f 100644 --- a/files/fr/glossary/progressive_web_apps/index.md +++ b/files/fr/glossary/progressive_web_apps/index.md @@ -13,5 +13,5 @@ Ces fonctionnalités incluent : la possibilité d'installer l'application, de fo ## Pour approfondir -- Les [Applications ](/fr/Apps)sur MDN +- Les [Applications](/fr/Apps) sur MDN - [Progressive web apps](https://developers.google.com/web/progressive-web-apps) sur Google Developers. diff --git a/files/fr/glossary/rendering_engine/index.md b/files/fr/glossary/rendering_engine/index.md index 338d02d57f..14469155f5 100644 --- a/files/fr/glossary/rendering_engine/index.md +++ b/files/fr/glossary/rendering_engine/index.md @@ -20,4 +20,4 @@ Un **moteur de rendu** est un logiciel qui trace du texte et des images à l'éc ### Référence technique - [Documentation Gecko](/fr/docs/Gecko) -- [Venkatraman.R - Behind Browsers (Part 1, Basics) ](https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6) +- [Venkatraman.R - Behind Browsers (Part 1, Basics)](https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6) diff --git a/files/fr/glossary/sql_injection/index.md b/files/fr/glossary/sql_injection/index.md index efcb86f554..112a61f119 100644 --- a/files/fr/glossary/sql_injection/index.md +++ b/files/fr/glossary/sql_injection/index.md @@ -66,4 +66,4 @@ Ainsi, en raison de (1) chaque guillemet simple (') dans la chaîne d'entrée es ### Culture générale - {{Interwiki("wikipedia","Injection_SQL","Injection SQL")}} sur Wikipedia -- [Explication de l'injection SQL ](https://www.owasp.org/index.php/SQL_Injection)sur OWASP (Open Web Application Security Project) (en) +- [Explication de l'injection SQL](https://www.owasp.org/index.php/SQL_Injection) sur OWASP (Open Web Application Security Project) (en) diff --git a/files/fr/glossary/symbol/index.md b/files/fr/glossary/symbol/index.md index 2bdab78e5c..2202be5034 100644 --- a/files/fr/glossary/symbol/index.md +++ b/files/fr/glossary/symbol/index.md @@ -21,7 +21,7 @@ this[myPrivateMethod] = function() {...}; Lorsqu'une valeur de symbole est utilisée comme identifiant dans une affectation de propriété, la propriété (comme le symbole) est anonyme; et est également non dénombrable. Comme la propriété n'est pas énumérable, elle n'apparaîtra pas en tant que membre dans la construction de la boucle "`for (... in ...)`", et parce que la propriété est anonyme, elle n'apparaîtra pas dans le tableau des résultats de "`Object.getOwnPropertyNames()`". Vous pouvez accéder à la propriété en utilisant la valeur de symbole d'origine qui l'a créée ou en itérant sur le tableau de résultats de "`Object.getOwnPropertySymbols()`". Dans l'exemple de code précédent, l'accès à la propriété se fera via la valeur qui a été stockée dans la variable `myPrivateMethod`. -La fonction intégrée "{{jsxref("Symbol")}}`()`" est une classe incomplète qui renvoie une valeur de symbole lorsqu'elle est appelée en tant que fonction, qui génère une erreur lors de tentatives d'utilisation en tant que constructeur avec la syntaxe "` new ``Symbol()` ", qui a des méthodes statiques pour accéder à la table globale de symboles de JavaScript, et qui a des propriétés statiques pour adresser certains symboles qui sont présents dans les objets couramment utilisés. La création de valeurs de symboles par la fonction `Symbol()` a été expliquée ci-dessus. Le lancement d'une erreur sur les tentatives d'utilisation de `Symbol()` en tant que constructeur est expliqué comme une précaution contre la création accidentelle d'un objet qui pourrait provoquer une confusion. Les méthodes qui accèdent au registre global de symboles sont "`Symbol.for()`" et "`Symbol.keyFor()`" ; celles-ci servent de médiateur entre la table globale de symboles (ou "registre") et l'environnement d'exécution. Le registre de symboles est principalement construit par l'infrastructure du compilateur JavaScript, et le contenu du registre de symboles n'est pas disponible pour l'infrastructure d'exécution de JavaScript, à l'exception de ces méthodes de réflexion. La méthode `Symbol.for("tokenString")` retourne une valeur de symbole du registre et `Symbol.keyFor(symbolValue)` renvoie une chaîne de signes du registre ; chacun est l'inverse de l'autre, donc ce qui suit est vrai : +La fonction intégrée "{{jsxref("Symbol")}}`()`" est une classe incomplète qui renvoie une valeur de symbole lorsqu'elle est appelée en tant que fonction, qui génère une erreur lors de tentatives d'utilisation en tant que constructeur avec la syntaxe `new Symbol()`, qui a des méthodes statiques pour accéder à la table globale de symboles de JavaScript, et qui a des propriétés statiques pour adresser certains symboles qui sont présents dans les objets couramment utilisés. La création de valeurs de symboles par la fonction `Symbol()` a été expliquée ci-dessus. Le lancement d'une erreur sur les tentatives d'utilisation de `Symbol()` en tant que constructeur est expliqué comme une précaution contre la création accidentelle d'un objet qui pourrait provoquer une confusion. Les méthodes qui accèdent au registre global de symboles sont "`Symbol.for()`" et "`Symbol.keyFor()`" ; celles-ci servent de médiateur entre la table globale de symboles (ou "registre") et l'environnement d'exécution. Le registre de symboles est principalement construit par l'infrastructure du compilateur JavaScript, et le contenu du registre de symboles n'est pas disponible pour l'infrastructure d'exécution de JavaScript, à l'exception de ces méthodes de réflexion. La méthode `Symbol.for("tokenString")` retourne une valeur de symbole du registre et `Symbol.keyFor(symbolValue)` renvoie une chaîne de signes du registre ; chacun est l'inverse de l'autre, donc ce qui suit est vrai : ```js Symbol.keyFor(Symbol.for("tokenString"))=="tokenString"; // vrai diff --git a/files/fr/glossary/tofu/index.md b/files/fr/glossary/tofu/index.md index e88fd92b75..54e18960ae 100644 --- a/files/fr/glossary/tofu/index.md +++ b/files/fr/glossary/tofu/index.md @@ -16,4 +16,4 @@ TOFU est utilisé dans le protocole SSH, dans [HTTP Public Key Pinning](/fr/docs - [HTTP Public Key Pinning](/fr/docs/Web/HTTP/Public_Key_Pinning) ({{Glossary("HPKP")}}) - {{HTTPHeader("Public-Key-Pins")}} -- Wikipedia : [TOFU ](https://en.wikipedia.org/wiki/Trust_on_first_use)(en) +- Wikipedia : [TOFU (en anglais)](https://en.wikipedia.org/wiki/Trust_on_first_use) diff --git a/files/fr/glossary/ui/index.md b/files/fr/glossary/ui/index.md index d6e060c7f3..4525df8db1 100644 --- a/files/fr/glossary/ui/index.md +++ b/files/fr/glossary/ui/index.md @@ -13,4 +13,4 @@ L'_interface utilisateur_ (ou UI pour _User Interface_ en anglais) est tout ce q ### Culture générale - [Interface utilisateur](https://fr.wikipedia.org/wiki/Interface_utilisateur) sur Wikipédia -- [Développement front end ](https://en.wikipedia.org/wiki/Front_end_development)sur Wikipédia (en anglais) +- [Développement front end](https://en.wikipedia.org/wiki/Front_end_development) sur Wikipédia (en anglais) diff --git a/files/fr/glossary/vendor_prefix/index.md b/files/fr/glossary/vendor_prefix/index.md index 02cabfa3c7..43196ec68f 100644 --- a/files/fr/glossary/vendor_prefix/index.md +++ b/files/fr/glossary/vendor_prefix/index.md @@ -20,7 +20,7 @@ Les vendeurs de navigateurs ajoutent parfois des préfixes aux propriétés CSS En général, les principaux navigateurs utilisent ces préfixes : - `-webkit- (`Chrome, nouvelles versions d'Opera.) -- `-moz- `(Firefox) +- `-moz-` (Firefox) - `-o-` (Anciennes versions d'Opera) - `-ms-` (Internet Explorer et Edge) @@ -32,8 +32,8 @@ Historiquement, les fournisseurs ont également utilisé des préfixes pour les Les préfixes pour les noms d'interface sont en majuscules: -- `Webkit `(Chrome, Safari, versions d'Opera récentes, presque tous les navigateurs iOS (y compris Firefox pour iOS) ; fondamentalement, tout navigateur basé sur WebKit). -- `Moz `(Firefox) +- `Webkit` (Chrome, Safari, versions d'Opera récentes, presque tous les navigateurs iOS (y compris Firefox pour iOS) ; fondamentalement, tout navigateur basé sur WebKit). +- `Moz` (Firefox) - `O` (anciennes versions d'Opera) - `MS` (Internet Explorer et Edge) @@ -42,8 +42,8 @@ Les préfixes pour les noms d'interface sont en majuscules: Quant aux propriétés et aux méthodes, sont généralement utilisés : - `webkit (`Chrome, Safari, nouvelles versions d'Opera, presque tous les navigateurs IOS (y compris Firefox pour IOS), fondamentalement, tout navigateur basé sur WebKit). -- `moz `(Firefox) -- `o `(anciennes versions d'Opera) +- `moz` (Firefox) +- `o` (anciennes versions d'Opera) - `ms` (Internet Explorer et Edge) ## Pour approfondir diff --git a/files/fr/glossary/webm/index.md b/files/fr/glossary/webm/index.md index 76311c75b6..2f66281b24 100644 --- a/files/fr/glossary/webm/index.md +++ b/files/fr/glossary/webm/index.md @@ -15,4 +15,4 @@ original_slug: Glossaire/webm ### Culture générale -- [WebM ](https://fr.wikipedia.org/wiki/WebM)sur Wikipédia +- [WebM](https://fr.wikipedia.org/wiki/WebM) sur Wikipédia diff --git a/files/fr/glossary/webp/index.md b/files/fr/glossary/webp/index.md index 6f4816dcd0..db27af71e2 100644 --- a/files/fr/glossary/webp/index.md +++ b/files/fr/glossary/webp/index.md @@ -16,4 +16,4 @@ original_slug: Glossaire/webp ### Culture générale -- [WebP ](https://fr.wikipedia.org/wiki/WebP)sur Wikipédia +- [WebP](https://fr.wikipedia.org/wiki/WebP) sur Wikipédia diff --git a/files/fr/learn/accessibility/css_and_javascript/index.md b/files/fr/learn/accessibility/css_and_javascript/index.md index dacf718e80..3743469254 100644 --- a/files/fr/learn/accessibility/css_and_javascript/index.md +++ b/files/fr/learn/accessibility/css_and_javascript/index.md @@ -93,7 +93,7 @@ Vous devriez : - Vos listes devraient ressembler à des listes. - La couleur du texte doit présenter un contraste suffisant avec la couleur de fond. -Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [ Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations. +Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations. #### Texte mis en emphase @@ -190,7 +190,7 @@ Tableaux pour la présentation des données tabulées. Vous pouvez voir un bon exemple simple de [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/table-css.html)). -En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur `:nth-child(n) `pour faciliter la lecture. +En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur `:nth-child(n)` pour faciliter la lecture. ### Couleur et contraste de couleur @@ -293,7 +293,7 @@ function validate(e) { La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (`if(testItem.input.value === '')`). -Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de[ event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation. +Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de [event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation. Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste `errorList`. diff --git a/files/fr/learn/accessibility/html/index.md b/files/fr/learn/accessibility/html/index.md index 7d23870cc5..80bab3a496 100644 --- a/files/fr/learn/accessibility/html/index.md +++ b/files/fr/learn/accessibility/html/index.md @@ -482,7 +482,7 @@ Cela met en évidence l’importance non seulement d’utiliser des noms de fich Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS. -> **Note :** Lisez [Les images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et[ Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques. +> **Note :** Lisez [Les images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques. Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris. @@ -530,7 +530,7 @@ Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore assoc </h3> ``` -Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut `alt `de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) . +Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut `alt` de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) . La raison d'utiliser un vide `alt` au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun `alt` n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide `alt` sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif. diff --git a/files/fr/learn/accessibility/multimedia/index.md b/files/fr/learn/accessibility/multimedia/index.md index 1f6b2ad8c0..3586388ef4 100644 --- a/files/fr/learn/accessibility/multimedia/index.md +++ b/files/fr/learn/accessibility/multimedia/index.md @@ -50,7 +50,7 @@ Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniqu ## Simple images -Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article [ HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML) — vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs. +Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML) — vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs. Par exemple: diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.md b/files/fr/learn/accessibility/what_is_accessibility/index.md index a0bf7727ec..39f6cd5296 100644 --- a/files/fr/learn/accessibility/what_is_accessibility/index.md +++ b/files/fr/learn/accessibility/what_is_accessibility/index.md @@ -112,7 +112,7 @@ Contrairement à d’autres problèmes d’accessibilité web, il est impossible Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail. -En termes de statistiques, encore une fois, les chiffres sont importants. Le r[apport 2014 sur le statut d'invalidité ](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf)(PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive . +En termes de statistiques, encore une fois, les chiffres sont importants. Le [rapport 2014 sur le statut d'invalidité](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive . > **Note :** La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. @@ -139,7 +139,7 @@ D'autre part, si vous travaillez sur un site web de galerie présentant des œuv Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème. -> **Note :** Notre article [ Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail. +> **Note :** Notre article [Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail. Résumer : diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md index 04f3d40be2..6f8b958dec 100644 --- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md @@ -49,7 +49,7 @@ Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont : -- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus). +- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus). - **Ils mettent en œuvre un langage spécifique, tournant sur le serveur**. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats. ## Créer un serveur HTTP local simple diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.md b/files/fr/learn/common_questions/what_is_a_web_server/index.md index e3961daf4d..ab4cfd0cd1 100644 --- a/files/fr/learn/common_questions/what_is_a_web_server/index.md +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.md @@ -115,6 +115,6 @@ Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer u Maintenant que vous connaissez les serveurs web, vous pourriez : -- continuer votre lecture avec[ combien ça coûte de faire quelque chose sur le Web](/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte) +- continuer votre lecture avec [combien ça coûte de faire quelque chose sur le Web](/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte) - en savoir plus sur [les différents logiciels nécessaires à la création d'un site web](/fr/docs/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web) - poursuivre avec quelque chose de plus pratique comme [comment transférer des fichiers vers un serveur web](/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web). diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.md b/files/fr/learn/common_questions/what_software_do_i_need/index.md index 8b3b46c806..bc77e82145 100644 --- a/files/fr/learn/common_questions/what_software_do_i_need/index.md +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.md @@ -167,7 +167,7 @@ Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé ### Transférer des fichiers vers un serveur web -Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (_uploader_) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article[ combien ça coûte de publier quelque chose sur le Web ?](/fr/docs/Learn/How_much_does_it_cost)). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour _File Transfer Protocol_ ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme [RSync](https://en.wikipedia.org/wiki/Rsync) et [Git/Github](https://help.github.com/articles/using-a-custom-domain-with-github-pages). +Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (_uploader_) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article [combien ça coûte de publier quelque chose sur le Web ?](/fr/docs/Learn/How_much_does_it_cost)). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour _File Transfer Protocol_ ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme [RSync](https://en.wikipedia.org/wiki/Rsync) et [Git/Github](https://help.github.com/articles/using-a-custom-domain-with-github-pages). > **Note :** FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (_Secure_ FTP) ou via RSync avec SSH. @@ -214,7 +214,7 @@ Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour - [Microsoft Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie) - [Apple Safari](http://www.apple.com/safari/) -Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme [Opera](http://www.opera.com/), [Dolphin](http://dolphin.com/) ou[ UC Browser](http://www.ucweb.com/ucbrowser/). +Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme [Opera](http://www.opera.com/), [Dolphin](http://dolphin.com/) ou [UC Browser](http://www.ucweb.com/ucbrowser/). Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme [Browsershots](http://browsershots.org/) ou [Browserstack](http://www.browserstack.com/). Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur [modern.ie](https://modern.ie), une machine virtuelle prête à être utilisée). diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/colorful-heart.png b/files/fr/learn/css/building_blocks/advanced_styling_effects/colorful-heart.png Binary files differdeleted file mode 100644 index 66549ebd58..0000000000 --- a/files/fr/learn/css/building_blocks/advanced_styling_effects/colorful-heart.png +++ /dev/null diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md index 253f8338c6..bfebc37bc0 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.md +++ b/files/fr/learn/css/building_blocks/styling_tables/index.md @@ -252,7 +252,7 @@ table { } ``` -- Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés `odd` (impair) et `even `(pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes) +- Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés `odd` (impair) et `even` (pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes) - Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un `.png` semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture. - Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur `:nth-child` disposent encore d'une teinte de fond pour les lignes du corps de tableau. diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md index 7fd67d23b5..6d0e3d27ee 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md @@ -562,7 +562,7 @@ Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on } ``` -Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `<div>` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `<div>` de `content `et les véritables conteneurs `<div> `de contenu. Nous avons aussi déjà fait cela. +Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `<div>` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `<div>` de `content` et les véritables conteneurs `<div>` de contenu. Nous avons aussi déjà fait cela. Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes `one column` pour qu'elles se répartissent à raison de une par colonne. diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md index 87fefdde89..9c4fafc963 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.md +++ b/files/fr/learn/css/css_layout/responsive_design/index.md @@ -280,7 +280,7 @@ Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à m Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive. -Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px `par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. +Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px` par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. **Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.** diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md index 3861ea29db..be0e15cdfc 100644 --- a/files/fr/learn/css/first_steps/index.md +++ b/files/fr/learn/css/first_steps/index.md @@ -44,5 +44,5 @@ Ce module contient les articles suivants, qui vous présenteront les bases théo ## Voir aussi -- Literacy[ Web intermédiaire 1 : Introduction au CSS](/fr/docs/) +- Literacy [Web intermédiaire 1 : Introduction au CSS](/fr/docs/) - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P diff --git a/files/fr/learn/css/howto/index.md b/files/fr/learn/css/howto/index.md index f613014a6c..c31fe1ece3 100644 --- a/files/fr/learn/css/howto/index.md +++ b/files/fr/learn/css/howto/index.md @@ -38,7 +38,7 @@ Les liens suivants pointent vers des solutions aux problèmes courants que vous - [Comment contrôler le contenu débordant](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements) - [Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan) - [Comment définir _"inline_", _"block"_ et _"inline-block"_ ?](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) -- [Comment créer des boîtes fantaisies ](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités). +- [Comment créer des boîtes fantaisies](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités). - [Comment utiliser `background-clip` pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans) - [Comment changer complètement le modèle de boîte en utilisant `box-sizing`](/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) - [Comment contrôler l'arrière-plan](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md index c56023c1f9..6b635b6014 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.md +++ b/files/fr/learn/css/styling_text/fundamentals/index.md @@ -262,7 +262,7 @@ CSS fournit quatre propriétés communes pour modifier le poids et l'emphase vis - {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : - `normal` : fige le texte en police normale (suppression du style italique existant). - - `italic `: met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. + - `italic` : met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. - `oblique` : force le texte à utiliser une version simulée de fonte italique, créée en _inclinant la version normale_. - {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), mais en réalité, vous les utiliserez rarement en dehors de `normal` et `bold` (gras): diff --git a/files/fr/learn/css/styling_text/styling_links/external-link-52.png b/files/fr/learn/css/styling_text/styling_links/external-link-52.png Binary files differdeleted file mode 100644 index 7a34cff47c..0000000000 --- a/files/fr/learn/css/styling_text/styling_links/external-link-52.png +++ /dev/null diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md index 5258dc363f..2d74518150 100644 --- a/files/fr/learn/forms/basic_native_form_controls/index.md +++ b/files/fr/learn/forms/basic_native_form_controls/index.md @@ -550,7 +550,7 @@ Attention : la prise en charge du widget `color` n'est pas très bonne actuellem Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles. -> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi[ directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)). +> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi [directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)). ### Sélection de fichier diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md index 6709ff5102..351da31325 100644 --- a/files/fr/learn/forms/form_validation/index.md +++ b/files/fr/learn/forms/form_validation/index.md @@ -222,7 +222,7 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s ``` - Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de _banane_ ou _cerise_. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs. -- Nous avons également contraint le champ `number` à un `min` de 1 et un `max `de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage. +- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage. ```html hidden input:invalid { diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md index 62c865a50b..80f5e7f772 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md @@ -773,11 +773,11 @@ Mais attendez, avons‑nous vraiment terminé ? Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible ! -Heureusement, il existe une solution et elle s'appelle [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une[ norme W3C ](http://www.w3.org/TR/wai-aria/)spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le. +Heureusement, il existe une solution et elle s'appelle [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une [norme W3C](http://www.w3.org/TR/wai-aria/) spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le. ### L'attribut `role` -L'attribut clé utilisé par [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role `](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de [`listbox`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle `option`). +L'attribut clé utilisé par [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de [`listbox`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle `option`). Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle `grid`, et l'élément {{HTMLElement("ul")}} correspond au rôle `list`. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle `listbox` de notre widget remplacera le rôle `list` de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle `presentation`. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}. diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md index 2e3c1fd3fe..a0a7954b36 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md @@ -189,7 +189,7 @@ Chaque groupe de fonctionnalités séparées doit être contenu dans un élémen Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi. -1. Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement ](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css)dans un nouveau répertoire. +1. Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) dans un nouveau répertoire. 2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : ```html diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md index e9380806b1..01405dcce2 100644 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md @@ -22,7 +22,7 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan - [le Blog WebKit](https://www.webkit.org/blog/) et [Planet WebKit](http://planet.webkit.org/) rassemblent les meilleurs articles par les déveoppeurs WebKit. - [l](https://www.chromestatus.com/features)e site État de la p[lateforme Chrome](https://www.chromestatus.com/features) est aussi importante. - - ainsi que le[ site web Apple .](https://developer.apple.com/technologies/safari/) + - ainsi que le [site web Apple](https://developer.apple.com/technologies/safari/). ### Documentation indépendante @@ -200,7 +200,7 @@ Modernizr.load({ L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin. -> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [ la documentation de Modernizr](http://modernizr.com/docs/). +> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/). ### Faites attention aux performances diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md index e4193009bc..4834f1872d 100644 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md @@ -1871,7 +1871,7 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor ### Widget `range` -Il n'y a pas de méthode standard pour changer le style de la poignée de` range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`. +Il n'y a pas de méthode standard pour changer le style de la poignée de `range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`. <table> <thead> diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md index c530eaae7f..71ddd327e2 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md @@ -94,7 +94,7 @@ De nombreuses pages anciennes utilisent la notation suivante pour indiquer que l ### L'attribut method -Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP ](/fr/docs/Web/HTTP)fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`. +Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP](/fr/docs/Web/HTTP) fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`. Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête. @@ -167,7 +167,7 @@ Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajo say=Hi&to=Mom -L'en-tête `Content-Length `indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment. +L'en-tête `Content-Length` indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment. > **Note :** Vous trouverez cet exemple sur GitHub — voyez [post-method.html](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)). @@ -238,7 +238,7 @@ if __name__ == "__main__": Les deux prototypes référencés dans le code ci‑dessus sont les suivants : -- [form.html ](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html): Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) +- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html) : Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) - [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur. > **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec « `pip3 install flask` ». À ce moment‑là vous pourrez exécuter l'exemple avec « `python3 python-example.py` », puis en allant sur « `localhost:5000` » dans votre navigateur. diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md index 2a91434804..f0e64a4440 100644 --- a/files/fr/learn/forms/sending_forms_through_javascript/index.md +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md @@ -28,7 +28,7 @@ L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signi -Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,[ JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui. +Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui. Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (`application/x-www-form-urlencoded`) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données `multipart/form‑data`. diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md index 1882911bf7..89c4f12824 100644 --- a/files/fr/learn/forms/styling_web_forms/index.md +++ b/files/fr/learn/forms/styling_web_forms/index.md @@ -169,7 +169,7 @@ Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela ### HTML -Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier[ article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre. +Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre. ```html <form> @@ -202,7 +202,7 @@ C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons be 1. L'[image de fond](/files/4151/background.jpg "The postcard background") de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail. 2. Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. -3. Une police d'écriture manuelle : [ « Journal » de fontsquirrel.com ](http://www.fontsquirrel.com/fonts/Journal)— téléchargez le fichier TTF dans le même répertoire que ci‑dessus. +3. Une police d'écriture manuelle : [« Journal » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md index 6b6a1bd89f..bf49454b8c 100644 --- a/files/fr/learn/forms/your_first_form/index.md +++ b/files/fr/learn/forms/your_first_form/index.md @@ -151,7 +151,7 @@ Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre n  -> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) ([ ](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)ou[ également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). +> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable. @@ -259,7 +259,7 @@ Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier b ... ``` -Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email `» et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. +Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email` » et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. Du côté du serveur, le script à l'URL « `/my-handling-form-page` » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires). diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md index 9d836ccf25..888c4afd58 100644 --- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -38,8 +38,8 @@ La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant : 1. **`index.html`** : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé `index.html` puis enregistrez‑le dans votre dossier `site-test`. -2. **un dossier` images`** : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé `images` dans votre dossier `site-test`. -3. **un dossier `styles` **: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`. +2. **un dossier `images`** : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé `images` dans votre dossier `site-test`. +3. **un dossier `styles`** : ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`. 4. **un dossier `scripts`** : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé `scripts` dans votre dossier `site-test`. > **Note :** Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web ! diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/attribut-chat-grincheux.png b/files/fr/learn/getting_started_with_the_web/html_basics/attribut-chat-grincheux.png Binary files differnew file mode 100644 index 0000000000..1c4e68e826 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/html_basics/attribut-chat-grincheux.png diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/chat-grincheuxl.png b/files/fr/learn/getting_started_with_the_web/html_basics/chat-grincheuxl.png Binary files differnew file mode 100644 index 0000000000..0c854eb81b --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/html_basics/chat-grincheuxl.png diff --git a/files/fr/learn/getting_started_with_the_web/index.md b/files/fr/learn/getting_started_with_the_web/index.md index 311ec1a5d6..ab6e125564 100644 --- a/files/fr/learn/getting_started_with_the_web/index.md +++ b/files/fr/learn/getting_started_with_the_web/index.md @@ -58,4 +58,4 @@ Une succession d'opérations complexes, dont vous n'avez pas forcément à vous ## Voir aussi -[Le Web démystifié ](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g): une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par [Jérémie Patonnier](https://twitter.com/JeremiePat). +[Le Web démystifié](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g) : une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par [Jérémie Patonnier](https://twitter.com/JeremiePat). diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md index a582609752..7b45872eec 100644 --- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md +++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -20,8 +20,8 @@ Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pou ## Quels outils utilisent les professionnels ? - **Un ordinateur**. Ça peut sembler évident, mais certains d'entre vous lisent cet article depuis leur téléphone ou un terminal de bibliothèque. Pour du développement web sérieux, il est préférable d'investir dans un ordinateur de bureau tournant sous Linux, Mac ou Windows. -- **Un éditeur de texte**, pour y écrire du code. Cela peut être un éditeur gratuit (ex : [Visual Studio Code, ](https://code.visualstudio.com/)[Atom,](https://atom.io/) [Sublime Text](https://www.sublimetext.com/) ou [Notepad++](https://notepad-plus-plus.org/)) ou un éditeur hybride ([Dreamweaver](http://www.adobe.com/products/dreamweaver.html)). Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web. -- **Un navigateur web**, pour y tester le code. Les navigateurs les plus utilisés sont [Firefox](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer et ](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie)[Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10). +- **Un éditeur de texte**, pour y écrire du code. Cela peut être un éditeur gratuit (ex : [Visual Studio Code](https://code.visualstudio.com/), [Atom,](https://atom.io/) [Sublime Text](https://www.sublimetext.com/) ou [Notepad++](https://notepad-plus-plus.org/)) ou un éditeur hybride ([Dreamweaver](http://www.adobe.com/products/dreamweaver.html)). Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web. +- **Un navigateur web**, pour y tester le code. Les navigateurs les plus utilisés sont [Firefox](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie) et [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10). - **Un éditeur graphique**, comme [GIMP](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), [Krita](https://krita.org/) ou [Photoshop](http://www.adobe.com/uk/products/photoshop.html) pour réaliser les images de vos pages web. - **Un système de contrôle de versions**, pour gérer les fichiers sur le serveur, collaborer sur les projets avec une équipe, partager le code et les ressources et éviter les conflits d'édition. À ce jour, [Git](http://git-scm.com/) est l'outil lde contrôle de version le plus connu et le service d'hébergement de code [GitHub](https://github.com), fondé sur Git, est également très populaire**.** - **Un programme FTP**, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs ([Git](http://git-scm.com/) remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/) et [FileZilla](https://filezilla-project.org/). @@ -35,7 +35,7 @@ Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer ### Installer un éditeur de texte -Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et[ ](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29)macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/Gedit) par défaut. +Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/Gedit) par défaut. Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec [Visual Studio Code](https://code.visualstudio.com/), qui est un éditeur libre offrant des aperçus en direct et des conseils de code. diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md index c1cde8396b..c921163441 100644 --- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md +++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md @@ -111,7 +111,7 @@ let myVariable = 'Bob'; myVariable = 'Étienne'; ``` -Notez que les variables peuvent contenir des[ types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) : +Notez que les variables peuvent contenir des [types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) : <table class="standard-table"> <thead> @@ -392,7 +392,7 @@ Dans cette section, nous allons incorporer une autre image au site en utilisant 5. Sauvegardez tous les fichiers puis chargez `index.html` dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre ! -Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick `de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué : +Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick` de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué : 1. nous récupèrons la valeur de l'attribut `src` de l'image. 2. nous utilisons une structure conditionnelle pour voir si la valeur de `src` est égale au chemin de l'image originale : diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md index d238ffeb25..3e684306e0 100644 --- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md @@ -87,7 +87,7 @@ Pour en savoir plus, voyez [GitHub Pages Help](https://docs.github.com/en/github - [Qu'est-ce qu'un serveur web](/fr/docs/Learn/Common_questions/What_is_a_web_server) - [Comprendre les noms de domaine](/fr/docs/Learn/Common_questions/What_is_a_domain_name) - [Combien ça coûte de faire quelque chose sur le Web ?](/fr/docs/Learn/Common_questions/How_much_does_it_cost) -- [Deploy a Website ](https://www.codecademy.com/learn/deploy-a-website): un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires. +- [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website) : un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires. - [Hébergement de sites web statiques gratuit ou peu cher](http://alignedleft.com/resources/cheap-web-hosting), un billet en anglais par Scott Murray qui permet d'avoir une meilleure idée des services disponibles. {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}} diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md index 68bdbac865..82dda020c3 100644 --- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md @@ -22,7 +22,7 @@ Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son ### Réduisez le nombre de fichiers -Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions [HTTP ](/en/HTTP "https://developer.mozilla.org/en/HTTP")nécessaire pour télécharger une page. +Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions [HTTP](/en/HTTP "https://developer.mozilla.org/en/HTTP") nécessaire pour télécharger une page. - Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des [boutons graphiques en CSS](http://css-tricks.com/examples/ButtonMaker/). - Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser [Gimp](http://www.gimp.org/) ou [Imagemagik](http://www.imagemagick.org/script/index.php). diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md index e4658b76de..4e494f5e2d 100644 --- a/files/fr/learn/html/howto/use_data_attributes/index.md +++ b/files/fr/learn/html/howto/use_data_attributes/index.md @@ -63,7 +63,7 @@ article[data-columns='4'] { } ``` -Tout cela est visible dans l'exemple[ JSBin](https://jsbin.com/ujiday/2/edit). +Tout cela est visible dans l'exemple [JSBin](https://jsbin.com/ujiday/2/edit). Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de [capture vidéo d'écran](https://www.youtube.com/watch?v=On_WyUB1gOk) où sont utilisés les contenus générés et les transitions CSS ([exemple JSBin](https://jsbin.com/atawaz/3/edit)). diff --git a/files/fr/learn/html/index.md b/files/fr/learn/html/index.md index 9cb2a9e77e..fc00b9925e 100644 --- a/files/fr/learn/html/index.md +++ b/files/fr/learn/html/index.md @@ -20,7 +20,7 @@ original_slug: Apprendre/HTML L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire [Introduction au HTML](/fr/docs/Web/Guide/HTML/Introduction). Vous pouvez ensuite passer à l'étude de sujets plus avancés comme : - les [CSS](/fr/docs/Learn/CSS), et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels). -- le[ JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore). +- le [JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore). Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans [Installer les outils de base](/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software), et comprendre comment créer et gérer les fichiers,comme détaillé dans [Gérer les fichiers](/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — ces deux articles font partie de notre module [Commencer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) dédié aux débutants. diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md index 4640bbfe99..7882566979 100644 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting --- {{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}} -Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article[ Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc. +Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article [Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc. <table class="standard-table"> <tbody> diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md index 0ec412de20..7883e57b89 100644 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -100,7 +100,7 @@ C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec u ### Liens de niveau bloc -Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des [éléments bloc ](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne). Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises `<a></a>`. +Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des [éléments bloc](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne). Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises `<a></a>`. ```html <a href="https://www.mozilla.org/fr/"> @@ -201,7 +201,7 @@ Regardons un exemple particulier : </a></p> ``` -**Mauvais** texte de lien : [Cliquer ici ](https://firefox.com/)pour télécharger Firefox +**Mauvais** texte de lien : [Cliquer ici](https://firefox.com/) pour télécharger Firefox ```html <p><a href="https://firefox.com/"> diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.md b/files/fr/learn/html/introduction_to_html/debugging_html/index.md index 499393a774..f30e1ee88b 100644 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md @@ -74,7 +74,7 @@ HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de ma Voici le moment venu d'étudier le caractère permissif du code HTML. -1. Primo, télécharchez notre démo [debug-example ](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html)et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit **malformé**, par opposition à **bien-formé**). +1. Primo, télécharchez notre démo [debug-example](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html) et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit **malformé**, par opposition à **bien-formé**). 2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci : 3. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément `body` est affiché) : diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md index d320dd8741..47adb3bded 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -78,7 +78,7 @@ L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaiteme C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ? -> **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards ](https://fr.wikipedia.org/wiki/Population_mondiale)d'habitants). +> **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards](https://fr.wikipedia.org/wiki/Population_mondiale) d'habitants). Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de [ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure). @@ -281,7 +281,7 @@ Vous devriez avoir maintenant une meilleure idée de la façon de structurer une ## Voir aussi -- [Using HTML sections and outlines ](/fr/docs/Web/HTML/Element/Heading_Elements): Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5. +- [Using HTML sections and outlines](/fr/docs/Web/HTML/Element/Heading_Elements) : Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5. {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}} diff --git a/files/fr/learn/html/introduction_to_html/index.md b/files/fr/learn/html/introduction_to_html/index.md index e8f5daa255..dc05434973 100644 --- a/files/fr/learn/html/introduction_to_html/index.md +++ b/files/fr/learn/html/introduction_to_html/index.md @@ -37,7 +37,7 @@ Ce module contient les articles suivants vous permettant de parcourir toute la t - [Créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) - : Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens. - [La mise en forme avancée du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) - - : Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article[ Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc. + - : Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article [Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc. - [La structure d'un document et d'un site web](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) - : De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant. - [Déboguer du code HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md index ef0939e769..ab1dce1e31 100644 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -92,7 +92,7 @@ Le code au-dessus vous donnera, à peu prés, le résultat suivant : > **Note :** Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même. -> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source ](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).) +> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).) ### Texte alternatif @@ -120,7 +120,7 @@ Que devriez-vous noter dans vos attributs `alt` ? En premier lieu, cela dépend - **Decoration.** Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un `alt=""` vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire. - **Contenu.** Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un *bref* `alt` text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de `alt` text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement `alt=""`. -- **Lien.** Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un [Lien texte accessible ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément `<a>`, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas. +- **Lien.** Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un [Lien texte accessible](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément `<a>`, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas. - **Texte.** Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, [utilisez CSS](/fr/docs/Web/CSS/text-shadow) pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut `alt` . Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile. @@ -151,7 +151,7 @@ De toutes manières, vous ne devez pas altérer la taille de vos images avec les ### Titre d'images -Comme décrit dans le chapitre [Création d'hyperliens ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci : +Comme décrit dans le chapitre [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci : ```html <img src="images/dinosaur.jpg" diff --git a/files/fr/learn/html/multimedia_and_embedding/index.md b/files/fr/learn/html/multimedia_and_embedding/index.md index f48a40fb08..62036f5f33 100644 --- a/files/fr/learn/html/multimedia_and_embedding/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/index.md @@ -40,7 +40,7 @@ Ce module contient les articles suivants, qui vous guideront à travers les fond - : Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs, enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens. - [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies) - : À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. `<iframe>` est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière. -- [Ajouter des images vectorielles sur le Web ](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web) +- [Ajouter des images vectorielles sur le Web](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web) - : Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web. - [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) - : Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du [responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design), un futur sujet CSS que vous pourrez apprendre. diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index c0b0014f29..b2cc02ff0a 100644 --- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -268,7 +268,7 @@ L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être #### Toujours utiliser l'attribut `sandbox` -Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox ](<https://en.wikipedia.org/wiki/Sandbox_(computer_security)>)(_bac à sable_). +Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox](https://en.wikipedia.org/wiki/Sandbox_(computer_security)) (_bac à sable_). Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut `sandbox` sans paramètres, comme montré dans notre exemple précédent. @@ -336,7 +336,7 @@ Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. **Mettez‑vous à portée de tout le monde**. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon. - **Offrez-vous un répit avec les [migraines d'accessibilités supplémentaires](http://webaim.org/techniques/flash/) qui proviennent de Flash et des autres greffons.** -- **Restez à l'écart des risques supplémentaires en matière de sécurité.** Adobe Flash est [notoirement](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) non‑sûr[,](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même [demandé qu'Adobe arrête](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso)[ Flash.](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso) +- **Restez à l'écart des risques supplémentaires en matière de sécurité.** Adobe Flash est [notoirement](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) non‑sûr[,](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même [demandé qu'Adobe arrête](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso) [Flash](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso): Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la [vidéo HTML5](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) pour vos besoins en médias, [SVG](/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage) pour les graphiques vectoriels et [Canvas](/fr/docs/Web/API/Canvas_API/Tutorial) pour les images et animations complexes. [Peter Elst écrivait déjà il y a quelques années](https://plus.google.com/+PeterElst/posts/P5t4pFhptvp) qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge. diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md index 1729cdf87b..42f69234e8 100644 --- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -73,7 +73,7 @@ Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'a ## Comment créer des images adaptatives ? -Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils ](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/)que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir. +Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/) que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir. ### Commutations de résolution : tailles différentes diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md index 98fc50817c..8d4e4c5fdf 100644 --- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md @@ -75,7 +75,7 @@ Les fonctionnalités de ce code sont : - {{htmlattrxref("src","video")}} - : De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut `src` (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière. - {{htmlattrxref("controls","video")}} - - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript ](/fr/docs/Web/API/HTMLMediaElement)adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume. + - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript](/fr/docs/Web/API/HTMLMediaElement) adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume. - Le paragraphe dans la balise `<video>` - : Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément `<video>` , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise. @@ -165,7 +165,7 @@ Voici les nouvelles fonctionnalités : - `"auto"` : mettre le fichier média dans un tampon - `"metadata"` : ne mettre que les métadonnées dans le tampon -Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [ code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster ! +Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster ! ### L'élément \<audio> @@ -183,7 +183,7 @@ Vous verrez quelque chose de ce genre dans un navigateur :  -> **Note :** Vous pouver [lancer la démo de l'audio en direct ](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)sur Github (voir aussi le [code source de l'interpréteur](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).) +> **Note :** Vous pouver [lancer la démo de l'audio en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) sur Github (voir aussi le [code source de l'interpréteur](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).) Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 : @@ -254,7 +254,7 @@ Pour plus de détails, lisez [Ajouter des légendes et des sous‑titres aux vid Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo, MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme [Miro Video Converter](http://www.mirovideoconverter.com/) et [Audacity](https://sourceforge.net/projects/audacity/). Nous aimerions que vous essayiez ! -Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo ](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content)pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence. +Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence. Il vous faudra : @@ -276,8 +276,8 @@ Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages - {{htmlelement("video")}} - {{htmlelement("source")}} - {{htmlelement("track")}} -- [ Ajouter des légendes et sous-titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) -- [Intégration Audio et Vidéo ](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery): de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript. +- [Ajouter des légendes et sous-titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) +- [Intégration Audio et Vidéo](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery) : de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript. - [Manipuler l'Audio et la Vidéo](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation): de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres). - Options automatisées pour la [traduction multimédia](http://www.inwhatlanguage.com/blog/translate-video-audio/). diff --git a/files/fr/learn/html/tables/basics/index.md b/files/fr/learn/html/tables/basics/index.md index 5d8b0ecc45..afdc832c15 100644 --- a/files/fr/learn/html/tables/basics/index.md +++ b/files/fr/learn/html/tables/basics/index.md @@ -545,7 +545,7 @@ Recréez le tableau en suivant les étapes ci-dessous. 7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut `style` sont `background-color:#DCC48E; border:4px solid #C1437A;` 8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut `style` est `width: 42px;` -Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) (à[ voir aussi](http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html) directement) sur GitHub . +Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) (à [voir aussi](http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html) directement) sur GitHub . ## Résumé diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md index 96c62c5ff3..3fdd18cb03 100644 --- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md @@ -64,7 +64,7 @@ Pour commencer, mettons en place une fonction de base. > **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables. 1. Commencez par faire une copie locale du fichier [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html). Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript. -2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script> `: +2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>` : ```js function displayMessage() { diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md index cfa97937f9..433c2c816b 100644 --- a/files/fr/learn/javascript/building_blocks/conditionals/index.md +++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md @@ -269,7 +269,7 @@ if (x === 5 || 7 || 10 || 20) { } ``` -Dans ce cas, la condition dans le `if(...) `sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR : +Dans ce cas, la condition dans le `if(...)`sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR : ```js if (x === 5 || x === 7 || x === 10 ||x === 20) { @@ -360,7 +360,7 @@ function setWeather() { {{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }} -> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html)ici aussi.) +> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) ici aussi.) ## Opérateur ternaire @@ -411,7 +411,7 @@ Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées. -> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)ici aussi.) +> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) ici aussi.) ## Apprentissage actif : un calendrier simple diff --git a/files/fr/learn/javascript/building_blocks/events/index.md b/files/fr/learn/javascript/building_blocks/events/index.md index 1853289307..c2037818c7 100644 --- a/files/fr/learn/javascript/building_blocks/events/index.md +++ b/files/fr/learn/javascript/building_blocks/events/index.md @@ -156,7 +156,7 @@ function bgChange() { } ``` -> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)). +> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)). La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des **attributs HTML du gestionnaire d'événement** (c'est-à-dire **les gestionnaires d'événements en ligne**) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple : @@ -195,7 +195,7 @@ function bgChange() { btn.addEventListener('click', bgChange); ``` -> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)). +> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)). Dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), dans une fonction anonyme, comme ceci: @@ -271,7 +271,7 @@ function bgChange(e) { btn.addEventListener('click', bgChange); ``` -> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)). +> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)). Ici, vous pouvez voir que nous incluons un objet événement, **e**, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur `e.target` - qui est le bouton lui-même. La propriété `target` de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page. @@ -396,7 +396,7 @@ form.onsubmit = function(e) { ### Le bouillonnement et la capture -Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)dans un autre). C'est également disponible en live ci-dessous. +Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html) dans un autre). C'est également disponible en live ci-dessous. ```html hidden <!DOCTYPE html> @@ -543,7 +543,7 @@ video.onclick = function(e) { }; ``` -Vous pouvez faire une copie locale du [code source show-video-box.html ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)et le modifier vous-même ou regarder le résultat ici : [show-video-box-fixed.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)). +Vous pouvez faire une copie locale du [code source show-video-box.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html) et le modifier vous-même ou regarder le résultat ici : [show-video-box-fixed.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)). > **Note :** Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes. diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md index afd792fac3..9b0e1d4e50 100644 --- a/files/fr/learn/javascript/building_blocks/functions/index.md +++ b/files/fr/learn/javascript/building_blocks/functions/index.md @@ -30,7 +30,7 @@ Les **fonctions** sont un autre concept essentiel de la programmation, qui perme En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe. -Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — `()` — et que vous n'utilisez **pas** une structure usuelle et intégrée du langage telle que les boucles [for](/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while)ou[ do...while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), ou une déclaration [if...else ](/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), vous utilisez une fonction. +Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — `()` — et que vous n'utilisez **pas** une structure usuelle et intégrée du langage telle que les boucles [for](/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while) ou [do...while](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), ou une déclaration [if...else](/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), vous utilisez une fonction. ## Les fonctions intégrées du navigateur @@ -69,7 +69,7 @@ var myNumber = Math.random(); > **Note :** N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin. -Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript. +Le langage JavaScript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand vous **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript. Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette [section antérieure de notre cours](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur. @@ -83,7 +83,7 @@ Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaSc ## Fonctions personnalisées -Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html ](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html)tiré de l'article [les boucles dans le code ](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)(voir aussi le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html)complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça : +Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça : ```js function draw() { @@ -103,7 +103,7 @@ Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement(" draw(); ``` -au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant : +au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant : ```js function random(number) { @@ -115,7 +115,7 @@ Nous avions besoin de cette fonction car la fonction intégrée du navigateur [ ## Invoquer des fonctions -Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses. +Vous êtes probablement au clair avec cela maintenant, mais juste au cas où… pour utiliser une fonction après qu'elle a été définie, vous devez la lancer — ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses : ```js function myFunction() { @@ -236,11 +236,11 @@ var madeAString = myArray.join(); Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut. -## La portée des fonctions et les conflits. +## La portée des fonctions et les conflits Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre **portée**, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction. -Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code. +Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe quelle partie du code. Le JavaScript est construit de cette façon pour plusieurs raisons — mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident. diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md index 78d6530000..e95ecbc4a2 100644 --- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md @@ -40,7 +40,7 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav ## Point de départ -Pour réaliser cette évaluation, vous devez récupérer le fichier[ ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur. +Pour réaliser cette évaluation, vous devez récupérer le fichier [ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur. Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments `<script>`/`<style>` dans la page HTML. diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md index bb9e1f50da..ddf8519680 100644 --- a/files/fr/learn/javascript/building_blocks/index.md +++ b/files/fr/learn/javascript/building_blocks/index.md @@ -19,7 +19,7 @@ Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités cle ## Prérequis -Avant de commencer ce module, vous devriez connaître les bases du [HTML ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML)et du [CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS)et avoir suivi le module précédent, [JavaScript Premiers Pas.](/fr/docs/Learn/JavaScript/First_steps) +Avant de commencer ce module, vous devriez connaître les bases du [HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) et du [CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) et avoir suivi le module précédent, [JavaScript Premiers Pas.](/fr/docs/Learn/JavaScript/First_steps) > **Note :** Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) . diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md index 9a367672be..db4470f17c 100644 --- a/files/fr/learn/javascript/building_blocks/looping_code/index.md +++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md @@ -145,7 +145,7 @@ Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles so </html> ``` -{{ EmbedLiveSample('Exemple', '100%', 400) }} +{{EmbedLiveSample('', '100%', 400)}} #### Principe de boucle @@ -197,13 +197,13 @@ Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clai ```js const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin']; let info = "Mes chat s'appellent "; -const paragraphe = document.querySelector('p'); +const para = document.querySelector('p'); for (let i = 0; i < chats.length; i++) { info += chats[i] + ', '; } -paragraphe.textContent = info; +para.textContent = info; ``` ### Sortie @@ -224,13 +224,13 @@ Cela nous donne la sortie suivante : <script> const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin']; let info = "Mes chats s'appellent "; - const paragraphe = document.querySelector('p'); + const para = document.querySelector('p'); for (let i = 0; i < chats.length; i++) { info += chats[i] + ', '; } - paragraphe.textContent = info; + para.textContent = info; </script> @@ -238,11 +238,11 @@ Cela nous donne la sortie suivante : </html> ``` -{{ EmbedLiveSample('Sortie', '100%', 60) }} +{{EmbedLiveSample('', '100%', 60)}} -> **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et[ le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)). +> **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et [le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)). -Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici : +Cela montre une boucle utilisée pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici : 1. L'itérateur, `i`, commence à `0` (`let i = 0`). 2. On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter. @@ -280,7 +280,7 @@ for (let i = 0; i < cats.length; i++) { ## Quitter une boucle avec break -Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch ](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch): lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle. +Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch) : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle. C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit. @@ -298,7 +298,7 @@ Maintenant sur le JavaScript : ```js const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975']; -const paragraphe = document.querySelector('p'); +const para = document.querySelector('p'); const input = document.querySelector('input'); const bouton = document.querySelector('button'); @@ -309,10 +309,10 @@ bouton.addEventListener('click', function() { for (let i = 0; i < contacts.length; i++) { let splitContact = contacts[i].split(':'); if (splitContact[0] === searchName) { - paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.'; + para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.'; break; } else { - paragraphe.textContent = 'Contact not found.'; + para.textContent = 'Contact not found.'; } } }); @@ -337,7 +337,7 @@ bouton.addEventListener('click', function() { <script> const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975']; - const paragraphe = document.querySelector('p'); + const para = document.querySelector('p'); const input = document.querySelector('input'); const bouton = document.querySelector('button'); @@ -348,10 +348,10 @@ bouton.addEventListener('click', function() { for (let i = 0; i < contacts.length; i++) { let splitContact = contacts[i].split(':'); if (splitContact[0] === searchName) { - paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.'; + para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.'; break; } else { - paragraphe.textContent = 'Contact not found.'; + para.textContent = 'Contact not found.'; } } }); @@ -361,7 +361,7 @@ bouton.addEventListener('click', function() { </html> ``` -{{ EmbedLiveSample('Résultat', '100%', 100) }} +{{EmbedLiveSample('', '100%', 100)}} 1. Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points. 2. Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats. @@ -370,7 +370,7 @@ bouton.addEventListener('click', function() { 1. Nous commençons le compteur à `0`, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à `contacts.length`, et incrémentons `i` par 1 après chaque itération de la boucle. 2. À l'intérieur de la boucle, nous divisons d'abord le contact actuel (`contacts[i]`) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé `splitContact`. - 3. Nous utilisons ensuite une instruction conditionnelle pour tester si `splitContact[0] `(le nom du contact) est égal au `searchName` entré. Si c'est le cas, nous introduisons une `string / chaîne de caractère` dans le paragraphe pour indiquer quel est le numéro du contact et utiliser `break` pour terminer la boucle. + 3. Nous utilisons ensuite une instruction conditionnelle pour tester si `splitContact[0]` (le nom du contact) est égal au `searchName` entré. Si c'est le cas, nous introduisons une `string / chaîne de caractère` dans le paragraphe pour indiquer quel est le numéro du contact et utiliser `break` pour terminer la boucle. 5. Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération. @@ -391,7 +391,7 @@ for (let i = 1; i <= num; i++) { continue; } - paragraphe.textContent += i + ' '; + para.textContent += i + ' '; } ``` @@ -413,12 +413,12 @@ Ici la sortie : <p>Output: </p> <script> - const paragraphe = document.querySelector('p'); + const para = document.querySelector('p'); const input = document.querySelector('input'); const bouton = document.querySelector('button'); bouton.addEventListener('click', function() { - paragraphe.textContent = 'Output: '; + para.textContent = 'Output: '; let num = input.value; input.value = ''; input.focus(); @@ -428,7 +428,7 @@ Ici la sortie : continue; } - paragraphe.textContent += i + ' '; + para.textContent += i + ' '; } }); </script> @@ -437,12 +437,12 @@ Ici la sortie : </html> ``` -{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }} +{{EmbedLiveSample('', '100%', 100)}} 1. Dans ce cas, l'entrée doit être un nombre (`num`). La boucle `for` est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée `num`, et un itérateur ajoutera 1 au compteur à chaque fois. -2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i), ](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt)[, ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt)puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor() ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor)fait au nombre auquel il est passé). +2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt0, puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor()](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor) fait au nombre auquel il est passé). 3. Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (`! ==`), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction `continue` pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où. -4. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction `continue` ne soit pas exécutée; à la place, nous concaténons la valeur `i `actuelle plus un espace sur la fin du contenu du paragraphe. +4. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction `continue` ne soit pas exécutée; à la place, nous concaténons la valeur `i` actuelle plus un espace sur la fin du contenu du paragraphe. > **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) (aussi [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)). @@ -459,7 +459,7 @@ D'abord, regardons la boucle [while](/fr/docs/Web/JavaScript/Reference/Instructi final-expression } -Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé `while `au lieu de `for`. +Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé `while` au lieu de `for`. Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte. @@ -481,7 +481,7 @@ while (i < cats.length) { > **Note :** Cela fonctionne toujours comme prévu regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html) le code complet). -La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) est très similaire, mais dénote une variation par rapport à la structure de la boucle while : +La boucle [do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) est très similaire, mais dénote une variation par rapport à la structure de la boucle while : initializer do { @@ -490,11 +490,11 @@ La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while final-expression } while (exit-condition) -Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé `do `précède directement les accolades contenant le code à exécuter et l'expression finale. +Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé `do` précède directement les accolades contenant le code à exécuter et l'expression finale. Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé `while`. Dans une boucle `do ... while`, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ). -Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while `: +Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while` : ```js let i = 0; @@ -521,11 +521,11 @@ Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lanceme - Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — `let i = 10;` - Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie `<div>` que nous avons selectionnée en utilisant : `const output = document.querySelector('.output');` En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle : - - `const paragraphe = document.createElement('p');` — crée un nouveau paragraphe. + - `const para = document.createElement('p');` — crée un nouveau paragraphe. - `output.appendChild(para);` — ajoute le paragraphe à la sortie `<div>`. - - `paragraphe.textContent =` — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal. + - `para.textContent =` — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal. -- Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : `paragraphe.textContent = )` +- Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : `para.textContent = )` - Si le nombre est 10, écrire "Countdown 10" dans le paragraphe. - Si le nombre est 0, écrire "Blast off!" dans le paragraphe. @@ -548,8 +548,8 @@ output.innerHTML = ''; // let i = 10; -// const paragraphe = document.createElement('p'); -// paragraphe.textContent = ; +// const para = document.createElement('p'); +// para.textContent = ; // output.appendChild(para); </textarea> @@ -637,9 +637,9 @@ textarea.onkeyup = function(){ }; ``` -{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }} +{{EmbedLiveSample('', '100%', 780)}} -## Apprentissage actif : remplir une liste d'invités. +## Apprentissage actif : remplir une liste d'invités Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse. @@ -657,7 +657,7 @@ Nous vous avons déjà fourni les éléments suivants : - `refused.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `refused.textContent`. - `admitted.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `admitted.textContent`. -Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article [Méthodes utiles pour les chaînes de caractères ](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile)pour obtenir de l'aide. +Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile) pour obtenir de l'aide. Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution. @@ -792,7 +792,7 @@ textarea.onkeyup = function(){ }; ``` -{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }} +{{EmbedLiveSample("", '100%', 580)}} ## Quel type de boucle utiliser ? @@ -830,7 +830,7 @@ Nous recommandons `for`, au moins pour commencer, car elle est probablement la p Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples ! -S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à [nous contacter ](/fr/Apprendre#Nous_contacter)pour demander de l'aide. +S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à [nous contacter](/fr/Apprendre#Nous_contacter) pour demander de l'aide. ## Voir aussi diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md index c93c4c94a6..f801f4c918 100644 --- a/files/fr/learn/javascript/building_blocks/return_values/index.md +++ b/files/fr/learn/javascript/building_blocks/return_values/index.md @@ -58,7 +58,7 @@ Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible. -Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [displayMessage() ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout ! +Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [`displayMessage()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout ! Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme. diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md index b547ca5265..9dd6990199 100644 --- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md @@ -87,8 +87,8 @@ Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permet En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) : - **Les API pour manipuler des documents** chargés dans le navigateur. L'exemple le plus évident est l'[API DOM (_Document Object Model_)](/fr/docs/Web/API/Document_Object_Model). Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents). -- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest ](/fr/docs/Web/API/XMLHttpRequest)et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) -- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas ](/fr/docs/Web/API/Canvas_API)et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics). +- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) +- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics). - **Les API audio et vidéo** comme [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [Web Audio API](/fr/docs/Web/API/Web_Audio_API) ou [WebRTC](/fr/docs/Web/API/WebRTC_API), permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir [API audio et vidéo](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs). - **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)). - **Les API de stockage côté client** deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), et le stockage plus complexe de données tabulaires avec l'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API). Pour en savoir plus sur ces API, voir [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage). diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md index 4964b628aa..8d609a1857 100644 --- a/files/fr/learn/javascript/first_steps/a_first_splash/index.md +++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md @@ -266,7 +266,7 @@ Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses. -Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les[ outils de développement et la console JavaScript ](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs)et entrez la ligne suivante : +Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les [outils de développement et la console JavaScript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez la ligne suivante : ```js checkGuess(); @@ -280,7 +280,7 @@ Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre. -Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les[ outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous : +Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les [outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous : ```html hidden <!DOCTYPE html> @@ -612,7 +612,7 @@ Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui let guessField = document.querySelector('.guessField'); ``` -Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS ](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs)qui sélectionne l'élément auquel vous voulez faire référence. +Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs) qui sélectionne l'élément auquel vous voulez faire référence. Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte : @@ -666,6 +666,6 @@ Chaque élément d'une page possède une propriété de `style` , qui contient e ## C'est fini pour le moment... -Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou[ jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html) +Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou [jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html) {{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md index e92f6f357f..38cb54ddef 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.md +++ b/files/fr/learn/javascript/first_steps/arrays/index.md @@ -226,7 +226,7 @@ Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résu 1. Commencer la boucle à l'élément 0 du tableau. 2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément 7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6). -3. Afficher chaque élément sur la console de l'explorateur avec` console.log()`. +3. Afficher chaque élément sur la console de l'explorateur avec `console.log()`. ## Quelques méthodes utiles pour les tableaux @@ -337,7 +337,7 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici : 1. Sous le commentaire `// number 1` il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom `products`. -2. Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [ boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`. +2. Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`. 3. Au dessous du commentaire `// number 3` nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (`nom:prix`) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article. 4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le [premier article à propos des chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings). 5. Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) ajoutez une ligne qui ajoute à ce total le prix de l'article courant à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-). diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md index 33e7c0acda..c7f77d2fe1 100644 --- a/files/fr/learn/javascript/first_steps/math/index.md +++ b/files/fr/learn/javascript/first_steps/math/index.md @@ -373,7 +373,7 @@ function updateBtn() { Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau. -> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état l'autre — allumé, éteint, etc. +> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état à l'autre — allumé, éteint, etc. ## Résumé diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md index e8d8789c62..c24a27df3d 100644 --- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md +++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md @@ -66,7 +66,7 @@ Installation basique : Variables initiales et fonctions : -1. Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray() `qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient. +1. Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray()` qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient. 2. Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (_input_) dans notre program. L'idée est que vous intégriez ces variables internes dans `main.js`: 1. Stockez la première longue chaîne de caractères (string) dans la variable `storyText`. @@ -92,7 +92,7 @@ Compléter la fonction `result()` : 1. Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades. 2. Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`. - 3. Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez` 'centigrade'`. + 3. Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'centigrade'`. 4. Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable `temperature`, et '300 pounds' par les contenus de la variable `weight`. 6. Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété `textContent` de la variable `story` (qui référence le paragraphe) soit égale à `newStory`. diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md index beaac08ec1..7ee4808221 100644 --- a/files/fr/learn/javascript/first_steps/strings/index.md +++ b/files/fr/learn/javascript/first_steps/strings/index.md @@ -34,7 +34,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p ## Chaînes de caractères — les bases -À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur, ](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools)comme vous préférez). +À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools); comme vous préférez). ```html hidden <!DOCTYPE html> diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md index 0ff7cd44d7..6ee07beb5c 100644 --- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md @@ -51,7 +51,7 @@ let string = 'Ceci est une chaîne'; votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page ! -**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez certaines assez souvent. Nous allons les voir maintenant. +**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous en utiliserez certaines assez souvent. Nous allons les voir maintenant. Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés, ou utiliser la [console de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez). @@ -254,7 +254,7 @@ La méthode prend deux paramètres — la chaîne que vous voulez remplacer et l browserType.replace('moz','van'); ``` -À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire :` browserType = browserType.replace('moz','van');` +À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : `browserType = browserType.replace('moz','van');`. ## Apprendre en pratiquant diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md index 072084dc21..a57bb397aa 100644 --- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md +++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md @@ -108,7 +108,7 @@ Elles se divisent généralement en deux catégories : - l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM. - l'[API de géolocalisation](/fr/docs/Web/API/Geolocation) récupère des informations géographiques. C'est ainsi que [Google Maps](https://www.google.com/maps) peut trouver votre position et la situer sur une carte. - les API [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API) permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez [Chrome Experiments](https://www.chromeexperiments.com/webgl) et [webglsamples](https://webglsamples.org/). -- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo ](http://chrisdavidmills.github.io/snapshot/)pour vous faire une idée). +- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo](http://chrisdavidmills.github.io/snapshot/) pour vous faire une idée). > **Note :** Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs. @@ -172,7 +172,7 @@ Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instan Vous pouvez aussi rencontrer les termes de code **côté serveur** et **côté client**, notamment dans le contexte du développement web. Le code **côté client** est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de **JavaScript côté client**. -Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article[ Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side). +Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article [Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side). ### Code dynamique contre code statique diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md index 3204451a86..78b6610785 100644 --- a/files/fr/learn/javascript/objects/json/index.md +++ b/files/fr/learn/javascript/objects/json/index.md @@ -356,7 +356,7 @@ Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON da - [La page de référence sur l'objet JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) - [La page de référence sur l'objet XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) - [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) -- [Les méthodes de requêtes HTTP ](/fr/docs/Web/HTTP/Methods) +- [Les méthodes de requêtes HTTP](/fr/docs/Web/HTTP/Methods) - [Le site web officiel avec un lien vers les normes de l' ECMA](http://json.org) {{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md index 858880b11b..423894d001 100644 --- a/files/fr/learn/javascript/objects/object_building_practice/index.md +++ b/files/fr/learn/javascript/objects/object_building_practice/index.md @@ -53,7 +53,7 @@ Dans cet article, nous écrirons une démo classique de "balles bondissantes", p  -Cet exemple utilise l'[API Canvas ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame) pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**). +Cet exemple utilise l'[API Canvas](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame) pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**). Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement : @@ -132,9 +132,9 @@ En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur - Ensuite, nous utilisons [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété `color` de notre balle. - Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont : - - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y `de notre balle. + - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y` de notre balle. - Le rayon de l'arc — nous specifions la propriété `size` de notre balle. - - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et `2 * PI `qui est l'équivalent de 360 degrés en radians (malheureusement vous êtes obligés de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement `1 * PI`, vous auriez eu un demi-cercle (180 degrés). + - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et `2 * PI` qui est l'équivalent de 360 degrés en radians (malheureusement vous êtes obligés de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement `1 * PI`, vous auriez eu un demi-cercle (180 degrés). - En dernière position nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`. diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.md b/files/fr/learn/javascript/objects/object_prototypes/index.md index 0db0e6d420..5b8080de3c 100644 --- a/files/fr/learn/javascript/objects/object_prototypes/index.md +++ b/files/fr/learn/javascript/objects/object_prototypes/index.md @@ -107,15 +107,15 @@ Ainsi [`Object.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_O On observe que plusieurs méthodes sont définies au niveau de l'attribut `prototype` d'`Object`, qui seront alors disponibles pour les objets qui héritent d'`Object`, comme nous l'avons vu plus haut. -Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et ` Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci : +Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et `Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci : ```js let maChaine = 'Ceci est ma chaine de caractères.'; ``` -`maChaine `possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)… +`maChaine ` possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)… -> **Attention :** L'attribut `prototype` est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via `__proto__`). L'attribut `prototype `est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter. +> **Attention :** L'attribut `prototype` est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via `__proto__`). L'attribut `prototype` est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter. ## Revenons sur create() diff --git a/files/fr/learn/server-side/django/admin_site/index.md b/files/fr/learn/server-side/django/admin_site/index.md index 94df39bf08..6752286d3d 100644 --- a/files/fr/learn/server-side/django/admin_site/index.md +++ b/files/fr/learn/server-side/django/admin_site/index.md @@ -132,7 +132,7 @@ Nous avons terminé cette étape ! Vous savez comment configurer et utiliser le La cadriciel Django réalise une excellente assistance avec la création d'un site d'administration de base en utilisant les données des enregistrements effectués : -- Pour chaque modèle, les enregistrements sont identifiés par le résultat de la méthode` __str__()`, et les détails sont accessibles par des vues dédiées. Par défaut, ces vues et formulaires disposent d'un menu en haut et vous pouvez opérer des opérations de suppressions en bloc en sélectionnant les enregistrements. +- Pour chaque modèle, les enregistrements sont identifiés par le résultat de la méthode `__str__()`, et les détails sont accessibles par des vues dédiées. Par défaut, ces vues et formulaires disposent d'un menu en haut et vous pouvez opérer des opérations de suppressions en bloc en sélectionnant les enregistrements. - Le détail de chaque modèle est contenu dans un formulaire où chaque champ est affiché verticalement dans l'ordre de déclaration de ces derniers dans le modèle d'objet. mais vous avez la possibilité de personnaliser le comportement du site d'administration. Vous allez pouvoir notamment faire : diff --git a/files/fr/learn/server-side/django/development_environment/index.md b/files/fr/learn/server-side/django/development_environment/index.md index e412441822..4332c52303 100644 --- a/files/fr/learn/server-side/django/development_environment/index.md +++ b/files/fr/learn/server-side/django/development_environment/index.md @@ -152,7 +152,7 @@ pip3 list ### Windows 10 -Windows n'inclut pas Python par défaut, mais vous pouvez facilement l'installer (ainsi que l'outil _pip3_) sur[ python.org](https://www.python.org/): +Windows n'inclut pas Python par défaut, mais vous pouvez facilement l'installer (ainsi que l'outil _pip3_) sur [python.org](https://www.python.org/) : 1. Téléchargez l'installeur requis : @@ -203,7 +203,7 @@ export PROJECT_HOME=$HOME/Devel source /usr/local/bin/virtualenvwrapper.sh ``` -> **Note :** Les variables `VIRTUALENVWRAPPER_PYTHON` et `VIRTUALENVWRAPPER_VIRTUALENV_ARGS `pointent vers l'emplacement d'installation par défaut de Python3, et `source /usr/local/bin/virtualenvwrapper.sh` pointe vers l'emplacement par défaut du script `virtualenvwrapper.sh`. Si le _virtualenv_ ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence). +> **Note :** Les variables `VIRTUALENVWRAPPER_PYTHON` et `VIRTUALENVWRAPPER_VIRTUALENV_ARGS` pointent vers l'emplacement d'installation par défaut de Python3, et `source /usr/local/bin/virtualenvwrapper.sh` pointe vers l'emplacement par défaut du script `virtualenvwrapper.sh`. Si le _virtualenv_ ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence). > > Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes `which virtualenvwrapper.sh` et `which python3`. @@ -338,7 +338,7 @@ py -3 -m django --version > py -m django --version > ``` > -> Dans Windows, les scripts _Python 3_ sont exécutés en préfixant la commande avec `py -3`, bien que ceci puisse varier suivant votre installation. Essayer en enlevant le modificateur `-3 `si vous rencontrez un problème avec la commande. Dans Linux/macOS, la commande est `python3.` +> Dans Windows, les scripts _Python 3_ sont exécutés en préfixant la commande avec `py -3`, bien que ceci puisse varier suivant votre installation. Essayer en enlevant le modificateur `-3` si vous rencontrez un problème avec la commande. Dans Linux/macOS, la commande est `python3.` > **Attention :** Le reste de ce **module** utilise les commandes _Linux_ pour invoquer Python 3 (`python3`) . . Si vous travaillez sous _Windows_ , remplacez simplement ce préfixe avec : `py -3` diff --git a/files/fr/learn/server-side/django/index.md b/files/fr/learn/server-side/django/index.md index 12d5ec6fe8..2a3273d3b3 100644 --- a/files/fr/learn/server-side/django/index.md +++ b/files/fr/learn/server-side/django/index.md @@ -18,7 +18,7 @@ Aucune connaissance sur ce framework n'est requise. Il vous faudra seulement com Une connaissance générale en programmation et plus précisement en [Python](/fr/docs/Glossaire/Python) est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module. -> **Note :** Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du[ Python pour les non-programmeurs](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) dans la documentation sur le site officiel de Python: python.org). +> **Note :** Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du [Python pour les non-programmeurs](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) dans la documentation sur le site officiel de Python: python.org). ## Guides diff --git a/files/fr/learn/server-side/django/introduction/index.md b/files/fr/learn/server-side/django/introduction/index.md index 57196c0c2c..d5005c4b8e 100644 --- a/files/fr/learn/server-side/django/introduction/index.md +++ b/files/fr/learn/server-side/django/introduction/index.md @@ -45,7 +45,7 @@ Django est un framework Python de haut niveau, permettant un développement rapi Django vous aide à écrire une application qui est: - Complète - - : Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une [documentation complète ](https://docs.djangoproject.com/en/2.0/)et à jour. + - : Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une [documentation complète](https://docs.djangoproject.com/en/2.0/) et à jour. - Polyvalent - : Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django! diff --git a/files/fr/learn/server-side/django/models/index.md b/files/fr/learn/server-side/django/models/index.md index ee078309c4..97aefd906c 100644 --- a/files/fr/learn/server-side/django/models/index.md +++ b/files/fr/learn/server-side/django/models/index.md @@ -319,7 +319,7 @@ class Book(models.Model): Le genre littéraire est une relation n à n (`ManyToManyField`) car un livre peut avoir plusieurs genres et inversement. Bien que des livres soient écrits à plusieurs, dans le modèle de données présent un livre n'aura qu'un et un seul auteur. Un auteur est donc vu comme une clé étrangère `(ForeignKey`) de telle sorte qu'un livre n'a qu'un seul auteur et une auteur peut avoir écrit plusieurs livres. -La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option` on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données. +La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option `on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données. Deux méthodes sont déclarées pour cet objet. La méthode `__str__()` obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, `get_absolute_url()`, retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom `book-detail`, et nous aurons à définir une vue et un gabarit. diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md index f2bb2995a8..9a02d03bdd 100644 --- a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md +++ b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md @@ -71,7 +71,7 @@ Même s'il s'agit d'un sujet extensible, son sujet de *Bibliothèque **locale*** Au fur et à mesure, les codes et commandes à écrire seront fournis. Ils peuvent être copiés et collés à chaque étapes. Il y aura aussi des codes que vous pourrez compléter avec quelques conseils. -Si vous êtes coincé, vous pourrez trouver une version totalement développée du site sur[ Github](https://github.com/mdn/django-locallibrary-tutorial) (**Anglais**). +Si vous êtes coincé, vous pourrez trouver une version totalement développée du site sur [GitHub](https://github.com/mdn/django-locallibrary-tutorial) (**Anglais**). ## Résumé diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.md b/files/fr/learn/server-side/first_steps/client-server_overview/index.md index 0c85bdbd06..9cf9f2b4e0 100644 --- a/files/fr/learn/server-side/first_steps/client-server_overview/index.md +++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.md @@ -53,7 +53,7 @@ Cette requête inclut : - `POST` data. Les requêtes `POST` ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête. - Cookies côté Client. Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources. -Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut [HTTP Response ](/fr/docs/Web/HTTP/Status)indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête `GET` contiendrait la ressource demandée. +Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut [HTTP Response](/fr/docs/Web/HTTP/Status) indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête `GET` contiendrait la ressource demandée. Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers. diff --git a/files/fr/learn/server-side/first_steps/website_security/index.md b/files/fr/learn/server-side/first_steps/website_security/index.md index 4829e2466b..5ea6284730 100644 --- a/files/fr/learn/server-side/first_steps/website_security/index.md +++ b/files/fr/learn/server-side/first_steps/website_security/index.md @@ -75,7 +75,7 @@ Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmi statement = "SELECT * FROM users WHERE name = '" + userName + "';" ``` -Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté (`'a';`) qui va complèter la requête d'origine (`' `est le symbole pour délimiter une chaine de texte en SQL). +Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté (`'a';`) qui va complèter la requête d'origine (`'` est le symbole pour délimiter une chaine de texte en SQL). ```sql SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't'; @@ -134,7 +134,7 @@ Quelques autres points que vous pouvez mettre en place : - Utilisez une politique de gestion des mots de passe efficace. Encouragez les mots de passe solides avec leur renouvellement fréquent. Prenez en compte une authentification à deux facteurs sur votre site (l'utilisateur, en plus du mot de passe, devra fournir un autre code d'authentification généralement fourni par un matériel physique, que seul l'utilisateur possède, comme un code envoyé sur le téléphone par SMS). - Configurez vos serveurs web pour utiliser [HTTPS](/fr/docs/Glossary/https) et [HTTP Strict Transport Security](/fr/docs/Web/Security/HTTP_strict_transport_security) (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec `POST` et les informations d'en-têtes deviennent moins disponibles pour l'attaquant. - Tenez vous informé des dernières menaces ([la liste actuelle d'OWASP est ici](/fr/docs/)) et préoccupez vous toujours des vulnerabilités les plus courantes en premier. -- Utilisez [des outils de recherche de vulnérabilités ](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)). +- Utilisez [des outils de recherche de vulnérabilités](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)). - Ne stockez et n'affichez que les données nécessaires. Par exemple, si votre utilisateur doit stocker des données sensibles comme des informations bancaires, affichez seulement ce qui sera suffisant pour être identifié par l'utilisateur, mais pas suffisament pour être copié par un attaquant et être utilisé sur un autre site. La méthode la plus courante en ce moment est de n'afficher que les quatre derniers chiffres du numéro de carte bancaire. Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes. diff --git a/files/fr/learn/server-side/index.md b/files/fr/learn/server-side/index.md index c2d8af0aa4..abeb362938 100644 --- a/files/fr/learn/server-side/index.md +++ b/files/fr/learn/server-side/index.md @@ -17,7 +17,7 @@ translation_of: Learn/Server-side Le sujet abordant les sites **web dynamiques / la programmation coté serveur** est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques. -La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le [HTML](/fr/docs/Learn/HTML), le [CSS ](/fr/docs/Learn/CSS)et le [JavaScript](/fr/docs/Learn/JavaScript) dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné). +La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le [HTML](/fr/docs/Learn/HTML), le [CSS](/fr/docs/Learn/CSS) et le [JavaScript](/fr/docs/Learn/JavaScript) dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné). De nos jours, dans le monde du web, apprendre la programmation côté serveur est indispensable. diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md index 2d4e767327..b4830fc154 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md @@ -285,7 +285,7 @@ Maintenant que nous avons couvers les considérations de l'accessibilité pour l Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages web, lesquels les examinerons et retournerons une liste de problèmes d'accessibilité présents sur la page. A titre d'exemple : -- [Tenon ](https://tenon.io): une assez bonne appli en ligne qui traverse le code à une URL fournie et qui retourne les résultats sur les erreurs d'acessibilité comprenant les indicateurs, ds erreurs spécifiques accompagnés des critères WCAG qu'elles affectent, et des suggestion de résolutions. +- [Tenon](https://tenon.io) : une assez bonne appli en ligne qui traverse le code à une URL fournie et qui retourne les résultats sur les erreurs d'acessibilité comprenant les indicateurs, ds erreurs spécifiques accompagnés des critères WCAG qu'elles affectent, et des suggestion de résolutions. - [tota11y](http://khan.github.io/tota11y/) : Un outil d'accessibilité de la Khan Academy qui prend la forme d'une librairie JavaScript que vous attachez à votre page pour apporter plusieurs outils d'accessibilité. - [Wave](http://wave.webaim.org/): Un autre outil en ligne de test d'accessibilité qui accepte une adresse web et retourne une utile vue annotée de la page avec les problèmes d'accessibilité surlignés. diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md index 633912f9a9..d746f9ca35 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md @@ -313,7 +313,7 @@ form > #date Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme [`:nth-of-type`](/fr/docs/Web/CSS/:nth-of-type), [`:not`](/fr/docs/Web/CSS/:not), [`::selection`](/fr/docs/Web/CSS/::selection), etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie [Selectivizr](http://selectivizr.com/) de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme [jQuery](http://jquery.com/) ou [MooTools](http://mootools.net/). 1. Afin de tester cet exemple, faites une copie locale de [selectivizr-example-start.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html). Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec `p:first-child`, qui ne fonctionne pas sur les anciennes versions d'IE. -2. Maintenant télécharger [MooTools ](http://mootools.net/)et [Selectivizr](http://selectivizr.com/), et placez-les dans le même répertoire que votre fichier HTML. +2. Maintenant télécharger [MooTools](http://mootools.net/) et [Selectivizr](http://selectivizr.com/), et placez-les dans le même répertoire que votre fichier HTML. 3. Placer le code suivant dans la têtière de votre document HTML, juste avant la balise ouvrante `<style>` : ```html @@ -392,11 +392,11 @@ Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut deve La [prefix-free JavaScript library](http://leaverou.github.io/prefixfree/) peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site. -Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options ](https://github.com/postcss/autoprefixer#options); pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE supérieure à la 9. +Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options](https://github.com/postcss/autoprefixer#options) ; pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE supérieure à la 9. last 2 versions, ie > 9 -Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir [Autoprefixer usage](https://github.com/postcss/autoprefixer#usage). Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme [Gulp ](http://gulpjs.com/)ou [Webpack ](https://webpack.github.io/)pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article). +Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir [Autoprefixer usage](https://github.com/postcss/autoprefixer#usage). Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme [Gulp](http://gulpjs.com/) ou [Webpack](https://webpack.github.io/) pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article). Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom : diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md index ab222b654f..807f81d444 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md @@ -248,7 +248,7 @@ Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans Par exemple : - Les [Promises](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) sont une super nouvelle fonctionnalité pour réaliser des opérations asynchrones et s'assurer que c'est opérations sont complètes avant que le code qui s'appuie sur eux ne soit utiliser pour autre chose. A titre d'exemple, l'[API Fetch](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) (un équivalent moderne de [XMLHTTPRequest](/fr/docs/Web/API/XMLHttpRequest)) utilise les promises pour rapporter les ressources à travers le réseau et s'assurer que la réponse a été retournée avant qu'elles ne soient utilisées (par exemple afficher une image dans un élément {{htmlelement("img")}} ). Elles ne sont pas du tout supportées par IE mais sont supportées par tous les navigateurs modernes. -- Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des [anonymous functions](/fr/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions), ce qui a aussi d'autres avantages (voir [Fonctions Fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)). Comme exemple rapide, voir [arrow-function.html ](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html)(voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari. +- Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des [anonymous functions](/fr/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions), ce qui a aussi d'autres avantages (voir [Fonctions Fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)). Comme exemple rapide, voir [arrow-function.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari. - Déclarer [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) en haut de votre code JavaScript l'amène à être décomposé en une liste de règles plus strictes, impliquant que plus d'avertissements et d'erreurs seront retournés, et certaines choses seront rejetées qui auraient normalement été acceptées. C'est probablement une bonne idée d'utiliser le mode stricte, comme il permet une amélioration et une meilleur efficacité du code, bien qu'il ait un support limité/incomplet selon les navigateurs (voir [Le mode strict dans les navigateurs](/fr/docs/Web/JavaScript/Reference/Strict_mode#Le_mode_strict_dans_les_navigateurs)). - [Les tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s) permettent au code JavaScript d'accéder et de manipuler des données binaires brutes, ce qui est indispensable pour les APIs navigateur par exemple qui commencent à manipuler les streams des données vidéo et audio brutes. @@ -294,7 +294,7 @@ Les librairies JavaScript sont essentiellement une partie externe d'unités de c Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) : - Les librairies utilitaires : Fournissent une quantité de fonctions pour rendre les tâches sans intérêts plus simples et moins ennuyantes à gérer. [jQuery](http://jquery.com/) par exemple fournit son propre système de sélecteurs et de librairies de manipulation de DOM, pour permettre le choix du type de sélecteur CSS, des éléments en JavaScript et une construction du DOM plus simple. Ce n'est plus aussi important aujourd'hui nous avons des fonctionnalités modernes comme les méthodes {{domxref("Document.querySelector()")}}/{{domxref("Document.querySelectorAll()")}}/{{domxref("Node")}} disponibles selon les navigateurs, mais ça peut toujours être utile quand vous avez besoin de supporter de plus vieux navigateurs. -- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'[API Service Worker ](/fr/docs/Web/API/Service_Worker_API)est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles). +- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles). - Les librairies d'effets : Ces librairies sont conçues pour vous permettre d'ajouter facilement des effets spéciaux à votre site web. C'était plus utile quand {{glossary("DHTML")}} était à la mode, et implémentait des effets impliquant beaucoup de JavaScript complexe, mais de nos jours les navigateurs ont construit une quantité de fonctionnalités en CSS3 et des APIs pour implémenter les effets plus facilement. Pour une liste de librairies, se référer à [JavaScripting.com/animation](https://www.javascripting.com/animation/). - Les librairies d'UI : Fournissent des méthodes pour implémenter des fonctionnalités UI complexes qui serait autrement compliquées à implémenter et à faire fonctionner en navigateur croisé, par exemple [jQuery UI](http://jqueryui.com/) et [Foundation](http://foundation.zurb.com/). Elles ont tendance à être utilisées comme les bases de la configuration de sites complets ; c'est souvent difficile de les implémenter uniquement pour une fonctionnalité UI. - Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, [LocalForage](https://github.com/localForage/localForage) est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données, que ça soit [IndexedDB](/fr/docs/Web/API/API_IndexedDB), [Web Storage](/fr/docs/Web/API/Web_Storage_API), ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery. diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md index c6846a30ca..8f2e474df0 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md @@ -197,7 +197,7 @@ Nous couvrirons chacune des autres options plus bas. Les émulateurs sont essentiellement des programmes qui s'exécutent à l'intérieur de votre ordinateur et simulent des appareils ou des conditions particulières d'appareil d'un certain type, ils vous permettent de faire certains tests plus aisément qu'en ayant à trouver une combinaison de matériels/logiciels à tester. -Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le[ Mode Design Responsive](/fr/docs/Tools/Responsive_Design_Mode) de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans _Safari_ > _Préférences_, et en cochant _Show Develop menu_, puis en choisissant _Develop > Enter Responsive Design Mode_. Chrome propose également quelque chose de similaire : Device mode (voir [Simuler un Appareil Mobile avec le Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/)). +Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le [Mode Design Responsive](/fr/docs/Tools/Responsive_Design_Mode) de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans _Safari_ > _Préférences_, et en cochant _Show Develop menu_, puis en choisissant _Develop > Enter Responsive Design Mode_. Chrome propose également quelque chose de similaire : Device mode (voir [Simuler un Appareil Mobile avec le Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/)). Le plus souvent, vous allez devoir installer un émulateur. Les appareils/navigateurs les plus courants que vous allez devoir tester sont les suivants : diff --git a/files/fr/learn/tools_and_testing/github/index.md b/files/fr/learn/tools_and_testing/github/index.md index 263030b674..813f0afe66 100644 --- a/files/fr/learn/tools_and_testing/github/index.md +++ b/files/fr/learn/tools_and_testing/github/index.md @@ -66,7 +66,7 @@ Notez que les liens ci-après vous amènent à des ressources sur des sites exte - [Mastering issues (de GitHub)](https://guides.github.com/features/issues/) - : Les _issues_ (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des _issues_. -> **Note :** Il existe **beaucoup d'autres** choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) et[ Dangit, git!](https://dangitgit.com/) +> **Note :** Il existe **beaucoup d'autres** choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) et [Dangit, git!](https://dangitgit.com/) ## Voir aussi diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md index b52f11de84..5c7a47de2a 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md @@ -176,7 +176,7 @@ cd Bureau/projet/src Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple `/Utilisateurs/votre-nom/Bureau`. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante". -> **Note :** Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. `cd Bureau\projet\src` — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,[ regardez cette vidéo YouTube](https://www.youtube.com/watch?v=5T3IJfBfBmI) (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft. +> **Note :** Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. `cd Bureau\projet\src` — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, [regardez cette vidéo YouTube](https://www.youtube.com/watch?v=5T3IJfBfBmI) (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft. ### Lister le contenu d'un répertoire @@ -225,7 +225,7 @@ Jouez avec elles dans un répertoire que vous aurez créé quelque part de faço - `cp` — d'un usage similaire à `mv`, `cp` copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, `cp mdn-exemple.txt mdn-exemple.txt.bak` crée une copie de `mdn-exemple.txt` nommée `mdn-exemple.txt.bak` (bien entendu vous pouvez la nommer comme vous voulez). - `rm` — supprimer le fichier spécifié. Par exemple, `rm mdn-exemple.txt` efface un fichier unique nommé `mdn-exemple.txt`. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur. -> **Note :** Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, `rm mdn-*` va effacer tous les fichiers qui commencent par `mdn-`. `rm mdn-*.bak` va effacer tous les fichiers qui commencent par `mdn- `et finissent par `.bak`. +> **Note :** Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, `rm mdn-*` va effacer tous les fichiers qui commencent par `mdn-`. `rm mdn-*.bak` va effacer tous les fichiers qui commencent par `mdn-` et finissent par `.bak`. ## Le terminal — une pratique à risque ? diff --git a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md index d518794b83..acb069fce8 100644 --- a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md +++ b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md @@ -14,7 +14,7 @@ Le [glossaire](/fr/docs/Glossary) MDN est le lieu privilégié où nous définis ## Comment créer une entrée -Pour trouver des sujets ayant besoin d'entrées de glossaire, consultez la [liste des termes à documenter ](/fr/docs/Glossary#Contribute_to_the_glossary)à la fin de la page concernant le sujet en question ; cliquez n'importe lequel de ses liens pour commencer une nouvelle page de glossaire, puis suivez les étapes ci-dessous. +Pour trouver des sujets ayant besoin d'entrées de glossaire, consultez la [liste des termes à documenter](/fr/docs/Glossary#Contribute_to_the_glossary) à la fin de la page concernant le sujet en question ; cliquez n'importe lequel de ses liens pour commencer une nouvelle page de glossaire, puis suivez les étapes ci-dessous. ### Étape 1: écrire un résumé @@ -67,7 +67,7 @@ Le glossaire devient beaucoup plus utile lorsque le lecteur peut atteindre les d | ---------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | \\{{Glossary("browser")}} | {{Glossary("browser")}} | Quand un terme correspond à un terme à définir, utilisez simplement la macro telle quelle (notez qu'elle est sensible à la casse — minuscule/majuscule) | | \\{{Glossary("browser", "Web browser")}} | {{Glossary("browser","Web browser")}} | Fournissez en deuxième argument un texte alternatif à afficher. | -| \\{{Glossary("browser", "Web browser", 1)}} | {{Glossary("browser","Web browser",1)}} | Optionnellement, entrez le chiffre` 1` comme troisième argument pour afficher le lien de façon classique plutôt que comme une mise en exergue subtile. | +| \\{{Glossary("browser", "Web browser", 1)}} | {{Glossary("browser","Web browser",1)}} | Optionnellement, entrez le chiffre `1` comme troisième argument pour afficher le lien de façon classique plutôt que comme une mise en exergue subtile. | Les liens créés avec la macro \\{{Glossary}} affichent toujours un texte au survol de la souris, qui contient le résumé de l'entrée du glossaire (cf. ci-dessus). diff --git a/files/fr/mdn/guidelines/conventions_definitions/index.md b/files/fr/mdn/guidelines/conventions_definitions/index.md index d2c896299d..a091d9fc90 100644 --- a/files/fr/mdn/guidelines/conventions_definitions/index.md +++ b/files/fr/mdn/guidelines/conventions_definitions/index.md @@ -126,7 +126,7 @@ Il arrive parfois, pendant le développement d'une spécification et au fur à e - On fera de même pour toute mention dans les guides et tutoriels qui mentionnent cet élément. - On fera de même pour toute mention autre part sur MDN. - Il est très peu probable que ces mentions soient retirées de la documentation. Toutefois, il est possible que certaines de ces pages soient déplacées dans les [Archives](/fr/docs/Archive). - - On mettra à jour les éléments concernés [dans le dépôt de données de compatibilité des navigateurs ](https://github.com/mdn/browser-compat-data)afin d'indiquer la dépréciation de l'élément. + - On mettra à jour les éléments concernés [dans le dépôt de données de compatibilité des navigateurs](https://github.com/mdn/browser-compat-data) afin d'indiquer la dépréciation de l'élément. Les formulations exactes des avertissements et autres messages doivent être adaptées si besoin. En cas de doute sur la formulation, n'hésitez pas à vous rendre sur [le canal MDN](https://chat.mozilla.org/#/room/#mdn:mozilla.org) sur [Matrix](https://wiki.mozilla.org/Matrix) ou sur le forum de discussion [Discourse](https://discourse.mozilla.org/c/mdn). diff --git a/files/fr/mdn/structures/macros/commonly-used_macros/index.md b/files/fr/mdn/structures/macros/commonly-used_macros/index.md index bc8158e7df..54876223e2 100644 --- a/files/fr/mdn/structures/macros/commonly-used_macros/index.md +++ b/files/fr/mdn/structures/macros/commonly-used_macros/index.md @@ -5,9 +5,9 @@ translation_of: MDN/Structures/Macros/Commonly-used_macros --- {{MDNSidebar}} -Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir [Utilisation des macros ](https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Macros "/fr/docs/MDN/Contribute/Content/Macros")et [Utiliser les liens macros ](/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros "/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros"). Voir [les autres macros ](/fr/docs/MDN/Contribute/Structures/Macros/Other "/fr/docs/MDN/Contribute/Structures/Macros/Other")pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de [toutes les macros MDN](/fr/docs/templates "/fr/docs/templates"). +Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir [Utilisation des macros](https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Macros "/fr/docs/MDN/Contribute/Content/Macros") et [Utiliser les liens macros](/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros "/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros"). Voir [les autres macros](/fr/docs/MDN/Contribute/Structures/Macros/Other "/fr/docs/MDN/Contribute/Structures/Macros/Other") pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de [toutes les macros MDN](/fr/docs/templates "/fr/docs/templates"). -Voir aussi le[ Guide style CSS ](/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide "/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide")pour l'utilisation des styles disponibles. +Voir aussi le [Guide style CSS](/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide "/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide") pour l'utilisation des styles disponibles. ## Linking @@ -15,7 +15,7 @@ Voir aussi le[ Guide style CSS ](/fr/docs/MDN/Contribute/Guidelines/CSS_style_gu En général, vous ne devez pas utiliser des macros pour créer des liens arbitraires. Utilisez le **Lien** dans l'interface de l'éditeur pour créer des liens. -- La macro {{TemplateLink("Glossary")}} crée un lien vers une entrée du[ glossaire](https://developer.mozilla.org/fr/docs/Glossaire) MDN. Cette macro accepte un paramètre obligatoire et deux optionnels: +- La macro {{TemplateLink("Glossary")}} crée un lien vers une entrée du [glossaire](https://developer.mozilla.org/fr/docs/Glossaire) MDN. Cette macro accepte un paramètre obligatoire et deux optionnels: 1. Le nom d'un terme (comme "HTML"). 2. Le texte à afficher dans l'article au lieu du nom du terme (ce qui devrait être rarement utilisé). {{optional_inline}} @@ -35,7 +35,7 @@ Il existe différentes macros pour des liens vers des pages dans les zones de r - {{TemplateLink("domxref")}} links to pages in the DOM reference; if you include parentheses at the end, the template knows to display the link to look like a function name. For example, \\{{domxref("document.getElementsByName()")}} results in {{ domxref("document.getElementsByName()") }} while `\{\{domxref("Node")\}\}` results in {{ domxref("Node") }}. - {{TemplateLink("event")}} links to pages in the DOM Event reference, for example: \\{{event("change")}} results in {{event("change")}}. - {{TemplateLink("HTMLElement")}} links to an HTML element in the HTML Reference. -- {{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, `\{\{htmlattrxref("lang")\}\} `will create this link: {{htmlattrxref("lang")}}.` ` `\{\{htmlattrxref("type","input")\}\}` will create this link: {{htmlattrxref("type","input")}}. +- {{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, `\{\{htmlattrxref("lang")\}\}` will create this link: {{htmlattrxref("lang")}}. `\{\{htmlattrxref("type","input")\}\}` will create this link: {{htmlattrxref("type","input")}}. - {{TemplateLink("jsxref")}} links to a page in the [JavaScript Reference](/en-US/docs/Web/JavaScript/Reference "en-US/docs/Web/JavaScript/Reference"). - {{TemplateLink("SVGAttr")}} links to a specific SVG attribute. For example, `\{\{SVGAttr("d")\}\}` creates this link: {{SVGAttr("d")}}. - {{TemplateLink("SVGElement")}} links to an SVG element in the SVG Reference. @@ -126,7 +126,7 @@ Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …). ##### Syntax -`\{{deprecated_inline}}` or` \{{deprecated_inline("gecko5")}}` +`\{{deprecated_inline}}` or `\{{deprecated_inline("gecko5")}}` ##### Examples @@ -141,7 +141,7 @@ Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …). ##### Syntax -`\{{obsolete_inline}}` or` \{{obsolete_inline("js1.8.5")}}` +`\{{obsolete_inline}}` or `\{{obsolete_inline("js1.8.5")}}` ##### Examples diff --git a/files/fr/mdn/structures/macros/index.md b/files/fr/mdn/structures/macros/index.md index 2b2710c8a5..10237e2c4a 100644 --- a/files/fr/mdn/structures/macros/index.md +++ b/files/fr/mdn/structures/macros/index.md @@ -23,7 +23,7 @@ Quelques notes sur les appels de macro: - Les noms de macros sont sensibles à la casse, mais une tentative est faite pour corriger ces erreurs communes; vous pouvez utiliser tout en minuscules, même si le nom de la macro utilise des majuscules en son sein, et vous pouvez débuter par une majuscule une macro dont le nom commence normalement par une lettre minuscule. - Les paramètres sont séparés par des virgules. -- Si il n'y a pas de paramètres, vous pouvez laisser les parenthèses ou les enlever; `\{{macroname()}} `et `\{{macroname}}` sont identiques. +- Si il n'y a pas de paramètres, vous pouvez laisser les parenthèses ou les enlever; `\{{macroname()}}` et `\{{macroname}}` sont identiques. - Les paramètres numériques peuvent être entre guillemets, ou non (cependant, si vous avez un numéro de version avec plusieurs décimales, il doit être entre guillemets). - Si vous obtenez des erreurs, consultez votre code attentivement. Si vous ne pouvez toujours pas à comprendre ce qui se passe, voir [Dépannage des erreurs KumaScript](/fr/docs/MDN/Kuma/Troubleshooting_KumaScript_errors). diff --git a/files/fr/mozilla/add-ons/index.md b/files/fr/mozilla/add-ons/index.md index ccbec96142..98b2fbca3e 100644 --- a/files/fr/mozilla/add-ons/index.md +++ b/files/fr/mozilla/add-ons/index.md @@ -53,7 +53,7 @@ En 2020, Mozilla sortira une nouvelle expérience Firefox pour Android. Le nouve Si vous maintenez un module complémentaire historique utilisant XUL ou le SDK Add-on, nous vous recommandons de le porter vers une extension WebExtensions. [Voici quelques ressources MDN à propos du portage d'extension](/fr/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on). -Nous avons rassemblé [un ensemble de ressources](https://wiki.mozilla.org/Add-ons/developer/communication) sur un page wiki afin d'aider les développeurs pendant cette phase de transition. Pour commencer, vous pouvez utiliser l'outil [Lookup ](https://compatibility-lookup.services.mozilla.com/)afin de détecter si votre module complémentaire est impacté. +Nous avons rassemblé [un ensemble de ressources](https://wiki.mozilla.org/Add-ons/developer/communication) sur un page wiki afin d'aider les développeurs pendant cette phase de transition. Pour commencer, vous pouvez utiliser l'outil [Lookup](https://compatibility-lookup.services.mozilla.com/) afin de détecter si votre module complémentaire est impacté. ## Publier des modules diff --git a/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md b/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md index 1b01eec2c4..21844a46c1 100644 --- a/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md +++ b/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md @@ -15,7 +15,7 @@ Il s'agit du seul fichier qui doit être présent dans chaque extension. Il cont Ce manifeste peut également contenir des pointeurs vers plusieurs autres types de fichiers : -- [page d'arrière-plan ](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts): implémentez une logique à longue durée. +- [page d'arrière-plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts) : implémentez une logique à longue durée. - Icônes pour l'extension et tous les boutons qu'elle peut définir. - [Sidebars, popups, et options pages](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages): Documents HTML qui fournissent du contenu pour divers composants de l'interface utilisateur. - [Script de contenu](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts) : interagissez avec les pages Web (Notez que ce n'est pas le même que javaScript dans un élément {{HTMLElement("script")}} au sein d'une page). diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md index 24413ee57e..1b15d223c6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md @@ -20,7 +20,7 @@ L'API `Notifications` est utilisée pour afficher les notifications de bureau à Définir `browserSettings.webNotificationsDisabled` à `true` change l'autorisation globale à _refuser_. -Notez que cela n'affectera pas les sites pour lesquels l'utilisateur a défini une préférence par site. Par exemple, si l'utilisateur définit <https://example.org> pour _autoriser_, et une extension place ensuite `browserSettings.webNotificationsDisabled` à `true`, alors les pages sous [https://example.org ](https://example.org)seront toujours autorisées à afficher des notifications.. +Notez que cela n'affectera pas les sites pour lesquels l'utilisateur a défini une préférence par site. Par exemple, si l'utilisateur définit <https://example.org> pour _autoriser_, et une extension place ensuite `browserSettings.webNotificationsDisabled` à `true`, alors les pages sous [https://example.org](https://example.org) seront toujours autorisées à afficher des notifications.. Si vous définissez `browserSettings.webNotificationsDisabled` à `false` la valeur par défaut globale est rétablie. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md index fcaae13ff8..431a4fc7eb 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings/zoomSiteSpecif Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} dont la valeur sous-jaccente est un booléen. -Cette propriété contrôle le [réglage de configuration](https://support.mozilla.org/fr/kb/editeur-configuration-firefox)` browser.zoom.siteSpecific`, qui règle comment le zoom est appliqué aux sites et onglets. +Cette propriété contrôle le [réglage de configuration](https://support.mozilla.org/fr/kb/editeur-configuration-firefox) `browser.zoom.siteSpecific`, qui règle comment le zoom est appliqué aux sites et onglets. Si `browser.zoom.siteSpecific` est à vrai, les opérations de zoom s'appliquent à toutes les pages du même site selon les règles : diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md index 3d7bcb7fe0..3e99e5f7f6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md @@ -30,7 +30,7 @@ var removing = browser.browsingData.removeCache( ### Paramètres -- `removalOptions `{{optional_inline}} +- `removalOptions` {{optional_inline}} - : `object`. Un objet {{WebExtAPIRef("browsingData.RemovalOptions")}}. Ce paramètre n'a aucun effet ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md index cb8596d8e2..5fd142822f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md @@ -42,7 +42,7 @@ var getting = browser.cookies.get( - `storeId`{{optional_inline}} - : Une `chaîne` représentant l'ID du {{WebExtAPIRef("cookies.CookieStore", "cookie store")}} dans lequel rechercher le cookie (tel que renvoyé par {{WebExtAPIRef("cookies.getAllCookieStores()")}}). Par défault, le cookie store du contexte d'exécution actuel sera utilisé. - `url` - - : Une `chaîne` représentant l'URL avec laquelle le cookie à récupérer est associé. Cet argument peut être une URL complète, auquel cas toute donnée suivant le chemin d'URL (par exemple la chaîne de requête) est simplement ignorée. Si les [ permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions) pour cette URL ne sont pas spécifiées dans le [fichier manifeste](/fr/Add-ons/WebExtensions/manifest.json) de l'extension, l'appel de l'API échouera. + - : Une `chaîne` représentant l'URL avec laquelle le cookie à récupérer est associé. Cet argument peut être une URL complète, auquel cas toute donnée suivant le chemin d'URL (par exemple la chaîne de requête) est simplement ignorée. Si les [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions) pour cette URL ne sont pas spécifiées dans le [fichier manifeste](/fr/Add-ons/WebExtensions/manifest.json) de l'extension, l'appel de l'API échouera. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md index 3b721356ca..01d599e69b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md @@ -40,7 +40,7 @@ var removing = browser.cookies.remove( - `name` - : Une `chaîne` représenant le nom du cookie à supprimer. - `storeId`{{optional_inline}} - - : Une` chaîne` représentant l'ID du cookie store pour trouver le cookie. Si elle n'est pas spécifiée, le cookie est recherché par défaut dans le cookie store du contexte d'exécution actuel. + - : Une `chaîne` représentant l'ID du cookie store pour trouver le cookie. Si elle n'est pas spécifiée, le cookie est recherché par défaut dans le cookie store du contexte d'exécution actuel. - `url` - : Une `chaîne` représentant l'URL associée au cookie. Si l'extension n'a pas de [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour cette URL, l'appel de l'API échouera. diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md index e8b8329c9e..49c0dafa02 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md @@ -18,7 +18,7 @@ Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés. C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales: -Tout d'abord, le JavaScript peut utiliser un ensemble de [commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools ](#Helpers): par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur. +Tout d'abord, le JavaScript peut utiliser un ensemble de [commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools](#Helpers) : par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur. Deuxièmement, le JavaScript que vous exécutez peut voir les modifications apportées à la page par des scripts que la page a chargés. Cela contraste avec les scripts de contenu, qui voient la page [telle qu'elle existerait si aucun script de page n'était pas chargé](/fr/Add-ons/WebExtensions/Content_scripts#DOM_access). Cependant, notez que l'isolement fourni par les scripts de contenu est une fonction de sécurité délibérée, destinée à rendre plus difficile la confusion ou la subversion des WebExtensions par des pages web malveillantes ou simplement non coopératives en redéfinissant les fonctions et les propriétés du DOM. Cela signifie que vous devez être très prudent si vous renoncez à cette protection en utilisant eval(), et devrait utiliser les scripts de contenu, sauf si vous devez utiliser eval(). diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md index 9109f49f92..a34bf0aec4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md @@ -17,7 +17,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow L'API `devtools.inspectedWindow` permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés. -Comme toutes les APIs de `devtools`, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé [devtools_page](/fr/Add-ons/WebExtensions/manifest.json/devtools_page) du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir [Extension des outils de développement ](/fr/Add-ons/WebExtensions/Extending_the_developer_tools) pour plus d'informations. +Comme toutes les APIs de `devtools`, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé [devtools_page](/fr/Add-ons/WebExtensions/manifest.json/devtools_page) du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir [Extension des outils de développement](/fr/Add-ons/WebExtensions/Extending_the_developer_tools) pour plus d'informations. ## Propriétés diff --git a/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md b/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md index 0e1bd90db9..322ebb321a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md @@ -88,7 +88,7 @@ Toutefois, notez que ces deux derniers modèles ne correspondent pas au dernier - `ports`{{optional_inline}} - - : `array` de `(integer `ou` array of integer`). Un tableau qui peut contenir des entiers et des tableaux d'entiers. Les entiers sont interprétés comme des numéros de port, tandis que les tableaux d'entiers sont interprétés comme des plages de ports. Correspond si le port de l'URL correspond à un numéro de port ou est contenu dans des plages. + - : `array` de (`integer` ou `array of integer`). Un tableau qui peut contenir des entiers et des tableaux d'entiers. Les entiers sont interprétés comme des numéros de port, tandis que les tableaux d'entiers sont interprétés comme des plages de ports. Correspond si le port de l'URL correspond à un numéro de port ou est contenu dans des plages. - Par exemple: `[80, 443, [1000, 1200]]` correspond à toutes les demandes sur les ports 80, 443, et dans la plage 1000-1200. diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md index fc09e6bb30..6ef39f9e2b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md @@ -19,7 +19,7 @@ Fonctions permettant d'internationaliser votre extension. Vous pouvez utiliser c Pour plus de détails sur l'utilisation de i18n pour votre extension, voir : - [Internationalization](/fr/Add-ons/WebExtensions/Internationalization): un guide d'utilisation du système WebExtension i18n. -- [Référence de message spécifique aux paramètres régionaux ](/fr/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference): Les extensions fournissent des chaînes de caractères locales dans des fichiers appelés `messages.json`. Cette page décrit le format de `messages.json`. +- [Référence de message spécifique aux paramètres régionaux](/fr/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference) : Les extensions fournissent des chaînes de caractères locales dans des fichiers appelés `messages.json`. Cette page décrit le format de `messages.json`. ## Types diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md index 27e5b4b439..059205a76f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md @@ -80,7 +80,7 @@ Le nom peut inclure les caractères suivants : Au moins, cette propriété doit être définie pour chaque chaîne. Le membre `"message"` contient une chaîne localisée qui peut contenir {{anch("placeholders")}}. Vous pouvez utiliser : - _$placeholder_name$_ (case insensitive) pour insérer un espace réservé particulier (par exemple $URL$ dans l'exemple ci-dessus) dans votre chaîne. -- `$1`, `$2`,` $3`, etc. pour insérer directement les valeurs obtenues à partir d'un {{WebExtAPIRef("i18n.getMessage()")}} appel dans votre chaîne. +- `$1`, `$2`, `$3`, etc. pour insérer directement les valeurs obtenues à partir d'un {{WebExtAPIRef("i18n.getMessage()")}} appel dans votre chaîne. Autres points à noter : diff --git a/files/fr/mozilla/add-ons/webextensions/api/identity/index.md b/files/fr/mozilla/add-ons/webextensions/api/identity/index.md index 50004009a9..8d7f8fd95f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/identity/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/identity/index.md @@ -23,7 +23,7 @@ L'API d'identité fournit la fonction {{WebExtAPIRef("identity.launchWebAuthFlow L'extension termine alors le flux OAuth2 pour obtenir un jeton d'accès validé, et peut ensuite l'utiliser dans les requêtes HTTP pour accéder aux données de l'utilisateur en fonction de l'autorisation donnée par l'utilisateur. -Pour utiliser cette API, vous devez posséder la [permission de l'API ](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions)"identity" +Pour utiliser cette API, vous devez posséder la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "identity" ## Installer diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md index 76fba1d6f4..c5d905bb39 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management/onEnabled L'auditeur de l'événement appelé lorsque l'événement `enabled` est déclenché, indiquant qu'un add-on est maintenant activé. -L'API requière l'[API de permission ](/fr/Add-ons/WebExtensions/manifest.json/permissions)"management" +L'API requière l'[API de permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "management" ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md index ff33122d6a..85443e4e59 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management/onInstalled Action quand une extension est installée. -Cette API requière l'[API de permission ](/fr/Add-ons/WebExtensions/manifest.json/permissions)"management". +Cette API requière l'[API de permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "management". ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md index 058dd43540..bb406dc585 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management/onUninstalled Action quand une extension est désinstallée. -L'API requière l'[API de permission ](/fr/Add-ons/WebExtensions/manifest.json/permissions)"management". +L'API requière l'[API de permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "management". ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md index baf352a860..eb09634e5f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md @@ -35,7 +35,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - : `string`. L'URL du cadre de l'élément sur lequel le menu contextuel a été cliqué, s'il était dans un cadre - `linkText` {{optional_inline}} - : `string`. Si l'élément est un lien, le texte du lien. Si le lien ne contient aucun texte, l'URL elle-même est donnée ici. -- `linkUrl `{{optional_inline}} +- `linkUrl` {{optional_inline}} - : `string`. Si l'élément est un lien, l'URL vers laquelle il pointe. - `mediaType` {{optional_inline}} - : `string`. Une de "image", "video", ou "audio" si le menu contextuel a été activé sur l'un de ces types d'éléments. @@ -47,7 +47,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - : `string`. L'URL de la page sur laquelle l'élément de menu a été cliqué. Cette propriété n'est pas présente si le clic s'est produit dans un contexte où il n'y a pas de page en cours, comme dans le cas d'une action du navigateur. - `parentMenuItemId` {{optional_inline}} - : `integer` ou `string`. L'ID parent, le cas échéant, pour l'élément cliqué. -- `selectionText `{{optional_inline}} +- `selectionText` {{optional_inline}} - : `string`. Si du texte a été sélectionné dans la page, il contient le texte sélectionné. - `srcUrl` {{optional_inline}} - : `string`. Sera présent pour les éléments avec une URL "src". diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md index c879a6f45f..619753ac6a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md @@ -35,9 +35,9 @@ browser.menus.overrideContext( - `showDefaults` {{optional_inline}} - : `boolean`. S'il faut également inclure les éléments de menu par défaut dans le menu. - - `context `{{optional_inline}} + - `context` {{optional_inline}} - : `string`. Le ContextType à surcharger, pour autoriser les éléments de menu d'autres extensions dans le menu. Actuellement, seuls `'bookmark'` et `'tab'` sont supportés. `showDefaults` ne peut pas être utilisé avec cette option. - - `bookmarkId `{{optional_inline}} + - `bookmarkId` {{optional_inline}} - : `string`. Requis lorsque le contexte est `'bookmark'`. Nécessite la permission 'bookmark'. - - `tabId `{{optional_inline}} + - `tabId` {{optional_inline}} - : `integer`. Requis lorsque le contexte est `'tab'`. Nécessite la permission 'tabs'. diff --git a/files/fr/mozilla/add-ons/webextensions/api/notifications/clear/index.md b/files/fr/mozilla/add-ons/webextensions/api/notifications/clear/index.md index ae28407604..53acf79895 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/notifications/clear/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/notifications/clear/index.md @@ -34,7 +34,7 @@ var clearing = browser.notifications.clear( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un booléen : `true` la notification a été effacée, ou `false` si ce n'est pas le cas (par exemple, parce que la notification référencée par `id ` n'existe pas). +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un booléen : `true` la notification a été effacée, ou `false` si ce n'est pas le cas (par exemple, parce que la notification référencée par `id` n'existe pas). ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md b/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md index 74b556d77d..01477d446f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md @@ -18,7 +18,7 @@ Une [action de page](/fr/Add-ons/WebExtensions/Page_actions) est une icône cliq  -Vous pouvez écouter les clics sur l'icône, ou spécifié une [fenêtre contextuelle ](/fr/Add-ons/WebExtensions/Popups)qui s'ouvre lorsque l'icone est cliquée. +Vous pouvez écouter les clics sur l'icône, ou spécifié une [fenêtre contextuelle](/fr/Add-ons/WebExtensions/Popups) qui s'ouvre lorsque l'icone est cliquée. Si vous spécifiez une fenêtre contextuelle, vous pouvez définir son contenu et son comportement en utilisant HTML, CSS et JavaScript, tout comme une page Web normale. Le JavaScript s'exécutant dans la fenêtre contextuelle accède à toutes les mêmes API WebExtension que vos scripts d'arrière-plan. diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/permissions/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/permissions/index.md index fa69b9fd40..4d92f10cda 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/permissions/permissions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/permissions/index.md @@ -21,7 +21,7 @@ Un {{jsxref("object")}} avec les propriétés suivantes : - `origins`{{optional_inline}} - : Un tableau de [modèles de correspondance](/fr/Add-ons/WebExtensions/Match_patterns), représentant les [permissions de l'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions). - `permissions`{{optional_inline}} - - : Un tableau de permissions nommées, y compris les [permissions d'API ](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) et les [permissions du presse-papiers](/fr/Add-ons/WebExtensions/manifest.json/permissions#Clipboard_access). + - : Un tableau de permissions nommées, y compris les [permissions d'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) et les [permissions du presse-papiers](/fr/Add-ons/WebExtensions/manifest.json/permissions#Clipboard_access). ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md b/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md index 42a8cf4a5d..394907b1e5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md @@ -49,7 +49,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant Par exemple, si vous voulez envoyer "nom d'utilisateur" et "mot de passe" pour l'authentification "basique", vous pouvez définir la propriété `proxyAuthorizationHeader` à `Basic dXNlcm5hbWU6cGFzc3dvcmQ=` -- `connectionIsolationKey `{{optional_inline}} +- `connectionIsolationKey` {{optional_inline}} - : `string.` Une clé optionnelle utilisée pour l'isolation supplémentaire de cette connexion proxy. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md index fee6c19907..a4c19be5d5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md @@ -26,7 +26,7 @@ C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScrip var clearing = browser.storage.<storageType>.clear() ``` -`<storageType> `sera l'un des types de stockage accessibles en écriture — {{WebExtAPIRef("storage.sync")}} or {{WebExtAPIRef("storage.local")}}. +`<storageType>` sera l'un des types de stockage accessibles en écriture — {{WebExtAPIRef("storage.sync")}} or {{WebExtAPIRef("storage.local")}}. ### Paramètres diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md index c6b6c409c3..ace90d2a9c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md @@ -30,9 +30,9 @@ var detecting = browser.tabs.detectLanguage( ### Paramètres -- `tabId `{{optional_inline}} +- `tabId` {{optional_inline}} - : `integer`. Par défaut à l'onglet actif de la fenêtre en cours. -- `callback `{{optional_inline}} +- `callback` {{optional_inline}} - : `function`. Actuellement, si un `tabId` est spécifié, cette méthode utilise ce rappel pour renvoyer les résultats au lieu de renvoyer une promesse. Le rappel reçoit comme seul paramètre d'entrée une chaîne de caractères contenant le code de langue détecté `en` ou `fr`. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md index cf707654b2..bdc985eba3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/executeScript Injecte du code JavaScript dans une page. -Vous pouvez injecter du code dans des pages dont l'URL peut être exprimée à l'aide d'un [modèle de correspondance ](/fr/Add-ons/WebExtensions/Match_patterns): son schéma doit être "http", "https", "file", "ftp". Pour ce faire, vous devez disposer de la permission pour l'URL de la page, soit explicitement en tant que [permission d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), ou via la [permission activeTab](/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission). +Vous pouvez injecter du code dans des pages dont l'URL peut être exprimée à l'aide d'un [modèle de correspondance](/fr/Add-ons/WebExtensions/Match_patterns) : son schéma doit être "http", "https", "file", "ftp". Pour ce faire, vous devez disposer de la permission pour l'URL de la page, soit explicitement en tant que [permission d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), ou via la [permission activeTab](/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission). Vous pouvez également injecter du code dans des pages empaquetées avec votre propre extension : @@ -57,7 +57,7 @@ var executing = browser.tabs.executeScript( - `allFrames` {{optional_inline}} - : `boolean`. Si `true`, le code sera injecté dans toutes les cadres de la page courante. Si `true` et `frameId` est défini, alors il y aura une erreur, frameId et allFrames sont mutuellement exclusifs. Si c'est `false`, le code n'est injecté que dans le cadre supérieur. La valeur par défaut est `false`. - - `code `{{optional_inline}} + - `code` {{optional_inline}} - : `string`. Code à injecter, sous la forme d’une chaine de texte. **Attention :** n’utilisez pas cette propriété pour interpoler des données non sûres dans JavaScript, car cela pourrait introduire une faille de sécurité. - `file` {{optional_inline}} - : `string`. Chemin d’accès à un fichier contenant le code à injecter. Dans Firefox, les URL relatives ne commençant pas à la racine de l'extension sont résolues par rapport à l'URL de la page en cours. Dans Chrome, ces URL sont résolues par rapport à l’URL de base de l’extension. Pour travailler avec plusieurs navigateurs, vous pouvez spécifier le chemin comme une URL relative, en commençant à la racine de l’extension, comme ceci : `"/path/to/script.js"`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md index f394f3ab94..459ed9321c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md @@ -41,7 +41,7 @@ browser.tabs.moveInSuccession([1, 3, 5, 7, 2, 9], 4, {insert:true}) - : `object`. - `append` {{optional_inline}} - - : `boolean`. Détermine s'il faut déplacer les onglets dans les `tabIds` avant ou après `tabId `dans la succession. Si `false`, les onglets sont déplacés avant `tabId`, si `true`, les onglets sont déplacés après `tabId`. Par défaut à `false`. + - : `boolean`. Détermine s'il faut déplacer les onglets dans les `tabIds` avant ou après `tabId` dans la succession. Si `false`, les onglets sont déplacés avant `tabId`, si `true`, les onglets sont déplacés après `tabId`. Par défaut à `false`. - `insert` {{optional_inline}} - : `boolean`. Détermine s'il faut lier les prédécesseurs ou successeurs actuels (selon `options.append`) de `tabId`à l'autre côté de la chaîne après son ajout ou son ajout. Si true, l'un des événements suivants se produit : si `options.append` est `false`, le premier onglet du tableau est défini comme successeur de tout prédécesseur actuel de `tabId`; Si `options.append` est `true`, le successeur actuel de tabId est défini comme le successeur du dernier onglet du tableau. La valeur par défaut est `false`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md index 71f55b5e84..3b30028778 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md @@ -30,13 +30,13 @@ Pour définir les en-têtes et les pieds de page, vous pouvez inclure certains c Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivantes : -- `edgeBottom `{{optional_inline}} +- `edgeBottom` {{optional_inline}} - : `number`. L'espacement entre le bas des pieds et le bord inférieur du papier (pouces). Par défaut : 0. -- `edgeLeft `{{optional_inline}} +- `edgeLeft` {{optional_inline}} - : `number`. L'espacement entre l'en-tête / pied de page gauche et le bord gauche du papier (pouces). Par défaut : 0 -- `edgeRight `{{optional_inline}} +- `edgeRight` {{optional_inline}} - : `number`. L'espacement entre l'en-tête / pied droit et le bord gauche du papier (pouces). Par défaut : 0. -- `edgeTop `{{optional_inline}} +- `edgeTop` {{optional_inline}} - : `number`. L'espacement entre le haut des en-têtes et le bord supérieur du papier (pouces). Par défaut : 0 - `footerCenter` {{optional_inline}} - : `string`. Le texte du pied de page central de la page. Défaut : ''. @@ -50,17 +50,17 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - : `string`. Le texte de l'en-tête gauche de la page. Par défaut : '\&T'. - `headerRight` {{optional_inline}} - : `string`. Le texte de l'en-tête de la page. Par défaut : '\&U'. -- `marginBottom `{{optional_inline}} +- `marginBottom` {{optional_inline}} - : `number`. La marge entre le contenu de la page et le bord inférieur du papier (pouces). Par défaut : 0.5. -- `marginLeft `{{optional_inline}} +- `marginLeft` {{optional_inline}} - : `number`. La marge entre le contenu de la page et le bord gauche du papier (pouces). Par défaut : 0.5. -- `marginRight `{{optional_inline}} +- `marginRight` {{optional_inline}} - : `number`. La marge entre le contenu de la page et le bord droit du papier (en pouces). Par défaut : 0.5. -- `marginTop `{{optional_inline}} +- `marginTop` {{optional_inline}} - : `number`. La marge entre le contenu de la page et le bord supérieur du papier (pouces). Par défaut : 0.5. -- `orientation `{{optional_inline}} +- `orientation` {{optional_inline}} - : `integer`. Orientation de la page: 0 signifie "portrait", 1 signifie "paysage". Par défaut : 0. -- `paperHeight `{{optional_inline}} +- `paperHeight` {{optional_inline}} - : `number`. La hauteur du papier dans les unités de format papier. Par défaut : 11.0. - `paperSizeUnit` {{optional_inline}} - : `integer`. L'unité de format de papier: 0 = pouces, 1 = millimètres. Par défaut : 0. diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md index e380822b15..cde0d97123 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md @@ -14,7 +14,7 @@ tags: - tabs translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage --- -{{AddonSidebar()}}Envoi un message unique depuis le script d'arrière plan d'extension (ou autre scripts accrédité, comme les scripts popup ou les scripts de page d'options) vers n'importe quel [script de contenu ](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)concerné par l'extension et qui s'execute dans l'onglet spécifié.Ce message sera reçu dans script de contenu par n'importe quel gestionnaire d'évènements à l'écoute de l'évènement +{{AddonSidebar()}}Envoi un message unique depuis le script d'arrière plan d'extension (ou autre scripts accrédité, comme les scripts popup ou les scripts de page d'options) vers n'importe quel [script de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) concerné par l'extension et qui s'execute dans l'onglet spécifié.Ce message sera reçu dans script de contenu par n'importe quel gestionnaire d'évènements à l'écoute de l'évènement {{WebExtAPIRef("runtime.onMessage")}}. Les gestionnaires d'évènements peuvent optionellement envoyé une réponse en retour au script d'arrière plan en utilisant l'argument `sendResponse`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md index d1f3a1d716..d6c404734e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/theme/onUpdated L'événement se déclenche lorsqu'un thème fourni en tant qu'extension de navigateur est appliqué ou supprimé, plus précisément : - Quand un [thème statique](/fr/Add-ons/Themes/Theme_concepts#Static_themes) est installé -- Quand un [thème dynamique ](/fr/Add-ons/WebExtensions/API/theme)appelle [`theme.update()`](/fr/Add-ons/WebExtensions/API/theme/update) ou [`theme.reset()`](/fr/Add-ons/WebExtensions/API/theme/update) +- Quand un [thème dynamique](/fr/Add-ons/WebExtensions/API/theme) appelle [`theme.update()`](/fr/Add-ons/WebExtensions/API/theme/update) ou [`theme.reset()`](/fr/Add-ons/WebExtensions/API/theme/update) - Quand un thème est désinstallé Notez que cet événement n'est pas déclenché pour les thèmes intégrés. diff --git a/files/fr/web/accessibility/aria/index.md b/files/fr/web/accessibility/aria/index.md index 24b46f7564..3ca0044907 100644 --- a/files/fr/web/accessibility/aria/index.md +++ b/files/fr/web/accessibility/aria/index.md @@ -9,7 +9,7 @@ tags: translation_of: Web/Accessibility/ARIA original_slug: Accessibilité/ARIA --- -_Accessible Rich Internet Applications_ **(ARIA)** (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles. +_Accessible Rich Internet Applications_ **(ARIA)** (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble d'attributs qui définissent comment rendre le contenu et les applications web accessibles. ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les _widgets_ JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc. diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_earth.png b/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_earth.png Binary files differdeleted file mode 100644 index 21d5fe5c20..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_earth.png +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_moon.png b/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_moon.png Binary files differdeleted file mode 100644 index 440da59034..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_moon.png +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_sun.png b/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_sun.png Binary files differdeleted file mode 100644 index 016c9add25..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_sun.png +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/capitan_meadows_yosemite_national_park.jpg b/files/fr/web/api/canvas_api/tutorial/basic_animations/capitan_meadows_yosemite_national_park.jpg Binary files differdeleted file mode 100644 index e7ba963f64..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/capitan_meadows_yosemite_national_park.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png b/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png Binary files differdeleted file mode 100644 index 01d35419b2..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png b/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png Binary files differdeleted file mode 100644 index cd936a30a1..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png Binary files differdeleted file mode 100644 index 091505b1b9..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg Binary files differdeleted file mode 100644 index 5790de338d..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg Binary files differdeleted file mode 100644 index 0267621028..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png Binary files differdeleted file mode 100644 index 3258cf3684..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg Binary files differdeleted file mode 100644 index 55f1cee446..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg Binary files differdeleted file mode 100644 index 711911f12c..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg Binary files differdeleted file mode 100644 index 5b4bb37ac1..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg Binary files differdeleted file mode 100644 index 86db3eb243..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg Binary files differdeleted file mode 100644 index 01f9e44f3d..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg Binary files differdeleted file mode 100644 index fbec8abd8c..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg Binary files differdeleted file mode 100644 index 719a55117f..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg Binary files differdeleted file mode 100644 index 46d1afa954..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg +++ /dev/null diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg Binary files differdeleted file mode 100644 index 0b4b45c4fa..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg +++ /dev/null diff --git a/files/fr/web/api/console/dir/index.md b/files/fr/web/api/console/dir/index.md index c63a997ea5..638d28ac5c 100644 --- a/files/fr/web/api/console/dir/index.md +++ b/files/fr/web/api/console/dir/index.md @@ -1,47 +1,39 @@ --- -title: Console.dir() -slug: Web/API/Console/dir -tags: - - API - - DOM - - Développement - - Méthodes - - Web - - console - - débogage +title: console.dir() +slug: Web/API/console/dir translation_of: Web/API/Console/dir +browser-compat: api.console.dir --- {{APIRef("Console API")}} -Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants. +La méthode **`console.dir()`** affiche une liste interactive des propriétés de l'objet JavaScript passé en argument. La sortie est présentée comme une liste hiérarchique avec des triangles qui permettent de développer l'arborescence de l'objet et de voir le contenu des objets descendants. -En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet. +Autrement dit, `console.dir()` permet de voir l'ensemble des propriétés d'un objet JavaScript dans la console. {{AvailableInWorkers}} - + ## Syntaxe - console.dir(object); +```js +console.dir(object); +``` -## Paramètres +### Paramètres - `object` - - : Un objet Javascript qui contient les propriétés qui doivent être affichées. + - : Un objet JavaScript dont on souhaite afficher les propriétés dans la console. -## Spécification +## Spécifications -| Spécification | Statut | Commentaire | -| -------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("Console API", "#dir", "console.dir()")}} | {{Spec2("Console API")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("api.Console.dir")}} +{{Compat}} ## Voir aussi -- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) -- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) -- [Chrome Console API reference](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject) +- [Microsoft Docs : référence de l'API Console](https://docs.microsoft.com/fr-fr/microsoft-edge/devtools-guide-chromium/console/api#dir) +- [Chrome : référence de l'API Console (en anglais)](https://developer.chrome.com/docs/devtools/console/api/#dir) diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md index 92c383e65d..787f2a1d16 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.md +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/DOMContentLoaded_event --- {{APIRef}} -L'évènement **`DOMContentLoaded`** est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document. +L'évènement **`DOMContentLoaded`** est déclenché quand le document HTML initial est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document. <table class="properties"> <tbody> @@ -28,9 +28,9 @@ L'évènement **`DOMContentLoaded`** est déclenché quand le document HTML init </tbody> </table> -Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord `load` là où `DOMContentLoaded` serait plus approprié. +Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tort `load` là où `DOMContentLoaded` serait plus approprié. -Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code [(en) JavaScript asynchrone](/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [(en) optimiser le chargement des feuilles de styles](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML. +Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code [(en) JavaScript asynchrone](/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [(en) optimiser le chargement des feuilles de styles](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafic du document principal HTML. ## Exemples diff --git a/files/fr/web/api/eventsource/onopen/index.md b/files/fr/web/api/eventsource/open_event/index.md index 8cd75bbcb1..44b9be5821 100644 --- a/files/fr/web/api/eventsource/onopen/index.md +++ b/files/fr/web/api/eventsource/open_event/index.md @@ -1,6 +1,6 @@ --- title: EventSource.onopen -slug: Web/API/EventSource/onopen +slug: Web/API/EventSource/open_event tags: - API - Event Handler @@ -8,6 +8,7 @@ tags: - Propriété - Reference translation_of: Web/API/EventSource/onopen +original_slug: Web/API/EventSource/onopen --- {{APIRef('Server Sent Events')}} diff --git a/files/fr/web/api/file/name/index.md b/files/fr/web/api/file/name/index.md index bf3e5a69ff..45f8d8ff51 100644 --- a/files/fr/web/api/file/name/index.md +++ b/files/fr/web/api/file/name/index.md @@ -1,37 +1,67 @@ --- -title: File.fileName +title: File.name slug: Web/API/File/name -tags: - - API - - DOM - - Fichier - - Nom - - Propriétés -translation_of: Web/API/File/fileName +translation_of: Web/API/File/name original_slug: Web/API/File/fileName +browser-compat: api.File.name --- -{{APIRef("File API")}}{{non-standard_header}} +{{APIRef("File API")}} -{{obsolete_header(7.0)}} +Cette propriété renvoie le nom du fichier représenté par l'objet [`File`](/fr/docs/Web/API/File) courant. Pour des raisons de sécurité, le chemin du fichier est exclu de cette propriété. -## Résumé +## Syntaxe -Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété. +```js +let name = file.name; +``` -> **Note :** Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place. +## Valeur -## Syntaxe +Une chaîne de caractères qui contient le nom du fichier sans le chemin, par exemple `"Mon compte-rendu.md"`. - var name = instanceOfFile.fileName +## Exemple -## Valeur +### HTML + +```html +<input type="file" multiple onchange="processSelectedFiles(this)"> + +<div id="output"></div> +``` + +### JavaScript + +```js +const output = document.querySelector("#output"); +function processSelectedFiles(fileInput) { + let files = fileInput.files; + output.textContent = "Liste des fichiers sélectionnés :"; + + for (let i = 0; i < files.length; i++) { + output.textContent += `\nNom du fichier : ${files[i].name}`; + } +} +``` + +```css hidden +#output{ + padding: 0.5em 0; + white-space: pre; +} +``` + +### Résultat + +{{EmbedLiveSample('', 300, 150)}} + +## Spécifications -Une chaîne de caractères. +{{Specifications}} -## Specification +## Compatibilité des navigateurs -Ne fait partie d'aucune spécification. +{{Compat}} ## Voir aussi -- {{domxref("File.name")}} +- [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/Using_files_from_web_applications) diff --git a/files/fr/web/api/htmlmediaelement/audiotracks/index.md b/files/fr/web/api/htmlmediaelement/audiotracks/index.md new file mode 100644 index 0000000000..9d1984f505 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/audiotracks/index.md @@ -0,0 +1,63 @@ +--- +title: HTMLMediaElement.audioTracks +slug: Web/API/HTMLMediaElement/audioTracks +browser-compat: api.HTMLMediaElement.audioTracks +translation_of: Web/API/HTMLMediaElement/audioTracks +--- +{{APIRef("HTML DOM")}} + +La propriété **`audioTracks`** est une propriété en lecture seule rattachée à l'interface [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) qui renvoie un objet [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList) répertoriant tous les objets [`AudioTrack`](/fr/docs/Web/API/AudioTrack) représentant les pistes audio de l'élément multimédia. + +L'élément multimédia peut être soit un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou un élément [`<video>`](/fr/docs/Web/HTML/Element/video). + +La liste renvoyée est dynamique ; c'est-à-dire que lorsque des pistes sont ajoutées et supprimées de l'élément multimédia, le contenu de la liste change dynamiquement. Une fois que vous avez une référence à la liste, vous pouvez surveiller les modifications pour détecter l'ajout de nouvelles pistes audio ou la suppression de pistes existantes. Vous pouvez consulter les [gestionnaires d'évènements](/fr/docs/Web/API/AudioTrackList#évènements) associés à [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList) pour en savoir plus sur les modifications apportées à la liste des pistes d'un élément multimédia. + +## Syntaxe + +```js +let audioTracks = mediaElement.audioTracks; +``` + +### Valeur + +Un objet [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList) représente la liste des pistes audio incluses dans l'élément multimédia. La liste des pistes est accessible en notation matricielle ou en utilisant la méthode [`getTrackById()`](/fr/docs/Web/API/AudioTrackList/getTrackById) de l'objet. + +Chaque piste est représentée par un objet [`AudioTrack`](/fr/docs/Web/API/AudioTrack) qui fournit des informations sur la piste. + +## Exemples + +Dans cet exemple, toutes les pistes audio d'un élément donné sont coupées. + +### HTML + +Le fragment HTML contient l'élément média en question. + +```html +<video id="video" src="somevideo.mp4"></video> +``` + +### JavaScript + +Le code JavaScript gère la mise en sourdine des pistes audio de l'élément vidéo. + +```js +let video = document.getElementById("video"); + +for (let i = 0; i < video.audioTracks.length; i += 1) { + video.audioTracks[i].enabled = false; +} +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- L'interface qui porte cette propriété, [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement). +- [`<audio>`](/fr/docs/Web/HTML/Element/audio) et [`<video>`](/fr/docs/Web/HTML/Element/video) +- [`AudioTrack`](/fr/docs/Web/API/AudioTrack) et [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList) diff --git a/files/fr/web/api/htmlmediaelement/buffered/index.md b/files/fr/web/api/htmlmediaelement/buffered/index.md new file mode 100644 index 0000000000..f23457ac90 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/buffered/index.md @@ -0,0 +1,40 @@ +--- +title: HTMLMediaElement.buffered +slug: Web/API/HTMLMediaElement/buffered +browser-compat: api.HTMLMediaElement.buffered +translation_of: Web/API/HTMLMediaElement/buffered +--- +{{APIRef("HTML DOM")}} + +La propriété **`buffered`** est une propriété en lecture seule rattachée à l'interface [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) et qui renvoie un nouvel [objet `TimeRanges` normalisé](/fr/docs/Web/API/TimeRanges#objets_timeranges_normalisés) statique représentant les plages de la ressource média, s'il y en a, que l'agent utilisateur a mises en mémoire tampon au moment de l'accès à la propriété `buffered`. + +> **Note :** Cette fonctionnalité n'est pas disponible au niveau des [Web Workers](/fr/docs/Web/API/Web_Workers_API). + +## Syntaxe + +```js +let timeRange = audioObject.buffered +``` + +### Valeur + +Un nouvel [objet `TimeRanges` normalisé](/fr/docs/Web/API/TimeRanges#objets_timeranges_normalisés) statique qui représente les plages de la ressource média, s'il y en a, que l'agent utilisateur a mises en mémoire tampon au moment de l'accès à la propriété `buffered`. + +## Exemple + +```js +let obj = document.createElement('video'); +console.log(obj.buffered); // TimeRanges { length: 0 } +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- L'interface qui porte cette propriété, [HTMLMediaElement](/fr/docs/Web/API/HTMLMediaElement). diff --git a/files/fr/web/api/htmlmediaelement/mscleareffects/index.md b/files/fr/web/api/htmlmediaelement/mscleareffects/index.md new file mode 100644 index 0000000000..3ccc0ff537 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/mscleareffects/index.md @@ -0,0 +1,31 @@ +--- +title: HTMLMediaElement.msClearEffects +slug: Web/API/HTMLMediaElement/msClearEffects +translation_of: Web/API/HTMLMediaElement/msClearEffects +--- +{{APIRef("HTMLMediaElement")}} + +{{Non-standard_header()}} + +La méthode **`msClearEffects`** de l'interface [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) est une méthode propriétaire spécifique à Internet Explorer et Microsoft Edge. + +**`msClearEffects`** efface tous les effets du canal de rendu. + +### Syntaxe + +```js +HTMLMediaElement.msClearEffects(); +``` + +### Paramètres + +Cette méthode ne prend pas de paramètres. + +### Valeur retournée + +Cette méthode ne retourne pas de valeur. + +## Voir aussi + +- [L'API Touch](/fr/docs/Web/API/Touch) +- [Extensions d'API Microsoft](/fr/docs/Web/API/Microsoft_Extensions) diff --git a/files/fr/web/api/url/searchparams/index.md b/files/fr/web/api/url/searchparams/index.md index 66cc2a85bf..64f622e47f 100644 --- a/files/fr/web/api/url/searchparams/index.md +++ b/files/fr/web/api/url/searchparams/index.md @@ -10,7 +10,7 @@ tags: - URLSearchParameters translation_of: Web/API/URL/searchParams --- -{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourneun objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodésde la requête GET contenu dans l'URL. +{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés de la requête GET contenue dans l'URL. {{AvailableInWorkers}} diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md index 0a0123b4e3..4ccfdeedeb 100644 --- a/files/fr/web/css/-moz-image-rect/index.md +++ b/files/fr/web/css/-moz-image-rect/index.md @@ -1,113 +1,108 @@ --- title: '-moz-image-rect' slug: Web/CSS/-moz-image-rect -tags: - - CSS - - Fonction - - Non-standard - - Reference translation_of: Web/CSS/-moz-image-rect +browser-compat: css.types.-moz-image-rect --- {{Non-standard_header}}{{CSSRef}} -La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs _sprites_ à différentes fins, ce qui permet de diminuer le nombre de transfert réseau. - -Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à `-moz-image-rect`, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS. - -La syntaxe de cette propriété est similaire à la fonction [`rect()`](</fr/docs/Web/CSS/shape#La_fonction_rect()>) qui génère une valeur de type {{cssxref("<shape>")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image. +La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à [`background-image`](/fr/docs/Web/CSS/background-image)). On peut ainsi utiliser une image qui regroupe plusieurs _sprites_ à différentes fins, ce qui permet de diminuer le nombre de transfert réseau. ## Syntaxe - -moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left); +```css +-moz-image-rect(url(), top, right, bottom, left); +``` ### Valeurs -- {{cssxref("<uri>")}} +- [`url()`](/fr/docs/Web/CSS/url()) - : L'URI de l'image dont on veut obtenir une portion. - `top` - - : La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. + - : La coordonnée du bord haut de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. - `right` - - : La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. + - : La coordonnée du bord droit de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. - `bottom` - - : La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. + - : La coordonnée du bord inférieur de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. - `left` - - : La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. + - : La coordonnée du bord gauche de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche. + +## Description -### Syntaxe formelle +Cette propriété fonctionne de façon analogue à [`-moz-image-region`](/fr/docs/Web/CSS/-moz-image-region) qui peut être utilisée pour déterminer la partie d'une image utilisée pour [`list-style-image`](/fr/docs/Web/CSS/list-style-image) qui met en forme les puces d'une liste. Grâce à `-moz-image-rect`, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS. -{{CSSSyntax}} +La syntaxe de cette propriété est similaire à la fonction [`rect()`](/fr/docs/Web/CSS/shape#syntaxe) qui génère une valeur de type [`<shape>`](/fr/docs/Web/CSS/shape). Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image. ## Exemples -Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs. +Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments [`<div>`](/fr/docs/Web/HTML/Element/div). Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs. + +### HTML + +```html +<div id="container" onclick="rotate()"> + <div id="box1" style="left:0px; top:0px;">En haut à gauche</div> + <div id="box2" style="left:133px; top:0px;">En haut à droite</div> + <div id="box3" style="left:0px; top:136px;">En bas à gauche</div> + <div id="box4" style="left:133px; top:136px;">En bas à droite</div> +</div> +``` ### CSS ```css #container { - width:267px; - height:272px; - top:100px; - left:100px; - position:absolute; - font-size:16px; - text-shadow:white 0px 0px 6px; - text-align:center; + width: 267px; + height: 272px; + top: 100px; + left: 100px; + position: absolute; + font-size: 16px; + text-shadow: white 0px 0px 6px; + text-align: center; } #box1 { - background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); - width:133px; - height:136px; - position:absolute; + background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%); + width: 133px; + height: 136px; + position: absolute; } #box2 { - background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); - width:133px; - height:136px; - position:absolute; + background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%); + width: 133px; + height: 136px; + position: absolute; } #box3 { - background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); - width:133px; - height:136px; - position:absolute; + background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%); + width: 133px; + height: 136px; + position: absolute; } #box4 { - background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); - width:133px; - height:136px; - position:absolute; + background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%); + width: 133px; + height: 136px; + position: absolute; } ``` -### HTML - -```html -<div id="container" onclick="rotate()"> - <div id="box1" style="left:0px;top:0px;">Top left</div> - <div id="box2" style="left:133px;top:0px;">Top right</div> - <div id="box3" style="left:0px;top:136px;">Bottom left</div> - <div id="box4" style="left:133px;top:136px;">Bottom right</div> -</div> -``` - ### JavaScript ```js function rotate() { var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image"); - // Now that we've saved the last one, start rotating + // Récupérer le style du dernier élément, puis faire tourner les images for (var i=1; i<=4; i++) { var curId = "box" + i; - // Shift the background images - + // Décaler les images d'arrière-plan var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image"); document.getElementById(curId).style.backgroundImage = prevStyle; prevStyle = curStyle; @@ -115,12 +110,21 @@ function rotate() { } ``` -Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité. +Dans ce script, on utilise la méthode [`window.getComputedStyle()`](/fr/docs/Web/API/Window/getComputedStyle) afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de [`background-image`](/fr/docs/Web/CSS/background-image) d'un élément à l'autre lors du clic, on obtient l'effet souhaité. ### Résultat -{{EmbedLiveSample("Exemples","400","400")}} +{{EmbedLiveSample("","400","400")}} + +## Specifications + +Cette propriété ne fait partie d'aucun standard. ## Compatibilité des navigateurs -{{Compat("css.types.-moz-image-rect")}} +{{Compat}} + +## Voir aussi + +- [Les extensions spécifiques à Mozilla pour CSS extensions](/fr/docs/Web/CSS/Mozilla_Extensions) +- [Le module de spécification CSS sur les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) diff --git a/files/fr/web/css/@font-face/font-variant/index.md b/files/fr/web/css/@font-face/font-variant/index.md new file mode 100644 index 0000000000..326b188e53 --- /dev/null +++ b/files/fr/web/css/@font-face/font-variant/index.md @@ -0,0 +1,92 @@ +--- +title: font-variant +slug: Web/CSS/@font-face/font-variant +translation_of: Web/CSS/@font-face/font-variant +browser-compat: css.at-rules.font-face.font-variant +--- +{{CSSRef}} + +La [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) [CSS](/fr/docs/Web/CSS) **`font-variant`** permet de définir tous les paramètres typographiques pour des polices de caractères définies avec la règle [`@font-face`](/fr/docs/Web/CSS/@font-face). + +## Propriétés détaillées correspondantes + +Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes : + +- [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates) +- [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps) +- [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian) +- [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) +- [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric) + +## Syntaxe + +```css +font-variant: small-caps; +font-variant: common-ligatures small-caps; + +/* Valeurs globales */ +font-variant: inherit; +font-variant: initial; +font-variant: revert; +font-variant: unset; +``` + +### Valeurs + +- `normal` + - : Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de `normal`. Les propriétés détaillées de `font-variant` sont : [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps), [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric), [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates), [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) et [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian). +- `none` + - : Définit une valeur de `none` pour [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) et une valeur de `normal` pour les autres propriétés, leur valeur initiale. +- `<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>` + - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures). Les valeurs possibles sont : `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual` et `no-contextual`. +- `stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()` + - : Définit les mots-clés et fonctions relatifs à la propriété détaillée [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates). +- `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps` + - : Définit les mots-clés et fonctions relatifs à la propriété détaillée [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps). +- `<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero` + - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric). Les valeurs possibles sont : `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal` et `slashed-zero`. +- `<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby` + - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian). Les valeurs possibles sont : `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width` et `ruby`. + +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Utiliser la valeur `small-caps` de `font-variant` + +Le CSS suivant sélectionne une police Open Sans locale ou la télécharge, et permet d'utiliser sa propriété `small-caps`. + +```css +@font-face { + font-family: "Open Sans"; + src: local("Open Sans") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); + font-variant: small-caps; +} +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`font-display`](/fr/docs/Web/CSS/@font-face/font-display) +- [`font-family`](/fr/docs/Web/CSS/@font-face/font-family) +- [`font-weight`](/fr/docs/Web/CSS/@font-face/font-weight) +- [`font-style`](/fr/docs/Web/CSS/@font-face/font-style) +- [`font-stretch`](/fr/docs/Web/CSS/@font-face/font-stretch) +- [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings) +- [`font-variation-settings`](/fr/docs/Web/CSS/@font-face/font-variation-settings) +- [`src`](/fr/docs/Web/CSS/@font-face/src) +- Le descripteur [`unicode-range`](/fr/docs/Web/CSS/@font-face/unicode-range) diff --git a/files/fr/web/css/@font-face/unicode-range/index.md b/files/fr/web/css/@font-face/unicode-range/index.md index c034e9d9bf..aefde94540 100644 --- a/files/fr/web/css/@font-face/unicode-range/index.md +++ b/files/fr/web/css/@font-face/unicode-range/index.md @@ -1,20 +1,12 @@ --- title: unicode-range slug: Web/CSS/@font-face/unicode-range -tags: - - CSS - - Descripteur - - Experimental - - Reference translation_of: Web/CSS/@font-face/unicode-range +browser-compat: css.at-rules.font-face.unicode-range --- {{cssref}} -Le descripteur **`unicode-range`**, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée. - -Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées. - -{{cssinfo}} +Le descripteur **`unicode-range`**, associé à la règle @ [`@font-face`](/fr/docs/Web/CSS/@font-face), définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée. ## Syntaxe @@ -29,31 +21,45 @@ unicode-range: U+0025-00FF, U+4??; /* plusieurs valeurs */ ### Valeurs -Une valeur de type `<unicode-range>` peut se présenter de trois façons différentes : +Une valeur de type `<unicode-range>` peut se présenter de trois façons différentes : -- un seul point de code +- Un seul point de code - - Ex : `U+26` + - : Par exemple `U+26` -- un intervalle spécifique de points de code +- Un intervalle spécifique de points de code - - Ex : `U+0025-00FF` indique que l'intervalle contient tous les caractères contenus entre les points de code `U+0025` et `U+00FF` + - : Par exemple `U+0025-00FF` indique que l'intervalle contient tous les caractères contenus entre les points de code `U+0025` et `U+00FF` -- un intervalle de substitution indiqué par `?` +- Un intervalle de substitution indiqué par `?` - - Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, `U+4??` signifie « tous les caractères contenus dans l'intervalle entre les points de code `U+400` et `U+4FF`). + - : Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, `U+4??` signifie « tous les caractères contenus dans l'intervalle entre les points de code `U+400` et `U+4FF` ». + +## Description + +Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (_Helvetica_) et une police avec des empattements (_Times New Roman_) pour l'esperluette. +Dans cet exemple, on crée un élément HTML [`<div>`](/fr/docs/Web/HTML/Element/div) pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (_Helvetica_) et une police avec des empattements (_Times New Roman_) pour l'esperluette. + +### HTML + +```html +<div>Me & You = Us</div> +``` ### CSS -Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style. +Dans la feuille de style CSS, on définit une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) et appliquer une autre règle sur cet élément, mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style. ```css @font-face { @@ -68,26 +74,26 @@ div { } ``` -### HTML +### Résultat -```html -<div>Me & You = Us</div> -``` - -### Résultat de référence (image statique) - - - -### Résultat du navigateur - -{{EmbedLiveSample("Exemples", 500,104)}} +{{EmbedLiveSample("", 500,104)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.at-rules.font-face.unicode-range")}} +{{Compat}} + +## Voir aussi + +- [`font-display`](/fr/docs/Web/CSS/@font-face/font-display) +- [`font-family`](/fr/docs/Web/CSS/@font-face/font-family) +- [`font-stretch`](/fr/docs/Web/CSS/@font-face/font-stretch) +- [`font-style`](/fr/docs/Web/CSS/@font-face/font-style) +- [`font-weight`](/fr/docs/Web/CSS/@font-face/font-weight) +- [`font-variant`](/fr/docs/Web/CSS/@font-face/font-variant) +- [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings) +- [`font-variation-settings`](/fr/docs/Web/CSS/@font-face/font-variation-settings) +- [`src`](/fr/docs/Web/CSS/@font-face/src) diff --git a/files/fr/web/css/_colon_paused/index.md b/files/fr/web/css/_colon_paused/index.md new file mode 100644 index 0000000000..0648853b73 --- /dev/null +++ b/files/fr/web/css/_colon_paused/index.md @@ -0,0 +1,43 @@ +--- +title: ':paused' +slug: Web/CSS/:paused +translation_of: Web/CSS/:paused +browser-compat: css.selectors.paused +--- +{{CSSRef}}{{SeeCompatTable}} + +Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:paused`** est une pseudo-classe d'état d'une ressource audio, vidéo ou autre type de ressource capable d'être « lue » ou « mise en pause », qui permet de cibler un élément lorsqu'il est « mis en pause ». + +`:paused` correspond à tout élément non activé ou mis en pause explicitement par la personne utilisant la ressource. + +```css +:paused { + +} +``` + +## Syntaxe + +{{csssyntax}} + +## Exemples + +### CSS + +```css +:paused { + border: 5px solid orange; +} +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`:playing`](/fr/docs/Web/CSS/:playing) diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md index 1b7167364e..e74d283b5e 100644 --- a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md +++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md @@ -1,16 +1,12 @@ --- title: '::-moz-range-progress' slug: Web/CSS/::-moz-range-progress -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/::-moz-range-progress +browser-compat: css.selectors.-moz-range-progress --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément {{HTMLElement("input")}} de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur. +Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur. > **Note :** Si `::-moz-range-progress` est utilisé sur autre chose qu'un élément `<input type="range">`, il n'aura aucun effet. @@ -20,28 +16,28 @@ Le pseudo-élément **`::-moz-range-progress`** représente la portion de la pis ## Exemples +### HTML + +```html +<input type="range" min="0" max="100" step="5" value="50"/> +``` + ### CSS ```css input[type=range]::-moz-range-progress { - background-color: green; + background-color: green; height: 1em; } ``` -### HTML - -```html -<input type="range" min="0" max="100" step="5" value="50"/> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 300, 50)}} +{{EmbedLiveSample("", 300, 50)}} -Une barre de progression mise en forme avec cette déclaration devrait ressembler à : +Une barre de progression mise en forme avec cette déclaration devrait ressembler à : - + ## Spécifications @@ -49,15 +45,15 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla ## Compatibilité des navigateurs -{{Compat("css.selectors.-moz-range-progress")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` : +- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` : - - {{cssxref("::-moz-range-thumb")}} - - {{cssxref("::-moz-range-track")}} + - [`::-moz-range-thumb`](/fr/docs/Web/CSS/::-moz-range-thumb) + - [`::-moz-range-track`](/fr/docs/Web/CSS/::-moz-range-track) -- {{cssxref("::-ms-fill-upper")}} pris en charge par Internet Explorer et Ege -- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) -- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) +- [`::-ms-fill-upper`](/fr/docs/Web/CSS/::-ms-fill-upper) pris en charge par Internet Explorer +- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) +- [QuirksMode : Mettre en forme les pistes et curseurs (en anglais)](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md index d1a2f98238..b5dd9b7d45 100644 --- a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md +++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md @@ -1,18 +1,14 @@ --- title: '::-moz-range-thumb' slug: Web/CSS/::-moz-range-thumb -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference +browser-compat: css.selectors.-moz-range-thumb translation_of: Web/CSS/::-moz-range-thumb --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type `range` et qui permet de modifier la valeur numérique associée. +Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` et qui permet de modifier la valeur numérique associée. -> **Note :** Utiliser `::-moz-range-thumb` avec un autre élément que `<input type="range">` n'aura aucun effet. +> **Note :** Utiliser `::-moz-range-thumb` avec un autre élément que `<input type="range">` n'aura aucun effet. ## Syntaxe @@ -20,6 +16,12 @@ Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se dépl ## Exemples +### HTML + +```html +<input type="range" min="0" max="100" step="5" value="50"/> +``` + ### CSS ```css @@ -28,19 +30,13 @@ input[type=range]::-moz-range-thumb { } ``` -### HTML - -```html -<input type="range" min="0" max="100" step="5" value="50"/> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 300, 50)}} +{{EmbedLiveSample("", 300, 50)}} -Une barre de progression mise en forme avec ces règles devrait ressembler à : +Une barre de progression mise en forme avec ces règles devrait ressembler à : - + ## Spécifications @@ -48,19 +44,19 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla ## Compatibilité des navigateurs -{{Compat("css.selectors.-moz-range-thumb")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` : +- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` : - - {{cssxref("::-moz-range-track")}} - - {{cssxref("::-moz-range-progress")}} + - [`::-moz-range-track`](/fr/docs/Web/CSS/::-moz-range-track) + - [`::-moz-range-progress`](/fr/docs/Web/CSS/::-moz-range-progress) -- Les pseudo-éléments utilisés par les autres navigateurs : +- Les pseudo-éléments utilisés par les autres navigateurs : - - {{cssxref("::-webkit-slider-thumb")}} pour WebKit/Blink (Safari, Chrome et Opera). - - {{cssxref("::-ms-thumb")}} pour Internet Explorer/Edge. + - [`::-webkit-slider-thumb`](/fr/docs/Web/CSS/::-webkit-slider-thumb) pour WebKit/Blink (Safari, Chrome et Opera). + - [`::-ms-thumb`](/fr/docs/Web/CSS/::-ms-thumb) pour Internet Explorer/Edge. -- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) -- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) +- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) +- [QuirksMode : Mettre en forme les pistes et curseurs (en anglais)](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) diff --git a/files/fr/web/css/_doublecolon_-moz-range-track/index.md b/files/fr/web/css/_doublecolon_-moz-range-track/index.md index 440c9bde5e..d529f072d6 100644 --- a/files/fr/web/css/_doublecolon_-moz-range-track/index.md +++ b/files/fr/web/css/_doublecolon_-moz-range-track/index.md @@ -1,16 +1,12 @@ --- title: '::-moz-range-track' slug: Web/CSS/::-moz-range-track -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference +browser-compat: css.selectors.-moz-range-track translation_of: Web/CSS/::-moz-range-track --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type `range`. +Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spécifique à Mozilla et représente la piste d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`. > **Note :** `::-moz-range-track` n'aura aucun effet s'il est utilisé sur autre chose qu'un élément `<input type="range">`. @@ -20,6 +16,12 @@ Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spsécifiqu ## Exemples +### HTML + +```html +<input type="range" min="0" max="100" step="5" value="50"/> +``` + ### CSS ```css @@ -28,19 +30,13 @@ input[type=range]::-moz-range-track { } ``` -### HTML - -```html -<input type="range" min="0" max="100" step="5" value="50"/> -``` - ### Résultat -{{EmbedLiveSample("Exemples", 300, 50)}} +{{EmbedLiveSample("", 300, 50)}} -Une barre de progression mise en forme de cette façon devrait ressembler à : +Une barre de progression mise en forme de cette façon devrait ressembler à : - + ## Spécifications @@ -48,18 +44,18 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla ## Compatibilité des navigateurs -{{Compat("css.selectors.-moz-range-track")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` : +- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` : - - {{cssxref("::-moz-range-thumb")}} qui représente le curseur qui se déplace le long de la piste. - - {{cssxref("::-moz-range-progress")}} qui représente la partie inférieure de la piste (ce qui est déjà « couvert »). + - [`::-moz-range-thumb`](/fr/docs/Web/CSS/::-moz-range-thumb) qui représente le curseur qui se déplace le long de la piste. + - [`::-moz-range-progress`](/fr/docs/Web/CSS/::-moz-range-progress) qui représente la partie inférieure de la piste (ce qui est déjà « couvert »). -- Les pseudo-éléments utilisés par les autres navigateurs : +- Les pseudo-éléments utilisés par les autres navigateurs : - - {{cssxref("::-webkit-slider-runnable-track")}} pour WebKit/Blink (Safari, Chrome et Opera). - - {{cssxref("::-ms-track")}} pour Internet Explorer/Edge. + - [`::-webkit-slider-runnable-track`](/fr/docs/Web/CSS/::-webkit-slider-runnable-track) pour WebKit/Blink (Safari, Chrome et Opera). + - [`::-ms-track`](/fr/docs/Web/CSS/::-ms-track) pour Internet Explorer/Edge. -- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) +- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md index ac3b173d3c..ca9616fa6a 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md @@ -1,18 +1,14 @@ --- title: '::-webkit-progress-inner-element' slug: Web/CSS/::-webkit-progress-inner-element -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference +browser-compat: css.selectors.-webkit-progress-inner-element translation_of: Web/CSS/::-webkit-progress-inner-element --- {{CSSRef}}{{Non-standard_header}} -Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}. +Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément [`<progress>`](/fr/docs/Web/HTML/Element/Progress). C'est un pseudo-élément parent du pseudo-élément [`::-webkit-progress-bar`](/fr/docs/Web/CSS/::-webkit-progress-bar). -> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille `none` sur l'élément `<progress>`. +> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que [`-webkit-appearance`](/fr/docs/Web/CSS/-webkit-appearance) vaille `none` sur l'élément `<progress>`. ## Exemples @@ -36,11 +32,11 @@ progress { ### Résultat -{{EmbedLiveSample("Exemples", 200, 50)}} +{{EmbedLiveSample("", 200, 50)}} -Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon : +Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon : - + ## Spécifications @@ -48,14 +44,14 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink e ## Compatibilité des navigateurs -{{Compat("css.selectors.-webkit-progress-inner-element")}} +{{Compat}} ## Voir aussi -- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} +- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments [`<progress>`](/fr/docs/Web/HTML/Element/Progress) - - {{cssxref("::-webkit-progress-bar")}} - - {{cssxref("::-webkit-progress-value")}} + - [`::-webkit-progress-bar`](/fr/docs/Web/CSS/::-webkit-progress-bar) + - [`::-webkit-progress-value`](/fr/docs/Web/CSS/::-webkit-progress-value) -- {{cssxref("::-moz-progress-bar")}} -- {{cssxref("::-ms-fill")}} +- [`::-moz-progress-bar`](/fr/docs/Web/CSS/::-moz-progress-bar) +- [`::-ms-fill`](/fr/docs/Web/CSS/::-ms-fill) diff --git a/files/fr/web/css/background-attachment/index.md b/files/fr/web/css/background-attachment/index.md index c4074f7289..5ec59fa33a 100644 --- a/files/fr/web/css/background-attachment/index.md +++ b/files/fr/web/css/background-attachment/index.md @@ -1,15 +1,12 @@ --- title: background-attachment slug: Web/CSS/background-attachment -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-attachment translation_of: Web/CSS/background-attachment --- {{CSSRef}} -La propriété **`background-attachment`** définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (_viewport_) ou si celle-ci défile avec le bloc englobant. +La propriété **`background-attachment`** définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (<i lang="en">viewport</i>) ou si celle-ci défile avec le bloc englobant. {{EmbedInteractiveExample("pages/css/background-attachment.html")}} @@ -24,6 +21,7 @@ background-attachment: local; /* Valeurs globales */ background-attachment: inherit; background-attachment: initial; +background-attachment: revert; background-attachment: unset; ``` @@ -32,13 +30,17 @@ La propriété `background-attachment` est définie avec un des mots-clés de la ### Valeurs - `fixed` - - : Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (_viewport_). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}). + - : Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (<i lang="en">viewport</i>). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec [`background-clip: text`](/fr/docs/Web/CSS/background-clip)). - `local` - : Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur. - `scroll` - : Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -50,7 +52,7 @@ La propriété `background-attachment` est définie avec un des mots-clés de la ```css p { - background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-image: url("starsolid.gif"); background-attachment: fixed; } ``` @@ -68,7 +70,7 @@ p { #### Résultat -{{EmbedLiveSample("Exemple_simple")}} +{{EmbedLiveSample("")}} ### Gestion de plusieurs arrière-plans @@ -78,7 +80,7 @@ On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en ```css p { - background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-image: url("starsolid.gif"), url("startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } @@ -106,22 +108,16 @@ p { #### Résultat -{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}} +{{EmbedLiveSample("")}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}} | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur `local`. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}} | {{Spec2('CSS2.1')}} | Aucune modification significative. | -| {{SpecName('CSS1', '#background-attachment', 'background-attachment')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-attachment")}} +{{Compat}} ## Voir aussi -- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans "CSS/Multiple backgrounds") +- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/fr/web/css/background-blend-mode/index.md b/files/fr/web/css/background-blend-mode/index.md index 4f642b32e5..7dfca3d56f 100644 --- a/files/fr/web/css/background-blend-mode/index.md +++ b/files/fr/web/css/background-blend-mode/index.md @@ -1,10 +1,7 @@ --- title: background-blend-mode slug: Web/CSS/background-blend-mode -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-blend-mode translation_of: Web/CSS/background-blend-mode --- {{CSSRef}} @@ -13,7 +10,7 @@ La propriété CSS **`background-blend-mode`** définit la façon dont les image {{EmbedInteractiveExample("pages/css/background-blend-mode.html")}} -Les modes de fusions (_blending modes_) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales. +Les modes de fusions (<i lang="en">blending modes</i>) doivent être définis dans le même ordre que les images sont définies avec [`background-image`](/fr/docs/Web/CSS/background-image). Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales. ## Syntaxe @@ -27,17 +24,22 @@ background-blend-mode: darken, luminosity; /* Valeurs globales */ background-blend-mode: initial; background-blend-mode: inherit; +background-blend-mode: revert; background-blend-mode: unset; ``` ### Valeurs - `<blend-mode>` - - : Une valeur décrivant un mode de fusion (type {{cssxref("<blend-mode>")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules. + - : Une valeur décrivant un mode de fusion (type [`<blend-mode>`](/fr/docs/Web/CSS/blend-mode)) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules. -### Syntaxe formelle +## Définition formelle - Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity +{{cssinfo}} + +## Syntaxe formelle + +{{csssyntax}} ## Exemples @@ -45,10 +47,10 @@ background-blend-mode: unset; ```css #div { - width: 300px; - height: 300px; - background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); - background-blend-mode: screen; + width: 300px; + height: 300px; + background: url('br.png'),url('tr.png'); + background-blend-mode: screen; } ``` @@ -58,22 +60,22 @@ background-blend-mode: unset; <div id="div"></div> <select id="select"> - <option>normal</option> - <option>multiply</option> - <option selected>screen</option> - <option>overlay</option> - <option>darken</option> - <option>lighten</option> - <option>color-dodge</option> - <option>color-burn</option> - <option>hard-light</option> - <option>soft-light</option> - <option>difference</option> - <option>exclusion</option> - <option>hue</option> - <option>saturation</option> - <option>color</option> - <option>luminosity</option> + <option>normal</option> + <option>multiply</option> + <option selected>screen</option> + <option>overlay</option> + <option>darken</option> + <option>lighten</option> + <option>color-dodge</option> + <option>color-burn</option> + <option>hard-light</option> + <option>soft-light</option> + <option>difference</option> + <option>exclusion</option> + <option>hue</option> + <option>saturation</option> + <option>color</option> + <option>luminosity</option> </select> ``` @@ -81,26 +83,24 @@ background-blend-mode: unset; ```js document.getElementById("select").onchange = function(event) { - document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; + document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; } console.log(document.getElementById('div')); ``` -{{EmbedLiveSample('Exemples', "330", "330")}} +### Résultat -## Spécifications +{{EmbedLiveSample('', "330", "350")}} -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}} | {{Spec2('Compositing')}} | Définition initiale. | +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-blend-mode")}} +{{Compat}} ## Voir aussi -- {{cssxref("<blend-mode>")}} -- {{cssxref("mix-blend-mode")}} +- [`<blend-mode>`](/fr/docs/Web/CSS/blend-mode) +- [`mix-blend-mode`](/fr/docs/Web/CSS/mix-blend-mode) diff --git a/files/fr/web/css/background-image/index.md b/files/fr/web/css/background-image/index.md index 6cf6e5316b..b13cf365e2 100644 --- a/files/fr/web/css/background-image/index.md +++ b/files/fr/web/css/background-image/index.md @@ -1,10 +1,7 @@ --- title: background-image slug: Web/CSS/background-image -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-image translation_of: Web/CSS/background-image --- {{CSSRef}} @@ -15,11 +12,11 @@ La propriété **`background-image`** permet de définir une ou plusieurs images Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur. -Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}. +Les bordures de l'élément sont dessinées par-dessus l'arrière-plan et la couleur [`background-color`](/fr/docs/Web/CSS/background-color) est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés [`background-clip`](/fr/docs/Web/CSS/background-clip) et [`background-origin`](/fr/docs/Web/CSS/background-origin). -Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme `none`. +Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiqué), les navigateurs considèreront la valeur comme `none`. -> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées. +> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via [`background-color`](/fr/docs/Web/CSS/background-color) au cas où les images ne peuvent être chargées. ## Syntaxe @@ -30,37 +27,45 @@ background-image: url('https://example.com/bck.png'); /* Plusieurs valeurs */ background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png'); +background-image: + linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), + url('catfront.png'); + /* Valeur avec un mot-clé */ background-image: none; /* Valeurs globales */ background-image: inherit; background-image: initial; +background-image: revert; background-image: unset; ``` -Chaque image d'arrière-plan peut être définie avec le mot-clé `none` ou avec une valeur de type `<image>`. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules : - -```css -background-image: - linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); -``` - ### Valeurs - `none` - : Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan. - `<image>` - - : Une valeur {{cssxref("<image>")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (`'texte_avec_double_quotes_"_'`) ou des doubles quotes (`"texte_avec_simple_quote_'_"`) pour encadrer le texte qui forme l'URL. + - : Une valeur [`<image>`](/fr/docs/Web/CSS/image) qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. + +## Accessibilité + +Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisatrices et utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document. -### Syntaxe formelle +- [Comprendre les règles du WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Comprendre les critères de succès 1.1.1 — Comprendre les règles du WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat. +On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat. ### HTML @@ -90,53 +95,45 @@ p { } div { - background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); + background-image: url("mdn_logo_only_color.png"); } .catsandstars { - background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-image: url("startransparent.gif"), + url("catfront.png"); background-color: transparent; } ``` ### Résultat -{{EmbedLiveSample('Exemples')}} - -## Accessibilité - -Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document. - -- [Comprendre les règles du WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +{{EmbedLiveSample('')}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}} | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("<image>")}}. | -| {{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.2')}} | | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.1')}} | La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite. | -| {{SpecName('CSS1', '#background-image', 'background-image')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-image")}} +{{Compat}} ## Voir aussi - [Implémenter des sprites en CSS](/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS) -- {{HTMLElement("img")}}, -- {{cssxref("<image>")}}, -- {{cssxref("<gradient>")}}, -- {{cssxref("linear-gradient")}}, -- {{cssxref("radial-gradient")}}, -- {{cssxref("repeating-linear-gradient")}}, -- {{cssxref("repeating-radial-gradient")}}, -- {{cssxref("element()")}}, -- {{cssxref("_image", "image()")}}, -- {{cssxref("image-set")}}, -- {{cssxref("url","url()")}} +- L'élément HTML [`<img>`](/fr/docs/Web/HTML/Element/Img), +- Les types de données CSS relatifs aux images : + - [`<image>`](/fr/docs/Web/CSS/image) + - [`<gradient>`](/fr/docs/Web/CSS/gradient) +- Les fonctions CSS relatives aux images : + - [`cross-fade()`](/fr/docs/Web/CSS/cross-fade()) + - [`element()`](/fr/docs/Web/CSS/element()) + - [`image()`](/fr/docs/Web/CSS/image/image()) + - [`image-set()`](/fr/docs/Web/CSS/image/image-set()) + - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient()) + - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient()) + - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient()) + - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) + - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) + - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()), + - [`paint()`](/fr/docs/Web/CSS/image/paint()) + - [`url()`](/fr/docs/Web/CSS/url()) diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md index e9a1286b35..379bea080b 100644 --- a/files/fr/web/css/background-origin/index.md +++ b/files/fr/web/css/background-origin/index.md @@ -1,21 +1,18 @@ --- title: background-origin slug: Web/CSS/background-origin -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-image translation_of: Web/CSS/background-origin --- {{CSSRef}} -La propriété **`background-origin`** détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (_padding_). +La propriété **`background-origin`** détermine l'origine de l'arrière-plan [`background-image`](/fr/docs/Web/CSS/background-image) à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (<i lang="en">padding</i>). {{EmbedInteractiveExample("pages/css/background-origin.html")}} -Attention, `background-origin` est ignorée lorsque {{cssxref("background-attachment")}} vaut `fixed`. +Attention, `background-origin` est ignorée lorsque [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`. -> **Note :** Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`. +> **Note :** Cette propriété est rattachée à la propriété raccourcie [`background`](/fr/docs/Web/CSS/background). Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`. ## Syntaxe @@ -28,6 +25,7 @@ background-origin: content-box; /* Valeurs globales */ background-origin: inherit; background-origin: initial; +background-origin: revert; background-origin: unset; ``` @@ -36,57 +34,88 @@ background-origin: unset; - `border-box` - : L'arrière-plan est positionné relativement à la boîte de bordure. - `padding-box` - - : L'arrière-plan est positionné relativement à la boîte de remplissage (_padding_). + - : L'arrière-plan est positionné relativement à la boîte de remplissage (<i lang="en">padding</i>). - `content-box` - : L'arrière-plan est positionné relativement à la boîte de contenu. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Définir différentes origines ```css -div { - width: 200px; - height: 100px; +.example { + border: 10px double; + padding: 10px; + background: url('image.jpg'); + background-position: center left; + background-origin: content-box; +} +``` + +```css +#example2 { + border: 4px solid black; + padding: 10px; + background: url('image.gif'); + background-repeat: no-repeat; + background-origin: border-box; } +``` -.exemple { - border: 10px double; - padding: 10px; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-color: palegreen; - background-position: 0px 40px; - background-origin: content-box; - background-repeat: no-repeat; +```css +div { + background-image: url('logo.jpg'), url('mainback.png'); /* Applique deux images en arrière-plan */ + background-position: top right, 0px 0px; + background-origin: content-box, padding-box; } ``` -### HTML +### Utiliser deux dégradés + +Dans cet exemple, la boîte possède une bordure épaisse en pointillés. Le premier dégradé utilise `padding-box` pour `background-origin` et l'arrière-plan s'inscrit donc à l'intérieur de la bordure. Le second dégradé utilise `content-box` et apparaît donc uniquement derrière le contenu. + +#### HTML ```html -<div class="exemple"></div> +<div class="box">Coucou !</div> +``` + +#### CSS + +```css +.box { + margin: 10px 0; + color: #fff; + background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%), + radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%); + border: 20px dashed black; + padding: 20px; + width: 400px; + background-origin: padding-box, content-box; + background-repeat: no-repeat; +} ``` -### Résultat +#### Résultat -{{EmbedLiveSample("Exemples","300","200")}} +{{EmbedLiveSample("","300","200")}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-origin")}} +{{Compat}} ## Voir aussi -- {{cssxref("background-clip")}} +- [`background-clip`](/fr/docs/Web/CSS/background-clip) diff --git a/files/fr/web/css/background-position/index.md b/files/fr/web/css/background-position/index.md index e32881dfac..9d733f0bb9 100644 --- a/files/fr/web/css/background-position/index.md +++ b/files/fr/web/css/background-position/index.md @@ -1,15 +1,12 @@ --- title: background-position slug: Web/CSS/background-position -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-position translation_of: Web/CSS/background-position --- {{CSSRef}} -La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan. +La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par [`background-origin`](/fr/docs/Web/CSS/background-origin), pour chaque image d'arrière-plan. {{EmbedInteractiveExample("pages/css/background-position.html")}} @@ -45,45 +42,84 @@ background-position: top right 10px; /* Valeurs globales */ background-position: inherit; background-position: initial; +background-position: revert; background-position: unset; ``` -La propriété `background-position` peut être définie grâce à une ou plusieurs valeurs [`<position>`](#<position>), séparées par des virgules. +La propriété `background-position` peut être définie grâce à une ou plusieurs valeurs `<position>`, séparées par des virgules. ### Valeurs - `<position>` - - : Une valeur {{cssxref("<position>")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale. + - : Une valeur [`<position>`](/fr/docs/Web/CSS/position). Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs. La première correspond à la position horizontale et la seconde à la position verticale. - **Définition avec une valeur :** la valeur peut être : + **Définition avec une valeur :** la valeur peut être : - Le mot-clé `center` qui centre l'image. - Un mot-clé parmi `top`, `left`, `bottom`, `right`. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%). - - Une longeur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%. + - Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%. - **Définition avec deux valeurs :** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être : + **Définition avec deux valeurs :** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être : - Un des mots-clés parmi `top`, `left`, `bottom`, `right`. Si `left` ou `right` est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si `top` ou `bottom` est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X. - - Une valeur de longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`, cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée. + - Une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`, cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée. - On notera que : + > **Note :** Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit `top top` ou `left right` seront considérées comme invalides. - - si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. - - si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. + **Définition avec 3 valeurs :** Deux valeurs sont des mots-clés et la troisième est le décalage appliqué à la valeur qui précède. - Autrement dit "`top top"` ou "`left right`" seront considérées comme invalides. + - La première valeur est l'un des mots-clés `top`, `left`, `bottom`, `right`, ou `center`. Si `left` ou `right` sont fournis, cela définit la position sur l'axe horizontale et si `top` or `bottom` sont fournis, cela définit la position sur l'axe vertical et l'autre mot-clé définit la position sur l'axe horizontal. + - La longueur (type [`<length>`](/fr/docs/Web/CSS/length)) ou le pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)), s'il est utilisé en deuxième valeur, sera considéré comme le décalage à appliquer pour la première valeur. S'il s'agit de la troisième valeur, ce sera le décalage à appliquer à la deuxième valeur. + - Il n'y a qu'une seule longueur ou qu'un seul pourcentage attendu pour définir le décalage de la valeur précédente. Toute combinaison d'un mot-clé avec deux longueurs ou deux pourcentages sera considérée comme invalide. - **À propos des pourcentages :** lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image. + **Définition avec 4 valeurs :** La première et la troisième valeur sont des mots-clés pour la position horizontale d'une part et verticale d'autre part. La deuxième et la quatrième valeur sont des décalages pour les valeurs qui les précèdent : - Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante : + - La première et la troisième valeur utilisent l'un des mots-clés suivant : `top`, `left`, `bottom`, `right`. Si `left` ou `right` sont utilisés, cela définit la position horizontale. Si `top` ou `bottom` sont utilisés, cela définit la position verticale et l'autre mot-clé définit alors la valeur horizontale. + - La deuxième et la quatrième valeur sont des longueurs ([`<length>`](/fr/docs/Web/CSS/length)) ou des pourcentages ([`<percentage>`](/fr/docs/Web/CSS/percentage)). La deuxième valeur est le décalage pour le premier mot-clé tandis que la quatrième valeur est le décalage correspondant au deuxième mot-clé. - `(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)` - `(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)`. +### À propos des pourcentages - On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image. +Lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image. -### Syntaxe formelle +Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante : + +``` +(largeur conteneur - largeur image) * (position en %) = (décalage horizontal) +(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical) +``` + +En utilisant l'axe horizontal pour un exemple, prenons une image dont la largeur mesure 300px, qu'on utilise celle-ci dans un conteneur dont la largeur mesure 100px et que `background-size` vaut `auto` : + +``` +100px - 300px = -200px (différence entre le conteneur et l'image) +``` + +Voici donc les décalages, exprimés en pixels, qu'on obtient avec les pourcentages -25%, 0%, 50%, 100% et 125% : + +``` +-200px * -25% = 50px +-200px * 0% = 0px +-200px * 50% = -100px +-200px * 100% = -200px +-200px * 125% = -250px +``` + +Traduisons l'effet obtenu avec ces valeurs. Le **bord gauche** de **l'image** est décalé du **bord gauche** du **conteneur** de : + +- \+ 50px (plaçant ainsi le bord gauche de l'image au centre du conteneur large de 100px) +- 0px (le bord gauche de l'image coïncide avec le bord gauche du conteneur) +- \-100px (le bord gauche de l'image est situé à 100px du bord gauche du conteneur, ce qui signifie pour notre exemple que c'est la partie centrale de l'image qui est inscrite dans le conteneur) +- \-200px (le bord gauche de l'image est situé à 200px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image coïncide avec le bord droit du conteneur) +- \-250px (le bord gauche de l'image est situé à 250px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image de 300px est au centre du conteneur). + +On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image. + +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -93,6 +129,14 @@ La propriété `background-position` peut être définie grâce à une ou plusie Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente. +#### HTML + +```html +<div class="exemple_un">Premier exemple</div> +<div class="exemple_deux">Deuxième exemple</div> +<div class="exemple_trois">Troisième exemple</div> +``` + #### CSS ```css @@ -106,10 +150,10 @@ div { /* On utilise la propriété raccourcie background */ .exemple_un { - background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; + background: url("startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } .exemple_deux { - background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat; + background: url("startransparent.gif") #FFEE99 3em 50% no-repeat; } /* @@ -118,48 +162,28 @@ différemment, on voit les virgules dans les déclarations. L'ordre est le même entre background-image et -position. */ .exemple_trois { - background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); - background-position: 0px 0px, - center; + background-image: url("startransparent.gif"), url("catfront.png"); + background-position: 0px 0px, center; } ``` -#### HTML - -```html -<div class="exemple_un">Premier exemple</div> -<div class="exemple_deux">Deuxième exemple</div> -<div class="exemple_trois">Troisième exemple</div> -``` - #### Résultat -{{EmbedLiveSample('Exemples', 420, 200)}} +{{EmbedLiveSample('', 420, 320)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}} | {{Spec2('CSS3 Backgrounds')}} | La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}} | {{Spec2('CSS2.1')}} | Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("<length>")}} et {{cssxref("<percentage>")}}. | -| {{SpecName('CSS1', '#background-position', 'background-position')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-position")}} - -### Notes relatives à Quantum CSS - -- Un bug de Gecko empêche la transition de `background-position` entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("<position>")}} (par exemple `background-position: 10px 10px;` d'une part et `background-position: 20px 20px, 30px 30px;` d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour Firefox 57) corrige ce problème. +{{Compat}} ## Voir aussi - [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) -- {{cssxref("background-position-x")}} -- {{cssxref("background-position-y")}} -- {{cssxref("background-position-inline")}} -- {{cssxref("background-position-block")}} -- {{cssxref("transform-origin")}} +- [`background-position-x`](/fr/docs/Web/CSS/background-position-x) +- [`background-position-y`](/fr/docs/Web/CSS/background-position-y) +- [`background-position-inline`](/fr/docs/Web/CSS/background-position-inline) +- [`background-position-block`](/fr/docs/Web/CSS/background-position-block) +- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/background-repeat/index.md b/files/fr/web/css/background-repeat/index.md index d11530c2ad..e65beaf890 100644 --- a/files/fr/web/css/background-repeat/index.md +++ b/files/fr/web/css/background-repeat/index.md @@ -1,19 +1,16 @@ --- title: background-repeat slug: Web/CSS/background-repeat -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-repeat translation_of: Web/CSS/background-repeat --- {{CSSRef}} -La propriété **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée. +La propriété [CSS](/fr/docs/Web/CSS) **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée. {{EmbedInteractiveExample("pages/css/background-repeat.html")}} -Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`). +Par défaut, les images répétées sont rognées à la taille de l'élément, mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`). ## Syntaxe @@ -27,8 +24,7 @@ background-repeat: round; background-repeat: no-repeat; /* Syntaxe avec deux valeurs */ -/* Première valeur : axe horizontal */ -/* Seconde valeur : axe vertical */ +/* axe horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; @@ -37,6 +33,7 @@ background-repeat: no-repeat round; /* Valeurs globales */ background-repeat: inherit; background-repeat: initial; +background-repeat: revert; background-repeat: unset; ``` @@ -44,13 +41,13 @@ background-repeat: unset; - `<repeat-style>` - - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance : + - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance : <table class="standard-table"> <tbody> <tr> <td><strong>Une seule valeur</strong></td> - <td><strong>Équivalent avec deux-valeurs</strong></td> + <td><strong>Équivalent avec deux valeurs</strong></td> </tr> <tr> <td><code>repeat-x</code></td> @@ -79,59 +76,55 @@ background-repeat: unset; </tbody> </table> - Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options : + Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici une définition des différentes options : - <table class="standard-table"> - <tbody> - <tr> - <td><code>repeat</code></td> - <td> - L'image est répétée autant de fois que nécessaire pour recouvrir la zone - dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire. - </td> - </tr> - <tr> - <td><code>space</code></td> - <td> - L'image est répétée autant que possible sans rognage. La première et la - dernière image sont accolées aux bords de l'élément et des espaces sont - repartis de façon égale entre les images. La propriété - {{cssxref("background-position")}} est ignorée sauf s'il n'y a - qu'une seule image qui puisse être affichée sans être rognée. Le seul - cas où <code>space</code> est utilisé et qu'une image est rognée se - produit lorsque l'image est trop grande pour être affichée. - </td> - </tr> - <tr> - <td><code>round</code></td> - <td> - L'image est répétée autant que possible et est étirée si nécessaire afin - qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place - d'ajouter une image, les autres sont compressées pour lui laisser la - place. Ainsi, une image avec une largeur originale de 260px, répétée - trois fois, pourra être étirée pour que chaque exemplaire mesure 300 - pixels de large, lorsqu'une autre image sera ajoutée, elles seront - compressées sur 225 pixels. - </td> - </tr> - <tr> - <td><code>no-repeat</code></td> - <td> - Il n'y a aucune répétition de l'image (dès lors, il est possible que - toute la zone ne soit pas recouverte par cette image). La position de - l'image est définie grâce à la propriété - {{cssxref("background-position")}}. - </td> - </tr> - </tbody> - </table> + - `repeat` + - : L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire. + - `space` + - : L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété [`background-position`](/fr/docs/Web/CSS/background-position) est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où `space` est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée. + - `round` + - : L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels. + - `no-repeat` + - : Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété [`background-position`](/fr/docs/Web/CSS/background-position). + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<ol> + <li>no-repeat + <div class="un"></div> + </li> + <li>repeat + <div class="deux"></div> + </li> + <li>repeat-x + <div class="trois"></div> + </li> + <li>repeat-y + <div class="quatre"></div> + </li> + <li>space + <div class="cinq"></div> + </li> + <li>round + <div class="six"></div> + </li> + <li>repeat-x, repeat-y (plusieurs images) + <div class="sept"></div> + </li> +</ol> +``` + ### CSS ```css @@ -144,91 +137,55 @@ li { margin-bottom: 12px; } div { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); - width: 160px; - height: 70px; + background-image: url(starsolid.gif); + width: 160px; + height: 70px; } -/* background repeat CSS */ -.one { - background-repeat: no-repeat; +/* background-repeat CSS */ +.un { + background-repeat: no-repeat; } -.two { - background-repeat: repeat; +.deux { + background-repeat: repeat; } -.three { - background-repeat: repeat-x; +.trois { + background-repeat: repeat-x; } -.four { - background-repeat: repeat-y; +.quatre { + background-repeat: repeat-y; } - -.five { +.cinq { background-repeat: space; } - .six { background-repeat: round; } /* Plusieurs images */ -.seven { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.mozilla.org/static/img/favicon32.png); - background-repeat: repeat-x, - repeat-y; - height: 144px; +.sept { + background-image: url(starsolid.gif), + url(favicon.png); + background-repeat: repeat-x, + repeat-y; + height: 144px; } ``` -### HTML - -```html -<ol> - <li>no-repeat - <div class="one"></div> - </li> - <li>repeat - <div class="two"></div> - </li> - <li>repeat-x - <div class="three"></div> - </li> - <li>repeat-y - <div class="four"></div> - </li> - <li>space - <div class="five"></div> - </li> - <li>round - <div class="six"></div> - </li> - <li>repeat-x, repeat-y (plusieurs images) - <div class="seven"></div> - </li> -</ol> -``` - ### Résultat Dans cet exemple, chaque élément de la liste illustre une valeur différente de `background-repeat`. -{{EmbedLiveSample('Exemples', 240, 560)}} +{{EmbedLiveSample('', 240, 560)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés `space` et `round` sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}} | {{Spec2('CSS2.1')}} | Aucune modification significative. | -| {{SpecName('CSS1', '#background-repeat', 'background-repeat')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-repeat")}} +{{Compat}} ## Voir aussi -- [Utiliser plusieurs arrières-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) +- [Utiliser plusieurs arrière-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/fr/web/css/background-size/index.md b/files/fr/web/css/background-size/index.md index 71cebb4b98..160c39c44f 100644 --- a/files/fr/web/css/background-size/index.md +++ b/files/fr/web/css/background-size/index.md @@ -1,19 +1,15 @@ --- title: background-size slug: Web/CSS/background-size -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/background-size --- {{CSSRef}} -La propriété CSS **`background-size`** définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions. +La propriété [CSS](/fr/docs/Web/CSS) **`background-size`** définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions. {{EmbedInteractiveExample("pages/css/background-size.html")}} -> **Note :** L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente. +> **Note :** L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété [`background-color`](/fr/docs/Web/CSS/background-color). De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente. ## Syntaxe @@ -24,7 +20,7 @@ background-size: contain; /* Une seule valeur */ /* La valeur désigne la largeur de l'image. */ -/* La hauteur vaut 'auto'. */ +/* La hauteur vaut 'auto' */ background-size: 50%; background-size: 3.2em; background-size: 12px; @@ -46,192 +42,137 @@ background-size: 6px, auto, contain; /* Valeurs globales */ background-size: inherit; background-size: initial; +background-size: revert; background-size: unset; ``` -La propriété `background-size` peut être définie de différentes façons : +La propriété `background-size` peut être définie de différentes façons : -- Avec l'un des mots-clés [`contain`](#contain) ou [`cover`](#cover). +- Avec l'un des mots-clés [`contain`](#contain) ou [`cover`](#cover) - Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors [`auto`](#auto) par défaut) -- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) ou encore [`auto`](#auto). +- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type [`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)) ou encore [`auto`](#auto). -Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}). +Lorsqu'on souhaite paramétrer la taille de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de [`background-image`](/fr/docs/Web/CSS/background-image)). ### Valeurs - `contain` - - : Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée. + - : Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vides sont remplies avec la couleur d'arrière-plan (définie grâce à [`background-color`](/fr/docs/Web/CSS/background-color)). Par défaut, l'image est centrée sauf si [`background-position`](/fr/docs/Web/CSS/background-position) a été modifiée. - `cover` - - : Un mot-clé dont le comportement est opposé à celui de `contain`. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan). + - : Un mot-clé dont le comportement est opposé à celui de `contain`. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y a aucun espace libre sur lequel on verrait la couleur d'arrière-plan). - `auto` - : Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées. - `<length>` - - : Une valeur de type {{cssxref("<length>")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées. + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées. - `<percentage>` - - : Une valeur de type {{cssxref("<percentage>")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (_padding_) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut `fixed`, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées. + - : Une valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage) qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via [`background-origin`](/fr/docs/Web/CSS/background-origin). Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<i lang="en">padding</i>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées. ### Dimensions intrinsèques et proportions -Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles : +Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles : - Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques. -- Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions. -- Un dégradé CSS (cf. {{cssxref("<gradient>")}}) ne possède ni dimension ni proportion intrinsèque. -- Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur. +- Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèques. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions. +- Un dégradé CSS (cf. [`<gradient>`](/fr/docs/Web/CSS/gradient)) ne possède ni dimension ni proportion intrinsèque. +- Les images d'arrière-plan créées avec la fonction [`element()`](/fr/docs/Web/CSS/element()) utiliseront les dimensions et proportions intrinsèques de l'élément générateur. -> **Note :** Le comportement associé aux dégradés (`<gradient>`) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan. +> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction [`element()`](/fr/docs/Web/CSS/element()) sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard. -> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard. +Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante : -Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante : - -- Si les deux composants de `background-size` sont définis et qu'aucun ne vaut `auto` : L'image utilise la taille définie. -- Si `background-size` vaut `contain` ou `cover` : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan. -- Si `background-size` vaut `auto` ou `auto auto` : +- **Si les deux composants de `background-size` sont définis et qu'aucun ne vaut `auto` :** L'image utilise la taille définie. +- **Si `background-size` vaut `contain` ou `cover` :** L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques ; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan. +- **Si `background-size` vaut `auto` ou `auto auto` :** - Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée. - Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan. - - Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur `contain` avait été utilisée. + - Si elle n'a aucune dimension mais possède une proportion, elle sera affichée comme si la valeur `contain` avait été utilisée. - Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion. - Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan. - > **Note :** Les images SVG peuvent contenir un attribut [`preserveAspectRatio`](/fr/docs/Web/SVG/Attribute/preserveAspectRatio) pour lequel la valeur par défaut est équivalente à `contain`. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour `background-size` permet d'ignorer `preserveAspectRatio`. + > **Note :** Les images SVG peuvent contenir un attribut [`preserveAspectRatio`](/fr/docs/Web/SVG/Attribute/preserveAspectRatio) pour lequel la valeur par défaut est équivalente à `contain`. Une valeur explicite pour `background-size` permet d'ignorer `preserveAspectRatio`. -- Si `background-size` possède une composante `auto` et que l'autre composante est différente de `auto` : +- **Si `background-size` possède une composante `auto` et que l'autre composante est différente de `auto` :** - Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion. - Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe. -> **Note :** Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant. - -### Syntaxe formelle - -{{csssyntax}} +> **Note :** Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateurs. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant. -## Exemples +### Utiliser les dégradés -### `cover` +Si vous utilisez un dégradé (`<gradient>`) comme arrière-plan et indiquez la propriété `background-size` correspondante, il vaut mieux ne pas utiliser une taille qui utilise un seul composant `auto` ou qui est définie avec une seule valeur de largeur (par exemple, `background-size: 50%`). -#### CSS +L'affichage des dégradés peut différer entre les navigateurs dont certains n'implémentent pas le rendu [conformément à la spécification CSS de `background-size`](https://www.w3.org/TR/css3-background/#the-background-size) et [à la spécification pour les dégradés](https://dev.w3.org/csswg/css3-images/#gradients). ```css -div { - height: 300px; - width: 200px; - background-color: palegreen; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-repeat: no-repeat; -} +.exemple-degrade { + width: 50px; + height: 100px; + background-image: linear-gradient(blue, red); + + /* Utilisation risquée */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; -.exemple_cover { - background-size: cover; + /* Peut être utilisé sans problème */ + background-size: 25px 50px; + background-size: 50% 50%; } ``` -#### HTML - -```html -<div class="exemple_cover"></div> -``` +## Définition formelle -#### Résultat +{{cssinfo}} -{{EmbedLiveSample("cover","200","300")}} +## Syntaxe formelle -### `contain` +{{csssyntax}} -#### CSS +## Exemples -```css -div { - height: 300px; - width: 200px; - background-color: palegreen; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-repeat: no-repeat; -} +### Réaliser un pavage -.exemple_cover { - background-size: contain; -} -``` +Prenons une image d'une taille qui ne correspond pas forcément à notre document cible. Ici, on a une image de 189x189 pixels et on souhaite réaliser un pavage avec quatre exemplaires de l'image dans un élément qui mesure 300x300 pixels. Pour cela, on fixe la valeur de `background-size` à 150 pixels. #### HTML ```html -<div class="exemple_cover"></div> +<div class="tiledBackground"> +</div> ``` -#### Résultat - -{{EmbedLiveSample("contain","200","300")}} - -### `auto 50%` - #### CSS ```css -div { +.tiledBackground { + background-image: url(logo-quantum.png); + background-size: 150px; + width: 300px; height: 300px; - width: 200px; - background-color: palegreen; - background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg); - background-repeat: no-repeat; + border: 2px solid; + color: pink; } - -.exemple_cover { - background-size: auto 50%; -} -``` - -#### HTML - -```html -<div class="exemple_cover"></div> ``` #### Résultat -{{EmbedLiveSample("auto_50","200","300")}} +{{EmbedLiveSample("", 340, 340)}} -## Notes - -Si on utilise un dégradé (`<gradient>`) comme arrière-plan et qu'on définit une valeur associée pour la propriété `background-size`, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant `auto` ou qu'une seule largeur (par exemple `background-size: 50%`). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la [spécification CSS3 pour `background-size`](https://www.w3.org/TR/css3-background/#the-background-size) et [la spécification CSS3 pour les images qui sont des dégradés](https://dev.w3.org/csswg/css3-images/#gradients)). - -```css -.gradient-exemple { - width: 50px; - height: 100px; - background-image: linear-gradient(blue, red); - - /* Méthode risquée */ - background-size: 25px; - background-size: 50%; - background-size: auto 50px; - background-size: auto 50%; - - /* Sans risque */ - background-size: 25px 50px; - background-size: 50% 50%; -} -``` - -On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec `auto` lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan. +Voir [Redimensionner des images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) pour plus d'exemples. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-size")}} +{{Compat}} ## Voir aussi - [Redimensionner les images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) - [Redimensionner les arrière-plans SVG](/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds) -- {{cssxref("object-fit")}} +- [`object-fit`](/fr/docs/Web/CSS/object-fit) diff --git a/files/fr/web/css/background/index.md b/files/fr/web/css/background/index.md index a5ab39b7e0..6a4eea7ed0 100644 --- a/files/fr/web/css/background/index.md +++ b/files/fr/web/css/background/index.md @@ -1,23 +1,31 @@ --- title: background slug: Web/CSS/background -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background translation_of: Web/CSS/background --- -{{CSSRef}} +{{CSSRef("CSS Background")}} -La propriété CSS **`background`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.). +La propriété [CSS](/fr/docs/Web/CSS) **`background`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.). {{EmbedInteractiveExample("pages/css/background.html")}} -Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}. +## Propriétés détaillées correspondantes + +Cette propriété permet de définir une ou plusieurs valeurs pour : + +- [`background-attachment`](/fr/docs/Web/CSS/background-attachment) +- [`background-clip`](/fr/docs/Web/CSS/background-clip) +- [`background-color`](/fr/docs/Web/CSS/background-color) +- [`background-image`](/fr/docs/Web/CSS/background-image) +- [`background-origin`](/fr/docs/Web/CSS/background-origin) +- [`background-position`](/fr/docs/Web/CSS/background-position) +- [`background-repeat`](/fr/docs/Web/CSS/background-repeat) +- [`background-size`](/fr/docs/Web/CSS/background-size) Lorsqu'on utilise la propriété raccourcie `background`, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales. -> **Note :** La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément. +> **Note :** La propriété [`background-color`](/fr/docs/Web/CSS/background-color) ne peut être définie que sur le dernier arrière-plan, car il n'y a qu'une seule couleur d'arrière-plan pour un élément. ## Syntaxe @@ -34,40 +42,57 @@ background: border-box red; /* Ici on utilise une seule image, centrée */ /* et remise à l'échelle */ background: no-repeat center/80% url("../img/image.png"); + +/* Valeurs globales */ +background: inherit; +background: initial; +background: revert; +background: unset; ``` -La propriété `background` permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec : +La propriété `background` permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec : -- Zéro ou une occurence d'une valeur : +- Zéro ou une occurrence d'une valeur : - - [`<attachment>`](#<attachment>) - - [`<bg-image>`](#<bg-image>) - - [`<position>`](#<position>) - - [`<bg-size>`](#<bg-size>) - - [`<repeat-style>`](#<repeat-style>) + - `<attachment>` + - `<bg-image>` + - `<position>` + - `<bg-size>` + - `<repeat-style>` -- Une valeur [`<bg-size>`](#<bg-size>) qui peut uniquement être utilisée directement après une valeur [`<position>`](#<position>) suivie d'une barre oblique (par exemple "`center/80%`") -- Une valeur [`<box>`](#<box>) présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}. -- Une valeur [`<background-color>`](#<background-color>) qui peut uniquement être incluse pour la dernière couche qui est définie. +- Une valeur `<bg-size>` qui peut uniquement être utilisée directement après une valeur `<position>` suivie d'une barre oblique (par exemple `center/80%`) +- Une valeur `<box>` présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir [`background-origin`](/fr/docs/Web/CSS/background-origin) et [`background-clip`](/fr/docs/Web/CSS/background-clip). Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir [`background-origin`](/fr/docs/Web/CSS/background-origin) et la seconde définira [`background-clip`](/fr/docs/Web/CSS/background-clip). +- Une valeur `<background-color>` qui peut uniquement être incluse pour la dernière couche qui est définie. ### Valeurs - `<attachment>` - - : Voir {{cssxref("background-attachment")}} + - : Voir [`background-attachment`](/fr/docs/Web/CSS/background-attachment) - `<box>` - - : Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}} + - : Voir [`background-clip`](/fr/docs/Web/CSS/background-clip) et [`background-origin`](/fr/docs/Web/CSS/background-origin) - `<background-color>` - - : Voir {{cssxref("background-color")}} + - : Voir [`background-color`](/fr/docs/Web/CSS/background-color) - `<bg-image>` - - : Voir {{Cssxref("background-image")}} + - : Voir [`background-image`](/fr/docs/Web/CSS/background-image) - `<position>` - - : Voir {{cssxref("background-position")}} + - : Voir [`background-position`](/fr/docs/Web/CSS/background-position) - `<repeat-style>` - - : Voir {{cssxref("background-repeat")}} + - : Voir [`background-repeat`](/fr/docs/Web/CSS/background-repeat) - `<bg-size>` - - : Voir {{cssxref("background-size")}}. + - : Voir [`background-size`](/fr/docs/Web/CSS/background-size). + +## Accessibilité + +Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisatrices et utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document. + +- [Comprendre la règle 1.1 du WCAG](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content) +- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -92,37 +117,24 @@ La propriété `background` permet de définir une ou plusieurs couches d'arriè } .banniere { - background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; + background: url("starsolid.gif") #99f repeat-y fixed; } ``` ### Résultat -{{EmbedLiveSample("Exemples")}} - -## Accessibilité - -Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document. - -- [Comprendre la règle 1.1 du WCAG](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +{{EmbedLiveSample("")}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background', 'background')}} | {{Spec2('CSS3 Backgrounds')}} | La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}} | {{Spec2('CSS2.1')}} | Pas de modification significative. | -| {{SpecName('CSS1', '#background', 'background')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background")}} +{{Compat}} ## Voir aussi -- {{cssxref("box-decoration-break")}} -- [Les gradients](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [`box-decoration-break`](/fr/docs/Web/CSS/box-decoration-break) +- [Les dégradés](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) - [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/fr/web/css/blend-mode/br.png b/files/fr/web/css/blend-mode/br.png Binary files differdeleted file mode 100644 index 99477b2318..0000000000 --- a/files/fr/web/css/blend-mode/br.png +++ /dev/null diff --git a/files/fr/web/css/blend-mode/index.md b/files/fr/web/css/blend-mode/index.md index 206ef8ee2f..0adf5904a3 100644 --- a/files/fr/web/css/blend-mode/index.md +++ b/files/fr/web/css/blend-mode/index.md @@ -72,7 +72,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('normal', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### multiply @@ -90,7 +90,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('multiply', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### screen @@ -108,7 +108,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('screen', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### overlay @@ -126,7 +126,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('overlay', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### darken @@ -144,7 +144,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('darken', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### lighten @@ -162,7 +162,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('lighten', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### color-dodge @@ -180,7 +180,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('color-dodge', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### color-burn @@ -198,7 +198,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('color-burn', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### hard-light @@ -216,7 +216,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('hard-light', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### soft-light @@ -234,7 +234,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('soft-light', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### difference @@ -252,7 +252,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('difference', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### exclusion @@ -270,7 +270,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('exclusion', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### hue @@ -288,7 +288,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('hue', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### saturation @@ -306,7 +306,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('saturation', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### color @@ -324,7 +324,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('color', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ### luminosity @@ -342,7 +342,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés } ``` -{{ EmbedLiveSample('luminosity', "300", "350") }} +{{ EmbedLiveSample('', "300", "350") }} ## L'interpolation des modes de fusion diff --git a/files/fr/web/css/blend-mode/tr.png b/files/fr/web/css/blend-mode/tr.png Binary files differdeleted file mode 100644 index a6e0f81eaf..0000000000 --- a/files/fr/web/css/blend-mode/tr.png +++ /dev/null diff --git a/files/fr/web/css/border-image-outset/index.md b/files/fr/web/css/border-image-outset/index.md index bc6809bec1..b693ce981b 100644 --- a/files/fr/web/css/border-image-outset/index.md +++ b/files/fr/web/css/border-image-outset/index.md @@ -1,99 +1,102 @@ --- title: border-image-outset slug: Web/CSS/border-image-outset -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.border-image-outset translation_of: Web/CSS/border-image-outset --- {{CSSRef}} La propriété **`border-image-outset`** définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure. -{{EmbedInteractiveExample("pages/css/border-image-outset.html")}} +Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'évènements de pointeur par rapport à l'élément concerné. -Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné. +{{EmbedInteractiveExample("pages/css/border-image-outset.html")}} ## Syntaxe ```css -/* border-image-outset : */ -/* Une même valeur pour les quatre côtés */ +/* Longueur */ +/* Type <length> */ +border-image-outset: 1rem; + +/* Valeur numérique */ +/* Type <number> */ border-image-outset: 1.5; -/* border-image-outset : */ -/* Première valeur : côtés verticaux */ -/* Seconde valeur : côtés horizontaux */ +/* côtés verticaux | horizontaux */ border-image-outset: 1 1.2; -/* border-image-outset : */ -/* Première valeur : côté haut */ -/* Deuxième valeur : côtés horizontaux */ -/* Troisième valeur : côté bas */ +/* haut | côtés horizontaux | bas */ border-image-outset: 30px 2 45px; -/* border-image-outset : */ -/* Première valeur : côté haut */ -/* Deuxième valeur : côté droit */ -/* Troisième valeur : côté bas */ -/* Quatrième valeur : côté gauche */ +/* haut | droit | bas | gauche */ border-image-outset: 7px 12px 14px 5px; /* Valeurs globales */ border-image-outset: inherit; border-image-outset: initial; +border-image-outset: revert; border-image-outset: unset; ``` +La propriété `border-image-outset` peut être définie à l'aide d'une, deux, trois ou quatre valeurs. Chaque valeur est une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un nombre ([`<number>`](/fr/docs/Web/CSS/number)). Les valeurs négatives sont invalides (la déclaration est alors ignorée). + +1. Si **une** valeur est indiquée, elle s'applique **aux quatre côtés**. +2. Si **deux** valeurs sont indiquées, la première s'applique aux côtés **haut et bas** et la seconde s'applique aux côtés **gauche et droit**. +3. Si **trois** valeurs sont indiquées, la première s'applique au côté **haut**, la deuxième aux côtés **gauche et droit**, et la troisième au côté **bas**. +4. Si **quatre** valeurs sont indiquées, elles s'appliquent dans le sens des aiguilles d'une montre : la première au côté **haut**, la seconde au côté **droit**, la troisième au côté **bas**, et la quatrième au côté **gauche**. + ### Valeurs - `<length>` - - : Une valeur de longueur (cf. type {{cssxref("<length>")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées. + - : Une valeur de longueur (cf. type [`<length>`](/fr/docs/Web/CSS/length)) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées. - `<number>` - - : Une valeur numérique (cf. type {{cssxref("<number>")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser. + - : Une valeur numérique (cf. type [`<number>`](/fr/docs/Web/CSS/number)) qui sera multipliée par la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) afin de déterminer la longueur de l'espace duquel dépasser. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Décaler la bordure d'une image -```css -p { - border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png"); - border-image-slice: 30; - border-image-width: 20px; - border-image-repeat: round; - border-image-outset: 10px; - padding: 40px; -} +#### HTML + +```html +<div id="outset">Un élément avec une bordure décalée !</div> ``` -### HTML +#### CSS -```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> +```css +#outset { + width: 10rem; + background: #cef; + border: 1.4rem solid; + border-image: radial-gradient(#ff2, #55f) 40; + border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ + margin: 2.1rem; +} ``` -### Résultat +#### Résultat -{{EmbedLiveSample('Exemples', '480', '320')}} +{{EmbedLiveSample('', 'auto', '200')}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-outset")}} +{{Compat}} + +## Voir aussi + +- [Les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [Apprendre le CSS : les arrière-plans et les bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/fr/web/css/border-image-repeat/index.md b/files/fr/web/css/border-image-repeat/index.md index 5039e96034..7f213fa8d8 100644 --- a/files/fr/web/css/border-image-repeat/index.md +++ b/files/fr/web/css/border-image-repeat/index.md @@ -1,91 +1,108 @@ --- title: border-image-repeat slug: Web/CSS/border-image-repeat -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.border-image-repeat translation_of: Web/CSS/border-image-repeat --- {{CSSRef}} -La propriété **`border-image-repeat`** définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux. +La propriété [CSS](/fr/docs/Web/CSS) **`border-image-repeat`** définit la façon dont les zones de l'image de bordure sont utilisées pour s'étendre sur chacun des côtés de la bordure. {{EmbedInteractiveExample("pages/css/border-image-repeat.html")}} ## Syntaxe ```css -/* border-image-repeat */ -/* Une valeur : s'applique à tous les côtés */ +/* Valeurs avec un mot-clé */ border-image-repeat: stretch; +border-image-repeat: repeat; +border-image-repeat: round; +border-image-repeat: space; -/* border-image-repeat -/* Première valeur : côtés horizontaux */ -/* Deuxième valeur : côtés verticaux */ +/* côtés horizontaux | verticaux */ border-image-repeat: round stretch; /* Valeurs globales */ border-image-repeat: inherit; border-image-repeat: initial; +border-image-repeat: revert; border-image-repeat: unset; ``` +La propriété `border-image-repeat` peut être définie à l'aide d'une ou deux valeurs parmi la liste qui suit. + +- Avec **une** valeur indiquée, celle-ci s'applique **aux quatre côtés**. +- Avec **deux** valeurs indiquées, la première s'applique aux côtés **haut et bas**, la seconde s'applique aux côtés **gauche et droite**. + ### Valeurs - `stretch` - : Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures. - `repeat` - - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. + - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Les portions répétées peuvent être rognées si nécessaire. - `round` - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli. - `space` - - : Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs. + - : Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera réparti entre ces motifs. + +## Définition formelle + +{{CSSInfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Répéter l'image de bordure + +#### CSS ```css -p { - border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png"); - border-image-slice: 30; - border-image-width: 20px; - border-image-repeat: round; - padding: 40px; +#bordered { + width: 12rem; + margin-bottom: 1rem; + padding: 1rem; + border: 40px solid; + border-image: url("border.png") 27; + border-image-repeat: stretch; /* Peut être changé avec la liste déroulante */ } ``` -### HTML +```html hidden +<div id="bordered">Vous pouvez essayer différentes valeurs !</div> + +<select id="repetition"> + <option value="stretch">stretch</option> + <option value="repeat">repeat</option> + <option value="round">round</option> + <option value="space">space</option> + <option value="stretch repeat">stretch repeat</option> + <option value="space round">space round</option> +</select> +``` -```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> +```js hidden +var repetition = document.getElementById("repetition"); +repetition.addEventListener("change", function (evt) { + document.getElementById("bordered").style.borderImageRepeat = evt.target.value; +}); ``` ### Résultat -{{EmbedLiveSample('Exemples', '480', '320')}} +{{EmbedLiveSample('', '480', '250')}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-repeat")}} +{{Compat}} ## Voir aussi -- [L'article de CSS Tricks sur `border-image` (en anglais)](https://css-tricks.com/almanac/properties/b/border-image/) +- [Les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [Apprendre le CSS : les arrière-plans et les bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/fr/web/css/border-image-slice/index.md b/files/fr/web/css/border-image-slice/index.md index 8f31b33333..b03fd90a1a 100644 --- a/files/fr/web/css/border-image-slice/index.md +++ b/files/fr/web/css/border-image-slice/index.md @@ -1,114 +1,177 @@ --- title: border-image-slice slug: Web/CSS/border-image-slice -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-image-slice +browser-compat: css.properties.border-image-slice --- {{CSSRef}} -La propriété **`border-image-slice`** permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image. +La propriété **`border-image-slice`** permet de découper l'image fournie via la propriété [`border-image-source`](/fr/docs/Web/CSS/border-image-source) en régions. Ces régions sont alors utilisées pour composer [l'image de bordure](/fr/docs/Web/CSS/border-image) d'un élément. {{EmbedInteractiveExample("pages/css/border-image-slice.html")}} - +Ce découpage crée neuf régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image. -Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe). + -La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé `fill`. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs). +Le diagramme ci-avant illustre l'emplacement de chaque région. -Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées. +- Les zones 1 à 4 sont les coins. Chacun est utilisé une fois pour former les coins de l'image de bordure finale. +- Les zones 5 à 8 sont les bords. Ils sont [répétés, redimensionnés ou modifiés autrement](/fr/docs/Web/CSS/border-image-repeat) dans la bordure finale afin que celle-ci corresponde aux dimensions de l'élément. +- La zone 9 est la zone centrale et n'est pas utilisée par défaut. Elle est utilisée comme image d'arrière-plan si le mot-clé `fill` est utilisé. -La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut. +Les propriétés [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat), [`border-image-width`](/fr/docs/Web/CSS/border-image-width), [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset) définissent la façon dont ces images seront utilisées. ## Syntaxe ```css -/* border-image-slice : */ /* Une valeur qui s'applique aux quatre côtés */ border-image-slice: 30%; -/* border-image-slice : */ -/* Première valeur : côtés verticaux */ -/* Deuxième valeur : côtés horizontaux */ +/* côtés verticaux | horizontaux */ border-image-slice: 10% 30%; -/* border-image-slice : */ -/* Première valeur : côté haut */ -/* Deuxième valeur : côtés horizontaux */ -/* Troisième valeur : côté bas */ +/* haut | côtés horizontaux | bas */ border-image-slice: 30 30% 45; -/* border-image-slice : */ -/* Première valeur : côté haut */ -/* Deuxième valeur : côté droit */ -/* Troisième valeur : côté bas */ -/* Quatrième valeur : côté gauche */ +/* haut | droit | bas | gauche */ border-image-slice: 7 12 14 5; -/* border-image-slice: … fill */ -/* Le mot-clé fill peut être intercalé */ -/* à n'importe quel endroit */ +/* Le mot-clé `fill` */ border-image-slice: 10% fill 7 12; /* Valeurs globales */ border-image-slice: inherit; border-image-slice: initial; +border-image-slice: revert; border-image-slice: unset; ``` +La propriété `border-image-slice` peut être définie avec une à quatre valeurs `<number-percentage>` qui représentent les emplacements de chaque découpe sur l'image. Les valeurs négatives sont valides et les valeurs supérieures aux dimensions de l'image sont ramenées à `100%`. + +- Lorsqu'**une** position est indiquée, les quatre découpages sont effectués à la même distance de chaque bord. +- Lorsque **deux** positions sont indiquées, la première valeur indique la distance de découpage pour les côtés **haut et bas**, la seconde valeur indique la distance de découpage pour les côtés **gauche et droit**. +- Lorsque **trois** positions sont indiquées, la première valeur indique la distance pour le découpage par rapport au bord **haut**, la seconde indique la distance pour le découpage depuis les bords **gauche et droit**, la troisième valeur correspond à la distance de découpage pour le côté **bas**. +- Lorsque **quatre** positions sont indiquées, elles indiquent respectivement la distance de découpage pour les bords **haut**, **droit**, **bas**, et **gauche** (soit le sens des aiguilles d'une montre). + +La valeur optionnelle `fill` peut être utilisée et placée à n'importe quel endroit de la déclaration. + ### Valeurs -- `slice` - - : Une valeur de type {{cssxref("<number>")}} ou {{cssxref("<percentage>")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("<length>")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("<number>")}} correspondra à des _pixels_ pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("<percentage>")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à `100%`. Il est préférable d'utiliser des pourcentages pour les images vectorielles. +- [`<number>`](/fr/docs/Web/CSS/number) + - : Représente un décalage par rapport au bord, exprimé en _pixels_ pour les images matricielles et en _coordonnées_ pour les images vectorielles. Pour les images vectorielles, le nombre est relatif à la taille de l'élément plutôt qu'à la taille de l'image source. Aussi, dans ce cas de figure, on utilisera plutôt les pourcentages. +- [`<percentage>`](/fr/docs/Web/CSS/percentage) + - : Représente un décalage par rapport au bord comme pourcentage par rapport à la taille de l'image source : c'est la largeur de l'image qui sert de référence pour les décalages horizontaux et la hauteur de l'image qui sert de référence pour les décalages verticaux. - `fill` - - : Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche. + - : La région au centre de l'image est conservée et celle-ci est affichée comme image d'arrière-plan mais empilée *sous* l'arrière-plan fourni par [`background`](/fr/docs/Web/CSS/background). La largeur et la hauteur sont dimensionnées afin de correspondre aux tailles des régions haute et gauche. + +## Définition formelle + +{{CSSInfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Bordure avec largeur et portions ajustables + +Dans l'exemple suivant, on utilise un simple élément `<div>` avec une image de bordure sur lui. L'image source utilisée pour les bordures est la suivante : + + + +Les losanges mesurent 30px de large. Aussi, en utilisant 30 pixels comme valeur pour [`border-width`](/fr/docs/Web/CSS/border-width) et `border-image-slice`, on aura des losanges complets et nets : ```css -p { - border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png"); - border-image-slice: 30; - border-image-width: 20px; - border-image-repeat: round; - padding: 40px; -} +border-width: 30px; +border-image-slice: 30; ``` -### HTML +Ce sont les valeurs par défaut que nous avons utilisées dans cet exemple. Nous avons également fourni des curseurs qui vous permettent d'ajuster les valeurs des deux propriétés dynamiquement et d'observer l'effet : + +`border-image-slice` change la taille de la portion d'image échantillonnée pour chaque bordure et coin de bordure (et la zone du contenu si le mot-clé `fill` est utilisé). En utilisant des valeurs autour de 30, on voit que la bordure devient plutôt irrégulière. + +`border-width` change la largeur de la bordure. La taille de l'image échantillonnée est mise à l'échelle pour s'inscrire dans la bordure. Ainsi, si la largeur est supérieure à la taille de la portion utilisée, l'image pourra avoir l'air pixelisée (à moins d'avoir utilisé une image SVG). + +#### HTML ```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> +<div class="wrapper"> + <div></div> +</div> + +<ul> + <li> + <label for="width">Déplacez pour ajuster <code>border-width</code></label> + <input type="range" min="10" max="45" id="width"> + <output id="width-output">30px</output> + </li> + <li> + <label for="slice">Déplacez pour ajuster <code>border-image-slice</code></label> + <input type="range" min="10" max="45" id="slice"> + <output id="slice-output">30</output> + </li> +</ul> ``` -### Résultat +#### CSS -{{EmbedLiveSample('Exemples', '480', '320')}} +```css +.wrapper { + width: 400px; + height: 300px; +} -## Spécifications +div > div { + width: 300px; + height: 200px; + border-width: 30px; + border-style: solid; + border-image: url(border-diamonds.png); + border-image-slice: 30; + border-image-repeat: round; +} -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | +li { + display: flex; + place-content: center; +} +``` + +#### JavaScript + +```js +const widthSlider = document.getElementById('width'); +const sliceSlider = document.getElementById('slice'); +const widthOutput = document.getElementById('width-output'); +const sliceOutput = document.getElementById('slice-output'); +const divElem = document.querySelector('div > div'); + +widthSlider.addEventListener('input', () => { + const newValue = widthSlider.value + 'px'; + divElem.style.borderWidth = newValue; + widthOutput.textContent = newValue; +}) + +sliceSlider.addEventListener('input', () => { + const newValue = sliceSlider.value; + divElem.style.borderImageSlice = newValue; + sliceOutput.textContent = newValue; +}) +``` + +#### Résultat + +{{EmbedLiveSample('', '100%', 400)}} + +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-slice")}} +{{Compat}} ## Voir aussi diff --git a/files/fr/web/css/border-image-width/index.md b/files/fr/web/css/border-image-width/index.md index 3854f22b95..8a0a4689bf 100644 --- a/files/fr/web/css/border-image-width/index.md +++ b/files/fr/web/css/border-image-width/index.md @@ -1,19 +1,16 @@ --- title: border-image-width slug: Web/CSS/border-image-width -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-image-width +browser-compat: css.properties.border-image-width --- {{CSSRef}} -La propriété **`border-image-width`** définit la largeur de la bordure imagée. +La propriété [CSS](/fr/docs/Web/CSS) **`border-image-width`** définit la largeur de [l'image de bordure](/fr/docs/Web/CSS/border-image) d'un élément. {{EmbedInteractiveExample("pages/css/border-image-width.html")}} -Si `border-image-width` est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du _padding_ voire du contenu. +Si la valeur de cette propriété est supérieure à [`border-width`](/fr/docs/Web/CSS/border-width), la bordure imagée s'étendra au-delà du remplissage (<i lang="en">padding</i>) voire du contenu. ## Syntaxe @@ -33,7 +30,7 @@ border-image-width: 25%; /* Type <number> */ border-image-width: 3; -/* épaisseur verticale | horizontale */ +/* côtés verticaux | horizontaux */ border-image-width: 2em 3em; /* haut | côtés horizontaux | bas */ @@ -45,66 +42,77 @@ border-image-width: 5% 2em 10% auto; /* Valeurs globales */ border-image-width: inherit; border-image-width: initial; +border-image-width: revert; border-image-width: unset; ``` La propriété `border-image-width` est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit. -- Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés -- Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit -- Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas. -- Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire). +- Lorsqu'**une** valeur est utilisée, c'est cette valeur qui est utilisée pour **les quatre côtés** +- Lorsque **deux** valeurs sont utilisées, la première s'applique aux côtés haut et bas et la seconde aux côtés **gauche et droit** +- Lorsque **trois** valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés **gauche et droit** et la troisième au côté bas. +- Lorsque **quatre** valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté **haut**, **droit**, **bas** et **gauche** (dans le sens horaire). ### Valeurs - `<length-percentage>` - - : Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides`.` + - : Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides. - `<number>` - - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides. + - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/computed_value) de la propriété [`border-width`](/fr/docs/Web/CSS/border-width) de l'élément. Les valeurs négatives sont considérées invalides. - `auto` - - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place. -- `inherit` - - : Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent. + - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice) correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Réaliser un pavage avec une image de bordure + +Dans cet exemple on crée une image de bordure en utilisant le fichier ".png" suivant, qui mesure 90 pixels par 90 pixels : + + + +Chaque cercle sur l'image a un diamètre de 30 pixels. + +#### HTML + +```html +<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. + At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, + no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> +``` + +#### CSS ```css p { border: 20px solid; - border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round; + border-image: url("border.png") 30 round; border-image-width: 16px; padding: 40px; } ``` -### HTML - -```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> -``` +#### Résultat -### Résultat - -{{EmbedLiveSample('Exemples', '480', '320')}} +{{EmbedLiveSample('', 200, 280)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-width")}} +{{Compat}} + +## Voir aussi + +- [Arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [Apprendre le CSS : arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/fr/web/css/border-image/index.md b/files/fr/web/css/border-image/index.md index b9a0348850..b4a7ba63ad 100644 --- a/files/fr/web/css/border-image/index.md +++ b/files/fr/web/css/border-image/index.md @@ -5,13 +5,21 @@ translation_of: Web/CSS/border-image --- {{CSSRef}} -La propriété **`border-image`** dessine une image sur la bordure d'un élément. C'est [une propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}. +La propriété **`border-image`** dessine une image sur la bordure d'un élément. {{EmbedInteractiveExample("pages/css/border-image.html")}} -Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété `border-image` sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, `border-style` **doit** être présente si `border-image` est utilisée. +> **Note :** Il est préférable d'indiquer un style de bordure distinct avec [`border-style`](/fr/docs/Web/CSS/border-style) dans le cas où l'image ne chargerait pas. Bien que la spécification ne le nécessite pas, certains navigateurs n'affichent pas l'image de bordure si [`border-style`](/fr/docs/Web/CSS/border-style) vaut `none` ou si [`border-width`](/fr/docs/Web/CSS/border-width) vaut `0`. -> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de {{cssxref("border-image-source")}} vaut `none` (via `border-image-source` ou via la propriété raccourcie `border-image`), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé. +## Propriétés détaillées correspondantes + +C'est [une propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir : + +- [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset) +- [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat) +- [`border-image-source`](/fr/docs/Web/CSS/border-image-source) +- [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice) +- [`border-image-width`](/fr/docs/Web/CSS/border-image-width) ## Syntaxe @@ -27,26 +35,43 @@ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; + +/* Valeurs globales */ +border-image: inherit; +border-image: initial; +border-image: revert; +border-image: unset; ``` La propriété `border-image` peut être définie avec une à cinq valeurs parmi celles définies ci-après. -> **Note :** Si la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de {{cssxref("border-image-source")}} vaut `none` ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché. +> **Note :** Si la [valeur calculée](/fr/docs/Web/CSS/computed_value) de [`border-image-source`](/fr/docs/Web/CSS/border-image-source) vaut `none` ou si l'image ne peut pas être affichée, c'est le [`border-style`](/fr/docs/Web/CSS/border-style) correspondant qui sera affiché. ### Valeurs - `border-image-source` - - : L'image source. Voir {{cssxref("border-image-source")}}. + - : L'image source. Voir [`border-image-source`](/fr/docs/Web/CSS/border-image-source). - `border-image-slice` - - : La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}. + - : La façon dont l'image est découpée en zones (jusqu'à 4). Voir [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice). - `border-image-width` - - : La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}. + - : La largeur de la bordure avec l'image. Voir [`border-image-width`](/fr/docs/Web/CSS/border-image-width). - `border-image-outset` - - : La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}. + - : La distance entre la bordure et le bord de l'élément. Voir [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset). - `border-image-repeat` - - : La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}. + - : La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat). + +## Accessibilité + +Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document. + +- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Comprendre les critères pour 1.1.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -56,82 +81,67 @@ La propriété `border-image` peut être définie avec une à cinq valeurs parmi On découpe l'image et on la répète pour remplir la zone entre les bordures. +#### HTML + +```html +<div id="bitmap">L'image est étirée pour remplir l'espace.</div> +``` + #### CSS ```css #bitmap { border: 30px solid transparent; - padding: 20px; - border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30; + padding: 20px; + border-image: url("border.png") 30; } ``` -#### HTML - -```html -<div id="bitmap"> - L'image est étirée pour remplir l'espace. -</div> -``` - #### Résultat -{{EmbedLiveSample('Utiliser_une_image_matricielle_étirée')}} +{{EmbedLiveSample('')}} ### Utiliser un dégradé +#### HTML + +```html +<div id="gradient">L'image formée par le dégradé est étirée pour remplir la zone.</div> +``` + #### CSS ```css #gradient { - border: 30px solid; - border-image: linear-gradient(red, yellow) 10; - padding: 20px; + border: 30px solid; + border-image: linear-gradient(red, yellow) 10; + padding: 20px; } ``` -#### HTML - -```html -<div id="gradient"> - L'image formée par le gradient est étirée pour remplir la zone. -</div> -``` - #### Résultat -{{EmbedLiveSample('Utiliser_un_dégradé')}} - -## Accessibilité - -Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document. - -- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [_Understanding Success Criterion 1.1.1 - Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +{{EmbedLiveSample('')}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image")}} +{{Compat}} ## Voir aussi -- {{cssxref("border")}} -- {{cssxref("outline")}} -- {{cssxref("box-shadow")}} -- {{cssxref("background-image")}} -- {{cssxref("url()", "url()")}} -- Fonctions pour les dégradés - - - {{CSSxRef("conic-gradient")}} - - {{CSSxRef("linear-gradient")}} - - {{CSSxRef("repeating-linear-gradient")}} - - {{CSSxRef("radial-gradient")}} - - {{CSSxRef("repeating-radial-gradient")}} +- [`border`](/fr/docs/Web/CSS/border) +- [`outline`](/fr/docs/Web/CSS/outline) +- [`box-shadow`](/fr/docs/Web/CSS/box-shadow) +- [`background-image`](/fr/docs/Web/CSS/background-image) +- La fonction [`url()`](/fr/docs/Web/CSS/url()) +- Fonctions pour les dégradés : + + - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) + - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient()) + - [`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()) diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md index 2ff8f69746..6f036cfd9b 100644 --- a/files/fr/web/css/clip-path/index.md +++ b/files/fr/web/css/clip-path/index.md @@ -1,21 +1,15 @@ --- title: clip-path slug: Web/CSS/clip-path -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/clip-path +browser-compat: css.properties.clip-path --- {{CSSRef}} -La propriété **`clip-path`** empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme [`circle()`](/fr/docs/Web/SVG/Element/circle). +La propriété **`clip-path`** empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. {{EmbedInteractiveExample("pages/css/clip-path.html")}} -> **Note :** La propriété `clip-path` remplace la propriété {{cssxref("clip")}} désormais dépréciée. - ## Syntaxe ```css @@ -27,18 +21,19 @@ clip-path: none; clip-path: url(resources.svg#c1); /* Valeurs de boîte */ +clip-path: border-box; +clip-path: content-box; clip-path: fill-box; -clip-path: stroke-box; -clip-path: view-box; clip-path: margin-box; -clip-path: border-box; clip-path: padding-box; -clip-path: content-box; +clip-path: stroke-box; +clip-path: view-box; -/* Valeurs géométriques */ +/* Valeurs géométriques <basic-shape> */ /* avec une notation fonctionnelle */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); +clip-path: ellipse(50px 60px at 0 10% 20%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); @@ -48,6 +43,7 @@ clip-path: padding-box circle(50px at 0 100px); /* Valeurs globales */ clip-path: inherit; clip-path: initial; +clip-path: revert; clip-path: unset; ``` @@ -55,35 +51,53 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé ### Valeurs -- `url()` - - : Une URL qui fait référence à un élément contenant le chemin de rognage. -- `inset()`, `circle()`, `ellipse()`, `polygon()` - - : Une fonction {{cssxref("<basic-shape>")}}. Une telle forme utilise la valeur `<geometry-box>` pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (`border-box`) qui sera utilisée comme boîte de réference. +- `<clip-source>` + - : Une [`url()`](/fr/docs/Web/CSS/url()) qui référence un élément [SVG](/fr/docs/Web/SVG) [`<clipPath>`](/fr/docs/Web/SVG/Element/clipPath). + +- [`<basic-shape>`](/fr/docs/Web/CSS/basic-shape) + + - : Une forme dont la taille et la position sont définies par la valeur `<geometry-box>`. Si aucune valeur de géométrie n'est fournie, `border-box` sera utilisée comme boîte de référence. La forme peut être définie avec l'une de ces valeurs : + + - [`inset()`](/fr/docs/Web/CSS/basic-shape/inset()) + - : Définit un rectangle. + - [`circle()`](/fr/docs/Web/CSS/basic-shape/circle()) + - : Définit un cercle avec un rayon et une position. + - [`ellipse()`](/fr/docs/Web/CSS/basic-shape/ellipse()) + - : Définit une ellipse avec ses deux demi-rayons et une position. + - [`polygon()`](/fr/docs/Web/CSS/basic-shape/polygon()) + - : Définit un polygone en utilisant une règle de remplissage SVG et un ensemble d'arêtes. + - [`path()`](/fr/docs/Web/CSS/path()) + - : Définit une forme en utilisant une règle de remplissage SVG optionnelle et une définition de chemin SVG. + - `<geometry-box>` - - : Si cette valeur est combinée avec une valeur `<basic-shape>`, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante : + - : Si cette valeur est combinée avec une valeur `<basic-shape>`, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec [`border-radius`](/fr/docs/Web/CSS/border-radius)) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivantes : - - `fill-box` - - : La boîte englobant (_bounding box_) est utilisée comme boîte de référence. - - `stroke-box` - - : La boîte de contour de la boîte englobante est utilisée comme boîte de référence. - - `view-box` - - : La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par `viewBox` et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut `viewBox`. - `margin-box` - - : La boîte de marge est utilisée comme boîte de référence + - : La [boîte de marge](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box) est utilisée comme boîte de référence. - `border-box` - - : La boîte de bordure est utilisée comme boîte de référence + - : La [boîte de bordure](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#border-box) est utilisée comme boîte de référence. - `padding-box` - - : La boîte de remplissage (_padding_) est utilisée comme boîte de référence + - : La [boîte de remplissage (<i lang="en">padding</i>)](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box) est utilisée comme boîte de référence. - `content-box` - - : La boîte de contenu est utilisée comme boîte de référence. + - : La [boîte de contenu](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#content-box) est utilisée comme boîte de référence. + - `fill-box` + - : La boîte englobant (<i lang="en">bounding box</i>) est utilisée comme boîte de référence. + - `stroke-box` + - : La boîte de contour de la boîte englobante est utilisée comme boîte de référence. + - `view-box` + - : La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par `viewBox` et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut `viewBox`. - `none` - : Aucun chemin de rognage n'est créé. -> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e) est différente de `none`, cela entraînera la création d'un nouveau [contexte d'empilement](/fr/docs/Glossaire/Contexte_d_empilement) (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1). +> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/computed_value) est différente de `none`, cela entraînera la création d'un nouveau [contexte d'empilement](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) (de la même façon qu'[`opacity`](/fr/docs/Web/CSS/opacity) avec des valeurs différentes de `1`). + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} @@ -107,7 +121,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="none"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -116,8 +130,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -141,7 +155,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="svg"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -150,8 +164,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -164,7 +178,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="svg2"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -173,8 +187,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="svg2"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -188,7 +202,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape1"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -197,8 +211,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape1"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -210,7 +224,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape2"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -219,8 +233,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape2"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -232,7 +246,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape3"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -241,8 +255,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape3"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -254,7 +268,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape4"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -263,8 +277,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape4"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -276,7 +290,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape5"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -285,8 +299,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape5"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -298,7 +312,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape6"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -307,8 +321,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape6"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -320,7 +334,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape7"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -329,8 +343,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape7"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -342,7 +356,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape8"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -351,8 +365,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape8"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -364,7 +378,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape9"> - I LOVE<br><em>clipping</em> + J'ADORE<br><em>le rognage</em> </p> </div> </div> @@ -373,8 +387,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé <svg viewBox="0 0 192 192"> <g class="shape9"> <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> + <text x="96" y="91">J'ADORE</text> + <text x="96" y="109" class="em">le rognage</text> </g> </svg> </div> @@ -515,14 +529,14 @@ svg text.em { } ``` -{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}} +{{EmbedLiveSample("", "100%", 800, "", "", "example-outcome-frame")}} ### Exemple complet #### HTML ```html -<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" +<img id="clipped" src="mdn.svg" alt="MDN logo"> <svg height="0" width="0"> <defs> @@ -562,26 +576,23 @@ clipPathSelect.addEventListener("change", function (evt) { #### Résultat -{{EmbedLiveSample("Exemple_complet", 230, 250)}} +{{EmbedLiveSample("", 230, 300)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- | -| {{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}} | {{Spec2('CSS Masks')}} | Extension aux élément HTML. `clip-path` remplace la propriété {{cssxref("clip")}} désormais dépréciée. | -| {{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}} | {{Spec2('SVG1.1')}} | Définition initiale (s'applique uniquement aux éléments SVG) | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.clip-path")}} +{{Compat}} ## Voir aussi -- {{cssxref("mask")}} -- {{cssxref("filter")}} -- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content) -- [Les formes CSS, le _clipping_ et le _masking_ : comment les utiliser (article en anglais)](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/) -- L'attribut SVG {{SVGAttr("clip-path")}} -- L'attribut SVG {{SVGAttr("clip-rule")}} +- Les propriétés CSS + - [`mask`](/fr/docs/Web/CSS/mask) + - [`filter`](/fr/docs/Web/CSS/filter) +- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) +- [Les formes CSS, le rognage et le masquage : comment les utiliser (en anglais)](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/) +- Les attributs SVG : + - [`clip-path`](/fr/docs/Web/SVG/Attribute/clip-path) + - [`clip-rule`](/fr/docs/Web/SVG/Attribute/clip-rule) diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md index 6c2aedbb70..1e6833ad5f 100644 --- a/files/fr/web/css/content/index.md +++ b/files/fr/web/css/content/index.md @@ -2,34 +2,40 @@ title: content slug: Web/CSS/content translation_of: Web/CSS/content +browser-compat: css.properties.content --- {{CSSRef}} -La propriété **`content`** est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété `content` sont des _[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)._ +La propriété [CSS](/fr/docs/Web/CSS) **`content`** remplace un élément avec une valeur générée. Les objets insérés via la propriété `content` sont des **[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)**. ```css -/* Des mots-clés qui ne peuvent pas être mélangés - avec d'autres valeurs */ +/* Des mots-clés qui ne peuvent pas être mélangés avec d'autres valeurs */ content: normal; content: none; -/* Valeurs pour une image */ +/* Valeurs pour une image (<image>) */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); +content: image-set("image1x.png" 1x, "image2x.png" 2x); + +/* Texte alternatif pour le contenu, ajouté avec le niveau 3 de la spécification */ +content: url("http://www.example.com/test.png") / "Le texte alternatif"; /* Une valeur <string>, les caractères non-latin */ /* doivent être échappées par ex. \000A9 for © */ content: 'prefix'; -/* Valeurs utilisant un compteur */ +/* Valeurs utilisant un compteur, éventuellement + avec <list-style-type> */ content: counter(compteur_chapitre); -content: counter(compteur_section, "."); +content: counter(compteur_chapitre, upper-roman); +content: counters(compteur_section, "."); +content: counters(compteur_section, ".", decimal-leading-zero); /* attr() lie à la valeur de l'attribut HTML */ content: attr(value string); -/* Mots-clés dépendant de langue */ -/* ou de la position */ +/* Mots-clés dépendant de langue ou de la position */ content: open-quote; content: close-quote; content: no-open-quote; @@ -37,11 +43,12 @@ content: no-close-quote; /* Sauf avec normal et none, on peut utiliser */ /* plusieurs valeurs de façon simultanée */ -content: open-quote chapter_counter; +content: open-quote counter(compteur_chapitre); /* Valeurs globales */ content: inherit; content: initial; +content: revert; content: unset; ``` @@ -50,23 +57,40 @@ content: unset; ### Valeurs - `none` - - : Le pseudo-élément n'est pas généré. + - : Lorsque cette valeur est appliquée à un pseudo-élément, ce dernier n'est pas généré. Si elle est appliquée à un élément, la valeur n'a pas d'effet. - `normal` - - : Résulte en `none` pour les pseudo-éléments `:before` et `:after`. -- {{cssxref("<string>")}} - - : Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©). -- {{cssxref("<image>")}} - - : Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher. -- `counter()` ou `counters()` (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}}) - - : Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(_name_)' ou 'counter(_name_, _style_)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (`decimal` par défaut). La seconde a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (`decimal` par défaut). Voir [la section sur les compteurs automatiques](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) et sur la numérotation pour plus d'informations. + - : Résulte en `none` pour les pseudo-éléments `::before` et `::after`. +- [`<string>`](/fr/docs/Web/CSS/string) + - : Contenu qui indique le texte alternatif de l'élément. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©). +- [`<image>`](/fr/docs/Web/CSS/image) + - : Une image (valeur de type [`<image>`](/fr/docs/Web/CSS/image)) avec une [`url()`](/fr/docs/Web/CSS/url()) ou [`<gradient>`](/fr/docs/Web/CSS/gradient) ou une partie de la page web fournie par la fonction [`element()`](/fr/docs/Web/CSS/element()) et qui indique le contenu à afficher. +- [`counter()`](/fr/docs/Web/CSS/counter()) + - : Un [compteur CSS](/fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters), généralement un nombre, généralement produit via les propriétés [`<counter-reset>`](/fr/docs/Web/CSS/counter-reset) et [`<counter-increment>`](/fr/docs/Web/CSS/counter-increment) et qui peut être affiché grâce à la fonction [`counter()`](/fr/docs/Web/CSS/counter()) or [`counters()`](/fr/docs/Web/CSS/counters()). + + [`counter()`](/fr/docs/Web/CSS/counter()) possède deux formes : `counter(_name_)` ou `counter(_name_, _style_)`. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style ([`<list-style-type>`](/fr/docs/Web/CSS/list-style-type) indiqué (`decimal` par défaut). + + [`counters()`](/fr/docs/Web/CSS/counters()) a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond, séparés par la chaîne définie. Les compteurs sont formatés selon le style ([`<list-style-type>`](/fr/docs/Web/CSS/list-style-type) indiqué (`decimal` par défaut). + - `attr(X)` - : Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé. - `open-quote` | `close-quote` - - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}. + - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété [`quotes`](/fr/docs/Web/CSS/quotes). - `no-open-quote` | `no-close-quote` - : N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations. -### Syntaxe formelle +## Accessibilité + +Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal. + +- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS — Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/) +- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) +- [Comprendre les critères de succès 1.3.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -74,19 +98,22 @@ content: unset; ### Titres et citations +Dans cet exemple, on insère des marques de citation et le mot « Chapitre » pour chaque titre. + #### HTML ```html <h1>5</h1> -<p> Commençons par une citation de Sir Tim Berners-Lee, - <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"> - I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q> We must understand that there is nothing fundamentally wrong with building on the contributions of others. +<p>Commençons par une citation de Sir Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"> + I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q> + We must understand that there is nothing fundamentally wrong with building on the contributions of others. </p> <h1>6</h1> -<p> Citons le manifeste Mozilla - <q cite="http://www.mozilla.org/about/manifesto/"> - Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible. +<p>Citons le manifeste Mozilla, + <q cite="https://www.mozilla.org/fr/about/manifesto/"> + Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.</q> </p> ``` @@ -94,19 +121,28 @@ content: unset; ```css q { - color: #00008B; - font-style: italic; + color: blue; +} + +q::before { + content: open-quote; } -q::before { content: open-quote } -q::after { content: close-quote } +q::after { + content: close-quote; +} -h1::before { content: "Chapitre "; } +h1::before { + content: "Chapter "; + /* L'espace après la dernière lettre est + voulu afin de détacher le mot du reste + du contenu */ +} ``` #### Résultat -{{EmbedLiveSample('Titres_et_citations', 460, 100)}} +{{EmbedLiveSample('', 460, 310)}} ### Ajouter une icône avant un lien @@ -120,15 +156,15 @@ h1::before { content: "Chapitre "; } ```css a::before{ - content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: "; - font: x-small Arial,freeSans,sans-serif; - color: gray; + content: url("mdn-favicon16.png") " MOZILLA: "; + font: x-small Arial, freeSans, sans-serif; + color: gray; } ``` #### Résultat -{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}} +{{EmbedLiveSample('', 200, 60)}} ### Utiliser les classes @@ -137,10 +173,10 @@ a::before{ ```html <h2>Top des ventes</h2> <ol> - <li>Thriller politique</li> - <li class="nouveaute">Histoires effrayantes</li> - <li>Ma biographie</li> - <li class="nouveaute">Bit-lit</li> + <li>Thriller politique</li> + <li class="nouveaute">Histoires effrayantes</li> + <li>Ma biographie</li> + <li class="nouveaute">Bit-lit</li> </ol> ``` @@ -148,14 +184,14 @@ a::before{ ```css .nouveaute::after { - content: " Nouveau !"; - color: red; + content: " Nouveau !"; + color: red; } ``` #### Résultat -{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}} +{{EmbedLiveSample('', 300, 200)}} ### Utiliser les attributs d'image et d'élément @@ -183,11 +219,11 @@ a::after { } #moz::before { - content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); + content: url("mdn-favicon16.png"); } #mdn::before { - content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico"); + content: url("mdn-favicon16.png"); } li { @@ -197,11 +233,11 @@ li { #### Résultat -{{EmbedLiveSample("Utiliser_les_attributs_dimage_et_délément", '100%', 160)}} +{{EmbedLiveSample("", '100%', 160)}} ### Remplacer un élément -Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("<url>")}} ou {{cssxref("<image>")}} . Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé. +Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une [`url()`](/fr/docs/Web/CSS/url()) ou une valeur de type [`<image>`](/fr/docs/Web/CSS/image). Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé. #### HTML @@ -213,7 +249,7 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p ```css #replaced { - content: url("https://mdn.mozillademos.org/files/12668/MDN.svg"); + content: url("mdn.svg"); } #replaced::after { /* Ceci ne sera pas affiché, */ @@ -224,33 +260,21 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p #### Résultat -{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}} - -## Accessibilité - -Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal. - -- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/) -- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) -- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) +{{EmbedLiveSample('', '100%', 250)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Content", "#content-property", "content")}} | {{Spec2("CSS3 Content")}} | | -| {{SpecName('CSS2.1', 'generate.html#content', 'content')}} | {{Spec2('CSS2.1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.content")}} +{{Compat}} ## Voir aussi -- {{cssxref("::after")}} -- {{cssxref("::before")}} -- {{cssxref("quotes")}} -- {{Cssxref("::marker")}} -- {{cssxref("url()", "url()")}} +- [Les éléments remplacés](/fr/docs/Web/CSS/Replaced_element) +- [`::after`](/fr/docs/Web/CSS/::after) +- [`::before`](/fr/docs/Web/CSS/::before) +- [`::marker`](/fr/docs/Web/CSS/::marker) +- [`quotes`](/fr/docs/Web/CSS/quotes) +- La fonction [`url()`](/fr/docs/Web/CSS/url()) diff --git a/files/fr/web/css/cross-fade()/index.md b/files/fr/web/css/cross-fade()/index.md index c211fd76ee..d31f0287bb 100644 --- a/files/fr/web/css/cross-fade()/index.md +++ b/files/fr/web/css/cross-fade()/index.md @@ -1,28 +1,27 @@ --- title: cross-fade() slug: Web/CSS/cross-fade() -tags: - - CSS - - Experimental - - Fonction - - Reference translation_of: Web/CSS/cross-fade() +browser-compat: css.types.image.cross-fade --- -{{draft}}{{CSSRef}} +{{CSSRef}} -La fonction CSS **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial. +La fonction [CSS](/fr/docs/Web/CSS) **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. +On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial. + +## Syntaxe > **Attention :** À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles. -## Syntaxe (spécification) +### Syntaxe de la spécification -La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%. +La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion, en termes d'opacité, de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de guillemets, doit contenir le symbole `%` et être comprise entre 0% et 100%. -Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("<image>")}}) CSS peut être utilisée. +Cette fonction pourra être utilisée à tout endroit où une image CSS peut être utilisée. -### Utilisation des pourcentages +#### Utilisation des pourcentages -Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient. +Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. ```css cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ @@ -33,9 +32,11 @@ cross-fade(url(white.png) 100%, url(black.png) 0%); /* complètement blanche * cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */ ``` +Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient. + Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%. -Les lignes précédentes peuvent ainsi s'écrire également : +Les lignes précédentes peuvent ainsi s'écrire également : ```css cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ @@ -46,41 +47,20 @@ cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */ ``` -Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%). - -### Syntaxe formelle - -{{csssyntax}} +Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%). Les lignes qui suivent sont (quasiment) identiques : -## Exemples - -### HTML - -```html -<div id="div"></div> +```css +cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* chacune aura 33.3333% d'opacité */ +cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); ``` -### CSS +### Syntaxe des implémentations (plus ancienne) ```css -#div { - width: 300px; - height: 300px; - background-image: cross-fade( - 75% url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png')); -} +cross-fade( <image>, <image>, <percentage> ) ``` -### Résultat - -{{EmbedLiveSample("Exemples", "330", "330")}} - -## Ancienne syntaxe (implémentations) - - cross-fade( <image, <image>, <percentage> ) - -La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et [la syntaxe originale](#syntaxe), implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink. +La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink. ```css cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ @@ -92,26 +72,22 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément. -Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe. +Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe. -### Exemples +## Accessibilité -#### CSS +Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par-dessus. -```css -.crossfade { - width: 300px; - height: 300px; - background-image: -webkit-cross-fade( - url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'), - 75%); - background-image: cross-fade( - url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'), - 75%); -} -``` +- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Comprendre les critères de succès 1.1.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Ancienne syntaxe pour cross-fade #### HTML @@ -119,33 +95,46 @@ Dans les exemples associés à la syntaxe de la spécification, on avait un cas <div class="crossfade"></div> ``` -#### Résultat - -{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}} +#### CSS -## Accessibilité +```css +.crossfade { + width: 300px; + height: 300px; + background-image: -webkit-cross-fade( + url('br.png'), + url('tr.png'), + 75%); + background-image: cross-fade( + url('br.png'), + url('tr.png'), + 75%); +} +``` -Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus. +#### Résultat -- [Comprendre les règles WCAG 1.1.](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Comprendre les critères de succès 1.1.1 pour WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +{{EmbedLiveSample("", "330", "330")}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}} | {{Spec2('CSS4 Images')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.types.image.cross-fade")}} +{{Compat}} ## Voir aussi -- {{cssxref("image")}} -- {{cssxref("url")}} -- {{cssxref("_image", "image()")}} -- {{cssxref("image-set")}} -- {{cssxref("element()")}} -- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients "Using gradients") -- Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}}, +- [`<image>`](/fr/docs/Web/CSS/image) +- [`url()`](/fr/docs/Web/CSS/url()) +- [`image()`](/fr/docs/Web/CSS/image/image()) +- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) +- [`element()`](/fr/docs/Web/CSS/element()) +- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- Fonctions de création de dégradés : + - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient) + - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient) + - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient) + - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) + - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient) diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md index b284c2f329..44a9d63373 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md @@ -1,1592 +1,9 @@ --- title: Générateur de border-radius slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator -tags: - - CSS - - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- -Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}. +Cet outil peut être utilisé afin de générer du code pour la propriété [`border-radius`](/fr/docs/Web/CSS/border-radius). -## border-radius-generator - -```html hidden -<div id="container"> - <div class="group section"> - <div id="preview" class="col span_12"> - <div id="subject"> - <div id="top-left" class="radius-container" - data-X="left" data-Y="top"> - </div> - <div id="top-right" class="radius-container" - data-X="right" data-Y="top"> - </div> - <div id="bottom-right" class="radius-container" - data-X="right" data-Y="bottom"> - </div> - <div id="bottom-left" class="radius-container" - data-X="left" data-Y="bottom"> - </div> - - <div id="radius-ui-sliders"> - <div id="tlr" class="ui-input-slider" data-topic="top-left" - data-unit=" px" data-sensivity="2"></div> - - <div id="tlw" class="ui-input-slider" data-topic="top-left-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="tlh" class="ui-input-slider" data-topic="top-left-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="trr" class="ui-input-slider" data-topic="top-right" - data-unit=" px" data-sensivity="2"></div> - - <div id="trw" class="ui-input-slider" data-topic="top-right-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="trh" class="ui-input-slider" data-topic="top-right-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="brr" class="ui-input-slider" data-topic="bottom-right" - data-unit=" px" data-sensivity="2"></div> - - <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="blr" class="ui-input-slider" data-topic="bottom-left" - data-unit=" px" data-sensivity="2"></div> - - <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" - data-unit=" px" data-sensivity="2"></div> - </div> - </div> - </div> - </div> - <div id="controls" class="group section"> - - <div class="group section"> - <div id="dimensions"> - <div class="ui-input-slider" data-topic="width" data-info="width" - data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> - - <div class="ui-input-slider" data-topic="height" data-info="height" - data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> - </div> - - <div id="output"></div> - </div> - - <div class="group section"> - <div id="radius-lock"> - <div class="info"> Coins arrondis </div> - <div class="ui-checkbox" data-topic='top-left'></div> - <div class="ui-checkbox" data-topic='top-right'></div> - <div class="ui-checkbox" data-topic='bottom-right'></div> - <div class="ui-checkbox" data-topic='bottom-left'></div> - </div> - - <div id="unit-selection"> - <div class="info"> Unités pour la bordure </div> - </div> - </div> - - </div> -</div> -``` - -```css hidden -/* GRID OF TEN - * ========================================================================== */ - -.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-container { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.ui-input-slider-container * { - 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 Component - */ - -/* 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; -} - -body { - max-width: 1000px; - margin: 0 auto; - - 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; - user-select: none; -} - -#container { - width: 100%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/******************************************************************************/ -/******************************************************************************/ -/* - * Preview Area - */ - -#preview { - height: 500px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - overflow: hidden; - position: relative; -} - -#preview .content { - width: 100%; - height: 100%; - display: block; -} - -#preview input { - color: #333; - border: 1px solid #CCC; - border-radius: 3px; -} - -#subject { - width: 400px; - height: 150px; - margin: 0 auto; - border: 3px solid #C60; - background: #FFF; - position: relative; -} - -.radius { - width: 50%; - height: 50%; - border: 1px solid #CCC; - display: none; - position: absolute; - z-index: 1; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.handle { - width: 16px; - height: 16px; - position: absolute; - z-index: 2; -} - -.handle-top-left { - top: -12px; - left: -12px; - cursor: se-resize; - background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; -} - -.handle-top-right { - top: -12px; - right: -12px; - cursor: sw-resize; - background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; -} - -.handle-bottom-right { - bottom: -12px; - right: -12px; - cursor: nw-resize; - background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat; -} - -.handle-bottom-left { - bottom: -12px; - left: -12px; - cursor: ne-resize; - background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat; -} - - -.radius-container { - position: absolute; - display : block; - z-index: 1; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* TOP LEFT */ -#top-left { - top: 0; - left: 0; -} - -#top-left .radius { - border-top-left-radius: 100%; - top: 0; - left: 0; -} - -/* TOP RIGHT */ -#top-right { - top: 0; - right: 0; -} - -#top-right .radius { - border-top-right-radius: 100%; - top: 0; - right: 0; -} - -/* BOTTOM RIGHT */ -#bottom-right { - bottom: 0; - right: 0; -} - -#bottom-right .radius { - border-bottom-right-radius: 100%; - bottom: 0; - right: 0; -} - -/* BOTTOM lEFT */ -#bottom-left { - bottom: 0; - left: 0; -} - -#bottom-left .radius { - border-bottom-left-radius: 100%; - bottom: 0; -} - -/* INPUT SLIDERS */ - -#preview .ui-input-slider { - margin: 10px; - position: absolute; - z-index: 10; -} - -#radius-ui-sliders { - width: 100%; - height: 100%; - min-height: 75px; - min-width: 150px; - padding: 20px 50px; - top: -20px; - left: -50px; - position: relative; -} - -#tlr { - top: -30px; - left: -50px; - display: none; -} - -#tlw { - top: -30px; - left: 30px; -} - -#tlh { - top: 20px; - left: -50px; -} - -#trr { - top: -30px; - right: -50px; - display: none; -} - -#trw { - top: -30px; - right: 30px; -} - -#trh { - top: 20px; - right: -50px; -} - -#brr { - bottom: -30px; - right: -50px; - display: none; -} - -#brw { - bottom: -30px; - right: 30px; -} - -#brh { - bottom: 20px; - right: -50px; -} - -#blr { - bottom: -30px; - left: -50px; - display: none; -} - -#blw { - bottom: -30px; - left: 30px; -} - -#blh { - bottom: 20px; - left: -50px; -} - -#preview .ui-input-slider-left, #preview .ui-input-slider-right { - visibility: hidden; -} - -#preview .ui-input-slider-container:hover .ui-input-slider-left { - visibility: visible; -} - -#preview .ui-input-slider-container:hover .ui-input-slider-right { - visibility: visible; -} - -/* - * - */ - -#unit-selection { - width: 200px; - height: 75px; - margin: 30px 30px 0 0; - padding: 30px; - border: 3px solid #555; - border-radius: 10px; - position: relative; - float: right; -} - -#unit-selection .info { - height: 20%; - width: 100%; - line-height: 20%; - font-size: 20px; - text-align: center; - position: relative; - top: 40%; -} - -#unit-selection .dropdown { - width: 50px; - height: 20px; - margin: 10px; - padding: 0; - border-radius: 3px; - position: absolute; - overflow: hidden; -} - -#unit-selection select { - width: 50px; - height: 20px; - marign: 0; - padding: 0 0 0 10px; - background: #555; - border: 1px solid #555; - border: none; - color: #FFF; - float: left; -} - -#unit-selection select option { - background: #FFF; - color: #333; -} - -#unit-selection select:hover { - cursor: pointer; -} - -#unit-selection .dropdown:before { - content: ""; - width: 18px; - height: 20px; - display: block; - background-color: #555; - background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); - background-position: center center; - background-repeat: no-repeat; - top: 0px; - right: 0px; - position: absolute; - z-index: 1; - pointer-events: none; -} - -#unit-selection .unit-top-left { - top: 0; - left: 0; - display: none; -} - -#unit-selection .unit-top-left-w { - top: -22px; - left: 30px; -} - -#unit-selection .unit-top-left-h { - top: 20px; - left: -37px; -} - -#unit-selection .unit-top-right { - top: 0; - right: 0; - display: none; -} - -#unit-selection .unit-top-right-w { - top: -22px; - right: 30px; -} - -#unit-selection .unit-top-right-h { - top: 20px; - right: -37px; -} - -#unit-selection .unit-bottom-right { - bottom: 0; - right: 0; - display: none; -} - -#unit-selection .unit-bottom-right-w { - bottom: -22px; - right: 30px; -} - -#unit-selection .unit-bottom-right-h { - bottom: 20px; - right: -37px; -} - -#unit-selection .unit-bottom-left { - bottom: 0; - left: 0; - display: none; -} - -#unit-selection .unit-bottom-left-w { - bottom: -22px; - left: 30px; -} - -#unit-selection .unit-bottom-left-h { - bottom: 20px; - left: -37px; -} - -/******************************************************************************/ -/******************************************************************************/ - - -#radius-lock { - width: 200px; - height: 75px; - margin: 30px 0 0 30px; - padding: 30px; - border: 3px solid #555; - border-radius: 10px; - position: relative; - float: left; -} - -#radius-lock .ui-checkbox { - color: #FFF; - position: absolute; -} - -#radius-lock .ui-checkbox > label { - height: 20px; - width: 34px; - padding: 0; -} - -#radius-lock .info { - height: 20%; - width: 100%; - line-height: 20%; - font-size: 20px; - text-align: center; - position: relative; - top: 40%; -} - -#radius-lock [data-topic="top-left"] { - top: 10px; - left: 10px; -} - -#radius-lock [data-topic="top-right"] { - top: 10px; - right: 10px; -} - -#radius-lock [data-topic="bottom-right"] { - bottom: 10px; - right: 10px; -} - -#radius-lock [data-topic="bottom-left"] { - bottom: 10px; - left: 10px; -} - -/** - * Controls - */ - -#dimensions { - width: 200px; - color: #444; - float:left; -} - -#dimensions input { - background: #555; - color: #FFF; - border: none; - border-radius: 3px; -} - -#output { - width: 500px; - padding: 10px 0; - margin: 10px 0; - color: #555; - text-align: center; - border: 1px dashed #999; - border-radius: 3px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; - user-select: text; - - float: right; -} -``` - -```js hidden -'use strict'; - - -/** - * UI-InputSliderManager - */ - -var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseInt(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - subscribe(obj.topic, function(value) { - input.value = value + obj.unit; - }); - - 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) { - 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("mousemove", sliderMotion); - }); - - document.addEventListener("mouseup", function(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 = 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 topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensivity = node.getAttribute('data-sensivity') | 0; - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.topic = topic; - this.node = node; - this.unit = unit; - this.sensivity = sensivity > 0 ? sensivity : 5; - - 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); - node.className = 'ui-input-slider ui-input-slider-container'; - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - } - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - if (send_notify !== undefined && send_notify === false) { - slider.input.value = value + slider.unit; - 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 getNode = function getNode(topic) { - return sliders[topic].node; - } - - 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() { - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - 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, - getNode : getNode, - 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; - } - catch(error) { - console.log(error); - } - } - - 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() { - 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() { - BorderRadius.init(); -}); - -var BorderRadius = (function BorderRadius() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * 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 - } - - })(); - - var subject; - var units = ['px', '%']; - var output = null; - - var UnitSelector = function UnitSelector(topic) { - - this.container = document.createElement("div"); - this.select = document.createElement("select"); - for (var i in units) { - var option = document.createElement("option"); - option.value = i; - option.textContent = units[i]; - this.select.appendChild(option); - } - - this.container.className = 'dropdown ' + 'unit-' + topic; - this.container.appendChild(this.select); - } - - UnitSelector.prototype.setValue = function setValue(value) { - this.salect.value = value; - } - - - var RadiusContainer = function RadiusContainer(node) { - var radius = document.createElement('div'); - var handle = document.createElement('div'); - var x = node.getAttribute('data-x'); - var y = node.getAttribute('data-y'); - var active = false; - - this.id = node.id; - this.node = node; - this.radius = radius; - this.handle = handle; - this.width = 100; - this.height = 50; - this.size = 0; - this.rounded = false; - - this.unitX = 0; - this.unitY = 0; - this.unitR = 0; - - this.maxW = 100; - this.maxH = 100; - this.maxR = 100; - - this.topic = y + '-' + x; - - var sliderW = InputSliderManager.getNode(this.topic + '-w'); - var sliderH = InputSliderManager.getNode(this.topic + '-h'); - var sliderR = InputSliderManager.getNode(this.topic); - - this.setUnitX(this.unitX); - this.setUnitY(this.unitY); - this.setUnitR(this.unitR); - - this.updateWidth(); - this.updateHeight(); - this.updateRadius(); - - if (x === 'left') this.resizeX = 1; - if (x === 'right') this.resizeX = -1; - if (y === 'top') this.resizeY = 1; - if (y === 'bottom') this.resizeY = -1; - - radius.className = 'radius'; - - var unit_selector = document.getElementById("unit-selection"); - var unitW = new UnitSelector(this.topic + '-w'); - var unitH = new UnitSelector(this.topic + '-h'); - var unitR = new UnitSelector(this.topic); - - unit_selector.appendChild(unitW.container); - unit_selector.appendChild(unitH.container); - unit_selector.appendChild(unitR.container); - node.appendChild(radius); - subject.appendChild(handle); - - unitW.select.addEventListener('change', function(e) { - this.setUnitX(e.target.value | 0); - }.bind(this)); - - unitH.select.addEventListener('change', function(e) { - this.setUnitY(e.target.value | 0); - }.bind(this)); - - unitR.select.addEventListener('change', function(e) { - this.setUnitR(e.target.value | 0); - }.bind(this)); - - if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' - if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; - if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; - if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; - - handle.addEventListener("mousedown", function(e) { - active = true; - this.radius.style.display = 'block'; - PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); - }.bind(this)); - - document.addEventListener("mouseup", function(e) { - this.radius.style.display = 'none'; - if (active === true) - PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); - }.bind(this)); - - InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this)); - InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this)); - InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); - - ButtonManager.subscribe(this.topic, function(value) { - this.rounded = value; - if (value === true) { - unitW.container.style.display = 'none'; - unitH.container.style.display = 'none'; - unitR.container.style.display = 'block'; - sliderW.style.display = 'none'; - sliderH.style.display = 'none'; - sliderR.style.display = 'block'; - this.setUnitR(this.unitR); - this.updateRadius(); - } - - if (value === false) { - unitW.container.style.display = 'block'; - unitH.container.style.display = 'block'; - unitR.container.style.display = 'none'; - sliderW.style.display = 'block'; - sliderH.style.display = 'block'; - sliderR.style.display = 'none'; - this.setUnitX(this.unitX); - this.setUnitY(this.unitY); - this.updateWidth(); - this.updateHeight(); - } - - this.updateBorderRadius(); - - }.bind(this)); - - this.updateBorderRadius(); - } - - RadiusContainer.prototype.updateWidth = function updateWidth() { - this.node.style.width = this.width + units[this.unitX]; - var value = Math.round(this.width / 2); - InputSliderManager.setValue(this.topic + '-w', value, false); - } - - RadiusContainer.prototype.updateHeight = function updateHeight() { - this.node.style.height = this.height + units[this.unitY]; - var value = Math.round(this.height / 2); - InputSliderManager.setValue(this.topic + '-h', value, false); - } - - RadiusContainer.prototype.updateRadius = function updateRadius() { - var value = Math.round(this.size / 2); - this.node.style.width = this.size + units[this.unitR]; - this.node.style.height = this.size + units[this.unitR]; - InputSliderManager.setValue(this.topic, value, false); - } - - RadiusContainer.prototype.setWidth = function setWidth(value) { - this.radius.style.display = 'block'; - this.width = 2 * value; - this.node.style.width = this.width + units[this.unitX]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setHeight = function setHeight(value) { - this.radius.style.display = 'block'; - this.height = 2 * value; - this.node.style.height = this.height + units[this.unitY]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setRadius = function setRadius(value) { - this.radius.style.display = 'block'; - this.size = 2 * value; - this.node.style.width = this.size + units[this.unitR]; - this.node.style.height = this.size + units[this.unitR]; - this.updateBorderRadius(); - } - - RadiusContainer.prototype.setUnitX = function setUnitX(value) { - this.unitX = value; - if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; - if (this.unitX === 1) this.maxW = 200; - InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]); - InputSliderManager.setMax(this.topic + '-w', this.maxW / 2); - } - - RadiusContainer.prototype.setUnitY = function setUnitY(value) { - this.unitY = value; - if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; - if (this.unitY === 1) this.maxH = 200; - InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]); - InputSliderManager.setMax(this.topic + '-h', this.maxH / 2); - } - - RadiusContainer.prototype.setUnitR = function setUnitR(value) { - this.unitR = value; - - if (this.unitR === 0) - this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth); - - if (this.unitR === 1) - this.maxR = 200; - - InputSliderManager.setUnit(this.topic, units[this.unitR]); - InputSliderManager.setMax(this.topic, this.maxR / 2); - } - - RadiusContainer.prototype.updateUnits = function updateUnits(unit) { - if (this.rounded) { - this.setUnitR(this.unitR); - return; - } - - if (unit === 0) - this.setUnitX(this.unitX); - - if (unit === 1) - this.setUnitY(this.unitY); - } - - RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () { - - if (this.rounded === true) { - var unit = units[this.unitR]; - var value = Math.round(this.size / 2); - return value + unit; - } - - var unitX = units[this.unitX]; - var unitY = units[this.unitY]; - var valueX = Math.round(this.width / 2); - var valueY = Math.round(this.height / 2); - - if (valueX === valueY && this.unitX === this.unitY) - return valueX + unitX; - - return valueX + unitX + ' ' + valueY + unitY; - } - - RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () { - var radius = this.composeBorderRadius(); - var corner = 0; - - if (this.topic === 'top-left') { - subject.style.borderTopLeftRadius = radius; - corner = 0; - } - - if (this.topic === 'top-right') { - subject.style.borderTopRightRadius = radius; - corner = 1; - } - - if (this.topic === 'bottom-right') { - subject.style.borderBottomRightRadius = radius; - corner = 2; - } - - if (this.topic === 'bottom-left') { - subject.style.borderBottomLeftRadius = radius; - corner = 3; - } - - Tool.updateOutput(corner, radius); - } - - RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) { - - if (this.rounded === true) { - this.size += this.resizeX * deltaX + this.resizeY * deltaY; - if (this.size < 0) this.size = 0; - if (this.size > this.maxR) this.size = this.maxR; - this.updateRadius(); - this.updateBorderRadius(); - return; - } - - if (deltaX) { - this.width += this.resizeX * deltaX; - if (this.width < 0) this.width = 0; - if (this.width > this.maxW) this.width = this.maxW; - this.updateWidth(); - } - - if (deltaY) { - this.height += this.resizeY * deltaY; - if (this.height < 0) this.height = 0; - if (this.height > this.maxH) this.height = this.maxH; - this.updateHeight(); - } - - if (deltaX || deltaY) - this.updateBorderRadius(); - } - - - /** - * Tool Manager - */ - var Tool = (function Tool() { - var preview; - var preview_ui; - var radius_containers = []; - var border_width = 3; - var borders1 = [null, null, null, null]; - var borders2 = [0, 0, 0, 0]; - - var updateUIWidth = function updateUIWidth(value) { - var pwidth = subject.parentElement.clientWidth; - var left = (pwidth - value) / 2; - subject.style.width = value + "px"; - - for (var i = 0; i < 4; i++) - radius_containers[i].updateUnits(0); - } - - var updateUIHeight = function updateUIHeight(value) { - var pheight = subject.parentElement.clientHeight; - var top = (pheight - value) / 2; - subject.style.height = value + "px"; - subject.style.top = top - border_width + "px"; - - for (var i = 0; i < 4; i++) - radius_containers[i].updateUnits(1); - } - - var updatePreviewUIWidth = function updatePreviewUIWidth() { - var p = subject.parentElement.clientWidth; - var v = preview_ui.clientWidth; - console.log(p, v, (p - v ) / 2); - preview_ui.style.left = (p - v) / 2 + "px" ; - } - - var updatePreviewUIHeight = function updatePreviewUIHeight() { - var p = subject.parentElement.clientHeight; - var v = preview_ui.clientHeight; - console.log(p, v, (p - v ) / 2); - preview_ui.style.top = (p - v) / 2 + "px" ; - } - - var updateOutput = function updateOutput(corner, radius) { - var values = radius.split(" "); - - borders1[corner] = values[0]; - borders2[corner] = values[0]; - - if (values.length === 2) - borders2[corner] = values[1]; - - var border_1_value = borders1.join(" "); - var border_2_value = borders2.join(" "); - var border_radius = 'border-radius: ' + border_1_value; - - if (border_2_value !== border_1_value) - border_radius += ' / ' + border_2_value; - - border_radius += ';'; - output.textContent = border_radius; - } - - var init = function init() { - preview = getElemById("preview"); - subject = getElemById("subject"); - output = getElemById("output"); - preview_ui = getElemById("radius-ui-sliders"); - - var elem = document.querySelectorAll('.radius-container'); - var size = elem.length; - for (var i = 0; i < size; i++) - radius_containers[i] = new RadiusContainer(elem[i]); - - InputSliderManager.subscribe("width", updateUIWidth); - InputSliderManager.subscribe("height", updateUIHeight); - - InputSliderManager.setValue("width", subject.clientWidth); - InputSliderManager.setValue("height", subject.clientHeight); - } - - return { - init : init, - updateOutput : updateOutput - } - - })(); - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - InputSliderManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - -})(); -``` - -{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}} +{{EmbedGHLiveSample("css-examples/tools/border-radius-generator/", '100%', 900)}} 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 62d06d5d45..6d3cc49836 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 @@ -6,9 +6,9 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-p --- {{CSSRef}} -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. +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")}} : +Pour cela, il suffit d'utiliser une liste de valeur avec [`background`](/fr/docs/Web/CSS/background) : ```css .maClasse { @@ -16,38 +16,37 @@ Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("b } ``` -Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}. +Cela fonctionne aussi bien avec la propriété raccourcie [`background`](/fr/docs/Web/CSS/background) qu'avec les propriétés détaillées, exception faite de [`background-color`](/fr/docs/Web/CSS/background-color). On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : [`background`](/fr/docs/Web/CSS/background), [`background-attachment`](/fr/docs/Web/CSS/background-attachment), [`background-clip`](/fr/docs/Web/CSS/background-clip), [`background-image`](/fr/docs/Web/CSS/background-image), [`background-origin`](/fr/docs/Web/CSS/background-origin), [`background-position`](/fr/docs/Web/CSS/background-position), [`background-repeat`](/fr/docs/Web/CSS/background-repeat), [`background-size`](/fr/docs/Web/CSS/background-size). ## Exemples -Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles. +Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, une image de bulles et un dégradé linéaire (cf. [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient())). + +### HTML + +```html +<div class="multi-bg-example"></div> +``` ### CSS ```css -.exemple_multi_ar { +.multi-bg-example { width: 100%; height: 400px; - background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); + background-image: url(firefox.png), url(bubbles.png), + linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } ``` -### HTML - -```html -<div class="exemple_multi_ar"></div> -``` - ### Résultat -{{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.). +{{EmbedLiveSample('','100%','440')}} -> **Note :** Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton _Tidy_ de la section CSS. +Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en haut, il est suivi par les bulles puis par le dégradé. Chacune des propriétés ([`background-repeat`](/fr/docs/Web/CSS/background-repeat) et [`background-position`](/fr/docs/Web/CSS/background-position)) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.). ## Voir aussi -- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS) +- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) 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 48f6374f00..8fc173d8ac 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 @@ -6,11 +6,15 @@ original_slug: Web/CSS/Utilisation_de_dégradés_CSS --- {{CSSRef}} -Les **dégradés CSS** sont représentés par le type de donnée {{cssxref("<gradient>")}} qui est un sous-ensemble du type {{cssxref("<image>")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}). +Les **dégradés CSS** sont représentés par le type de donnée [`<gradient>`](/fr/docs/Web/CSS/gradient) qui est un sous-ensemble du type [`<image>`](/fr/docs/Web/CSS/image). L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de dégradés : -Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}. +- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient())), +- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient())), +- Les dégradés coniques (créés avec la fonction [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient())). -Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible. +Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()). + +Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). Les dégradés étant générés dynamiquement, ils permettent d'éviter d'utiliser des images matricielles pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible. Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées. @@ -18,15 +22,21 @@ Dans cet article, nous verrons d'abord les dégradés linéaires et détailleron Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué. -### Dégradés linéaires simples +### Un dégradé linéaire simple + +Pour définir un dégradé sous sa forme la plus simple, il suffit d'avoir deux couleurs. Celles-ci permettent de placer ce qu'on appellera des arrêts de couleur (<i lang="en">color stops</i> en anglais). Il est nécessaire d'en avoir au moins deux, mais il est possible d'en avoir plus. -Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc. +#### HTML + +```html +<div class="lineaire-simple"></div> +``` #### CSS ```css -.linear-gradient { - background: linear-gradient(blue, white); +.lineaire-simple { + background: linear-gradient(blue, pink); } div { @@ -35,23 +45,25 @@ div { } ``` -#### HTML +#### Résultat -```html -<div class="linear-gradient"></div> -``` +{{EmbedLiveSample("",150,150)}} -#### Résultat +### Changer la direction -{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}} +Par défaut, les dégradés linéaires vont du haut vers le bas. Il est possible de changer leur orientation en indiquant une direction. -### Appliquer un dégradé de gauche à droite +#### HTML + +```html +<div class="degrade-horizontal"></div> +``` #### CSS ```css -.linear-gradient { - background: linear-gradient(to right, blue, white); +.degrade-horizontal { + background: linear-gradient(to right, blue, pink); } div { @@ -60,23 +72,25 @@ div { } ``` -#### HTML - -```html -<div class="linear-gradient"></div> -``` - #### Résultat -{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}} +{{EmbedLiveSample("",150,150)}} ### Appliquer un dégradé en diagonale +Il est également possible d'orienter le dégradé sur une diagonale allant d'un coin à un autre. + +#### HTML + +```html +<div class="degrade-diagonal"></div> +``` + #### CSS ```css -.linear-gradient { - background: linear-gradient(to bottom right, blue, white); +.degrade-diagonal { + background: linear-gradient(to bottom right, blue, pink); } div { @@ -85,24 +99,24 @@ div { } ``` -#### HTML +#### Résultat -```html -<div class="linear-gradient"></div> -``` +{{EmbedLiveSample("",200,130)}} -#### Résultat +### Utilisation d'angles -{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}} +Si on veut choisir plus précisément la direction, on pourra fournir un angle au dégradé. -### Utilisation d’angles +#### HTML -Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément. +```html +<div class="degrade-angulaire"></div> +``` #### CSS ```css -.linear-gradient { +.degrade-angulaire { background: linear-gradient(70deg, blue, pink); } @@ -112,34 +126,32 @@ div { } ``` -#### HTML - -```html -<div class="linear-gradient"></div> -``` - #### Résultat -{{EmbedLiveSample("Utilisation_d’angles",120,120)}} +{{EmbedLiveSample("",150,150)}} -L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, `0deg` crée un dégradé vertical de bas en haut, tandis que `90deg` génère un dégradé horizontal de la gauche vers la droite : +L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens des aiguilles d'une montre. Autrement dit, `0deg` crée un dégradé vertical de bas en haut, tandis que `90deg` génère un dégradé horizontal de la gauche vers la droite. Les valeurs négatives font progresser l'angle dans le sens inverse des aiguilles d'une montre :  -```css -background: linear-gradient(<angle>, red, white); -``` - ## Créer des effets et manipuler les couleurs +L'ensemble des types de dégradés CSS sont décrits par une suite de couleurs avec chacune une position. Les couleurs produites par les dégradés CSS peuvent varier progressivement selon un axe et créer des transitions douces. Il est aussi possible de créer des bandes de couleurs avec des transitions vives entre deux couleurs. Ce qui suit est valable pour l'ensemble des fonctions de dégradés : + ### Utiliser plus de deux couleurs -Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité : +Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité. Par défaut, les couleurs sont espacées de façon homogène : + +#### HTML + +```html +<div class="degrade-espacement-auto"></div> +``` #### CSS ```css -.linear-gradient { +.degrade-espacement-auto { background: linear-gradient(red, yellow, blue, orange); } @@ -149,24 +161,24 @@ div { } ``` -#### HTML - -```html -<div class="linear-gradient"></div> -``` - #### Résultat -{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}} +{{EmbedLiveSample("",150,150)}} ### Arrêts de couleurs -Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré. +Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme de zéro, un ou deux pourcentages de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré. Si une position n'est pas définie, la position de cet arrêt de couleur sera automatiquement calculée (par défaut le premier arrêt est situé à 0%, le dernier à 100% et les autres répartis de façon homogène par rapport à leurs voisins). + +#### HTML + +```html +<div class="degrade-multicolore"></div> +``` #### CSS ```css -.linear-gradient { +.degrade-multicolore { background: linear-gradient(to left, lime, lime 28px, red 77%, cyan); } @@ -176,108 +188,74 @@ div { } ``` -#### HTML - -```html -<div class="linear-gradient"></div> -``` - #### Résultat -{{EmbedLiveSample("Arrêts_de_couleurs",120,120)}} +{{EmbedLiveSample("",150,150)}} -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. +### Créer des lignes franches -### Utiliser des indications de couleurs +Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à `50%` : -Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe. +#### HTML + +```html +<div class="ligne-franche"></div> +``` #### CSS ```css div { - width:120px; + width: 120px; height: 120px; - float: left; - margin-right: 10px; } -.color-hint { - background: linear-gradient(blue, 10%, pink); -} - -.simple-linear { - background: linear-gradient(blue, pink); +.ligne-franche { + background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); } ``` -#### HTML - -```html -<div class="color-hint"></div> -<div class="simple-linear"></div> -``` - #### Résultat -{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}} - -### Transparence et dégradés +{{EmbedLiveSample("", 150, 150)}} -Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple : - -#### CSS - -```css -.linear-gradient { - background: linear-gradient(to right, transparent, mistyrose), - url("https://mdn.mozillademos.org/files/15525/critters.png"); -} +### Utiliser des indications de couleurs -div { - width: 300px; - height: 150px; -} -``` +Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe. #### HTML ```html -<div class="linear-gradient"></div> +<div class="indication-couleur"></div> +<div class="degrade-lineaire"></div> ``` -#### Résultat - -{{EmbedLiveSample("Transparence_et_dégradés",300,150)}} - -Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous. - -### Créer des lignes franches - -Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à `50%`: - -```html hidden -<div class="striped"></div> -``` +#### CSS -```css hidden +```css div { width: 120px; height: 120px; + float: left; + margin-right: 10px; } -``` -```css -.striped { - background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); +.indication-couleur { + background: linear-gradient(blue, 10%, pink); +} + +.degrade-lineaire { + background: linear-gradient(blue, pink); } ``` -{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}} +#### Résultat + +{{EmbedLiveSample("",150,150)}} ### Créer des bandes de couleur -Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant. +Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successifs avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant. ```html hidden <div class="multiposition-stops"></div> @@ -288,31 +266,35 @@ Pour inclure une bande d'une couleur donnée, sans transition au sein du dégrad div { width: 120px; height: 120px; - float: left; margin-right: 10px; box-sizing: border-box; + float: left; + margin-right: 10px; + box-sizing: border-box; } ``` ```css .multiposition-stops { - background: linear-gradient(to left, - lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); - background: linear-gradient(to left, - lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); + background: linear-gradient(to left, + lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); + background: linear-gradient(to left, + lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); } .multiposition-stop2 { - background: linear-gradient(to left, + background: linear-gradient(to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); - background: linear-gradient(to left, + background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); } ``` -{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc. Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives. +Dans les deux exemples, le dégradé est écrit deux fois : la première correspond à la méthode décrite par la spécification CSS de niveau 3 pour répéter les couleurs des arrêts et la seconde correspond à la méthode de la spécification CSS de niveau 4 pour inclure deux longueurs. + ### Contrôler la progression du dégradé Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication. @@ -325,86 +307,116 @@ Par défaut, un dégradé progresse linéairement entre les deux couleurs et la div { width: 120px; height: 120px; - float: left; margin-right: 10px; box-sizing: border-box; + float: left; + margin-right: 10px; + box-sizing: border-box; } ``` ```css .colorhint-gradient { - background: linear-gradient(to top, black, 20%, cyan); + background: linear-gradient(to top, lime, 20%, cyan); } .regular-progression { - background: linear-gradient(to top, black, cyan); + background: linear-gradient(to top, lime, cyan); } ``` -{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} -### Empilement de dégradés +### Transparence et dégradés + +Les dégradés gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple : -Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures. +#### HTML + +```html +<div class="superposition"></div> +``` #### CSS ```css -.linear-gradient { - background: - linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), - linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), - linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); +.superposition { + background: linear-gradient(to right, transparent, mistyrose), + url("critters.png"); } div { - width: 100px; - height: 100px; + width: 300px; + height: 150px; } ``` +#### Résultat + +{{EmbedLiveSample("",300,180)}} + +### Empilement de dégradés + +Il est possible d'empiler différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures. + #### HTML ```html <div class="linear-gradient"></div> ``` +#### CSS + +```css +.linear-gradient { + background: + linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); +} + +div { + width: 200px; + height: 200px; +} +``` + #### Résultat -{{EmbedLiveSample("Empilement_de_dégradés")}} +{{EmbedLiveSample("",230,230)}} ## Dégradés radiaux -Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques. +Les dégradés radiaux sont similaires aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques. ### Un dégradé radial simple -> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé. +> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même [`<div>`](/fr/docs/Web/HTML/Element/div) et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé. De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial. ```html hidden -<div class="simple-radial"></div> +<div class="radial-simple"></div> ``` ```css hidden div { - width: 120px; + width: 240px; height: 120px; } ``` ```css -.simple-radial { +.radial-simple { background: radial-gradient(red, blue); } ``` -{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}} +{{EmbedLiveSample("", 270, 150)}} -### Positionner les points d’arrêt +### Positionner les points d'arrêt À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance. ```html hidden -<div class="radial-gradient"></div> +<div class="degrade-radial"></div> ``` ```css hidden @@ -415,19 +427,19 @@ div { ``` ```css -.radial-gradient { +.degrade-radial { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); } ``` -{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ### Positionner le centre du dégradé -La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes. +La position du centre du dégradé peut être définie avec des mots-clés, des pourcentages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes. ```html hidden -<div class="radial-gradient"></div> +<div class="degrade-radial"></div> ``` ```css hidden @@ -438,16 +450,16 @@ div { ``` ```css -.radial-gradient { +.degrade-radial { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); } ``` -{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}} +{{EmbedLiveSample("", 240, 270)}} ### Dimensionner les dégradés radiaux -À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial. +À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial. Pour cela, on pourra utiliser les valeurs `closest-corner`, `closest-side`, `farthest-corner`, et `farthest-side`, avec `farthest-corner` qui est la valeur par défaut. Les cercles peuvent aussi être dimensionnés avec une longueur et les ellipses avec une longueur ou un pourcentage. #### Utiliser `closest-side` pour les ellipses @@ -471,11 +483,11 @@ div { } ``` -{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}} +{{EmbedLiveSample("", 270, 130)}} #### Utiliser `farthest-corner` pour les ellipses -Cet exemple ressemble fortement au précédent mais on utilise ici `farthest-corner` qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante. +Cet exemple ressemble fortement au précédent, mais on utilise ici `farthest-corner` qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante. ```html hidden <div class="radial-ellipse-far"></div> @@ -495,11 +507,11 @@ div { } ``` -{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}} +{{EmbedLiveSample("", 240, 130)}} #### Utiliser `closest-side` pour les cercles -Pour cet exemple, on utilise `closest-side` qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit. +Pour cet exemple, on utilise `closest-side` qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Le rayon est la distance entre le centre du dégradé et le bord le plus proche. Avec le positionnement indiqué ici, c'est le bas le plus proche. ```html hidden <div class="radial-circle-close"></div> @@ -514,12 +526,60 @@ div { ```css .radial-circle-close { - background: radial-gradient(circle closest-side, + background: radial-gradient(circle closest-side at 25% 75%, + red, yellow 10%, #1e90ff 50%, beige); +} +``` + +{{EmbedLiveSample("", 240, 150)}} + +#### Longueur ou pourcentage pour le dimensionnement des ellipses + +Les ellipses peuvent être dimensionnées avec une longueur ou un pourcentage. La première valeur représentera le rayon horizontal et la seconde représentera le rayon vertical. Les pourcentages utilisés pour ces valeurs sont relatifs à la dimension de la boîte sur l'axe correspondant. Dans l'exemple qui suit, on utilise un pourcentage pour le rayon horizontal. + +```html hidden +<div class="radial-ellipse-size"></div> +``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-ellipse-size { + background: radial-gradient(ellipse 50% 50px, red, yellow 10%, #1e90ff 50%, beige); } ``` -{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}} +{{EmbedLiveSample('', 240, 150)}} + +#### Longueur pour le dimensionnement des cercles + +Les cercles sont dimensionnés via une longueur (une valeur de type [<length>](/fr/docs/Web/CSS/length)) qui indique le rayon du cercle. + +```html hidden +<div class="radial-circle-size"></div> +``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-circle-size { + background: radial-gradient(circle 50px, + red, yellow 10%, #1e90ff 50%, beige); +} +``` + +{{EmbedLiveSample('', 240, 150)}} ### Empiler des dégradés radiaux @@ -552,7 +612,7 @@ div { } ``` -{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}} +{{EmbedLiveSample("", 230, 230)}} ## Dégradés coniques @@ -564,7 +624,7 @@ Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui ### Un dégradé conique simple -Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut : +Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut : ```html hidden <div class="simple-conic"></div> @@ -583,7 +643,7 @@ div { } ``` -{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ### Positionner le centre @@ -606,9 +666,11 @@ div { } ``` -{{EmbedLiveSample('Positionner_le_centre', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} + +### Modifier l'angle -### Modifier l’angle +Par défaut, les différents arrêts de couleur indiqués sont répartis à équidistance autour du cercle. On peut positionner l'angle de départ du dégradé à l'aide du mot-clé `from`, suivi d'un angle ou d'une longueur. On peut indiquer différentes positions pour les différents arrêts de couleur en précisant un angle ou une longueur à leur suite. ```html hidden <div class="conic-gradient"></div> @@ -627,17 +689,17 @@ div { } ``` -{{EmbedLiveSample("Modifier_l’angle", 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ## Répéter des dégradés -Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité. +Les propriétés [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient()), [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) et [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) offrent cette fonctionnalité. -La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition. +La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Si aucun n'est déclaré, la ligne du dégradé occupera 100%, ce qui signifie que les dégradés linéaires et coniques ne se répèteront pas et que le dégradé radial ne se répètera que si le rayon du dégradé est plus petit que la distance entre le centre du dégradé et le coin le plus proche. Si le premier arrêt de couleur est déclaré et que la valeur est supérieure à 0, le dégradé se répètera, car la taille de la ligne ou de l'arc est donnée par la différence entre le premier et le dernier arrêt de couleur, qui vaudra alors ici moins de 100% ou 360 degrés. ### Répéter un dégradé linéaire -Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète. +Dans cet exemple, on utilise la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète. ```html hidden <div class="repeating-linear"></div> @@ -656,10 +718,14 @@ div { } ``` -{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ### Répéter plusieurs dégradés linéaires +Comme les dégradés linéaires et radiaux, il est possible de déclarer plusieurs dégradés, situés les uns sur les autres. Cela n'a d'intérêt que si les dégradés sont partiellement transparents afin de pouvoir voir les couches formées par les autres dégradés. Pour voir les différents dégradés, il est aussi possible d'utiliser des tailles d'arrière-plan différentes ([`background-size`](/fr/docs/Web/CSS/background-size)) et avec des positions ([`background-position`](/fr/docs/Web/CSS/background-position)) différentes pour chaque image de dégradé. Dans l'exemple qui suit, on utilise la transparence. + +Ici, les lignes de dégradé mesurent 300px, 230px, et 300px de long. + ```html hidden <div class="multi-repeating-linear"></div> ``` @@ -690,10 +756,12 @@ div { } ``` -{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}} +{{EmbedLiveSample("", 600, 430)}} ### Créer un tartan +Pour créer un tartan, on utilise plusieurs dégradés qui se chevauchent avec de la transparence. Dans la première déclaration, on liste les différents arrêts de couleur séparément et dans la seconde déclaration, on utilise la syntaxe avec les positions multiples. + ```html hidden <div class="plaid-gradient"></div> ``` @@ -727,11 +795,11 @@ div { } ``` -{{EmbedLiveSample('Créer_un_tartan', 200, 200)}} +{{EmbedLiveSample("", 230, 230)}} ### Répéter des dégradés radiaux -Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence. +Ici, on utilise la fonction [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence. ```html hidden <div class="repeating-radial"></div> @@ -750,7 +818,7 @@ div { } ``` -{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}} +{{EmbedLiveSample("", 150, 150)}} ### Répéter plusieurs dégradés radiaux @@ -778,21 +846,28 @@ div { } ``` -{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}} +{{EmbedLiveSample("", 250, 180)}} ## Voir aussi -- Les fonctions de manipulation des dégradés +- Les fonctions de manipulation des dégradés : - - {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} + - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient()), + - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient()), + - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient()), + - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), + - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()), + - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) -- Les types de donnée CSS relatifs aux dégradés +- Les types de donnée CSS relatifs aux dégradés : - - {{cssxref("<gradient>")}}, {{cssxref("<image>")}} + - [`<gradient>`](/fr/docs/Web/CSS/gradient), + - [`<image>`](/fr/docs/Web/CSS/image) -- Certaines propriétés CSS qui permettent d'utiliser des dégradés +- Certaines propriétés CSS qui permettent d'utiliser des dégradés : - - {{cssxref("background")}}, {{cssxref("background-image")}} + - [`background`](/fr/docs/Web/CSS/background), + - [`background-image`](/fr/docs/Web/CSS/background-image) - [Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou](https://lea.verou.me/css3patterns/) - [Un générateur de dégradé CSS](https://cssgenerator.org/gradient-css-generator.html) diff --git a/files/fr/web/css/filter/test_form.jpg b/files/fr/web/css/filter/test_form.jpg Binary files differdeleted file mode 100644 index 058841c04a..0000000000 --- a/files/fr/web/css/filter/test_form.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_12.jpeg b/files/fr/web/css/filter/test_form_12.jpeg Binary files differdeleted file mode 100644 index 6089a9ea41..0000000000 --- a/files/fr/web/css/filter/test_form_12.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_12_s.jpg b/files/fr/web/css/filter/test_form_12_s.jpg Binary files differdeleted file mode 100644 index 504208fa3e..0000000000 --- a/files/fr/web/css/filter/test_form_12_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_14.jpeg b/files/fr/web/css/filter/test_form_14.jpeg Binary files differdeleted file mode 100644 index e7574e0000..0000000000 --- a/files/fr/web/css/filter/test_form_14.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_14_s.jpg b/files/fr/web/css/filter/test_form_14_s.jpg Binary files differdeleted file mode 100644 index 3e56addda4..0000000000 --- a/files/fr/web/css/filter/test_form_14_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_2.jpeg b/files/fr/web/css/filter/test_form_2.jpeg Binary files differdeleted file mode 100644 index af66658d4d..0000000000 --- a/files/fr/web/css/filter/test_form_2.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_2_s.jpg b/files/fr/web/css/filter/test_form_2_s.jpg Binary files differdeleted file mode 100644 index 902d6b7bf7..0000000000 --- a/files/fr/web/css/filter/test_form_2_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_3.jpeg b/files/fr/web/css/filter/test_form_3.jpeg Binary files differdeleted file mode 100644 index 812b6e0642..0000000000 --- a/files/fr/web/css/filter/test_form_3.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_3_s.jpg b/files/fr/web/css/filter/test_form_3_s.jpg Binary files differdeleted file mode 100644 index 0a47dc453a..0000000000 --- a/files/fr/web/css/filter/test_form_3_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_4.jpeg b/files/fr/web/css/filter/test_form_4.jpeg Binary files differdeleted file mode 100644 index 31e0cbf5d4..0000000000 --- a/files/fr/web/css/filter/test_form_4.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient.png b/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient.png Binary files differdeleted file mode 100644 index db985e4bf9..0000000000 --- a/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient.png +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png b/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png Binary files differdeleted file mode 100644 index f0940b7138..0000000000 --- a/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_4_s.jpg b/files/fr/web/css/filter/test_form_4_s.jpg Binary files differdeleted file mode 100644 index c54746d078..0000000000 --- a/files/fr/web/css/filter/test_form_4_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_5.jpeg b/files/fr/web/css/filter/test_form_5.jpeg Binary files differdeleted file mode 100644 index 9b5c708020..0000000000 --- a/files/fr/web/css/filter/test_form_5.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_5_s.jpg b/files/fr/web/css/filter/test_form_5_s.jpg Binary files differdeleted file mode 100644 index 6233d62a52..0000000000 --- a/files/fr/web/css/filter/test_form_5_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_6.jpeg b/files/fr/web/css/filter/test_form_6.jpeg Binary files differdeleted file mode 100644 index c0d910c87b..0000000000 --- a/files/fr/web/css/filter/test_form_6.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_6_s.jpg b/files/fr/web/css/filter/test_form_6_s.jpg Binary files differdeleted file mode 100644 index a3ee5ba075..0000000000 --- a/files/fr/web/css/filter/test_form_6_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_7.jpeg b/files/fr/web/css/filter/test_form_7.jpeg Binary files differdeleted file mode 100644 index 5dde3ae6a9..0000000000 --- a/files/fr/web/css/filter/test_form_7.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_7_s.jpg b/files/fr/web/css/filter/test_form_7_s.jpg Binary files differdeleted file mode 100644 index 77224ff05c..0000000000 --- a/files/fr/web/css/filter/test_form_7_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_8.jpeg b/files/fr/web/css/filter/test_form_8.jpeg Binary files differdeleted file mode 100644 index 499d89b99e..0000000000 --- a/files/fr/web/css/filter/test_form_8.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_8_s.jpg b/files/fr/web/css/filter/test_form_8_s.jpg Binary files differdeleted file mode 100644 index 98e3146a52..0000000000 --- a/files/fr/web/css/filter/test_form_8_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_9.jpeg b/files/fr/web/css/filter/test_form_9.jpeg Binary files differdeleted file mode 100644 index 5f73c0af10..0000000000 --- a/files/fr/web/css/filter/test_form_9.jpeg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_9_s.jpg b/files/fr/web/css/filter/test_form_9_s.jpg Binary files differdeleted file mode 100644 index ae67b7329b..0000000000 --- a/files/fr/web/css/filter/test_form_9_s.jpg +++ /dev/null diff --git a/files/fr/web/css/filter/test_form_s.jpg b/files/fr/web/css/filter/test_form_s.jpg Binary files differdeleted file mode 100644 index 361a81b63d..0000000000 --- a/files/fr/web/css/filter/test_form_s.jpg +++ /dev/null diff --git a/files/fr/web/css/font-stretch/index.md b/files/fr/web/css/font-stretch/index.md index e90bc46dfa..39232c5d9d 100644 --- a/files/fr/web/css/font-stretch/index.md +++ b/files/fr/web/css/font-stretch/index.md @@ -1,15 +1,16 @@ --- title: font-stretch slug: Web/CSS/font-stretch -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/font-stretch +browser-compat: css.properties.font-stretch --- {{CSSRef}} -La propriété **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police. +La propriété [CSS](/fr/docs/Web/CSS) **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police. + +{{EmbedInteractiveExample("pages/css/font-stretch.html")}} + +## Syntaxe ```css /* Valeurs avec un mot-clé */ @@ -31,18 +32,11 @@ font-stretch: 200%; /* Valeurs globales */ font-stretch: inherit; font-stretch: initial; +font-stretch: revert; font-stretch: unset; ``` -Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes _condensées_) et d'autres pour lesquelles les caractères sont plus amples (fontes _étendues_). - -`font-stretch` permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet. - -Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices. - -## Syntaxe - -Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("<percentage>")}}). +Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. [`<percentage>`](/fr/docs/Web/CSS/percentage)). ### Valeurs @@ -53,66 +47,37 @@ Cette propriété peut être définie avec un mot-clé ou avec une valeur exprim - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` - : Permet de choisir une fonte plus étendue que la normale, `ultra-expanded` correspond à la forme la plus étirée. - `<percentage>` - - : Une valeur de type {{cssxref("<percentage>")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette propriété. + - : Une valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage) entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette propriété. -Dans les anciennes versions de la spécification de `font-stretch`, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification _CSS Fonts_ de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article). +Dans les anciennes versions de la spécification de `font-stretch`, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification [_CSS Fonts_ de niveau 4](https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch), cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables. Attention toutefois à la compatibilité, car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. [la section en fin d'article sur la compatibilité des navigateurs](#compatibilité_des_navigateurs)). ### Correspondance entre les mots-clés et les valeurs numériques -Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages : +Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages : -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Mot-clé</th> - <th scope="col">Pourcentage</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>ultra-condensed</code></td> - <td>50%</td> - </tr> - <tr> - <td><code>extra-condensed</code></td> - <td>62.5%</td> - </tr> - <tr> - <td><code>condensed</code></td> - <td>75%</td> - </tr> - <tr> - <td><code>semi-condensed</code></td> - <td>87.5%</td> - </tr> - <tr> - <td><code>normal</code></td> - <td>100%</td> - </tr> - <tr> - <td><code>semi-expanded</code></td> - <td>112.5%</td> - </tr> - <tr> - <td><code>expanded</code></td> - <td>125%</td> - </tr> - <tr> - <td><code>extra-expanded</code></td> - <td>150%</td> - </tr> - <tr> - <td><code>ultra-expanded</code></td> - <td>200%</td> - </tr> - </tbody> -</table> +| Mot-clé | Pourcentage | +| ----------------- | ----------- | +| `ultra-condensed` | 50% | +| `extra-condensed` | 62.5% | +| `condensed` | 75% | +| `semi-condensed` | 87.5% | +| `normal` | 100% | +| `semi-expanded` | 112.5% | +| `expanded` | 125% | +| `extra-expanded` | 150% | +| `ultra-expanded` | 200% | + +## Description + +Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes _condensées_) et d'autres pour lesquelles les caractères sont plus amples (fontes _étendues_). + +`font-stretch` permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet. ### Sélection de la fonte La fonte sélectionnée pour une valeur `font-stretch` dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%. -Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes : +Le tableau qui suit illustre l'effet des différents pourcentages avec deux polices possédant différentes fontes : <table class="standard-table"> <thead> @@ -160,104 +125,28 @@ Le tableau qui suit illustre l'effet des différents pourcentage avec deux polic - Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de `font-stretch` inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale. - [League Mono Variable](https://tylerfinck.com/leaguemonovariable/) est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de `font-stretch` selon les pourcentages choisis. -Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables. - ### Syntaxe formelle {{csssyntax}} ## Exemples -### Avec un mot-clé - -#### HTML - -```html -<p class="stretch">Le texte est plus étiré.</p> -<p class="condensed">Le texte est plus resserré.</div> -``` - -#### CSS - -```css -.stretch { - font-stretch: extra-expanded; -} - -.condensed { - font-stretch: condensed; -} -``` - -#### Résultat - -{{EmbedLiveSample('Avec_un_mot-clé', '500')}} - ### Avec un pourcentage -Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs `<percentage>`. - -#### HTML - -```html -<div class="container"> - <p class="condensed">an elephantine lizard</p> - <p class="normal">an elephantine lizard</p> - <p class="expanded">an elephantine lizard</p> -</div> -``` - -#### CSS - -```css -/* -Cet exemple utilise la police League Mono Variable, développée par -Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon -la licence SIL Open Font, Version 1.1 : -http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web -*/ - -@font-face { - src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf'); - font-family:'LeagueMonoVariable'; - font-style: normal; - font-stretch: 1% 500%; /* Nécessaire pour Chrome */ -} - -.container { - border: 10px solid #f5f9fa; - padding: 0 1rem; - font: 1.5rem 'LeagueMonoVariable', sans-serif; -} - -.condensed { - font-stretch: 50%; -} - -.normal { - font-stretch: 100%; -} - -.expanded { - font-stretch: 200%; -} -``` - -#### Résultat - -{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}} +{{EmbedGHLiveSample("css-examples/variable-fonts/font-stretch.html", '100%', 950)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------ | -| {{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS4 Fonts')}} | Ajout des valeurs `<percentage>` pour les polices variables. | -| {{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | +{{Specifications}} > **Note :** La propriété CSS `font-stretch` fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3. -{{cssinfo}} - ## Compatibilité des navigateurs -{{Compat("css.properties.font-stretch")}} +{{Compat}} + +## Voir aussi + +- [`font-style`](/fr/docs/Web/CSS/font-style) +- [`font-weight`](/fr/docs/Web/CSS/font-weight) +- [Apprendre — Notions fondamentales sur le texte et la mise en forme avec les polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/fr/web/css/font-variant-numeric/index.md b/files/fr/web/css/font-variant-numeric/index.md index ad8967a4dd..d553d0d3cf 100644 --- a/files/fr/web/css/font-variant-numeric/index.md +++ b/files/fr/web/css/font-variant-numeric/index.md @@ -1,15 +1,12 @@ --- title: font-variant-numeric slug: Web/CSS/font-variant-numeric -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/font-variant-numeric +browser-compat: css.properties.font-variant-numeric --- {{CSSRef}} -La propriété **`font-variant-numeric`** permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux. +La propriété [CSS](/fr/docs/Web/CSS) **`font-variant-numeric`** permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux. {{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}} @@ -30,10 +27,11 @@ font-variant-numeric: oldstyle-nums stacked-fractions; /* Valeurs globales */ font-variant-numeric: inherit; font-variant-numeric: initial; +font-variant-numeric: revert; font-variant-numeric: unset; ``` -La valeur de cette propriété peut être définie selon deux formes : +La valeur de cette propriété peut être définie selon deux formes : - la première avec le mot-clé `normal` - la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre. @@ -43,90 +41,52 @@ La valeur de cette propriété peut être définie selon deux formes : - `normal` - : Ce mot-clé désactive l'utilisation des glyphes alternatifs. - `ordinal` - - - : Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1 - - <sup>er</sup> - - , 2 - - <sup>e</sup> - - , 3 - - <sup>e</sup> - - , etc. Il correspond aux valeurs OpenType values `ordn`. - + - : Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1<sup>er</sup>, 2<sup>e</sup>, 3<sup>e</sup>, etc. Il correspond aux valeurs OpenType values `ordn`. - `slashed-zero` - - : Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs OpenType `zero`. -- _\<numeric-figure-values_> + - : Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs OpenType `zero`. +- `<numeric-figure-values>` - - : Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées : + - : Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées : - `lining-nums` permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType `lnum`. - `oldstyle-nums` permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType `onum`. -- _\<numeric-spacing-values_> - - - : Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs : +- `<numeric-spacing-values>` + - : Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valeurs : - `proportional-nums` permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType `pnum`. - `tabular-nums` permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType `tnum`. -- _\<numeric-fraction-values_> - - - : Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions : +- `<numeric-fraction-values>` + - : Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions : - `diagonal-fractions` permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType `frac`. - `stacked-fractions` permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType `afrc`. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples - -### CSS - -```css -/* -Cet exemple utilise la police Source Sans Pro OpenType développée par Adobe -et utilisée ici sous les termes de la licence SIL Open Font en Version 1.1 : -http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web -*/ - -@font-face { - font-family: "Source Sans Pro"; - font-style: normal; - font-weight: 400; - src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype"); -} - -.ordinal { - font-variant-numeric: ordinal; - font-family: "Source Sans Pro"; -} -``` +{{cssinfo}} -### HTML +## Syntaxe formelle -```html -<p class="ordinal">Premier, deuxième, troisième, quatrième, cinquième</p> -``` +{{csssyntax}} -### Résultat +## Exemples -{{EmbedLiveSample("Exemples")}} +{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-example.html", '100%', 600)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.font-variant-numeric")}} +{{Compat}} + +## Voir aussi + +- [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates) +- [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps) +- [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian) +- [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) +- [`font-variant`](/fr/docs/Web/CSS/font-variant) diff --git a/files/fr/web/css/font-variant/index.md b/files/fr/web/css/font-variant/index.md index 8cffe85cde..512139e2ad 100644 --- a/files/fr/web/css/font-variant/index.md +++ b/files/fr/web/css/font-variant/index.md @@ -1,18 +1,27 @@ --- title: font-variant slug: Web/CSS/font-variant -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/font-variant +browser-compat: css.properties.font-variant --- {{CSSRef}} -La propriété **`font-variant`** est une propriété raccourcie représentant les propriétés : {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}} et {{cssxref("font-variant-east-asian")}}. On peut aussi utiliser les valeurs de la propriété `font-variant` définies avec CSS Level 2 (`normal` ou `small-caps`), en utilisant la propriété raccourcie {{cssxref("font")}}. +La [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) [CSS](/fr/docs/Web/CSS) **`font-variant`** permet de définir tous les paramètres typographiques pour une police de caractères. + +On peut aussi utiliser les valeurs de la propriété `font-variant` définies avec la spécification CSS de niveau 2 (première révision), `normal` ou `small-caps`, en utilisant la propriété raccourcie [`font`](/fr/docs/Web/CSS/font). {{EmbedInteractiveExample("pages/css/font-variant.html")}} +## Propriétés détaillées correspondantes + +Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes : + +- [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates) +- [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps) +- [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian) +- [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) +- [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric) + ## Syntaxe ```css @@ -22,70 +31,71 @@ font-variant: common-ligatures small-caps; /* Valeurs globales */ font-variant: inherit; font-variant: initial; +font-variant: revert; font-variant: unset; ``` ### Valeurs - `normal` - - : Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de `normal`. Ces propriétés sont {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, et {{cssxref("font-variant-east-asian")}}. + - : Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de `normal`. Les propriétés détaillées de `font-variant` sont : [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps), [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric), [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates), [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) et [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian). - `none` - - : Définit la valeur de {{cssxref("font-variant-ligatures")}} comme étant `none` et les valeurs des autres propriétés à `normal`, leur valeur initiale. -- \<common-lig-values>, \<discretionary-lig-values>, \<historical-lig-values>, \<contextual-alt-values> - - : Définit la valeur de la propriété {{cssxref("font-variant-ligatures")}}. Les valeurs possibles sont: `common-ligatures`,`no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`,`contextual`, et `no-contextual`. + - : Définit une valeur de `none` pour [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) et une valeur de `normal` pour les autres propriétés, leur valeur initiale. +- `<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>` + - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures). Les valeurs possibles sont : `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual` et `no-contextual`. - `stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()` - - : Définit les mots-clés et fonctions relatives à la propriété {{cssxref("font-variant-alternates")}}. + - : Définit les mots-clés et fonctions relatifs à la propriété détaillée [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates). - `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps` - - : Définit le mot-clé relatif à la propriété {{cssxref("font-variant-caps")}}. + - : Définit les mots-clés et fonctions relatifs à la propriété détaillée [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps). - `<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero` - - : Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, et `slashed-zero.` + - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric). Les valeurs possibles sont : `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal` et `slashed-zero`. - `<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby` - - : Définit la valeur de la propriété {{cssxref("font-variant-east-asian")}}. Les valeurs possibles sont: `jis78`, `jis83`,`jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby`. + - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian). Les valeurs possibles sont : `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width` et `ruby`. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### HTML +### Utiliser la valeur `small-caps` de `font-variant` + +#### HTML ```html <p class="normal">Firefox normal</p> <p class="small">Firefox petit</p> ``` -### CSS +#### CSS ```css p.normal { - font-variant: normal; + font-variant: normal; } p.small { - font-variant: small-caps; + font-variant: small-caps; } ``` -### Résultat +#### Résultat -{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant')}} +{{EmbedLiveSample('', 'Web/CSS/font-variant')}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}} | {{Spec2('CSS3 Fonts')}} | La propriété est désormais une propriété raccourcie pour les nouvelles propriétés `font-variant-*`. | -| {{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}} | {{Spec2('CSS2.1')}} | Aucun changement. | -| {{SpecName('CSS1', '#font-variant', 'font-variant')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.font-variant")}} +{{Compat}} ## Voir aussi -- {{cssxref("text-transform")}} -- {{cssxref("text-combine-upright")}} -- {{cssxref("text-orientation")}} +- [`text-transform`](/fr/docs/Web/CSS/text-transform) +- [`text-combine-upright`](/fr/docs/Web/CSS/text-combine-upright) +- [`text-orientation`](/fr/docs/Web/CSS/text-orientation) diff --git a/files/fr/web/css/font-weight/index.md b/files/fr/web/css/font-weight/index.md index 1ce9243e2f..80aa0926dd 100644 --- a/files/fr/web/css/font-weight/index.md +++ b/files/fr/web/css/font-weight/index.md @@ -1,15 +1,12 @@ --- title: font-weight slug: Web/CSS/font-weight -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/font-weight +browser-compat: css.properties.font-weight --- {{CSSRef}} -La propriété CSS **`font-weight`** permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses `normal` et `bold`. +La propriété [CSS](/fr/docs/Web/CSS) **`font-weight`** permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. [`font-family`](/fr/docs/Web/CSS/font-family)). Certaines fontes n'existent qu'avec les niveaux de graisses `normal` et `bold`. {{EmbedInteractiveExample("pages/css/font-weight.html")}} @@ -25,24 +22,20 @@ font-weight: lighter; font-weight: bolder; /* Valeurs numériques */ -font-weight: 1; font-weight: 100; -font-weight: 100.6; -font-weight: 123; font-weight: 200; font-weight: 300; -font-weight: 321; -font-weight: 400; +font-weight: 400; /* normal */ font-weight: 500; font-weight: 600; -font-weight: 700; +font-weight: 700; /* gras */ font-weight: 800; font-weight: 900; -font-weight: 1000; /* Valeurs globales */ font-weight: inherit; font-weight: initial; +font-weight: revert; font-weight: unset; ``` @@ -59,26 +52,29 @@ La propriété `font-weight` peut être définie grâce à l'une des valeurs sui - `bolder` - : On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras. - `<number>` - - : Une valeur numérique (type {{cssxref("<number>")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec `normal` et `bold`. + - : Une valeur numérique (type [`<number>`](/fr/docs/Web/CSS/number)) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec `normal` et `bold`. Pour d'anciennes versions de la spécification, `font-weight` n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après). -Le module de spécification _CSS Fonts_ de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs. +Le module de spécification _CSS Fonts_ de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleure précision quant aux tailles utilisables. ### Conversion des valeurs -Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée : +Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée : - Si un niveau supérieur à `500` est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte) - Si un niveau inférieur à `400` est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire) -- Si un niveau égal à `400` est utilisé, `500` sera utilisé. Si `500` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400. -- Si un niveau égal à `500` est utilisé, `400` sera utilisé. Si `400` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à `400`. +- Si c'est un niveau entre `400` et `500` (inclus) qui est utilisé : -Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement `normal` et `bold`, `100`-`500` seront considérés équivalents à `normal` et `600`-`900` à `bold`. + - On cherche les niveaux les plus proches entre la cible et `500`, dans l'ordre croissant. + - Si aucune correspondance n'est trouvée, on cherche les niveaux inférieurs, dans l'ordre décroissant. + - Si aucune correspondance n'est trouvée, on cherche les niveaux supérieurs à `500`, dans l'ordre croissant. ### Signification des poids relatifs -Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément : +Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément. + +On notera que lorsqu'on utilise des niveaux de graisse relatifs, seuls quatre niveaux sont considérés : fin (100), normal (400), gras (700) et épais (900). Si une police dispose de plus de niveaux de graisse, ceux-ci sont ignorés pour le calcul des niveaux relatifs. <table class="standard-table"> <thead> @@ -139,7 +135,7 @@ Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau ### Correspondance entre les valeurs numériques et les noms communément utilisés -Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (_NdT : les noms sont laissés en anglais car généralement utilisés tels quels_) : +Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (_NdT : les noms sont laissés en anglais car généralement utilisés tels quels_) (voir [la spécification OpenType](https://docs.microsoft.com/typography/opentype/spec/os2#usweightclass)) : | Valeur | Nom communément utilisé | | ------ | --------------------------- | @@ -152,112 +148,34 @@ Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, commun | 700 | _Bold_ | | 800 | _Extra Bold (Ultra Bold)_ | | 900 | _Black (Heavy)_ | - -### Interpolation - -Une valeur `font-weight` est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure. +| 950 | _Extra Black (Ultra Black)_ | ### Polices variables -La plupart des polices possèdent des niveaux de graisses qui correspondent aux [niveaux communément utilisés](#communs). Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée. +La plupart des polices possèdent des niveaux de graisses qui correspondent aux niveaux communément utilisés (voir tableau précédent). Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée. Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wght` qui est utilisé afin d'implémenter les variations de largeur. -Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification _CSS Fonts_ de niveau 4. - -{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}} - -#### HTML - -```html -<header> - <input type="range" id="weight" name="weight" min="1" max="1000" /> - <label for="weight">Weight</label> -</header> -<div class="container"> - <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> -</div> -``` - -#### CSS - -```css -/* -Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans) -and is used here under the terms of its license: -https://github.com/LettError/mutatorSans/blob/master/LICENSE -*/ - -@font-face { - src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf'); - font-family:'MutatorSans'; - font-style: normal; -} - -label { - font: 1rem monospace; - white-space: nowrap; -} - -.container { - max-height: 150px; - overflow-y: auto; -} - -.sample { - text-transform: uppercase; - font: 1.5rem 'MutatorSans', sans-serif; -} -``` - -```css hidden -html, body { - max-height: 100vh; - max-width: 100vw; - overflow: hidden; -} - -body { - display: flex; - flex-direction: column; -} - -header { - margin-bottom: 1.5rem; -} +Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification _CSS Fonts_ de niveau 4 pour laquelle `font-weight` peut prendre une valeur numérique entre 1 et 1000. La démonstration commence avec `font-weight: 500;` et vous pouvez changer la valeur pour voir l'effet sur le texte. -.container { - flex-grow: 1; -} - -.container > p { - margin-top: 0; - margin-bottom: 0; -} -``` +{{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}} -#### JavaScript +## Accessibilité -```js -let weightLabel = document.querySelector('label[for="weight"]'); -let weightInput = document.querySelector('#weight'); -let sampleText = document.querySelector('.sample'); +Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#accessibilité). -function update() { - weightLabel.textContent = `font-weight: ${weightInput.value};`; - sampleText.style.fontWeight = weightInput.value; -} +- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Comprendre les critères de succès 1.4.8 — Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) -weightInput.addEventListener('input', update); +## Définition formelle -update(); -``` +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} -## Exemples +## Exemple ### HTML @@ -266,8 +184,8 @@ update(); Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in - it, 'and what is the use of a book,' thought Alice 'without pictures or - conversations?' + it, "and what is the use of a book," thought Alice "without pictures or + conversations?" </p> <div>I'm heavy<br/> @@ -278,19 +196,19 @@ update(); ### CSS ```css -/* Le texte du paragraphe est gras. */ +/* Le texte du paragraphe est en gras. */ p { font-weight: bold; } -/* Le texte du div est deux niveaux plus sombres - mais moins gras qu'une graisse normale. */ +/* Le texte du div utilise plus fort que + normal mais moins fort que standard. */ div { font-weight: 600; } -/* Le texte dans le span est un niveau plus - clair que le parent. */ +/* Le texte du span utilise un niveau de graisse + plus léger que son parent. */ span { font-weight: lighter; } @@ -298,27 +216,18 @@ span { ### Résultat -{{EmbedLiveSample("Exemples","400","300")}} - -## Accessibilité - -Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#accessibilité). - -- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) +{{EmbedLiveSample("","400","300")}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}} | {{Spec2('CSS4 Fonts')}} | Définition de `font-weight` qui précise que la propriété peut utiliser des valeurs comprises entre `1` et `1000`. | -| {{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}} | {{Spec2('CSS3 Fonts')}} | Aucun changement. | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}} | {{Spec2('CSS3 Transitions')}} | `font-weight` peut désormais être animée. | -| {{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} | {{Spec2('CSS2.1')}} | Aucun changement. | -| {{SpecName('CSS1', '#font-weight', 'font-weight')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.font-weight")}} +{{Compat}} + +## Voir aussi + +- [`font-style`](/fr/docs/Web/CSS/font-style) +- [`font-family`](/fr/docs/Web/CSS/font-family) +- [Apprendre — Notions fondamentales sur le texte et la mise en forme avec les polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/fr/web/css/image-orientation/index.md b/files/fr/web/css/image-orientation/index.md index af3f7d39c3..9b6da870a6 100644 --- a/files/fr/web/css/image-orientation/index.md +++ b/files/fr/web/css/image-orientation/index.md @@ -1,40 +1,23 @@ --- title: image-orientation slug: Web/CSS/image-orientation -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/image-orientation +browser-compat: css.properties.image-orientation --- {{CSSRef}} -La propriété **`image-orientation`** décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction `rotate`. +La propriété [CSS](/fr/docs/Web/CSS) **`image-orientation`** décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. -> **Attention :** Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être `from-image`). ```css -/* Valeurs d'angle */ -/* Type <angle> */ -image-orientation: 0deg; -image-orientation: 6.4deg; /* Arrondie à 0deg */ -image-orientation: -90deg; /* Équivalent à 270deg, la - valeur calculée normalisée */ - /* Valeurs avec un mot-clé */ -image-orientation: from-image; /* Utilise les données EXIF - de l'image */ -image-orientation: flip; /* Pas de rotation mais un - retournement horizontal */ - -/* Valeurs avec deux arguments */ -image-orientation: 90deg flip; /* Rotation de 90deg, puis - retournement horizontal */ +image-orientation: none; +image-orientation: from-image; /* Les données EXIF de l'image sont utilisées. */ /* Valeurs globales */ image-orientation: inherit; image-orientation: initial; +image-orientation: revert; image-orientation: unset; ``` @@ -42,74 +25,91 @@ image-orientation: unset; ### Valeurs +- `none` + - : Aucune rotation supplémentaire n'est appliquée. L'image est orientée telle quelle ou comme indiquée par les autres propriétés CSS. - `from-image` - - : Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée. -- `<angle>` - - : Une valeur de type {{cssxref("<angle>")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche. -- `flip` - - : L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur `0deg` sera utilisée. + - : La valeur initiale par défaut. Ce sont [les informations EXIF](https://fr.wikipedia.org/wiki/Exchangeable_image_file_format) contenues dans l'image qui sont utilisées afin de tourner l'image correctement. -### Syntaxe formelle +## Description -{{csssyntax}} +Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger une orientation erronée. -## Notes d'utilisation +Pour tout autre usage, on utilisera la propriété [`transform`](/fr/docs/Web/CSS/transform) avec le mot-clé `rotate` afin d'indiquer une rotation. Ces autres usages incluent les modifications volontaires de l'orientation de l'image ou les changements nécessaires à l'impression portrait/paysage. -Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche. +Lorsqu'elle est utilisée avec d'autres propriétés CSS (comme [`transform-function`](/fr/docs/Web/CSS/transform-function)), la rotation fournie par `image-orientation` est appliquée avant toute autre transformation. -De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. `image-orientation` ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition. +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle + +{{csssyntax}} ## Exemples -### CSS +### Orienter une image à partir des données qu'elle contient + +L'image suivante a suivi une rotation de 180° et la propriété `image-orientation` est utilisée pour corriger son orientation à partir des données EXIF de l'image. En passant la valeur de la propriété `image-orientation` à `none`, vous pourrez voir l'effet de la propriété. + +#### CSS ```css #image { - /* Peut-être modifiée dans l'exemple */ - image-orientation: flip; + image-orientation: from-image; /* Peut être édité dans l'exemple */ +} +``` + +```css hidden +img { + margin: .5rem 0; +} + +label { + font-family: monospace; } ``` ```html hidden -<img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg" - alt="Orientation déterminée à partir de l'image"/> -<select id="imageOrientation"> - <option value="from-image">from-image</option> - <option value="90deg">90deg</option> - <option value="flip" selected>flip</option> -</select> +<img id="image" src="oriole.jpg" + alt="Orientation obtenue à partir de l'image"> + +<div> + <input type="radio" id="from-image" name="orientation" value="from-image" + checked> + <label for="from-image">from-image</label> +</div> + +<div> + <input type="radio" id="none" name="orientation" value="none"> + <label for="none">none</label> +</div> ``` ```js hidden -var imageOrientation = document.getElementById("imageOrientation"); -imageOrientation.addEventListener("change", function (evt) { +document.addEventListener('change', evt => { document.getElementById("image").style.imageOrientation = evt.target.value; }); ``` -### Résultat +#### Résultat -{{EmbedLiveSample("Exemples", "100%", 240)}} +{{EmbedLiveSample("", "100%", 900)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------- | -| {{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}} | {{Spec2('CSS4 Images')}} | Ajout des mots-clés `from-image` et `flip`. | -| {{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}} | {{Spec2('CSS3 Images')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.image-orientation")}} +{{Compat}} ## Voir aussi -- {{cssxref("object-fit")}} -- {{cssxref("object-position")}} -- {{cssxref("image-orientation")}} -- {{cssxref("image-rendering")}} -- {{cssxref("image-resolution")}} -- {{cssxref("transform")}} -- {{cssxref("rotate")}} +- Les autres propriétés CSS associées aux images : + - [`object-fit`](/fr/docs/Web/CSS/object-fit) + - [`object-position`](/fr/docs/Web/CSS/object-position) + - [`image-rendering`](/fr/docs/Web/CSS/Image-rendering) + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution) +- [`transform`](/fr/docs/Web/CSS/transform) +- [`rotate`](/fr/docs/Web/CSS/rotate) diff --git a/files/fr/web/css/image-rendering/index.md b/files/fr/web/css/image-rendering/index.md index c5e83f68db..754b1d9b9e 100644 --- a/files/fr/web/css/image-rendering/index.md +++ b/files/fr/web/css/image-rendering/index.md @@ -1,17 +1,16 @@ --- title: image-rendering slug: Web/CSS/Image-rendering -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/image-rendering +browser-compat: css.properties.image-rendering --- {{CSSRef}} -La propriété **`image-rendering`** fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils. +La propriété [CSS](/fr/docs/Web/CSS) **`image-rendering`** fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments descendants de l'élément ciblé. -L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est `100px` par `100px` et que l'auteur indique les dimensions `200px` par `200px` (ou `50px` par `50px`), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple). +{{EmbedInteractiveExample("pages/css/image-rendering.html")}} + +L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes de la taille naturelle de l'image, ou si la personne visualisant l'image interagit en zoomant par exemple. Si, par exemple, la taille naturelle de l'image est `100×100px` et que l'auteur indique les dimensions `200×200px` (ou `50×50px`), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple). Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. ## Syntaxe @@ -24,86 +23,87 @@ image-rendering: pixelated; /* Valeurs globales */ image-rendering: inherit; image-rendering: initial; +image-rendering: revert; image-rendering: unset; ``` ### Valeurs -- **`auto`** - - : L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire. -- **`crisp-edges`** - - : L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du _pixel art_. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et [hqx](https://en.wikipedia.org/wiki/Hqx). -- `high-quality`{{Experimental_inline}} +- `auto` + - : L'algorithme utilisé dépend de l'agent utilisateur. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire. +- `crisp-edges` + - : L'algorithme utilisé est l'interpolation au plus proche voisin. +- `high-quality` {{Experimental_inline}} - : Cette valeur est proche de `smooth` mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec `high-quality` qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité. -- **`pixelated`** - - : Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que `auto`. -- `smooth`{{Experimental_inline}} - - : L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos. +- `pixelated` + - : L'algorithme utilisé est l'interpolation au plus proche voisin. L'image est agrandie au multiple entier de taille qui est supérieur ou égal à sa taille originale puis réduite à la taille cible, comme pour `smooth`. Lorsque l'agrandissement demandé est un multiple entier de la taille originale, l'effet obtenu sera le même qu'avec `crisp-edges` +- `smooth` {{Experimental_inline}} + - : L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (l'interpolation bilinéaire par exemple) sont acceptables. Cette valeur est destinée aux images telles que les photos. > **Note :** Les valeurs `optimizeQuality` et `optimizeSpeed` qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de `smooth` et `pixelated`. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Paramétrer l'algorithme de redimensionnement des images -```css -.pixels_petits { - height: 50px; - width: 50px; -} +En pratique, les valeurs `pixelated` et `crisp-edges` peuvent être combinées afin de fournir des alternatives l'une à l'autre. L'API [Canvas](/fr/docs/Web/API/Canvas_API) peut fournir [une solution alternative pour `pixelated`](http://phrogz.net/tmp/canvas_image_zoom.html) via une manipulation manuelle des données de l'image ou avec [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled). -.pixels_grands { - height: 69px; - width: 69px; -} +```html hidden +<div> + <img class="auto" alt="auto" src="blumen.jpg" /> + <img class="pixelated" alt="pixelated" src="blumen.jpg" /> + <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" /> +</div> +``` -.chapeau_petit { - height: 89px; - width: 89px; +```css hidden +img { + height: 200px; } -.defaut { +``` + +#### CSS + +```css +.auto { image-rendering: auto; } -.contraste { - image-rendering: crisp-edges; +.pixelated { + -ms-interpolation-mode: nearest-neighbor; + image-rendering: pixelated; } -``` -### HTML - -```html -<p>Avec <code>auto</code> :</p> -<img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/> -<img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/> -<img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/> - -<p>Avec <code>crisp-edges</code> :</p> -<img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/> -<img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/> -<img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/> +.crisp-edges { + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; +} ``` -### Résultat - -{{EmbedLiveSample("Exemples","100%","100%")}} +#### Résultat -> **Note :** En pratique, les règles `pixelated` et `crisp-edges` peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et _vice versa_). Si besoin, un {{HTMLElement("canvas")}} peut fournir [une alternative pour les valeurs `crisp-edge` et `optimize-contrast`](http://phrogz.net/tmp/canvas_image_zoom.html) via la manipulation manuelle des données de l'image ou avec [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled). +{{EmbedLiveSample('',200,250)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}} | {{Spec2('CSS3 Images')}} | Définition initiale. | +{{Specifications}} -> **Note :** Cette valeur était, initialement, proche de la propriété SVG `image-rendering`. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais. +## Compatibilité des navigateurs -{{cssinfo}} +{{Compat}} -## Compatibilité des navigateurs +## Voir aussi -{{Compat("css.properties.image-rendering")}} +- D'autres propriétés CSS utilisées avec les images : + - [`object-fit`](/fr/docs/Web/CSS/object-fit) + - [`object-position`](/fr/docs/Web/CSS/object-position) + - [`image-orientation`](/fr/docs/Web/CSS/image-orientation) + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution) diff --git a/files/fr/web/css/list-style-image/index.md b/files/fr/web/css/list-style-image/index.md index f7c9dc9012..a9a4a8862d 100644 --- a/files/fr/web/css/list-style-image/index.md +++ b/files/fr/web/css/list-style-image/index.md @@ -2,14 +2,17 @@ title: list-style-image slug: Web/CSS/list-style-image translation_of: Web/CSS/list-style-image +browser-compat: css.properties.list-style-image --- {{CSSRef}} -La propriété **`list-style-image`** définit l'image utilisée comme puce devant les [éléments de listes](fr/HTML/%c3%89l%c3%a9ment/li). On peut également utiliser la propriété raccourcie {{cssxref("list-style")}}. +La propriété [CSS](/fr/docs/Web/CSS) **`list-style-image`** définit l'image utilisée comme puce devant les [éléments de listes](/fr/docs/Web/HTML/Element/li). + +On peut également utiliser la propriété raccourcie [`list-style`](/fr/docs/Web/CSS/list-style). {{EmbedInteractiveExample("pages/css/list-style-image.html")}} -> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}). +> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels [`display`](/fr/docs/Web/CSS/display) vaut `list-item`). Par défaut, cela inclut les éléments [`<li>`](/fr/docs/Web/HTML/Element/li). Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à [`<ol>`](/fr/docs/Web/HTML/Element/ol) ou à [`<ul>`](/fr/docs/Web/HTML/Element/ul)). ## Syntaxe @@ -20,62 +23,91 @@ list-style-image: none; /* Valeurs pointant vers une image */ list-style-image: url('starsolid.gif'); +/* Valeurs avec une image */ +list-style-image: linear-gradient(to left bottom, red, blue); + /* Valeurs globales */ list-style-image: inherit; list-style-image: initial; +list-style-image: revert; list-style-image: unset; ``` ### Valeurs -- `url` - - : Emplacement de l'image à utiliser comme puce (cf. {{cssxref("<url>")}} pour plus de détails sur les valeurs possibles pour ce type). +- [`<image>`](/fr/docs/Web/CSS/image) + - : Une valeur représentant une image valide, qui sera utilisée comme puce. - `none` - - : Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec {{cssxref("list-style-type")}} sera utilisé à la place. + - : Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec [`list-style-type`](/fr/docs/Web/CSS/list-style-type) sera utilisé à la place. + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Utiliser une URL + +#### HTML + +```html +<ul> + <li>Élément 1</li> + <li>Élément 2</li> +</ul> +``` + +#### CSS ```css ul { - list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); + list-style-image: url("starsolid.gif"); } ``` -### HTML +#### Résultat + +{{EmbedLiveSample('')}} + +### Utiliser un dégradé + +#### HTML ```html <ul> - <li>Élément 1</li> - <li>Élément 2</li> + <li>Élément 1</li> + <li>Élément 2</li> </ul> ``` -### Résultat +#### CSS -{{EmbedLiveSample('Exemples')}} +```css +ul { + font-size: 200%; + list-style-image: linear-gradient(to left bottom, red, blue); +} +``` -## Spécifications +#### Résultat -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ | -| {{SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image')}} | {{Spec2('CSS3 Lists')}} | Propriété étendue pour supporter n'importe quel type {{cssxref("<image>")}}. | -| {{SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image')}} | {{Spec2('CSS2.1')}} | Définition initiale. | +{{EmbedLiveSample('')}} -{{cssinfo}} +## Spécifications + +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.list-style-image")}} +{{Compat}} ## Voir aussi -- {{cssxref("list-style")}} -- {{cssxref("list-style-type")}} -- {{cssxref("list-style-position")}} -- La fonction {{cssxref("url()", "url()")}} +- [`list-style`](/fr/docs/Web/CSS/list-style) +- [`list-style-type`](/fr/docs/Web/CSS/list-style-type) +- [`list-style-position`](/fr/docs/Web/CSS/list-style-position) +- La fonction [`url()`](/fr/docs/Web/CSS/url()) diff --git a/files/fr/web/css/list-style-position/starsolid.gif b/files/fr/web/css/list-style-position/starsolid.gif Binary files differdeleted file mode 100644 index 5508bef9c0..0000000000 --- a/files/fr/web/css/list-style-position/starsolid.gif +++ /dev/null diff --git a/files/fr/web/css/mask-border/index.md b/files/fr/web/css/mask-border/index.md index 6b765250be..29151b0da1 100644 --- a/files/fr/web/css/mask-border/index.md +++ b/files/fr/web/css/mask-border/index.md @@ -4,11 +4,20 @@ slug: Web/CSS/mask-border translation_of: Web/CSS/mask-border browser-compat: css.properties.mask-border --- -{{cssref}}{{SeeCompatTable}} +{{cssref}} -La propriété CSS **`mask-border`** permet de créer un masque le long de la bordure d'un élément. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-border`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de créer un masque le long de la bordure d'un élément. -Cette propriété est une propriété [raccourcie](/fr/docs/Web/CSS/Shorthand_properties) pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur [valeur initiale](/fr/docs/Web/CSS/initial_value). +## Propriétés détaillées correspondantes + +Cette propriété est une propriété raccourcie pour les propriétés suivantes : + +- [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode). +- [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset) +- [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat) +- [`mask-border-slice`](/fr/docs/Web/CSS/mask-border-slice) +- [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source) +- [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width) ## Syntaxe @@ -24,24 +33,34 @@ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; + +/* Valeurs globales */ +mask-border: inherit; +mask-border: initial; +mask-border: revert; +mask-border: unset; ``` ### Valeurs - `<'mask-border-source'>` - - : L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}. + - : L'image source. Voir [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source). - `<'mask-border-slice'>` - - : Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}. + - : Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-slice`](/fr/docs/Web/CSS/mask-border-slice). - `<'mask-border-width'>` - - : La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}. + - : La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width). - `<'mask-border-outset'>` - - : La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}. + - : La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset). - `<'mask-border-repeat'>` - - : Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}. + - : Cette valeur indique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat). - `<'mask-border-mode'>` - - : Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}. + - : Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode). + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} @@ -49,41 +68,13 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; ### Image matricielle (_bitmap_) -Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large : +Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :  -#### HTML - -```html -<div id="bitmap"> - Cet élément est entouré d'un masque de bordure - matriciel. C'est pas mal. -</div> -``` - -#### CSS - Pour avoir un seul losange, on divise le carré en 3 (avec la valeur `30`). On utilise la valeur `round` pour que le masque soit réparti également de part et d'autre. -```css -div { - width: 200px; - background-color: lavender; - border: 18px solid salmon; - padding: 10px; - - mask-border: - url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png") /* source */ - 30 / /* slice */ - 36px 18px /* width */ - round; /* repeat */ -} -``` - -#### Résultat - -{{EmbedLiveSample("Image_matricielle_(bitmap)")}} +{{EmbedGHLiveSample("css-examples/masking/mask-border.html", '100%', 800)}} ## Spécifications @@ -92,3 +83,11 @@ div { ## Compatibilité des navigateurs {{Compat}} + +## Voir aussi + +- [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode) +- [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset) +- [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat) +- [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source) +- [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width) diff --git a/files/fr/web/css/mask-clip/index.md b/files/fr/web/css/mask-clip/index.md index fd5257c0ad..13e84c6be1 100644 --- a/files/fr/web/css/mask-clip/index.md +++ b/files/fr/web/css/mask-clip/index.md @@ -1,20 +1,12 @@ --- title: mask-clip slug: Web/CSS/mask-clip -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-clip +browser-compat: css.properties.mask-clip --- {{CSSRef}} -La propriété **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone. - -{{cssinfo}} - -## Syntaxe +La propriété [CSS](/fr/docs/Web/CSS) **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone. ```css /* Valeurs de type <geometry-box> */ @@ -29,19 +21,20 @@ mask-clip: view-box; /* Valeurs avec un mot-clé */ mask-clip: no-clip; -/* Valeurs multiples */ -mask-clip: padding-box, no-clip; -mask-clip: view-box, fill-box, border-box; - /* Mots-clés non-standards */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; +/* Valeurs multiples */ +mask-clip: padding-box, no-clip; +mask-clip: view-box, fill-box, border-box; + /* Valeurs globales */ mask-clip: inherit; mask-clip: initial; +mask-clip: revert; mask-clip: unset; ``` @@ -52,65 +45,52 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une ### Valeurs - `content-box` - - : La partie qui est « peinte » est rognée sur la boîte de contenu. + - : La partie qui est peinte est rognée sur la boîte de contenu. - `padding-box` - - : La partie qui est « peinte » est rognée sur la boîte de _padding_. + - : La partie qui est peinte est rognée sur la boîte de remplissage (<i lang="en">padding</i>). - `border-box` - - : La partie qui est « peinte » est rognée sur la boîte de bordure. + - : La partie qui est peinte est rognée sur la boîte de bordure. - `margin-box` - - : La partie qui est « peinte » est rognée sur la boîte de marge. + - : La partie qui est peinte est rognée sur la boîte de marge. - `fill-box` - - : La partie qui est « peinte » est rognée sur la boîte contenant l'objet. + - : La partie qui est peinte est rognée sur la boîte contenant l'objet. - `stroke-box` - - : La partie qui est « peinte » est rognée sur la boîte contenant le contour. + - : La partie qui est peinte est rognée sur la boîte contenant le contour. - `view-box` - - : C'est le _viewport_ du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée le _viewport_, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut `viewBox`. + - : C'est le <i lang="en">viewport</i> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée le <i lang="en">viewport</i>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîte sont basées sur la hauteur et la largeur de l'attribut `viewBox`. - `no-clip` - - : La partie qui est « peinte » n'est pas rognée. + - : La partie qui est peinte n'est pas rognée. +- `border` {{non-standard_inline}} + - : Synonyme de `border-box`. +- `padding` {{non-standard_inline}} + - : Synonyme de `padding-box`. +- `content` {{non-standard_inline}} + - : Synonyme de `content-box`. +- `text` {{non-standard_inline}} + - : L'image est rognée selon la forme du texte de l'élément. + +## Définition formelle -### Syntaxe formelle +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS - -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - margin: 20px; - border: 20px solid #8ca0ff; - padding: 20px; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - -webkit-mask-clip: border; - mask-clip: border-box; -} -``` - -### HTML - -```html -<div id="masked"></div> -``` - -### Résultat +Vous pouvez modifier la valeur `mask-clip` dans l'exemple qui suit. Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de `-webkit-mask-clip`. -{{EmbedLiveSample("Exemples", "220px", "250px")}} +{{EmbedGHLiveSample("css-examples/masking/mask-clip.html", '100%', 800)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- | -| {{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}} | {{Spec2("CSS Masks")}} | Définition initiale | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-clip")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage en CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
\ No newline at end of file diff --git a/files/fr/web/css/mask-composite/index.md b/files/fr/web/css/mask-composite/index.md index 1843872679..0bd2f96551 100644 --- a/files/fr/web/css/mask-composite/index.md +++ b/files/fr/web/css/mask-composite/index.md @@ -1,16 +1,12 @@ --- title: mask-composite slug: Web/CSS/mask-composite -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-composite +browser-compat: css.properties.mask-composite --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété **`mask-composite`** permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-composite`** permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous. ```css /* Valeurs avec un mot-clé*/ @@ -22,6 +18,7 @@ mask-composite: exclude; /* Valeurs globales */ mask-composite: inherit; mask-composite: initial; +mask-composite: revert; mask-composite: unset; ``` @@ -40,59 +37,30 @@ La couche du masque de l'élément est appelée _source_ et les couches inférie - `intersect` - : Les endroits de la source qui chevauchent la destination prennent le pas sur la destination. - `exclude` - - : Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined. + - : Les régions de la source et de la destination qui ne se chevauchent pas sont combinées. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples +{{cssinfo}} -### CSS +## Syntaxe formelle -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg), - url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg), - url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-size: 100% 100%; - -webkit-mask-composite: add; - mask-composite: add; /* peut-être modifiée dans la démo */ -} -``` +{{csssyntax}}} -```html hidden -<div id="masked"> -</div> -<select id="compositeMode"> - <option value="add">add</option> - <option value="subtract">subtract</option> - <option value="intersect">intersect</option> - <option value="exclude">exclude</option> -</select> -``` +## Exemples -```js hidden -var clipBox = document.getElementById("compositeMode"); -clipBox.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskClip = evt.target.value; -}); -``` +### Composer des couches de masques de façon additive -{{EmbedLiveSample("Exemples", "200px", "200px")}} +{{EmbedGHLiveSample("css-examples/masking/mask-composite.html", '100%', 550)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | -| {{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}} | {{Spec2("CSS Masks")}} | Définition initiale | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-composite")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) diff --git a/files/fr/web/css/mask-image/index.md b/files/fr/web/css/mask-image/index.md index 701f385f6b..6d3402ebc7 100644 --- a/files/fr/web/css/mask-image/index.md +++ b/files/fr/web/css/mask-image/index.md @@ -1,18 +1,14 @@ --- title: mask-image slug: Web/CSS/mask-image -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-image +browser-compat: css.properties.mask-image --- {{CSSRef}} -La propriété CSS **`mask-image`** définit l'image qui sera utilisée comme masque pour un élément. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-image`** définit l'image qui sera utilisée comme masque pour un élément. -## Syntaxe +Par défaut, cela signifie que le canal alpha de l'image du masque sera multiplié par le canal alpha de l'élément. Cette combinaison peut être contrôlée avec la propriété [`mask-mode`](/fr/docs/Web/CSS/mask-mode). ```css /* Valeur avec un mot-clé */ @@ -26,57 +22,49 @@ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* Gestion de plusieurs masques */ -mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); +mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* Valeurs globales */ mask-image: inherit; mask-image: initial; +mask-image: revert; mask-image: unset; ``` +## Syntaxe + ### Valeurs - `none` - : Le masque défini par ce mot-clé sera une image noire transparente. - `<mask-source>` - - : Une référence {{cssxref("<url>")}} vers un masque ({{SVGElement("mask")}}) ou une image CSS. -- {{cssxref("<image>")}} + - : Une référence [`url()`](/fr/docs/Web/CSS/url()) vers un masque SVG ([`<mask>`](/fr/docs/Web/SVG/Element/mask)) ou une image CSS. +- [`<image>`](/fr/docs/Web/CSS/image) - : Une image utilisée pour le masque. -### Syntaxe formelle - -{{csssyntax}} +## Définition formelle -## Exemples +{{cssinfo}} -### CSS +## Syntaxe formelle -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); -} -``` +{{csssyntax}} -### HTML +## Exemples -```html -<div id="masked"></div> -``` +### Définir une image de masque avec une URL -{{EmbedLiveSample("Exemples", "100px", "100px",'', '', 'hide-codepen-jsfiddle') }} +{{EmbedGHLiveSample("css-examples/masking/mask-image.html", '100%', 560)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-image", "mask-image")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-image")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) +- [Appliquer des effets à des images avec la propriété CSS `mask-image` (en anglais)](https://web.dev/css-masking/) diff --git a/files/fr/web/css/mask-mode/index.md b/files/fr/web/css/mask-mode/index.md index a6d59e866f..6e1515cfc9 100644 --- a/files/fr/web/css/mask-mode/index.md +++ b/files/fr/web/css/mask-mode/index.md @@ -1,16 +1,12 @@ --- title: mask-mode slug: Web/CSS/mask-mode -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-mode +browser-compat: css.properties.mask-mode --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété **`mask-mode`** détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence). +La propriété [CSS](/fr/docs/Web/CSS) **`mask-mode`** détermine si le masque défini par [`mask-image`](/fr/docs/Web/CSS/mask-image) est considéré comme un masque de luminance ou un masque alpha (transparence). ```css /* Valeurs avec un mot-clé */ @@ -24,6 +20,7 @@ mask-mode: alpha, match-source; /* Valeurs globales */ mask-mode: inherit; mask-mode: initial; +mask-mode: revert; mask-mode: unset; ``` @@ -34,85 +31,37 @@ La propriété `mask-mode` est définie avec un ou plusieurs mots-clés parmi ce ### Valeurs - `alpha` - - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque. + - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal d'opacité) qui sont utilisées comme valeurs de masque. - `luminance` - : Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque. - `match-source` - - : Si la propriété {{cssxref("mask-image")}} est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque. + - : Si la propriété [`mask-image`](/fr/docs/Web/CSS/mask-image) est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisées comme valeurs pour le masque. - Si elle est de type {{cssxref("<image>")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées. + Si elle est de type [`<image>`](/fr/docs/Web/CSS/image), ce seront les valeurs de transparence (canal alpha) qui seront utilisées. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples - -### Alpha - -#### CSS - -```css -#masked { - width: 100px; - height: 100px; - background: blue linear-gradient(red, blue); - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - -webkit-mask-mode: alpha; - mask-mode: alpha; -} -``` - -#### HTML - -```html -<div id="masked"></div> -``` - -#### Résultat - -{{EmbedLiveSample("Alpha", "110px", "130px")}} - -### Luminance - -#### CSS +{{cssinfo}} -```css -#masked { - width: 100px; - height: 100px; - background-color: #8cffa0; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - -webkit-mask-mode: luminance; - mask-mode: luminance; -} -``` +## Syntaxe formelle -#### HTML +{{csssyntax}} -```html -<div id="masked"></div> -``` +## Exemples -#### Résultat +### Utiliser le mode de masque alpha -{{EmbedLiveSample("Luminance", "110px", "130px")}} +{{EmbedGHLiveSample("css-examples/masking/mask-mode.html", '100%', 760)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-mode")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) diff --git a/files/fr/web/css/mask-origin/index.md b/files/fr/web/css/mask-origin/index.md index 20424606ee..9a0e4a7d98 100644 --- a/files/fr/web/css/mask-origin/index.md +++ b/files/fr/web/css/mask-origin/index.md @@ -1,16 +1,12 @@ --- title: mask-origin slug: Web/CSS/mask-origin -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-origin +browser-compat: css.properties.mask-origin --- {{CSSRef}} -La propriété **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque. ```css /* Valeurs avec un mot-clé */ @@ -27,17 +23,18 @@ mask-origin: padding-box, content-box; mask-origin: view-box, fill-box, border-box; /* Valeurs non-standards */ - -webkit-mask-origin: content; - -webkit-mask-origin: padding; - -webkit-mask-origin: border; +-webkit-mask-origin: content; +-webkit-mask-origin: padding; +-webkit-mask-origin: border; /* Valeurs globales */ mask-origin: inherit; mask-origin: initial; +mask-origin: revert; mask-origin: unset; ``` -Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes _inline_ ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque. +Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via [`mask-image`](/fr/docs/Web/CSS/mask-image). Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes en lignes ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles [`box-decoration-break`](/fr/docs/Web/CSS/box-decoration-break) agira pour déterminer la zone de positionnement du masque. ## Syntaxe @@ -48,22 +45,22 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une - `content-box` - : La position de la zone est relative à la boîte de contenu. - `padding-box` - - : La position de la zone est relative à la boîte de remplissage (_padding_). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite. + - : La position de la zone est relative à la boîte de remplissage (<i lang="en">padding</i>). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite. - `border-box` - : La position de la zone est relative à la boîte de bordure. - `margin-box` - : La position de la zone est relative à la boîte de marge. - `fill-box` - - : La position de la zone est relative à la boîte liée à l'objet (_[bounding box](https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox)_). + - : La position de la zone est relative à la boîte liée à l'objet. - `stroke-box` - - : La position de la zone est relative à la boîte de contour de l'objet (_[stroke bounding box](https://www.w3.org/TR/css-masking/#stroke-bounding-box)_). + - : La position de la zone est relative à la boîte de contour de l'objet. - `view-box` - - : La zone d'affichage (_viewport_) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`. -- `content`{{non-standard_inline}} + - : La zone d'affichage (<i lang="en">viewport</i>) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut `viewBox` est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`. +- `content` {{non-standard_inline}} - : Synonyme de `content-box`. -- `padding`{{non-standard_inline}} +- `padding` {{non-standard_inline}} - : Synonyme de `padding-box`. -- `border`{{non-standard_inline}} +- `border` {{non-standard_inline}} - : Synonyme de `border-box`. ### Syntaxe formelle @@ -72,60 +69,20 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une ## Exemples -### CSS +### Définir l'origine du masque avec `border-box` -```css -#masked { - width: 100px; - height: 100px; - margin: 10px; - border: 10px solid blue; - background-color: #8cffa0; - padding: 10px; - -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); - -webkit-mask-origin: border-box; /* À modifier dans le résultat. */ - mask-origin: border-box; /* À modifier dans le résultat. */ -} -``` - -### HTML - -```html -<div id="masked"> -</div> -<select id="origin"> - <option value="content-box">content-box</option> - <option value="padding-box">padding-box</option> - <option value="border-box" selected>border-box</option> - <option value="margin-box">margin-box</option> - <option value="fill-box">fill-box</option> - <option value="stroke-box">stroke-box</option> - <option value="view-box">view-box</option> -</select> -``` - -### JavaScript +Vous pouvez également essayer d'autres valeurs en éditant le code CSS qui suit. -```js -var origin = document.getElementById("origin"); -origin.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskOrigin = evt.target.value; -}); -``` - -### Résultat - -{{EmbedLiveSample("Exemples", 160, 200)}} +{{EmbedGHLiveSample("css-examples/masking/mask-origin.html", '100%', 600)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-origin")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) diff --git a/files/fr/web/css/mask-position/index.md b/files/fr/web/css/mask-position/index.md index e249dbfe7b..49cc3448e8 100644 --- a/files/fr/web/css/mask-position/index.md +++ b/files/fr/web/css/mask-position/index.md @@ -1,16 +1,12 @@ --- title: mask-position slug: Web/CSS/mask-position -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-position +browser-compat: css.properties.mask-position --- {{CSSRef}} -La propriété **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété [`mask-origin`](/fr/docs/Web/CSS/mask-origin). ```css /* Valeurs avec un mot-clé */ @@ -20,94 +16,57 @@ mask-position: left; mask-position: right; mask-position: center; -/* Valeurs en pourcentage */ -/* Type <percentage> */ +/* Valeurs de <position> */ mask-position: 25% 75%; - -/* Valeurs en longueur */ -/* Type <length> */ mask-position: 0px 0px; -mask-position: 1cm 2cm; -mask-position: 10ch 8em; +mask-position: 10% 8em; /* Valeurs multiples */ -mask-position: 0px 0px, center; +mask-position: top right; +mask-position: 1rem 1rem, center; /* Valeurs globales */ mask-position: inherit; mask-position: initial; +mask-position: revert; mask-position: unset; ``` ## Syntaxe +Cette propriété s'utilise avec une ou plusieurs valeurs de position, séparées par des virgules. + ### Valeurs - `<position>` - - : Une position CSS (type {{cssxref("<position>")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément. + - : Une position CSS (type [`<position>`](/fr/docs/Web/CSS/position_value)) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} +{{cssinfo}} -## Exemples +## Syntaxe formelle -### CSS +{{csssyntax}} -```css -#wrapper { - border: 1px solid black; - width: 250px; - height: 250px; -} - -#masked { - width: 250px; - height: 250px; - background: blue linear-gradient(red, blue); - mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); - mask-repeat: no-repeat; - mask-position: top right; /* Can be changed in the live sample */ - margin-bottom: 10px; -} -``` +## Exemples -```html hidden -<div id="wrapper"> - <div id="masked"> - </div> -</div> -<select id="maskPosition"> - <option value="top">top</option> - <option value="center">center</option> - <option value="bottom">bottom</option> - <option value="top right" selected>top right</option> - <option value="center center">center center</option> - <option value="bottom left">bottom left</option> - <option value="10px 20px">10px 20px</option> - <option value="60% 20%">60% 20%</option> -</select> -``` +### Définir la position du masque -```js hidden -var maskPosition = document.getElementById("maskPosition"); -maskPosition.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskPosition = evt.target.value; -}); -``` +Dans le fragment de code qui suit, vous pouvez modifier la valeur de `mask-position` avec une des valeurs autorisées (voir ci-avant) pour observer l'effet de la propriété. -### Résultat +Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de la propriété `-webkit-mask-position`. -{{EmbedLiveSample("Exemples",200,200)}} +{{EmbedGHLiveSample("css-examples/masking/mask-position.html", '100%', 760)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-position", "mask-position")}} | {{Spec2("CSS Masks")}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.mask-position")}} +{{Compat}} + +## Voir aussi + +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) diff --git a/files/fr/web/css/mask-size/index.md b/files/fr/web/css/mask-size/index.md index 52a1b29e82..78555fe987 100644 --- a/files/fr/web/css/mask-size/index.md +++ b/files/fr/web/css/mask-size/index.md @@ -1,16 +1,12 @@ --- title: mask-size slug: Web/CSS/mask-size -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/mask-size +browser-compat: css.properties.mask-size --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété **`mask-size`** définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques. +La propriété [CSS](/fr/docs/Web/CSS) **`mask-size`** définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques. ```css /* Valeurs avec un mot-clé */ @@ -43,93 +39,76 @@ mask-size: 6px, auto, contain; /* Valeurs globales */ mask-size: inherit; mask-size: initial; +mask-size: revert; mask-size: unset; ``` -> **Note :** Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après `mask-size`, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie. +> **Note :** Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie [`mask`](/fr/docs/Web/CSS/mask) et que celle-ci est appliquée après `mask-size`, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie. ## Syntaxe -Une ou plusieurs valeurs `<bg-size>`, séparées par des virgules. Une valeur `<bg-size>` peut être définie de trois façons : +Une ou plusieurs valeurs `<bg-size>`, séparées par des virgules. Une valeur `<bg-size>` peut être définie de trois façons : -- avec le mot-clé [`contain`](#contain) -- avec le mot-clé [`cover`](#cover) +- avec le mot-clé `contain` +- avec le mot-clé `cover` - avec des valeurs pour la hauteur et la largeur. -Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs : +Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs : - Si une seule valeur est fournie, elle servira à définir la largeur, la hauteur vaudra alors `auto` -- Si deux valeurs sont fournies, la première définira la largeur et la seonde définira la hauteur. +- Si deux valeurs sont fournies, la première définira la largeur et la seconde définira la hauteur. Chaque valeur peut être une longueur (`<length>`), un pourcentage (`<percentage>`) ou `auto`. ### Valeurs - `<length>` - - : Une valeur de longueur (type {{cssxref("<length>")}} qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées. + - : Une valeur de longueur (type [`<length>`](/fr/docs/Web/CSS/length) qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées. - `<percentage>` - - : Une valeur de pourcentage ({{cssxref("<percentage>")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (_padding_) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées. + - : Une valeur de pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par [`mask-origin`](/fr/docs/Web/CSS/mask-origin) par rapport à la taille de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (<i lang="en">padding</i>) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées. - `auto` - : Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions. - `contain` - - : Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre. + - : Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le conteneur. Par défaut, l'image est centrée sauf si [`mask-position`](/fr/docs/Web/CSS/mask-position) indique un autre paramètre. - `cover` - : Un mot-clé qui se comporte à l'inverse de `contain`. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche). -L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (_bitmap_) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, _de facto_, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques. +L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (<i lang="en">bitmap</i>) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, _de facto_, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques. -La taille de l'image affichée pour le masque est calculée de la façon suivante : +La taille de l'image affichée pour le masque est calculée de la façon suivante : -- Si les deux composants de `mask-size` sont définis et sont différents de `auto` : +- Si les deux composants de `mask-size` sont définis et sont différents de `auto` : - : L'image est affichée avec la taille indiquée. -- Si `mask-size` vaut `contain` ou `cover` : - - : L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrire toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque. +- Si `mask-size` vaut `contain` ou `cover` : + - : L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrir toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque. - Si `mask-size` vaut `auto` ou `auto auto` : - : Si l'image possède deux dimensions intrinsèques, elle sera affichée avec cette taille. Si elle ne possède pas de dimensions intrinsèques ni de proportions intrinsèques, elle sera affichée à la taille de la zone du masque. Si elle n'a aucune dimension intrinsèque mais possède des proportions intrinsèques elle sera affichée comme si `contain` avait été utilisé. Si l'image possède une dimension intrinsèque et des proportions intrinsèques, sa taille sera déterminée grâce à ses informations. Si l'image possède une dimension intrinsèque mais aucune proportion intrinsèque, la dimension connue sera utilisée pour cet axe et la seconde sera celle de la zone pour le masque. -- Si `mask-size` possède un composant `auto` et un autre composant différent de `auto` : +- Si `mask-size` possède un composant `auto` et un autre composant différent de `auto` : - : Si l'image possède des proportions intrinsèques, elle sera affichée avec la dimension connue et la deuxième sera calculée à partir de la proportion. Si l'image ne possède pas de proportions intrinsèques, la valeur définie sera utilisée pour l'axe correspondant et pour l'autre axe, on utilisera la dimension intrinsèque si elle est connue, sinon, on utilisera la dimension (sur cet axe) de la zone du masque. -### Syntaxe formelle +## Définition formelle -{{csssyntax}} - -## Exemples - -### CSS - -```css -.exemple { - height: 100px; - width: 100px; - background-color: rgb(128,128,128); +{{cssinfo}} - -webkit-mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png'); - mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png'); +## Syntaxe formelle - -webkit-mask-size: auto 50%; - mask-size: auto 50%; +{{csssyntax}} -} -``` +## Exemples -### HTML +### Définir la taille du masque en pourcentages -```html -<div class="exemple"></div> -``` +{{EmbedGHLiveSample("css-examples/masking/mask-size.html", '100%', 700)}} -### Résultat +## Spécifications -{{EmbedLiveSample("Exemples",200,200)}} +{{Specifications}} -## Spécifications +## Compatibilité des navigateurs -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks", "#the-mask-size", "mask-size")}} | {{Spec2("CSS Masks")}} | Définition initiale. | +{{Compat}} -{{cssinfo}} +## Voir aussi -## Compatibilité des navigateurs +- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/) -{{Compat("css.properties.mask-size")}} diff --git a/files/fr/web/css/object-fit/index.md b/files/fr/web/css/object-fit/index.md index c07c52479d..bd4a88b602 100644 --- a/files/fr/web/css/object-fit/index.md +++ b/files/fr/web/css/object-fit/index.md @@ -1,35 +1,33 @@ --- title: object-fit slug: Web/CSS/object-fit -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/object-fit +browser-compat: css.properties.object-fit --- {{CSSRef}} -La propriété CSS **`object-fit`** définit la façon dont le contenu d'un [élément remplacé](/fr/docs/Web/CSS/Élément_remplacé) ({{HTMLElement("img")}} ou {{HTMLElement("video")}} par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur. +La propriété CSS **`object-fit`** définit la façon dont le contenu d'un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) ([`<img>`](/fr/docs/Web/HTML/Element/Img) ou [`<video>`](/fr/docs/Web/HTML/Element/video) par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur. {{EmbedInteractiveExample("pages/css/object-fit.html")}} Selon la valeur utilisée pour `object-fit`, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient. -> **Note :** Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-position")}}. +> **Note :** Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété [`object-position`](/fr/docs/Web/CSS/object-position). ## Syntaxe ```css /* Valeurs avec un mot-clé */ -object-fit: fill; object-fit: contain; object-fit: cover; +object-fit: fill; object-fit: none; object-fit: scale-down; /* Valeurs globales */ object-fit: inherit; object-fit: initial; +object-fit: revert; object-fit: unset; ``` @@ -38,9 +36,9 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su ### Valeurs - `contain` - - : Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant. + - : Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant. - `cover` - - : Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné. + - : Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné. - `fill` - : Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte. - `none` @@ -48,117 +46,109 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su - `scale-down` - : Le contenu est dimensionné comme si `none` ou `contain` étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite. -### Syntaxe formelle +## Définition formelle + +{{cssinfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### HTML +### Appliquer `object-fit` à une image -```html -<div> - <h2>object-fit: fill</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> +#### HTML - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/> +```html +<section> + <h2>object-fit: fill</h2> + <img class="fill" src="mdn_logo_only_color.png" alt="Logo MDN"> - <h2>object-fit: contain</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> + <img class="fill narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/> + <h2>object-fit: contain</h2> + <img class="contain" src="mdn_logo_only_color.png" alt="Logo MDN"> - <h2>object-fit: cover</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> + <img class="contain narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/> + <h2>object-fit: cover</h2> + <img class="cover" src="mdn_logo_only_color.png" alt="Logo MDN"> - <h2>object-fit: none</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> + <img class="cover narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/> + <h2>object-fit: none</h2> + <img class="none" src="mdn_logo_only_color.png" alt="Logo MDN"> - <h2>object-fit: scale-down</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> + <img class="none narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> + <h2>object-fit: scale-down</h2> + <img class="scale-down" src="mdn_logo_only_color.png" alt="Logo MDN"> -</div> + <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="Logo MDN"> +</section> ``` -### CSS +#### CSS ```css h2 { - font-family: 'Courier New', monospace; - font-size: 1em; - margin: 1em 0 0.3em; -} - -div { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: flex-start; - height: 940px; + font-family: Courier New, monospace; + font-size: 1em; + margin: 1em 0 0.3em; } img { - width: 150px; - height: 100px; - border: 1px solid #000; + width: 150px; + height: 100px; + border: 1px solid #000; + margin: 10px 0; } .narrow { width: 100px; - height: 150px; - margin-top: 10px; + height: 150px; } .fill { - object-fit: fill; + object-fit: fill; } .contain { - object-fit: contain; + object-fit: contain; } .cover { - object-fit: cover; + object-fit: cover; } .none { - object-fit: none; + object-fit: none; } .scale-down { - object-fit: scale-down; + object-fit: scale-down; } ``` -### Résultat +#### Résultat -{{EmbedLiveSample('Exemples', 500, 450)}} +{{EmbedLiveSample('', 500, 1100)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- | -| {{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}} | {{Spec2('CSS4 Images')}} | Les mots-clés `from-image` et `flip` ont été ajoutés. | -| {{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}} | {{Spec2('CSS3 Images')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.object-fit")}} +{{Compat}} ## Voir aussi -- {{cssxref("background-size")}} -- Les autres propriétés CSS liées aux images : +- [`background-size`](/fr/docs/Web/CSS/background-size) - - {{cssxref("object-position")}} - - {{cssxref("image-orientation")}} - - {{cssxref("image-rendering")}} - - {{cssxref("image-resolution")}} +- Les autres propriétés CSS liées aux images : + - [`object-position`](/fr/docs/Web/CSS/object-position) + - [`image-orientation`](/fr/docs/Web/CSS/image-orientation) + - [`image-rendering`](/fr/docs/Web/CSS/Image-rendering) + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution) diff --git a/files/fr/web/css/object-position/index.md b/files/fr/web/css/object-position/index.md index 6028bcbbfd..0198ad2fdf 100644 --- a/files/fr/web/css/object-position/index.md +++ b/files/fr/web/css/object-position/index.md @@ -1,19 +1,16 @@ --- title: object-position slug: Web/CSS/object-position -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/object-position +browser-compat: css.properties.object-position --- {{CSSRef}} -La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9) au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément. +La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) au sein de sa boîte. Les zones de la boîte qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément. -{{EmbedInteractiveExample("pages/css/object-position.html")}} +> **Note :** Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété [`object-fit`](/fr/docs/Web/CSS/object-fit). -> **Note :** Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}. +{{EmbedInteractiveExample("pages/css/object-position.html")}} ## Syntaxe @@ -26,15 +23,20 @@ object-position: 100px 50px; /* Valeurs globales */ object-position: inherit; object-position: initial; +object-position: revert; object-position: unset; ``` ### Valeurs - `<position>` - - : Une valeur de type {{cssxref("<position>")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément. + - : Une valeur de type [`<position>`](/fr/docs/Web/CSS/position_value), c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément. + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} @@ -42,21 +44,25 @@ object-position: unset; ### HTML +Dans ce fragment HTML, on a deux éléments [`<img>`](/fr/docs/Web/HTML/Element/img), chacun affichant le logo de MDN. + ```html -<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> -<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +<img id="object-position-1" src="mdn.svg" alt="Logo MDN"/> +<img id="object-position-2" src="mdn.svg" alt="Logo MDN"/> ``` ### CSS +Le code CSS implique la mise en forme par défaut pour les éléments `<img>` et des styles différents pour les deux images. + ```css img { - width: 300px; - height: 250px; - border: 1px solid black; - background-color: silver; - margin-right: 1em; - object-fit: none; + width: 300px; + height: 250px; + border: 1px solid black; + background-color: silver; + margin-right: 1em; + object-fit: none; } #object-position-1 { @@ -68,27 +74,25 @@ img { } ``` +La première image est positionnée avec son bord gauche situé à 10 pixels du bord gauche de la boîte de l'élément. La seconde image est positionnée avec son bord droit poussé sur le bord droit de la boîte de l'élément et est située vers le bas de 10% de la hauteur de la boîte de l'élément. + ### Résultat -{{EmbedLiveSample('Exemples', '100%','300px')}} +{{EmbedLiveSample('', '100%','600px')}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Images', '#the-object-position', 'object-position')}} | {{Spec2('CSS3 Images')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.object-position")}} +{{Compat}} ## Voir aussi -- Les autres propriétés CSS liées aux images : +- Les autres propriétés CSS liées aux images : - - {{cssxref("object-fit")}} - - {{cssxref("image-orientation")}} - - {{cssxref("image-rendering")}} - - {{cssxref("image-resolution")}} + - [`object-fit`](/fr/docs/Web/CSS/object-fit) + - [`image-orientation`](/fr/docs/Web/CSS/image-orientation) + - [`image-rendering`](/fr/docs/Web/CSS/image-rendering) + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution) diff --git a/files/fr/web/css/position/index.md b/files/fr/web/css/position/index.md index bbd7c79d26..a10ada64c1 100644 --- a/files/fr/web/css/position/index.md +++ b/files/fr/web/css/position/index.md @@ -1,64 +1,88 @@ --- title: position slug: Web/CSS/position -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/position +browser-compat: css.properties.position --- {{CSSRef}} -La propriété **`position`** définit la façon dont un élément est positionné dans un document. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}} déterminent l'emplacement final de l'élément positionné. +La propriété [CSS](/fr/docs/Web/CSS) **`position`** définit la façon dont un élément est positionné dans un document. Les propriétés [`top`](/fr/docs/Web/CSS/top), [`right`](/fr/docs/Web/CSS/right), [`bottom`](/fr/docs/Web/CSS/bottom) et [`left`](/fr/docs/Web/CSS/left) déterminent l'emplacement final de l'élément positionné. {{EmbedInteractiveExample("pages/css/position.html")}} -### Types de positionnement - -- Un **élément positionné** est un élément dont la propriété de position [calculée](/fr/docs/Web/CSS/computed_value) est `relative`, `absolute`, `fixed` ou `sticky`. -- Un **élément positionné de façon relative** est un élément dont la propriété de position calculée est `relative`. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal. -- Un **élément positionné de façon absolue** est un élément dont la propriété de position calculée est `absolute` ou `fixed`. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages. -- Un **élément positionné en adhérence** est un élément dont la propriété de position calculée vaut `sticky`. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant. - -La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés {{cssxref("height")}} et {{cssxref("width")}} qui valent `auto` afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant {{cssxref("top")}} et {{cssxref("bottom")}} tout en laissant {{cssxref("height")}} indéfini (c'est-à-dire avec la valeur `auto`). On pourra faire de même pour l'espace horizontal avec les propriétés {{cssxref("left")}} et {{cssxref("right")}}. - -Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace : - -- Si `top` et `bottom` sont tous les deux définis (enfin, s'ils ne valent pas `auto`), c'est `top` qui aura la priorité -- Si `left` et `right` sont tous les deux définis, c'est `left` qui aura la priorité si la direction du texte est de gauche à droite (LTR) et `right` qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu). - ## Syntaxe ```css -/* Valeurs avec un mot-clé */ position: static; position: relative; position: absolute; position: fixed; position: sticky; -/* Valeurs globales*/ +/* Valeurs globales */ position: inherit; position: initial; +position: revert; position: unset; ``` -La propriété `position` peut être définie avec l'un des mots-clés de la liste suivante. - ### Valeurs - `static` - - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas. + - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés [`top`](/fr/docs/Web/CSS/top), [`right`](/fr/docs/Web/CSS/right), [`bottom`](/fr/docs/Web/CSS/bottom), [`left`](/fr/docs/Web/CSS/left) et [`z-index`](/fr/docs/Web/CSS/z-index) ne s'appliquent pas. + - `relative` - - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`. + - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`. + + Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`. + - `absolute` - - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges. + - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. + + Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges. + - `fixed` - - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (_viewport_), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_. + - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<i lang="en">viewport</i>), sauf si un des ancêtres a une propriété [`transform`](/fr/docs/Web/CSS/transform), [`perspective`](/fr/docs/Web/CSS/perspective) ou [`filter`](/fr/docs/Web/CSS/filter) qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certaines incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. + + Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_. + - `sticky` - - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf.: cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)). + - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments. + + Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf. cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)). + +## Description + +### Types de positionnement + +- Un **élément positionné** est un élément dont la propriété de position [calculée](/fr/docs/Web/CSS/computed_value) est `relative`, `absolute`, `fixed` ou `sticky`. +- Un **élément positionné de façon relative** est un élément dont la propriété de position calculée est `relative`. Dans ce cas, les propriétés [`top`](/fr/docs/Web/CSS/top) ou [`bottom`](/fr/docs/Web/CSS/bottom) indiquent le décalage vertical à appliquer et [`left`](/fr/docs/Web/CSS/left) ou [`right`](/fr/docs/Web/CSS/right) indiquent le décalage horizontal. +- Un **élément positionné de façon absolue** est un élément dont la propriété de position calculée est `absolute` ou `fixed`. Dans ce cas, les propriétés [`top`](/fr/docs/Web/CSS/top), [`bottom`](/fr/docs/Web/CSS/bottom), [`right`](/fr/docs/Web/CSS/right) et [`left`](/fr/docs/Web/CSS/left) indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages. +- Un **élément positionné en adhérence** est un élément dont la propriété de position calculée vaut `sticky`. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de [`top`](/fr/docs/Web/CSS/top)) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant. + +La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés [`height`](/fr/docs/Web/CSS/height) et [`width`](/fr/docs/Web/CSS/width) qui valent `auto` afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant [`top`](/fr/docs/Web/CSS/top) et [`bottom`](/fr/docs/Web/CSS/bottom) tout en laissant [`height`](/fr/docs/Web/CSS/height) indéfini (c'est-à-dire avec la valeur `auto`). On pourra faire de même pour l'espace horizontal avec les propriétés [`left`](/fr/docs/Web/CSS/left) et [`right`](/fr/docs/Web/CSS/right). + +Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace : + +- Si `top` et `bottom` sont tous les deux définis (enfin, s'ils ne valent pas `auto`), c'est `top` qui aura la priorité +- Si `left` et `right` sont tous les deux définis, c'est `left` qui aura la priorité si la direction du texte est de gauche à droite (LTR) et `right` qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu). + +## Accessibilité + +Il faut s'assurer que les éléments positionnés avec `absolute` ou `fixed` ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte. + +- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Présentation visuelle : comprendre les critères de succès 1.4.8 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +### Performance et accessibilité + +Les éléments qui défilent avec du contenu utilisant `fixed` ou `sticky` peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisatrice ou l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter `will-change: transform` (cf. [`will-change`](/fr/docs/Web/CSS/will-change)) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité. + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} @@ -66,6 +90,8 @@ La propriété `position` peut être définie avec l'un des mots-clés de la lis ### Positionnement relatif +Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale. + #### HTML ```html @@ -78,46 +104,56 @@ La propriété `position` peut être définie avec l'un des mots-clés de la lis #### CSS ```css +* { + box-sizing: border-box; +} + .box { - display: inline-block; - background: red; - width: 100px; - height: 100px; - color: white; + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; } #deux { - position: relative; - top: 20px; - left: 20px; + position: relative; + top: 20px; + left: 20px; + background: blue; } ``` #### Résultat -Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale. - -{{EmbedLiveSample('Positionnement_relatif', '600px', '200px')}} +{{EmbedLiveSample('', '600px', '200px')}} ### Positionnement absolu -Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir [la définition du W3C](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)). +Les éléments qui sont positionnés de façon relative sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolue est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir [la définition du W3C](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)). -Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément `<body>` de l'`iframe` générée ici) : +Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément `<body>` de l'`iframe` générée ici) : #### HTML ```html <h1>Positionnement absolu</h1> -<p>Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en-dessous.</p> + +<p>Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en dessous.</p> + <p class="positioned">Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.</p> <p>Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).</p> -<p>Les éléments <em>inline</em> <span>comme celui-ci</span> et <span>celui-là</span> se situent sur la même ligne avec également les noeuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent <span>passent à la ligne si possible — comme pour ce texte.</span> ou cette image <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> + +<p>Les éléments <em>en ligne (inline)</em> <span>comme celui-ci</span> et <span>celui-là</span> se situent sur la même ligne avec également les nœuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent <span>passent à la ligne si possible — comme pour ce texte.</span> ou cette image <img src="long.jpg"></p> ``` #### CSS ```css +* { + box-sizing: border-box; +} + body { width: 500px; margin: 0 auto; @@ -145,11 +181,11 @@ span { #### Résultat -{{EmbedLiveSample('Positionnement_absolu', '100%', 420)}} +{{EmbedLiveSample('', '100%', 420)}} ### Positionnement fixe -Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au _viewport_ si aucun ancêtre de l'élément ne possède une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de `none`. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche. +Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond à la zone d'affichage (<i lang="en">viewport</i>) si aucun ancêtre de l'élément ne possède une propriété [`transform`](/fr/docs/Web/CSS/transform), [`perspective`](/fr/docs/Web/CSS/perspective) ou [`filter`](/fr/docs/Web/CSS/filter) qui est différente de `none`. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche. #### HTML @@ -180,18 +216,24 @@ Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bl #### CSS ```css +* { + box-sizing: border-box; +} + .box { - background: red; width: 100px; height: 100px; - margin: 20px; + background: red; color: white; } + #un { position: fixed; top: 80px; left: 10px; + background: blue; } + .outer { width: 500px; height: 300px; @@ -202,13 +244,13 @@ Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bl #### Résultat -Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au _viewport_ : +Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport à la zone d'affichage (<i lang="en">viewport</i>) : -{{EmbedLiveSample('Positionnement_fixe', '800px', '300px')}} +{{EmbedLiveSample('', '800px', '300px')}} -### Positionnement adhérent (_sticky_) +### Positionnement adhérent (<i lang="en">sticky</i>) -Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple : +Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple : ```css #un { @@ -217,11 +259,11 @@ Le positionnement adhérent est un mélange de positionnement relatif et de posi } ``` -se comportera comme un élément positionné de façon relative jusqu'à ce que le _viewport_ défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le _viewport_ redéfile jusqu'avant ce seuil. +positionnera l'élément avec l'identifiant `un` de façon relative jusqu'à ce que la zone d'affichage défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que la zone d'affichage redéfile jusqu'avant ce seuil. -Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du _viewport_ jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite). +Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut de la zone d'affichage jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite). -Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")}} ou {{cssxref("bottom")}} ou {{cssxref("left")}} pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif. +Il faut définir un seuil avec au moins [`top`](/fr/docs/Web/CSS/top) ou [`right`](/fr/docs/Web/CSS/right) ou [`bottom`](/fr/docs/Web/CSS/bottom) ou [`left`](/fr/docs/Web/CSS/left) pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif. #### HTML @@ -264,8 +306,9 @@ Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right") * { box-sizing: border-box; } + dl > div { - margin: 0; + background: #FFF; padding: 24px 0 0 0; } @@ -279,7 +322,6 @@ dt { padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; - width: 99%; top: -1px; } @@ -297,28 +339,16 @@ dd + dd { #### Résultat -{{EmbedLiveSample('Positionnement_adhérent_(sticky)', '500px', '300px')}} - -## Accessibilité - -Il faut s'assurer que les éléments positionnés avec `absolute` ou `fixed` ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte. - -- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) - -### Performance et accessibilité - -Les éléments qui défilent avec du contenu utilisant `fixed` ou `sticky` peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter `will-change: transform` (cf. {{cssxref("will-change")}}) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité. +{{EmbedLiveSample('', '500px', '300px')}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------- | -| {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS3 Positioning','#position-property','position')}} | {{Spec2('CSS3 Positioning')}} | Ajout de la valeur `sticky` | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.position")}} +{{Compat}} + +## Voir aussi + +- [Apprendre le CSS : le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) diff --git a/files/fr/web/css/position_value/index.md b/files/fr/web/css/position_value/index.md index 0437058c5d..28cdfc27a5 100644 --- a/files/fr/web/css/position_value/index.md +++ b/files/fr/web/css/position_value/index.md @@ -1,22 +1,25 @@ --- title: <position> slug: Web/CSS/position_value -tags: - - CSS - - Reference - - Type translation_of: Web/CSS/position_value original_slug: Web/CSS/Type_position +browser-compat: css.types.position --- {{CSSRef}} -Le type de donnée CSS **`<position>`** définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur `<position>`, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}. +Le type de donnée [CSS](/fr/docs/Web/CSS) **`<position>`** (ou **`<bg-position>`**) définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. Ce type de donnée est notamment utilisé avec les propriétés [`background-position`](/fr/docs/Web/CSS/background-position) et [`offset-anchor`](/fr/docs/Web/CSS/offset-anchor). + +> **Note :** La position finale obtenue, décrite par la valeur `<position>`, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. ## Syntaxe -On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera `left`, `right`, `top`, `bottom` ou `center` (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte). + + +On peut définir une position grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. + +Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera `left`, `right`, `top`, `bottom` ou `center` (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte). -Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut). +Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage)) ou une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)). Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut). Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est `center`. @@ -39,67 +42,60 @@ mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rappor ### Syntaxe formelle - [ - [ left | center | right ] || [ top | center | bottom ] - | - [ left | center | right | <length> | <percentage> ] - [ top | center | bottom | <length> | <percentage> ]? - | - [ [ left | right ] [ <length> | <percentage> ] ] && - [ [ top | bottom ] [ <length> | <percentage> ] ] - ] +```css +[ + [ left | center | right ] || [ top | center | bottom ] +| + [ left | center | right | <length> | <percentage> ] + [ top | center | bottom | <length> | <percentage> ]? +| + [ [ left | right ] [ <length> | <percentage> ] ] && + [ [ top | bottom ] [ <length> | <percentage> ] ] +] +``` + +> **Note :** La propriété [`background-position`](/fr/docs/Web/CSS/background-position) accepte également une syntaxe avec trois valeurs. Celle-ci n'est pas autorisée pour les autres propriétés qui utilisent une valeur `<position>`. ## Interpolation -Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne. +Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par une unique fonction de temporisation ([`easing-function`](/fr/docs/Web/CSS/easing-function)), le point se déplacera donc sur une ligne. ## Exemples -### CSS +### Positions valides -```css -div { - background-color: #FFEE99; - background-repeat: no-repeat; - width: 300px; - height: 80px; - margin-bottom: 12px; -} - -.exemple{ - background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat; - // Ici un exemple de valeur <position> - background-position: 2.5cm bottom; -} -``` +```css example-good +center +left +center top -### HTML +right 8.5% +bottom 12vmin right -6px -```html -<div class="exemple">Exemple</div> +10% 20% +8rem 14px ``` -### Résultat +### Positions invalides -{{EmbedLiveSample('Exemples', 120, 200)}} +```css example-bad +left right +bottom top +10px 15px 20px 15px +``` ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Values', '#position', '<position>')}} | {{Spec2('CSS3 Values')}} | Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de `<position>` qui doit être utilisée. | -| {{SpecName('CSS3 Backgrounds', '#position', '<position>')}} | {{Spec2('CSS3 Backgrounds')}} | `<position>` est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}} | {{Spec2('CSS2.1')}} | Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}. | -| {{SpecName('CSS1', '#background-position', '<position>')}} | {{Spec2('CSS1')}} | `<position>` est défini de façon anonyme comme valeur de {{cssxref("background-position")}}. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.types.position")}} +{{Compat}} ## Voir aussi - [Valeurs et unités en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units) -- [Tutoriel - Introduction aux valeurs et unités CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) -- {{cssxref("background-position")}} -- {{cssxref("radial-gradient","radial-gradient()")}} -- {{cssxref("conic-gradient","conic-gradient()")}} +- [Tutoriel — Introduction aux valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +- [`background-position`](/fr/docs/Web/CSS/background-position) +- [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) +- [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) diff --git a/files/fr/web/css/text-combine-upright/index.md b/files/fr/web/css/text-combine-upright/index.md index 60ae92446f..38546b2597 100644 --- a/files/fr/web/css/text-combine-upright/index.md +++ b/files/fr/web/css/text-combine-upright/index.md @@ -1,18 +1,14 @@ --- title: text-combine-upright slug: Web/CSS/text-combine-upright -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/text-combine-upright +browser-compat: css.properties.text-combine-upright --- {{CSSRef}} -La propriété **`text-combine-upright`** définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'`1em`, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur `1em`. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux. +La propriété [CSS](/fr/docs/Web/CSS) **`text-combine-upright`** définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'`1em`, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur `1em`. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux. -Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois. +Cela permet d'obtenir un effet appelé « tate-chū-yoko (縦中横) » en japonais ou « 直書橫向 » en chinois. ```css /* Valeurs avec un mot-clé */ @@ -20,17 +16,15 @@ text-combine-upright: none; text-combine-upright: all; /* Valeurs pour les chiffres */ -/* 2 chiffres qui se suivent prendront la place - d'un caractère dans du texte vertical */ -text-combine-upright: digits; -/* Compresse jusqu'à 4 chiffres consécutifs afin - qu'ils occupent l'espace d'un caractère dans - du texte vertical */ -text-combine-upright: digits 4; +text-combine-upright: digits; /* 2 chiffres qui se suivent prendront la place d'un caractère dans du texte + vertical */ +text-combine-upright: digits 4; /* Compresse jusqu'à 4 chiffres consécutifs afin qu'ils occupent l'espace + d'un caractère dans du texte vertical */ /* Valeurs globales */ text-combine-upright: inherit; text-combine-upright: initial; +text-combine-upright: revert; text-combine-upright: unset; ``` @@ -43,9 +37,13 @@ text-combine-upright: unset; - `all` - : L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte. - `digits <n>?` - - : L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle `[2;4]` sont considérés comme invalides. + - : L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030-U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle `[2;4]` sont considérés comme invalides. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} @@ -53,53 +51,60 @@ text-combine-upright: unset; ### Exemple avec `digits` -Utiliser ` digit``s ` nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs. +Utiliser `digits` nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs. + +#### HTML ```html -<p lang="ja" class="exempleText">平成20年4月16日に</p> +<p lang="ja" class="texteExemple">平成20年4月16日に</p> ``` +#### CSS + ```css -.exempleText { +.texteExemple { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } ``` -{{EmbedLiveSample("Exemple_avec_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}} +#### Résultat + +{{EmbedLiveSample('', 100, 350, "tate-chu-yoko.png")}} ### Exemple avec `all` Pour utiliser `all`, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que `digits`. +#### HTML + ```html <p lang="zh-Hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> ``` +#### CSS + ```css html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } ``` -{{EmbedLiveSample("Exemple_avec_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}} +#### Résultat -## Spécifications +{{EmbedLiveSample('', 250, 300, "text-combine-upright-all.png")}} -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------- | -| {{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS3 Writing Modes")}} | Définition initiale. | -| {{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS4 Writing Modes")}} | Ajout de la valeur `digits`. | +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.text-combine-upright")}} +{{Compat}} ## Voir aussi -- {{cssxref("writing-mode")}}, -- {{cssxref("text-orientation")}} +- [`writing-mode`](/fr/docs/Web/CSS/writing-mode), +- [`text-orientation`](/fr/docs/Web/CSS/text-orientation) diff --git a/files/fr/web/css/url()/index.md b/files/fr/web/css/url()/index.md index 228065095b..d914cc0ee0 100644 --- a/files/fr/web/css/url()/index.md +++ b/files/fr/web/css/url()/index.md @@ -1,101 +1,119 @@ --- title: url() slug: Web/CSS/url() -tags: - - CSS - - Fonction - - Reference - - Web - - url() translation_of: Web/CSS/url() +browser-compat: css.types.url --- {{CSSRef}} -La fonction CSS **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme {{cssxref('attr()')}}. Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de stye. +La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](/fr/docs/Web/CSS/attr()). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style. -La notation fonctionelle `url()` correspond au type de donnée CSS [`<url>`](</fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f>). +La notation fonctionnelle `url()` correspond au type de donnée CSS `<url>`. + +> **Note :** Il y a une différence entre un URI et une URL. Un URI identifie une ressource. Une URL est un type d'URI qui décrit _l'emplacement_ d'une ressource. Un URI peut être une URL ou un nom (URN) d'une ressource. +> +> Pour la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne décrivaient que des URL au sens strict. Pour la spécification CSS de niveau 2, la définition de `url()` a été étendue afin de décrire n'importe quel URI (que ce soit une URL ou un URN). Cela a été une source de confusion, car `url()` pouvait être utilisée pour créer un type de données `<uri>`. Cette évolution était non seulement étrange mais aussi superflue, car les URN ne sont quasiment jamais utilisées dans du CSS réel. Pour éviter cette confusion, la spécification CSS de niveau 3 est revenue à la définition initiale. Aujourd'hui, `url()` ne manipule que des vraies `<url>`. ```css /* Utilisation simple */ -url(https://example.com/images/myImg.jpg); +url(https://example.com/images/monImg.jpg); url(data:image/png;base64,iRxVB0…); -url(myFont.woff); -url(#IDofSVGpath); +url(maPolice.woff); +url(#IDdeCheminSVG); /* Propriétés utilisables */ -background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); +background-image: url("star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); -cursor: url(mycursor.cur); +cursor: url(moncurseur.cur); border-image-source: url(/media/diamonds.png); -src: url('fantasticfont.woff'); +src: url('superpolice.woff'); offset-path: url(#path); -mask-image: url("masks.svg#mask1"); +mask-image: url("masques.svg#masque1"); /* Propriétés avec valeurs de recours */ cursor: url(pointer.cur), pointer /* Propriétés raccourcies associées */ -background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; +background: url('star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* Utilisation comme paramètre d'une fonction CSS */ background-image: cross-fade(20% url(first.png), url(second.png)); -mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); +mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent)); /* Utilisation avec plusieurs valeurs */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* Règles @ / at-rules */ -@document url("https://www.example.com/") { ... } {{Experimental_Inline}} +@document url("https://www.example.com/") { ... } /* expérimental */ @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); ``` -Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante). - -La fonction **`url()`** peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols) +Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante. -Dans la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'`url()` a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification _CSS Values and Units_ de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement `url()` ne permet que de décrire des valeurs `<url>`. +La fonction **`url()`** peut être incluse comme valeur pour les propriétés [`background`](/fr/docs/Web/CSS/background), [`background-image`](/fr/docs/Web/CSS/background-image), [`border`](/fr/docs/Web/CSS/border), [`border-image`](/fr/docs/Web/CSS/border-image), [`border-image-source`](/fr/docs/Web/CSS/border-image-source), [`content`](/fr/docs/Web/CSS/content), [`cursor`](/fr/docs/Web/CSS/cursor), [`filter`](/fr/docs/Web/CSS/filter), [`list-style`](/fr/docs/Web/CSS/list-style), [`list-style-image`](/fr/docs/Web/CSS/list-style-image), [`mask`](/fr/docs/Web/CSS/mask), [`mask-image`](/fr/docs/Web/CSS/mask-image), [`offset-path`](/fr/docs/Web/CSS/offset-path), comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols) ## Syntaxe ### Valeurs -- `string` +- `<string>` - : Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG. - `<url>` - - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes : + - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de données éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes : - <propriété_css>: url("https://example.com/image.png") - <propriété_css>: url('https://example.com/image.png') - <propriété_css>: url(https://example.com/image.png) + ```css + <propriete_css>: url("https://example.com/image.png") + <propriete_css>: url('https://example.com/image.png') + <propriete_css>: url(https://example.com/image.png) + ``` - Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets(`"`) faisant partie de l'URL. + Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets (`"`) faisant partie de l'URL. -- _chemin_ - - : La référence à un identifiant d'une [forme SVG](/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin. + - `chemin` + - : La référence à un identifiant d'une [forme SVG](/fr/docs/Web/SVG/Tutorial/Basic_Shapes), `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, ou `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin. + - `url-modifier` {{Experimental_Inline}} - : À l'avenir, la fonction `url()` pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge. ### Syntaxe formelle - url( <string> <url-modifier>* ) +```css +url( <string> <url-modifier>* ) +``` ## Exemples -### Propriété `content` +### Une URL utilisée pour la propriété `background` + +```css +.topbanner { + background: url("banniere_haut.png") #00D no-repeat fixed; +} +``` + +### Une URL pour une image de puce pour une liste + +```css +ul { + list-style: square url(http://www.example.com/redball.png); +} +``` + +### Utilisation avec la propriété `content` #### HTML ```html <ul> - <li>Item 1</li> - <li>Item 2</li> - <li>Item 3</li> + <li>Élément 1</li> + <li>Élément 2</li> + <li>Élément 3</li> </ul> ``` @@ -103,15 +121,15 @@ Dans la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne per ```css li::after { - content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); + content: ' - ' url(star.gif); } ``` #### Résultat -{{EmbedLiveSample("Propriété_content", "100%", 50)}} +{{EmbedLiveSample("", "100%", 150)}} -### URI de données +### Utilisation d'un URI de données #### HTML @@ -123,38 +141,52 @@ li::after { ```css hidden .background { - height: 100vh; + height: 100vh; } ``` ```css .background { - background: yellow; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); + background: yellow; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); } ``` #### Résultat -{{EmbedLiveSample("URI_de_données", "100%", 50)}} +{{EmbedLiveSample("", "100%", 50)}} + +### Utilisation pour les filtres + +Lorsqu'une URL est utilisée comme chemin d'un filtre, l'URL doit être : + +1. Le chemin d'un fichier SVG avec l'ancre qui pointe vers l'identifiant du filtre. +2. Ou l'identifiant du filtre si le SVG existe déjà sur la page. + +```css +.blur { + filter: url(mon-fichier.svg#svg-blur); + /* L'URL d'un fichier SVG utilisé comme filtre */ +} + +.inline-blur { + filter: url(#svg-blur); + /* L'identifiant d'un SVG déjà chargé sur la page HTML */ +} +``` ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ | -| {{SpecName('CSS4 Values', '#urls', 'url()')}} | {{Spec2('CSS4 Values')}} | | -| {{SpecName('CSS3 Values', '#urls', 'url()')}} | {{Spec2('CSS3 Values')}} | Aucune modification significative depuis la spécification de niveau 2 (première révision). | -| {{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}} | {{Spec2('CSS2.1')}} | Aucune modification significative depuis la spécification de niveau 1. | -| {{SpecName('CSS1', '#url', 'url()')}} | {{Spec2('CSS1')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.types.url")}} +{{Compat}} ## Voir aussi -- {{cssxref("<gradient>")}} -- {{cssxref("element()")}} -- {{cssxref("_image","image()")}} -- {{cssxref("image-set","image-set()")}} -- {{cssxref("cross-fade()")}} +- [`<gradient>`](/fr/docs/Web/CSS/gradient) +- [`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/vertical-align/index.md b/files/fr/web/css/vertical-align/index.md index 70a28e1e59..d6f3049f21 100644 --- a/files/fr/web/css/vertical-align/index.md +++ b/files/fr/web/css/vertical-align/index.md @@ -1,24 +1,21 @@ --- title: vertical-align slug: Web/CSS/vertical-align -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/vertical-align +browser-compat: css.properties.vertical-align --- {{CSSRef}} -La propriété **`vertical-align`** définit l'alignement vertical d'une boîte en ligne (_inline_) ou d'une cellule de tableau. +La propriété [CSS](/fr/docs/Web/CSS) **`vertical-align`** définit l'alignement vertical d'une boîte en ligne (<i lang="en">inline</i>), en ligne / bloc (<i lang="en">inline-block</i>) ou d'une boîte de cellule de tableau. {{EmbedInteractiveExample("pages/css/vertical-align.html")}} -La propriété `vertical-align` peut être utilisée dans deux contextes : +La propriété `vertical-align` peut être utilisée dans deux contextes : -- Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ({{HTMLElement("img")}} sur une ligne de texte) +- Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ([`<img>`](/fr/docs/Web/HTML/Element/Img) sur une ligne de texte) - ou pour aligner verticalement le contenu d'une cellule dans un tableau -`vertical-align` ne s'applique qu'aux cellules de tableaux et aux éléments en ligne (_inline_), elle ne peut pas être utilisée pour aligner verticalement [les éléments de bloc](/fr/docs/Web/HTML/Éléments_en_bloc). +`vertical-align` ne s'applique qu'aux cellules de tableaux, aux éléments en ligne (<i lang="en">inline</i>) ou en ligne / bloc (<i lang="en">inline-block</i>), elle ne peut pas être utilisée pour aligner verticalement [les éléments de bloc](/fr/docs/Web/HTML/Block-level_elements). ## Syntaxe @@ -45,17 +42,19 @@ vertical-align: 20%; /* Valeurs globales */ vertical-align: inherit; vertical-align: initial; +vertical-align: revert; vertical-align: unset; ``` +La propriété `vertical-align` s'utilise avec une des valeurs suivantes. -### Valeurs +### Valeurs pour les éléments en lignes -#### Pour les éléments _inline_ +#### Valeurs relatives au parent -> **Note :** La plupart des valeurs alignent l'élément verticalement, relativement à son élément parent. +Ces valeurs alignent l'élément verticalement, relativement à son élément parent. - `baseline` - - : Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains [éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé), comme {{HTMLElement("textarea")}}, n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre. + - : Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains [éléments remplacés](/fr/docs/Web/CSS/Replaced_element), comme [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea), n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre. - `sub` - : Aligne la ligne de base sur la ligne de base inférieure (celle utilisée pour les indices) de l'élément parent. - `super` @@ -65,13 +64,15 @@ vertical-align: unset; - `text-bottom` - : Aligne le bas de l'élément avec le bas de la police de l'élément parent. - `middle` - - : Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur. -- {{cssxref("<length>")}} + - : Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur en x (<i lang="en">x-height</i>). +- [`<length>`](/fr/docs/Web/CSS/length) - : Aligne la ligne de base de l'élément à la hauteur de la ligne de base de l'élément parent à laquelle on ajoute la hauteur donnée. Les valeurs négatives sont autorisées. -- {{cssxref("<percentage>")}} - - : Fonctionne comme avec les valeurs de type {{cssxref("<length>")}}, le pourcentage indique une fraction de la propriété {{cssxref("line-height")}}. Les valeurs négatives sont autorisées. +- [`<percentage>`](/fr/docs/Web/CSS/percentage) + - : Fonctionne comme avec les valeurs de type [`<length>`](/fr/docs/Web/CSS/length), le pourcentage indique une fraction de la propriété [`line-height`](/fr/docs/Web/CSS/line-height). Les valeurs négatives sont autorisées. -Les valeurs suivantes alignent l'élément par rapport à la ligne entière (absolu) plutôt que par rapport à leur parent (relatif) : +#### Valeurs relatives à la ligne + +Les valeurs suivantes alignent l'élément par rapport à la ligne entière plutôt que par rapport à leur parent : - `top` - : Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière. @@ -80,78 +81,163 @@ Les valeurs suivantes alignent l'élément par rapport à la ligne entière (abs Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la marge basse qui est utilisée. -#### Pour les cellules de tableau +### Pour les cellules de tableau - `baseline`, `sub`, `super`, `text-top`, `text-bottom`, `<length>` et `<percentage>` - - : La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. Les valeurs négatives sont autorisées. + - : La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. - `top` - - : Aligne le bord haut de la boîte de remplissage (_padding_) de la cellule avec le haut de la ligne. + - : Aligne le bord haut de la boîte de remplissage (<i lang="en">padding</i>) de la cellule avec le haut de la ligne. - `middle` - - : Centre la boîte de remplissage (_padding_) de la cellule avec la ligne. + - : Centre la boîte de remplissage (<i lang="en">padding</i>) de la cellule avec la ligne. - `bottom` - - : Aligne le bord bas de la boîte de remplissage (_padding_) avec le bas de la ligne. + - : Aligne le bord bas de la boîte de remplissage (<i lang="en">padding</i>) avec le bas de la ligne. + +## Définition formelle + +{{CSSInfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} -## Exemple +## Exemples + +### Exemple simple #### HTML ```html -<div> - Une <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" /> - image alignée par défaut. -</div> -<div> - Une <img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> - image alignée avec text-top. -</div> -<div> - Une <img class="bas" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> - image alignée avec text-bottom.</div> -<div> - Une <img class="pourcents" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> - image alignée avec 200%. -</div> +<div>Une <img src="frame_image.svg" alt="link" width="32" height="32"/> image avec + un alignement par défaut.</div> +<div>Une <img class="top" src="frame_image.svg" alt="link" width="32" height="32"/> image avec + un alignement en haut du texte.</div> +<div>Une <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32"/> image avec + un alignement en bas du texte.</div> +<div>Une <img class="middle" src="frame_image.svg" alt="link" width="32" height="32"/> image avec + un alignement au milieu.</div> ``` #### CSS ```css -img.haut { - vertical-align: text-top; +img.top { vertical-align: text-top; } +img.bottom { vertical-align: text-bottom; } +img.middle { vertical-align: middle; } +``` + +#### Résultat + +{{EmbedLiveSample("")}} + +### Alignement vertical sur une boîte de ligne + +#### HTML + +```html +<p> +top: <img style="vertical-align: top" src="star.png"/> +middle: <img style="vertical-align: middle" src="star.png"/> +bottom: <img style="vertical-align: bottom" src="star.png"/> +super: <img style="vertical-align: super" src="star.png"/> +sub: <img style="vertical-align: sub" src="star.png"/> +</p> + +<p> +text-top: <img style="vertical-align: text-top" src="star.png"/> +text-bottom: <img style="vertical-align: text-bottom" src="star.png"/> +0.2em: <img style="vertical-align: 0.2em" src="star.png"/> +-1em: <img style="vertical-align: -1em" src="star.png"/> +20%: <img style="vertical-align: 20%" src="star.png"/> +-100%: <img style="vertical-align: -100%" src="star.png"/> +</p> +``` + +```css hidden +#* { + box-sizing: border-box; } -img.bas { - vertical-align: text-bottom; + +img { + margin-right: 0.5em; } -img.pourcents { - vertical-align: 200%; + +p { + height: 3em; + padding: 0 .5em; + font-family: monospace; + text-decoration: underline overline; + margin-left: auto; + margin-right: auto; + width: 80%; } ``` #### Résultat -{{EmbedLiveSample("Exemple")}} +{{EmbedLiveSample("", '100%', 160)}} -## Spécifications +### Alignement vertical d'une cellule de tableau + +#### HTML + +```html +<table> + <tr> + <td style="vertical-align: baseline">baseline</td> + <td style="vertical-align: top">top</td> + <td style="vertical-align: middle">middle</td> + <td style="vertical-align: bottom">bottom</td> + <td> + <p>Elle voulait savoir si elle grandissait ou rapetissait, et fut + tout étonnée de rester la même; franchement, c'est ce qui + arrive le plus souvent lorsqu'on mange du gâteau; mais Alice + avait tellement pris l'habitude de s'attendre à des choses + extraordinaires, que cela lui paraissait ennuyeux et stupide + de vivre comme tout le monde.</p> + <p>Aussi elle se remit à l'œuvre, et eut bien vite fait + disparaître le gâteau.</p> + </td> + </tr> +</table> +``` + +#### CSS -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}} | {{Spec2('CSS3 Transitions')}} | `vertical-align` peut désormais être animée. | -| {{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}} | {{Spec2('CSS2.1')}} | Ajoute la valeur {{cssxref("<length>")}} et permet d'appliquer la propriété aux éléments dont {{cssxref("display")}} est de type `table-cell`. | -| {{SpecName('CSS1', '#vertical-align', 'vertical-align')}} | {{Spec2('CSS1')}} | Définition initiale. | +```css +table { + margin-left: auto; + margin-right: auto; + width: 80%; +} + +table, th, td { + border: 1px solid black; +} + +td { + padding: 0.5em; + font-family: monospace; +} +``` + +#### Résultat + +{{EmbedLiveSample("", '100%', 230)}} + + +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.vertical-align")}} +{{Compat}} ## Voir aussi -- {{cssxref("line-height")}}, {{cssxref("text-align")}}, {{cssxref("margin")}} -- [Comprendre `vertical-align` ou comment (ne pas) centrer des éléments verticalement](https://phrogz.net/css/vertical-align/index.html) (en anglais) -- [Tout ce qu'il y a à savoir sur `vertical-align`](https://christopheraue.net/design/vertical-align) (en anglais) -- [Centrer des éléments avec _flexbox_](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox#Centrer_des_éléments) +- [Centrer des éléments avec Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#centrer_des_éléments) +- [`line-height`](/fr/docs/Web/CSS/line-height) +- [`text-align`](/fr/docs/Web/CSS/text-align) +- [`margin`](/fr/docs/Web/CSS/margin) +- [Comprendre `vertical-align` ou comment (ne pas) centrer des éléments verticalement (en anglais)](http://phrogz.net/css/vertical-align/index.html) +- [Tout ce qu'il y a à savoir sur `vertical-align` (en anglais)](https://christopheraue.net/design/vertical-align) diff --git a/files/fr/web/html/element/em/index.md b/files/fr/web/html/element/em/index.md index 07cc7b951e..5236686553 100644 --- a/files/fr/web/html/element/em/index.md +++ b/files/fr/web/html/element/em/index.md @@ -1,18 +1,12 @@ --- title: '<em> : l''élément d''emphase' slug: Web/HTML/Element/em -tags: - - Element - - HTML - - HTML text-level semantics - - Reference - - Web translation_of: Web/HTML/Element/em browser-compat: html.elements.em --- {{HTMLRef}} -L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments `<em>` peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé. +L'élément [HTML](/fr/docs/Web/HTML) **`<em>`** (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments `<em>` peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé. {{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}} @@ -25,13 +19,13 @@ L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte > </th> <td> - <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" + <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux" >Contenu de flux</a >, - <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" + <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phrasé" >contenu phrasé</a >, - <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content" + <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_tangible" >contenu tangible</a >. </td> @@ -39,7 +33,7 @@ L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte <tr> <th scope="row">Contenu autorisé</th> <td> - <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" + <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phrasé" >Contenu phrasé</a >. </td> @@ -55,7 +49,7 @@ L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte <th scope="row">Parents autorisés</th> <td> Tout élément qui accepte du - <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" + <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phrasé" >contenu phrasé</a >. </td> @@ -95,19 +89,19 @@ Comme tous les éléments HTML, cet élément prend en charge [les attributs uni L'élément `<em>` est destiné aux mots dont l'accent est souligné par rapport au texte environnant, ce qui est souvent limité à un ou plusieurs mots d'une phrase et affecte le sens de la phrase elle-même. -Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément [`<i>`](/fr/docs/Web/HTML/Element/i) ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément [`<cite>`](/fr/docs/Web/HTML/Element/cite) ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément [`<strong>`](/fr/docs/Web/HTML/Element/strong) pour marquer un texte plus important que le texte qui l'entoure. +Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément [`<i>`](/fr/docs/Web/HTML/Element/i) ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément [`<cite>`](/fr/docs/Web/HTML/Element/cite) ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément [`<strong>`](/fr/docs/Web/HTML/Element/strong) pour marquer un texte plus important que le texte qui l'entoure. -### \<i> ou \<em> ? +### `<i>` ou `<em>` ? -Lorsqu'on débute en développement web, on peut être dérouté⋅e de voir plusieurs éléments qui produisent des résultats similaires. `<em>` et `<i>` sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Laquelle doit-on utiliser ? +Lorsqu'on débute en développement web, on peut être dérouté de voir plusieurs éléments qui produisent des résultats similaires. `<em>` et `<i>` sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Laquelle doit-on utiliser ? -Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément `<em>` représente l'accentuation de son contenu, tandis que l'élément `<i>` représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser `<cite>`). +Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément `<em>` représente l'accentuation de son contenu, tandis que l'élément `<i>` représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser `<cite>`.) Cela signifie que le choix de l'option à utiliser dépend de la situation. Ni l'un ni l'autre ne sont destinés à des fins purement décoratives, c'est à cela que sert le style CSS. -Un exemple pour `<em>` pourrait être : « _Faites_-le déjà ! », ou : « Nous _devions_ faire quelque chose à ce sujet ». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale. +Un exemple pour `<em>` pourrait être : « _Faites_-le déjà ! », ou : « Nous _devions_ faire quelque chose à ce sujet ». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale. -Un exemple pour `<i>` pourrait être : « Le _Queen Mary_ a pris la mer la nuit dernière ». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot « Queen Mary ». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé _Queen Mary_. Un autre exemple de `<i>` pourrait être : « Le mot _the_ est un article ». +Un exemple pour `<i>` pourrait être : « Le <i lang="en">Queen Mary</i> a pris la mer la nuit dernière ». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot « Queen Mary ». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé <i lang="en">Queen Mary</i>. Un autre exemple de `<i>` pourrait être : « Le mot <i lang="en">the</i> est un article ». ## Exemple @@ -122,7 +116,7 @@ L'élément `<em>` est souvent utilisé pour indiquer un contraste, implicite ou ### Résultat -{{EmbedLiveSample("Exemple", "", 100)}} +{{EmbedLiveSample("")}} ## Spécifications diff --git a/files/fr/web/html/element/figure/favicon-192x192.png b/files/fr/web/html/element/figure/favicon-192x192.png Binary files differdeleted file mode 100644 index 03de2b5d74..0000000000 --- a/files/fr/web/html/element/figure/favicon-192x192.png +++ /dev/null diff --git a/files/fr/web/html/element/img/clock-demo-400px.png b/files/fr/web/html/element/img/clock-demo-400px.png Binary files differdeleted file mode 100644 index 999ad528fe..0000000000 --- a/files/fr/web/html/element/img/clock-demo-400px.png +++ /dev/null diff --git a/files/fr/web/html/element/img/favicon144.png b/files/fr/web/html/element/img/favicon144.png Binary files differdeleted file mode 100644 index e30b574b65..0000000000 --- a/files/fr/web/html/element/img/favicon144.png +++ /dev/null diff --git a/files/fr/web/html/element/img/favicon72.png b/files/fr/web/html/element/img/favicon72.png Binary files differdeleted file mode 100644 index db68260ca1..0000000000 --- a/files/fr/web/html/element/img/favicon72.png +++ /dev/null diff --git a/files/fr/web/javascript/guide/modules/index.md b/files/fr/web/javascript/guide/modules/index.md index 96cdf51b3d..4c2db796ba 100644 --- a/files/fr/web/javascript/guide/modules/index.md +++ b/files/fr/web/javascript/guide/modules/index.md @@ -182,7 +182,7 @@ Les instructions `import` et `export` ne peuvent être utilisées qu'à l'intér - Attention aux tests sur un environnement local : si vous chargez le fichier HTML directement depuis le système de fichier dans le navigateur (en double-cliquant dessus par exemple, ce qui donnera une URL `file://`), vous rencontrerez des erreurs CORS pour des raisons de sécurité. Il faut donc un serveur local afin de pouvoir tester. - On pourra avoir un comportement différent entre un même script utilisé comme un module et un script utilisé de façon « classique ». En effet, les modules utilisent automatiquement [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). -- Il n'est pas nécessaire d'utiliser l'attribut `defer` (voir [les attributs de `<script>`](/fr/docs/Web/HTML/Element/script#attributs)) lors du chargement d'un module, ceux-ci sont automatiquement chargés à la demande. +- Il n'est pas nécessaire d'utiliser l'attribut `defer` (voir [les attributs de `<script>`](/fr/docs/Web/HTML/Element/script#attributs)) lors du chargement d'un module, celui-ci étant automatiquement différé. - Les modules sont exécutés une seule fois, même s'ils sont référencés dans plusieurs balises `<script>`. - Enfin, les fonctionnalités importées ne sont disponibles qu'au sein de la portée du script qui les utilise ! Les valeurs importées ne sont manipulables que depuis le script, elles ne sont pas rattachées à la portée globale. On ne pourra par exemple pas y accéder depuis la console JavaScript. Bien que les erreurs soient toujours indiquées dans les outils de développement, certaines techniques de débogage ne seront pas disponibles. diff --git a/files/fr/web/javascript/guide/working_with_objects/index.md b/files/fr/web/javascript/guide/working_with_objects/index.md index 214902c6dd..9dbfe909e4 100644 --- a/files/fr/web/javascript/guide/working_with_objects/index.md +++ b/files/fr/web/javascript/guide/working_with_objects/index.md @@ -348,7 +348,7 @@ On peut définir des méthodes pour un type d'objet en incluant la définition d ```js function afficheVoiture() { let resultat = `Une belle ${this.modele}, fabriquée en ${this.annee} par ${this.fabricant}`; - console.log(résultat); + console.log(resultat); } ``` diff --git a/files/fr/web/javascript/reference/global_objects/uint8array/index.md b/files/fr/web/javascript/reference/global_objects/uint8array/index.md index e4cb8de79c..5f30ffb406 100644 --- a/files/fr/web/javascript/reference/global_objects/uint8array/index.md +++ b/files/fr/web/javascript/reference/global_objects/uint8array/index.md @@ -1,181 +1,141 @@ --- title: Uint8Array slug: Web/JavaScript/Reference/Global_Objects/Uint8Array -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays - - Uint8Array translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array original_slug: Web/JavaScript/Reference/Objets_globaux/Uint8Array +browser-compat: javascript.builtins.Uint8Array --- {{JSRef}} Le tableau typé **`Uint8Array`** représente un tableau d'entiers non signés, représentés sur 8 bits. Les éléments du tableau sont initialisés à `0`. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets). -## Syntaxe +## Constructeur - new Uint8Array(); // apparu avec ES2017 - new Uint8Array(longueur); - new Uint8Array(tableauTypé); - new Uint8Array(objet); - new Uint8Array(tampon [, décalage [, longueur]]); +- [`Uint8Array()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/Uint8Array) + - : Crée un nouvel objet `Uint8Array`. -Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page _[TypedArray](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe)_. +## Propriétés statiques -## Propriétés +- [`Uint8Array.BYTES_PER_ELEMENT`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT) + - : Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurrence, pour `Uint8Array` ce sera `1`. +- [`Uint8Array.name`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/name) + - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint8Array` ce sera : "`Uint8Array`". -- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}} - - : Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour `Uint8Array` ce sera `1`. -- Uint8Array.length - - : La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}. -- {{jsxref("TypedArray.name", "Uint8Array.name")}} - - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint8Array` ce sera : "Uint8Array". -- {{jsxref("TypedArray.prototype", "Uint8Array.prototype")}} - - : Le prototype des objets _TypedArray_. +## Méthodes statiques -## Méthodes +- [`Uint8Array.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/from) + - : Cette méthode permet de créer un nouvel objet `Uint8Array` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi [`Array.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/from). +- [`Uint8Array.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of) + - : Cette méthode permet de créer un nouvel objet `Uint8Array` à partir d'un nombre variable d'arguments. Voir aussi [`Array.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/of). -- {{jsxref("TypedArray.from", "Uint8Array.from()")}} - - : Cette méthode permet de créer un nouvel objet `Uint8Array` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}. -- {{jsxref("TypedArray.of", "Uint8Array.of()")}} - - : Cette méthode permet de créer un nouvel objet `Uint8Array` à partir d'un nombre variables d'arguments. Voir aussi {{jsxref("Array.of()")}}. +## Propriétés des instances -## Prototype `Uint8Array` - -Tous les objets `Uint8Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}. - -### Propriétés - -- `Uint8Array.prototype.constructor` - - : Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur `Uint8Array`. -- {{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}} - - : Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `Uint8Array` Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. -- {{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}} - - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint8Array` à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. -- {{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}} - - : Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. -- {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}} +- [`Uint8Array.prototype.buffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer) + - : Cette propriété renvoie l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) référencé par l'objet `Uint8Array`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. +- [`Uint8Array.prototype.byteLength`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength) + - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint8Array` à partir du début de l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. +- [`Uint8Array.prototype.byteOffset`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset) + - : Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. +- [`Uint8Array.prototype.length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/length) - : Cette propriété renvoie le nombre d'éléments contenus dans le tableau `Uint8Array`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. -### Méthodes - -- {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}} - - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}. -- {{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}} - - : Renvoie un nouvel objet `Array Iterator` qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}. -- {{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}} - - : Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}. -- {{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}} - - : Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}. -- {{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}} - - : Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}. -- {{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}} - - : Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément `undefined` sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}. -- {{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}} - - : Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}. -- {{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}} - - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}. -- {{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}} - - : Détermine si le tableau typé contient un élément donné. Cette méthode renvoie `true` ou `false` selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}. -- {{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}} - - : Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}. -- {{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}} - - : Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}. -- {{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}} - - : Renvoie un nouvel objet `Array Iterator` qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}. -- {{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}} - - : Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}. -- {{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}} - - : Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}. -- {{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}} - - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}. -- {{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}} - - : Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}. -- {{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}} - - : Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}. -- {{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}} - - : Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}. -- {{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}} - - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau. -- {{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}} - - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}. -- {{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}} - - : Renvoie `true` si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}. -- {{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}} - - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}. -- {{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}} +## Méthodes des instances + +- [`Uint8Array.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin) + - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également [`Array.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin). +- [`Uint8Array.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/entries) + - : Renvoie un nouvel *itérateur de tableau* qui contient les paires clé/valeur pour chaque indice du tableau. Voir également [`Array.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/entries). +- [`Uint8Array.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/every) + - : Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également [`Array.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every). +- [`Uint8Array.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/fill) + - : Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également [`Array.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/fill). +- [`Uint8Array.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/filter) + - : Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également [`Array.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). +- [`Uint8Array.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/find) + - : Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément `undefined` sera renvoyé. Voir également [`Array.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/find). +- [`Uint8Array.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex) + - : Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition `-1` sera renvoyé. Voir également [`Array.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex). +- [`Uint8Array.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/forEach) + - : Appelle une fonction pour chacun des éléments du tableau. Voir également [`Array.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). +- [`Uint8Array.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/includes) + - : Détermine si le tableau typé contient un élément donné. Cette méthode renvoie `true` ou `false` selon le cas de figure. Voir également [`Array.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/includes). +- [`Uint8Array.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf) + - : Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur `-1` sera renvoyée. Voir également [`Array.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf). +- [`Uint8Array.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/join) + - : Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également [`Array.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join). +- [`Uint8Array.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/keys) + - : Renvoie un nouvel *itérateur de tableau* qui contient les clés de chaque indice du tableau. Voir également [`Array.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/keys). +- [`Uint8Array.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf) + - : Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur `-1` sera renvoyée. Voir également [`Array.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf). +- [`Uint8Array.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/map) + - : Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également [`Array.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map). +- [`Uint8Array.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduce) + - : Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également [`Array.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). +- [`Uint8Array.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight) + - : Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également [`Array.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight). +- [`Uint8Array.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reverse) + - : Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également [`Array.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse). +- [`Uint8Array.prototype.set()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set) + - : Enregistre plusieurs valeurs dans le tableau typé à partir des valeurs d'un autre tableau. +- [`Uint8Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/slice) + - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice). +- [`Uint8Array.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/some) + - : Renvoie `true` si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également [`Array.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/some). +- [`Uint8Array.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/sort) + - : Trie les éléments du tableau et renvoie ce tableau. Voir également [`Array.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). +- [`Uint8Array.prototype.subarray()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/subarray) - : Renvoie un nouvel objet `Uint8Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés. -- {{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}} - - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}. -- {{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}} - - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}. -- {{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}} - - : Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}. -- {{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}} - - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau. +- [`Uint8Array.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/values) + - : Renvoie un nouvel *itérateur de tableau* qui contient les valeurs correspondantes à chaque indice du tableau. Voir également [`Array.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/values). +- [`Uint8Array.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString) + - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également [`Array.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString). +- [`Uint8Array.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toString) + - : Renvoie une chaîne de caractères qui représente le tableau et ses éléments. Voir également [`Array.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toString). +- [`Uint8Array.prototype[@@iterator]()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator) + - : Renvoie un nouvel *itérateur de tableau* qui contient les valeurs correspondantes à chaque indice du tableau. ## Exemples -Différentes façons de construire un objet `Uint8Array` : +### Différentes façons de construire un objet `Uint8Array` ```js // Construction à partir d'une longueur -var uint8 = new Uint8Array(2); +let uint8 = new Uint8Array(2); uint8[0] = 42; console.log(uint8[0]); // 42 console.log(uint8.length); // 2 console.log(uint8.BYTES_PER_ELEMENT); // 1 // Construction à partir d'un tableau -var arr = new Uint8Array([21,31]); +let arr = new Uint8Array([21,31]); console.log(arr[1]); // 31 // Construction à partir d'un tableau typé -var x = new Uint8Array([21, 31]); -var y = new Uint8Array(x); +let x = new Uint8Array([21, 31]); +let y = new Uint8Array(x); console.log(y[0]); // 21 // Construction à partir d'un ArrayBuffer -var buffer = new ArrayBuffer(8); -var z = new Uint8Array(buffer, 1, 4); +let buffer = new ArrayBuffer(8); +let z = new Uint8Array(buffer, 1, 4); // Construction à partir d'un itérable -var iterable = function*(){ yield* [1,2,3]; }(); -var uint8 = new Uint8Array(iterable); +let iterable = function*(){ yield* [1,2,3]; }(); +let uint8 = new Uint8Array(iterable); // Uint8Array[1, 2, 3] ``` ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Englobée par ECMAScript 2015. | -| {{SpecName('ES6', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. `new` est obligatoire. | -| {{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}} | {{Spec2('ESDraft')}} | ECMAScript 2017 a modifié le constructeur `Uint8Array` afin qu'il utilise l'opération `ToIndex` et qu'il puisse être utilisé sans argument. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.builtins.Uint8Array")}} - -## Notes de compatibilité - -À partir d'ECMAScript 2015 (ES6), `Uint8Array` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `Uint8Array` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}. - -```js example-bad -var dv = Uint8Array([1, 2, 3]); -// TypeError: calling a builtin Uint8Array constructor -// without new is forbidden -``` - -```js example-good -var dv = new Uint8Array([1, 2, 3]); -``` +{{Compat}} ## Voir aussi -- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés) -- {{jsxref("ArrayBuffer")}} -- {{jsxref("DataView")}} +- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `Uint8ClampedArray` avec `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays) +- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) +- [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView) diff --git a/files/fr/web/javascript/reference/global_objects/uint8array/uint8array/index.md b/files/fr/web/javascript/reference/global_objects/uint8array/uint8array/index.md new file mode 100644 index 0000000000..5248fb1261 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/uint8array/uint8array/index.md @@ -0,0 +1,93 @@ +--- +title: Constructeur Uint8Array() +slug: Web/JavaScript/Reference/Global_Objects/Uint8Array/Uint8Array +translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array/Uint8Array +browser-compat: javascript.builtins.Uint8Array.Uint8Array +--- +{{JSRef}} + +Le constructeur **`Uint8Array()`** crée un tableau typé contenant des entiers non-signés sur 8 bits. Le contenu de ces éléments est initialisé à `0`. Une fois le tableau construit, on peut faire référence aux éléments du tableau à l'aide des méthodes de l'objet ou en utilisant la notation usuelle pour les tableaux avec les crochets. + +## Syntaxe + +```js +new Uint8Array(); // apparu avec ES2017 +new Uint8Array(longueur); +new Uint8Array(tableauType); +new Uint8Array(objet); + +new Uint8Array(buffer); +new Uint8Array(buffer, decalageOctets); +new Uint8Array(buffer, decalageOctets, longueur); +``` + +### Paramètres + +- `longueur` + - : Lorsque le constructeur est invoqué avec un argument indiquant une longueur, un tampon de mémoire interne tabulé est créé, dont la taille en octets est `longueur` _multipliée par `BYTES_PER_ELEMENT`_, et qui contient des zéros. +- `tableauType` + - : Lorsque le constructeur est invoqué avec un tableau typé comme argument (tout tableau typé en dehors des tableaux typés [`bigint`](/fr/docs/Glossary/BigInt) tel que `Int32Array`), ce tableau typé est copié dans un nouveau tableau typé. Chaque valeur de `tableauType` est convertie dans le type correspondant au constructeur avant d'être copiée dans le nouveau tableau. La longueur du nouveau tableau typé sera la même que celle de `tableauType`. +- `objet` + - : Lorsque le constructeur est appelé avec un objet comme argument, le nouveau tableau typé est créé avec la méthode `TypedArray.from()`. +- `buffer`, `decalageOctets`, `longueur` + - : Lorsque le constructeur est invoqué avec un tampon, éventuellement un décalage en octets et une longueur, une nouvelle vue en tableau typé est créée qui reflète l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Les paramètres `decalageOctets` et `longueur` indique l'intervalle de mémoire exposé à la vue. Si ces deux paramètres sont absents, c'est l'intégralité du tampon qui est vue. Si la longueur est absente, c'est la portion du tampon, après le décalage indiqué, qui est vue. + +## Exemples + +### Différentes façons de construire un objet `Uint8Array` + +```js +// Construction à partir d'une longueur +let uint8 = new Uint8Array(2); +uint8[0] = 42; +console.log(uint8[0]); // 42 +console.log(uint8.length); // 2 +console.log(uint8.BYTES_PER_ELEMENT); // 1 + +// Construction à partir d'un tableau +let arr = new Uint8Array([21,31]); +console.log(arr[1]); // 31 + +// Construction à partir d'un tableau typé +let x = new Uint8Array([21, 31]); +let y = new Uint8Array(x); +console.log(y[0]); // 21 + +// Construction à partir d'un ArrayBuffer +let buffer = new ArrayBuffer(8); +let z = new Uint8Array(buffer, 1, 4); + +// Construction à partir d'un itérable +let iterable = function*(){ yield* [1,2,3]; }(); +let uint8 = new Uint8Array(iterable); +// Uint8Array[1, 2, 3] +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Notes de compatibilité + +À partir d'ECMAScript 2015 (ES6), `Uint8Array` doit être utilisé avec l'opérateur [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new). Appeler un constructeur `Uint8Array` comme une fonction, sans `new`, provoquera une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError). + +```js example-bad +let dv = Uint8Array([1, 2, 3]); +// TypeError: calling a builtin Uint8Array constructor +// without new is forbidden +``` + +```js example-good +let dv = new Uint8Array([1, 2, 3]); +``` + +## Voir aussi + +- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `Uint8ClampedArray` avec `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays) +- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) +- [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView)
\ No newline at end of file diff --git a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md index d8c0d29dcf..b9fad4500d 100644 --- a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md +++ b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md @@ -1,129 +1,106 @@ --- title: Uint8ClampedArray slug: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays - - Uint8ClampedArray translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray original_slug: Web/JavaScript/Reference/Objets_globaux/Uint8ClampedArray +browser-compat: javascript.builtins.Uint8ClampedArray --- {{JSRef}} Le tableau typé **`Uint8ClampedArray`** permet de représenter un tableau d'entiers non signés représentés sur 8 bits, dont les valeurs sont ramenées entre 0 et 255. Si une valeur non-entière est fournie, elle sera arrondie à l'entier le plus proche. Les éléments du tableau sont initialisés à `0`. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets). -## Syntaxe +## Constructeur - new Uint8ClampedArray(); // apparu avec ES2017 - new Uint8ClampedArray(longueur); - new Uint8ClampedArray(tableauTypé); - new Uint8ClampedArray(objet); - new Uint8ClampedArray(tampon [, décalage [, longueur]]); +- [`Uint8ClampedArray()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray/Uint8ClampedArray) + - : Crée un nouvel objet `Uint8ClampedArray`. -Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page _[TypedArray](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe)_. +## Propriétés statiques -## Propriétés +- [`Uint8ClampedArray.BYTES_PER_ELEMENT`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT) + - : Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurrence, pour `Uint8ClampedArray` ce sera `1`. +- [`Uint8ClampedArray.name`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/name) + - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint8ClampedArray` ce sera : "`Uint8ClampedArray`". -- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}} - - : Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour `Uint8ClampedArray` ce sera `1`. -- Uint8ClampedArray.length - - : La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}}. -- {{jsxref("TypedArray.name", "Uint8ClampedArray.name")}} - - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint8ClampedArray` ce sera : "Uint8ClampedArray". -- {{jsxref("TypedArray.prototype", "Uint8ClampedArray.prototype")}} - - : Le prototype des objets _TypedArray_. +## Méthodes statiques -## Méthodes +- [`Uint8ClampedArray.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/from) + - : Cette méthode permet de créer un nouvel objet `Uint8ClampedArray` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi [`Array.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/from). +- [`Uint8ClampedArray.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of) + - : Cette méthode permet de créer un nouvel objet `Uint8ClampedArray` à partir d'un nombre variable d'arguments. Voir aussi [`Array.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/of). -- {{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}} - - : Cette méthode permet de créer un nouvel objet `Uint8ClampedArray` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}. -- {{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}} - - : Cette méthode permet de créer un nouvel objet `Uint8ClampedArray` à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}. +## Propriétés des instances -## Prototype `Uint8ClampedArray` - -Tous les objets `Uint8ClampedArray` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}. - -### Propriétés - -- `Uint8ClampedArray.prototype.constructor` - - : Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur `Uint8ClampedArray`. -- {{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}} {{readonlyInline}} - - : Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `Uint8ClampedArray` Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. -- {{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}} {{readonlyInline}} - - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint8ClampedArray` à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. -- {{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}} {{readonlyInline}} - - : Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. -- {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}} {{readonlyInline}} +- [`Uint8ClampedArray.prototype.buffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer) + - : Cette propriété renvoie l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) référencé par l'objet `Uint8ClampedArray`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. +- [`Uint8ClampedArray.prototype.byteLength`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength) + - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint8ClampedArray` à partir du début de l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. +- [`Uint8ClampedArray.prototype.byteOffset`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset) + - : Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. +- [`Uint8ClampedArray.prototype.length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/length) - : Cette propriété renvoie le nombre d'éléments contenus dans le tableau `Uint8ClampedArray`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**. -### Méthodes - -- {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}} - - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}. -- {{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}} - - : Renvoie un nouvel objet `Array Iterator` qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}. -- {{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}} - - : Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}. -- {{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}} - - : Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}. -- {{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}} - - : Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}. -- {{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}} - - : Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément `undefined` sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}. -- {{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}} - - : Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}. -- {{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}} - - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}. -- {{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}} - - : Détermine si le tableau typé contient un élément donné. Cette méthode renvoie `true` ou `false` selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}. -- {{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}} - - : Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}. -- {{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}} - - : Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}. -- {{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}} - - : Renvoie un nouvel objet `Array Iterator` qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}. -- {{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}} - - : Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}. -- {{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}} - - : Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}. -- {{jsxref("TypedArray.move", "Uint8ClampedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}} - - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}. -- {{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}} - - : Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}. -- {{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}} - - : Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}. -- {{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}} - - : Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}. -- {{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}} +## Méthodes des instances + +- [`Uint8ClampedArray.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin) + - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également [`Array.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin). +- [`Uint8ClampedArray.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/entries) + - : Renvoie un nouvel *itérateur de tableau* qui contient les paires clé/valeur pour chaque indice du tableau. Voir également [`Array.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/entries). +- [`Uint8ClampedArray.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/every) + - : Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également [`Array.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every). +- [`Uint8ClampedArray.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/fill) + - : Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également [`Array.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/fill). +- [`Uint8ClampedArray.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/filter) + - : Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également [`Array.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). +- [`Uint8ClampedArray.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/find) + - : Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément `undefined` sera renvoyé. Voir également [`Array.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/find). +- [`Uint8ClampedArray.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex) + - : Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition `-1` sera renvoyé. Voir également [`Array.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex). +- [`Uint8ClampedArray.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/forEach) + - : Appelle une fonction pour chacun des éléments du tableau. Voir également [`Array.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). +- [`Uint8ClampedArray.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/includes) + - : Détermine si le tableau typé contient un élément donné. Cette méthode renvoie `true` ou `false` selon le cas de figure. Voir également [`Array.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/includes). +- [`Uint8ClampedArray.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf) + - : Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur `-1` sera renvoyée. Voir également [`Array.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf). +- [`Uint8ClampedArray.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/join) + - : Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également [`Array.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join). +- [`Uint8ClampedArray.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/keys) + - : Renvoie un nouvel *itérateur de tableau* qui contient les clés de chaque indice du tableau. Voir également [`Array.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/keys). +- [`Uint8ClampedArray.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf) + - : Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur `-1` sera renvoyée. Voir également [`Array.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf). +- [`Uint8ClampedArray.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/map) + - : Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également [`Array.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map). +- [`Uint8ClampedArray.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduce) + - : Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également [`Array.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). +- [`Uint8ClampedArray.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight) + - : Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également [`Array.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight). +- [`Uint8ClampedArray.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reverse) + - : Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également [`Array.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse). +- [`Uint8ClampedArray.prototype.set()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set) - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau. -- {{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}} - - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}. -- {{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}} - - : Renvoie `true` si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}. -- {{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}} - - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}. -- {{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}} +- [`Uint8ClampedArray.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/slice) + - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice). +- [`Uint8ClampedArray.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/some) + - : Renvoie `true` si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également [`Array.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/some). +- [`Uint8ClampedArray.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/sort) + - : Trie les éléments du tableau et renvoie ce tableau. Voir également [`Array.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). +- [`Uint8ClampedArray.prototype.subarray()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/subarray) - : Renvoie un nouvel objet `Uint8ClampedArray` qui est le fragment du tableau courant, entre les indices de début et de fin donnés. -- {{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}} - - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}. -- {{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}} - - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}. -- {{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}} - - : Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}. -- {{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}} - - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau. +- [`Uint8ClampedArray.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/values) + - : Renvoie un nouvel *itérateur de tableau* qui contient les valeurs correspondantes à chaque indice du tableau. Voir également [`Array.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/values). +- [`Uint8ClampedArray.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString) + - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également [`Array.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString). +- [`Uint8ClampedArray.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toString) + - : Renvoie une chaîne de caractères qui représente le tableau et ses éléments. Voir également [`Array.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toString). +- [`Uint8ClampedArray.prototype[@@iterator]()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator) + - : Renvoie un nouvel *itérateur de tableau* qui contient les valeurs correspondantes à chaque indice du tableau. ## Exemples -Différentes façon de créer un objet `Uint8ClampedArray` : +### Différentes façons de créer un objet `Uint8ClampedArray` ```js // Construction à partir d'une longueur -var uintc8 = new Uint8ClampedArray(2); +let uintc8 = new Uint8ClampedArray(2); uintc8[0] = 42; uintc8[1] = 1337; console.log(uintc8[0]); // 42 @@ -132,52 +109,35 @@ console.log(uintc8.length); // 2 console.log(uintc8.BYTES_PER_ELEMENT); // 1 // Construction à partir d'un tableau -var arr = new Uint8ClampedArray([21,31]); +let arr = new Uint8ClampedArray([21,31]); console.log(arr[1]); // 31 // Construction à partir d'un autre TypedArray -var x = new Uint8ClampedArray([21, 31]); -var y = new Uint8ClampedArray(x); +let x = new Uint8ClampedArray([21, 31]); +let y = new Uint8ClampedArray(x); console.log(y[0]); // 21 // Construction à partir d'un ArrayBuffer -var buffer = new ArrayBuffer(8); -var z = new Uint8ClampedArray(buffer, 1, 4); +let buffer = new ArrayBuffer(8); +let z = new Uint8ClampedArray(buffer, 1, 4); // Construction à partir d'un itérable -var iterable = function*(){ yield* [1,2,3]; }(); -var uintc8 = new Uint8ClampedArray(iterable); +let iterable = function*(){ yield* [1,2,3]; }(); +let uintc8 = new Uint8ClampedArray(iterable); // Uint8ClampedArray[1, 2, 3] ``` ## Spécifications -| Spécification | Statut | Commentaires | -| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Englobée par ECMAScript 2015 | -| {{SpecName('ES6', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. `new` est obligatoire. | -| {{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}} | {{Spec2('ESDraft')}} | ECMAScript 2017 a modifié le constructeur `Uint8ClampedArray` afin qu'il utilise l'opération `ToIndex` et qu'il puisse être utilisé sans argument. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.builtins.Uint8ClampedArray")}} - -## Notes de compatibilité - -À partir d'ECMAScript 2015 (ES6), `Uint8ClampedArray` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler `Uint8ClampedArray` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}. - -```js example-bad -var dv = Uint8ClampedArray([1, 2, 3]); -// TypeError: calling a builtin Uint8ClampedArray constructor -// without new is forbidden -``` - -```js example-good -var dv = new Uint8ClampedArray([1, 2, 3]); -``` +{{Compat}} ## Voir aussi -- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés) -- {{jsxref("ArrayBuffer")}} -- {{jsxref("DataView")}} +- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `Uint8ClampedArray` avec `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays) +- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) +- [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView) diff --git a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/uint8clampedarray/index.md b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/uint8clampedarray/index.md new file mode 100644 index 0000000000..9974741dca --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/uint8clampedarray/index.md @@ -0,0 +1,95 @@ +--- +title: Constructeur Uint8ClampedArray() +slug: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray/Uint8ClampedArray +translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray/Uint8ClampedArray +browser-compat: javascript.builtins.Uint8ClampedArray.Uint8ClampedArray +--- +{{JSRef}} + +Le constructeur **`Uint8ClampedArray()`** permet de créer un tableau typé contenant des entiers non-signés sur 8 bits, dont la valeur est ramenée entre 0 et 255. Une valeur indiquée, en dehors de cet intervalle, sera écrêtée. Une valeur non entière sera arrondie à l'entier le plus proche. Le contenu d'un tel tableau est initialisé avec des `0`. Une fois le tableau construit, on peut faire référence aux éléments du tableau à l'aide des méthodes de l'objet ou en utilisant la notation usuelle pour les tableaux avec les crochets. + +## Syntaxe + +```js +new Uint8ClampedArray(); // apparu avec ES2017 +new Uint8ClampedArray(longueur); +new Uint8ClampedArray(tableauType); +new Uint8ClampedArray(objet); + +new Uint8ClampedArray(buffer); +new Uint8ClampedArray(buffer, decalageOctets); +new Uint8ClampedArray(buffer, decalageOctets, longueur); +``` + +### Paramètres + +- `longueur` + - : Lorsque le constructeur est invoqué avec un argument indiquant une longueur, un tampon de mémoire interne tabulé est créé, dont la taille en octets est `longueur` _multipliée par `BYTES_PER_ELEMENT`_, et qui contient des zéros. +- `tableauType` + - : Lorsque le constructeur est invoqué avec un tableau typé comme argument (tout tableau typé en dehors des tableaux typés [`bigint`](/fr/docs/Glossary/BigInt) tel que [`Int32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int32Array)), ce tableau typé est copié dans un nouveau tableau typé. Chaque valeur de `tableauType` est convertie dans le type correspondant au constructeur avant d'être copiée dans le nouveau tableau. La longueur du nouveau tableau typé sera la même que celle de `tableauType`. +- `objet` + - : Lorsque le constructeur est appelé avec un objet comme argument, le nouveau tableau typé est créé avec la méthode `TypedArray.from()`. +- `buffer`, `decalageOctets`, `longueur` + - : Lorsque le constructeur est invoqué avec un tampon, éventuellement un décalage en octets et une longueur, une nouvelle vue en tableau typé est créée qui reflète l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Les paramètres `decalageOctets` et `longueur` indique l'intervalle de mémoire exposé à la vue. Si ces deux paramètres sont absents, c'est l'intégralité du tampon qui est vue. Si la longueur est absente, c'est la portion du tampon, après le décalage indiqué, qui est vue. + +## Exemples + +### Différentes façons de créer un objet `Uint8ClampedArray` + +```js +// À partir d'une longueur +let uintc8 = new Uint8ClampedArray(2); +uintc8[0] = 42; +uintc8[1] = 1337; +console.log(uintc8[0]); // 42 +console.log(uintc8[1]); // 255 (écrétée) +console.log(uintc8.length); // 2 +console.log(uintc8.BYTES_PER_ELEMENT); // 1 + +// À partir d'un tableau +let arr = new Uint8ClampedArray([21,31]); +console.log(arr[1]); // 31 + +// À partir d'un autre tableau typé +let x = new Uint8ClampedArray([21, 31]); +let y = new Uint8ClampedArray(x); +console.log(y[0]); // 21 + +// À partir d'un ArrayBuffer +let buffer = new ArrayBuffer(8); +let z = new Uint8ClampedArray(buffer, 1, 4); + +// À partir d'un itérable +let iterable = function*(){ yield* [1,2,3]; }(); +let uintc8 = new Uint8ClampedArray(iterable); +// Uint8ClampedArray[1, 2, 3] +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +### Notes de compatibilité + +À partir d'ECMAScript 2015, le constructeur `Uint8ClampedArray` doit être appelé avec l'opérateur [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new). Invoquer le constructeur `Uint8ClampedArray` comme une fonction, sans `new`, déclenchera une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError). + +```js example-bad +let dv = Uint8ClampedArray([1, 2, 3]); +// TypeError: calling a builtin Uint8ClampedArray +// constructor without new is forbidden +``` + +```js example-good +let dv = new Uint8ClampedArray([1, 2, 3]); +``` + +## Voir aussi + +- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `Uint8ClampedArray` avec `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays) +- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays) +- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) +- [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView) diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.md b/files/fr/web/javascript/reference/operators/operator_precedence/index.md index 367e9624fb..dabf2bb2a5 100644 --- a/files/fr/web/javascript/reference/operators/operator_precedence/index.md +++ b/files/fr/web/javascript/reference/operators/operator_precedence/index.md @@ -44,7 +44,7 @@ avec le résultat attendu que `a` et `b` obtiennent la même valeur de 5. C'est ## Tableau -Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence. +Le tableau suivant est classé de la plus haute (19) à la plus basse (1) précédence. <table class="fullwidth-table"> <tbody> @@ -55,9 +55,9 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc <th>Opérateurs individuels</th> </tr> <tr> - <td>0</td> + <td>19</td> <td> - <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement" + <a href="/fr/docs/Web/JavaScript/Reference/Operators/Grouping" >Groupement</a > </td> @@ -65,31 +65,30 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc <td><code>( … )</code></td> </tr> <tr> - <td colspan="1" rowspan="5">1</td> + <td colspan="1" rowspan="5">18</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point" + href="/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors#notation_avec_point" >Accès à un membre</a > </td> - <td>Gauche à droite</td> + <td rowspan="2">Gauche à droite</td> <td><code>… . …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets" + href="/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors#notation_avec_crochets" >Accès à un membre calculé</a > </td> - <td>Gauche à droite</td> <td><code>… [ … ]</code></td> </tr> <tr> <td> <code ><a - href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new" + href="/fr/docs/Web/JavaScript/Reference/Operators/new" >new</a ></code > @@ -100,9 +99,9 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc </tr> <tr> <td> - <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a> + <a href="/fr/docs/Web/JavaScript/Guide/Functions">Appel de fonction</a> </td> - <td>Gauche à droite</td> + <td rowspan="2">Gauche à droite</td> <td> <code>… ( <var>… </var>)</code> </td> @@ -113,15 +112,14 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc >Chaînage optionnel</a > </td> - <td>Gauche à droite</td> <td><code>?.</code></td> </tr> <tr> - <td>2</td> + <td>17</td> <td> <code ><a - href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new" + href="/fr/docs/Web/JavaScript/Reference/Operators/new" >new</a ></code > @@ -131,393 +129,379 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc <td><code>new …</code></td> </tr> <tr> - <td rowspan="2">3</td> + <td rowspan="2">16</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)" + href="/fr/docs/Web/JavaScript/Reference/Operators#incrémentation_et_décrémentation" >Incrémentation suffixe</a > </td> - <td>Non applicable</td> + <td rowspan="2">Non applicable</td> <td><code>… ++</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)" + href="/fr/docs/Web/JavaScript/Reference/Operators#incrémentation_et_décrémentation" >Décrémentation suffixe</a > </td> - <td>Non applicable</td> <td><code>… --</code></td> </tr> <tr> - <td colspan="1" rowspan="10">4</td> + <td colspan="1" rowspan="10">15</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29" - >NON logique</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT" + >NON logique (!)</a > </td> - <td>Droite à gauche</td> + <td rowspan="10">Droite à gauche</td> <td><code>! …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29" - >NON binaire</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT" + >NON binaire (~)</a > </td> - <td>Droite à gauche</td> <td><code>~ …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Plus_unaire_(.2B)" - >Plus unaire</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus" + >Plus unaire (+)</a > </td> - <td>Droite à gauche</td> <td><code>+ …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)" - >Négation unaire</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation" + >Négation unaire (-)</a > </td> - <td>Droite à gauche</td> <td><code>- …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)" + href="/fr/docs/Web/JavaScript/Reference/Operators#incrémentation_et_décrémentation" >Incrémentation préfixe</a > </td> - <td>Droite à gauche</td> <td><code>++ …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)" + href="/fr/docs/Web/JavaScript/Reference/Operators#incrémentation_et_décrémentation" >Décrémentation préfixe</a > </td> - <td>Droite à gauche</td> <td><code>-- …</code></td> </tr> <tr> <td> <code ><a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof" + href="/fr/docs/Web/JavaScript/Reference/Operators/typeof" >typeof</a ></code > </td> - <td>Droite à gauche</td> <td><code>typeof …</code></td> </tr> <tr> <td> <code ><a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void" + href="/fr/docs/Web/JavaScript/Reference/Operators/void" >void</a ></code > </td> - <td>Droite à gauche</td> <td><code>void …</code></td> </tr> <tr> <td> <code ><a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete" + href="/fr/docs/Web/JavaScript/Reference/Operators/delete" >delete</a ></code > </td> - <td>Droite à gauche</td> <td><code>delete …</code></td> </tr> <tr> <td> <code - ><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/await" + ><a href="/fr/docs/Web/JavaScript/Reference/Operators/await" >await</a ></code > </td> - <td>Droite à gauche</td> <td><code>await …</code></td> </tr> <tr> - <td rowspan="4">5</td> + <td>14</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)" - >Exponentiation</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation" + >Exponentiation (**)</a > </td> <td>Droite à gauche</td> <td><code>… ** …</code></td> </tr> <tr> + <td rowspan="3">13</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Multiplication_(*)" - >Multiplication</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication" + >Multiplication (*)</a > </td> - <td>Gauche à droite</td> + <td rowspan="3">Gauche à droite</td> <td><code>… * …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Division_(.2F)" - >Division</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Division" + >Division (/)</a > </td> - <td>Gauche à droite</td> <td><code>… / …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_(.25)" - >Reste</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder" + >Reste (%)</a > </td> - <td>Gauche à droite</td> <td><code>… % …</code></td> </tr> <tr> - <td rowspan="2">6</td> + <td rowspan="2">12</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)" - >Addition</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Addition" + >Addition (+)</a > </td> - <td>Gauche à droite</td> + <td rowspan="2">Gauche à droite</td> <td><code>… + …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Soustraction_(-)" - >Soustraction</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction" + >Soustraction (-)</a > </td> - <td>Gauche à droite</td> <td><code>… - …</code></td> </tr> <tr> - <td rowspan="3">7</td> + <td rowspan="3">11</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29" - >Décalage binaire à gauche</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift" + >Décalage binaire à gauche (<<)</a > </td> - <td>Gauche à droite</td> + <td rowspan="3">Gauche à droite</td> <td><code>… << …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29" - >Décalage binaire à droite</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift" + >Décalage binaire à droite (>>)</a > </td> - <td>Gauche à droite</td> <td><code>… >> …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29" - >Décalage binaire à droite non-signé</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift" + >Décalage binaire à droite non-signé (>>>)</a > </td> - <td>Gauche à droite</td> <td><code>… >>> …</code></td> </tr> <tr> - <td rowspan="6">8</td> + <td rowspan="6">10</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(<)" - >Inférieur strict</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than" + >Inférieur strict (<)</a > </td> - <td>Gauche à droite</td> + <td rowspan="6">Gauche à droite</td> <td><code>… < …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)" - >Inférieur ou égal</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal" + >Inférieur ou égal (<=)</a > </td> - <td>Gauche à droite</td> <td><code>… <= …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_strict_(>)" - >Supérieur strict</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than" + >Supérieur strict (>)</a > </td> - <td>Gauche à droite</td> <td><code>… > …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)" - >Supérieur ou égal</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal" + >Supérieur ou égal (>=)</a > </td> - <td>Gauche à droite</td> <td><code>… >= …</code></td> </tr> <tr> <td> <code - ><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in" + ><a href="/fr/docs/Web/JavaScript/Reference/Operators/in" >in</a ></code > </td> - <td>Gauche à droite</td> <td><code>… in …</code></td> </tr> <tr> <td> <code ><a - href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof" + href="/fr/docs/Web/JavaScript/Reference/Operators/instanceof" >instanceof</a ></code > </td> - <td>Gauche à droite</td> <td><code>… instanceof …</code></td> </tr> <tr> <td rowspan="4">9</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)" - >Égalité faible</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Equality" + >Égalité faible (==)</a > </td> - <td>Gauche à droite</td> + <td rowspan="4">Gauche à droite</td> <td><code>… == …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)" - >Inégalité faible</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality" + >Inégalité faible (!=)</a > </td> - <td>Gauche à droite</td> <td><code>… != …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)" - >Égalité stricte</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality" + >Égalité stricte (===)</a > </td> - <td>Gauche à droite</td> <td><code>… === …</code></td> </tr> <tr> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)" - >Inégalité stricte</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality" + >Inégalité stricte (!==)</a > </td> - <td>Gauche à droite</td> <td><code>… !== …</code></td> </tr> <tr> - <td>10</td> + <td>8</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&_.28ET_binaire.29" - >ET binaire</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND" + >ET binaire (&)</a > </td> <td>Gauche à droite</td> <td><code>… & …</code></td> </tr> <tr> - <td>11</td> + <td>7</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.5E_.28XOR_binaire.29" - >OU exclusif (<em>XOR</em>) binaire</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR" + >OU exclusif / XOR binaire (^)</a > </td> <td>Gauche à droite</td> <td><code>… ^ …</code></td> </tr> <tr> - <td>12</td> + <td>6</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)" - title="JavaScript/Reference/Operators/Bitwise_Operators" - >OU binaire</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR" + >OU binaire (|)</a > </td> <td>Gauche à droite</td> <td><code>… | …</code></td> </tr> <tr> - <td>13</td> + <td>5</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&&.29" - >ET logique</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND" + >ET logique (&&)</a > </td> <td>Gauche à droite</td> <td><code>… && …</code></td> </tr> <tr> - <td>14</td> + <td rowspan="2">4</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)" - >OU logique</a + href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR" + >OU logique (||)</a > </td> - <td>Gauche à droite</td> + <td rowspan="2">Gauche à droite</td> <td><code>… || …</code></td> </tr> <tr> - <td>15</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel" + href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator" + >Coalescence des nuls (??)</a + > + </td> + <td><code>… ?? …</code></td> + </tr> + <tr> + <td>3</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" >Opérateur conditionnel ternaire</a > </td> @@ -525,14 +509,14 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc <td><code>… ? … : …</code></td> </tr> <tr> - <td rowspan="13">16</td> - <td rowspan="13"> + <td rowspan="18">2</td> + <td rowspan="16"> <a - href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation" + href="/fr/docs/Web/JavaScript/Reference/Operators#opérateurs_daffectation" >Affectation</a > </td> - <td rowspan="13">Droite à gauche</td> + <td rowspan="16">Droite à gauche</td> <td><code>… = …</code></td> </tr> <tr> @@ -542,13 +526,13 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc <td><code>… -= …</code></td> </tr> <tr> - <td><code>… *= …</code></td> + <td><code>… **= …</code></td> </tr> <tr> - <td><code>… /= …</code></td> + <td><code>… *= …</code></td> </tr> <tr> - <td><code>… **= …</code></td> + <td><code>… /= …</code></td> </tr> <tr> <td><code>… %= …</code></td> @@ -572,44 +556,40 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc <td><code>… |= …</code></td> </tr> <tr> - <td colspan="1" rowspan="2">17</td> + <td><code>… &&= …</code></td> + </tr> + <tr> + <td><code>… ||= …</code></td> + </tr> + <tr> + <td><code>… ??= …</code></td> + </tr> + <tr> <td> <code - ><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield" + ><a href="/fr/docs/Web/JavaScript/Reference/Operators/yield" >yield</a ></code > </td> - <td>Droite à gauche</td> + <td rowspan="2">Droite à gauche</td> <td><code>yield …</code></td> </tr> <tr> <td> <code - ><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield*" + ><a href="/fr/docs/Web/JavaScript/Reference/Operators/yield*" >yield*</a ></code > </td> - <td>Droite à gauche</td> <td><code>yield* …</code></td> </tr> <tr> - <td>18</td> - <td> - <a - href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition" - >Décomposition</a - > - </td> - <td>Non applicable</td> - <td><code>...</code> …</td> - </tr> - <tr> - <td>19</td> + <td>1</td> <td> <a - href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule" + href="/fr/docs/Web/JavaScript/Reference/Operators/Comma_Operator" >Virgule</a > </td> diff --git a/files/fr/web/mathml/authoring/index.md b/files/fr/web/mathml/authoring/index.md index ad4463cea3..260d44bc3c 100644 --- a/files/fr/web/mathml/authoring/index.md +++ b/files/fr/web/mathml/authoring/index.md @@ -312,7 +312,7 @@ Si votre document LaTeX est volumineux, vous pouvez vouloir le diviser en plusie ### Boîte de saisie -[TeXZilla](https://github.com/fred-wang/TeXZilla) possède plusieurs interfaces, notamment une [fiche CKEditor](https://ckeditor.com/addon/texzilla) utilisé sur MDN, une [démo en ligne](https://fred-wang.github.io/TeXZilla/), un [module de Firefox](https://addons.mozilla.org/en-US/firefox/addon/texzilla/) ou encore une [application web FirefoxOS](https://marketplace.firefox.com/app/texzilla-1/). Il est également intégré à [SeaMonkey](https://www.seamonkey-project.org/) depuis la version 2.28 et à [Thunderbird](https://www.mozilla.org/thunderbird/) depuis la version 31. [Abiword](http://abisource.org/) contient un petit éditeur d'équations, basé sur itex2MML. Enfin,[ Bluegriffon](http://www.bluegriffon.com/) possède un module complémentaire permettant d'insérer des formules MathML dans votre document, en utilisant une syntaxe de type ASCII/LaTeX. +[TeXZilla](https://github.com/fred-wang/TeXZilla) possède plusieurs interfaces, notamment une [fiche CKEditor](https://ckeditor.com/addon/texzilla) utilisé sur MDN, une [démo en ligne](https://fred-wang.github.io/TeXZilla/), un [module de Firefox](https://addons.mozilla.org/en-US/firefox/addon/texzilla/) ou encore une [application web FirefoxOS](https://marketplace.firefox.com/app/texzilla-1/). Il est également intégré à [SeaMonkey](https://www.seamonkey-project.org/) depuis la version 2.28 et à [Thunderbird](https://www.mozilla.org/thunderbird/) depuis la version 31. [Abiword](http://abisource.org/) contient un petit éditeur d'équations, basé sur itex2MML. Enfin, [Bluegriffon](http://www.bluegriffon.com/) possède un module complémentaire permettant d'insérer des formules MathML dans votre document, en utilisant une syntaxe de type ASCII/LaTeX.  diff --git a/files/fr/web/mathml/element/maction/index.md b/files/fr/web/mathml/element/maction/index.md index ac5dcfea6f..2635658f7e 100644 --- a/files/fr/web/mathml/element/maction/index.md +++ b/files/fr/web/mathml/element/maction/index.md @@ -20,7 +20,7 @@ L'action est définie par l'attribut `actiontype` qui peut prendre plusieurs val - `toggle` : Quand il y a un clic sur la sous-expression, la mise en forme des sous-expressions sélectionnées change. Ainsi chaque clic augmente la valeur de `selection`. La syntaxe est la suivante : `<maction actiontype="toggle" selection="entier-positif" > expression1 expression2 expressionN </maction>`. - `tooltip` : Lorsque la souris passe au-dessus de l'_expression_, une info-bulle est affichée à proximité de l'expression. - La syntaxe est la suivante :` <maction actiontype="tooltip"> expression message </maction>.` + La syntaxe est la suivante : `<maction actiontype="tooltip"> expression message </maction>.` - class, id, style - : Afin d'être utilisés avec les [feuilles de styles](/fr/docs/CSS). diff --git a/files/fr/web/mathml/element/math/index.md b/files/fr/web/mathml/element/math/index.md index 99fda8ff97..b7deea058d 100644 --- a/files/fr/web/mathml/element/math/index.md +++ b/files/fr/web/mathml/element/math/index.md @@ -9,7 +9,7 @@ translation_of: Web/MathML/Element/math --- {{MathMLRef}} -L'élément racine de MathML est` <math>`. Tout objet représenté en MathML doit être encadré de balises `<math>`. De plus, il est interdit d'imbriquer un autre élément `<math>` à l'intérieur d'un premier. Il est toutefois possible d'avoir un nombre arbitraire d'éléments fils à l'intérieur d'un élément `<math>`. +L'élément racine de MathML est `<math>`. Tout objet représenté en MathML doit être encadré de balises `<math>`. De plus, il est interdit d'imbriquer un autre élément `<math>` à l'intérieur d'un premier. Il est toutefois possible d'avoir un nombre arbitraire d'éléments fils à l'intérieur d'un élément `<math>`. ## Attributs diff --git a/files/fr/web/mathml/element/mfenced/index.md b/files/fr/web/mathml/element/mfenced/index.md index 0762e953c8..24296cb7a5 100644 --- a/files/fr/web/mathml/element/mfenced/index.md +++ b/files/fr/web/mathml/element/mfenced/index.md @@ -20,7 +20,7 @@ translation_of: Web/MathML/Element/mfenced - class, id, style - : Afin d'être utilisés avec les [feuilles de styles](/fr/docs/CSS). - close - - : Une chaîne de caractère pour le délimiteur fermant. La valeur par défaut est « `) `» et tous les blancs sont tronqués. + - : Une chaîne de caractère pour le délimiteur fermant. La valeur par défaut est « `)` » et tous les blancs sont tronqués. - href {{Deprecated_Inline()}} - : Un hyperlien pointant vers un URI donné. - mathbackground {{Deprecated_Inline()}} diff --git a/files/fr/web/mathml/element/msub/index.md b/files/fr/web/mathml/element/msub/index.md index 5647fb72ef..b53cdcafab 100644 --- a/files/fr/web/mathml/element/msub/index.md +++ b/files/fr/web/mathml/element/msub/index.md @@ -50,7 +50,7 @@ Rendu dans votre navigateur: <math><msub><mi>X</mi> <mn>1</mn></msub></math> ## Notes spécifiques à Gecko -- À partir de Gecko 26.0 {{geckoRelease("26")}} il ne sera bientôt plus possible d'utiliser `<none/>` comme un élément enfant. The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application ` of the ``superscriptshift` attribute has been fixed (see {{bug("827713")}} for details). +- À partir de Gecko 26.0 {{geckoRelease("26")}} il ne sera bientôt plus possible d'utiliser `<none/>` comme un élément enfant. The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application of the `superscriptshift` attribute has been fixed (see {{bug("827713")}} for details). ## Voir aussi diff --git a/files/fr/web/performance/index.md b/files/fr/web/performance/index.md index b76ba4f995..78fa39206d 100644 --- a/files/fr/web/performance/index.md +++ b/files/fr/web/performance/index.md @@ -163,7 +163,7 @@ HTML - [Responsive images](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) -- [Preloading content with `rel="preload"`](/fr/docs/Web/HTML/Preloading_content) - [(https://w3c.github.io/preload/ ](https://w3c.github.io/preload/)) +- [Preloading content with `rel="preload"`](/fr/docs/Web/HTML/Preloading_content) - <https://w3c.github.io/preload/> CSS diff --git a/files/fr/web/progressive_web_apps/loading/index.md b/files/fr/web/progressive_web_apps/loading/index.md index afaf29335f..91b2a90e4b 100644 --- a/files/fr/web/progressive_web_apps/loading/index.md +++ b/files/fr/web/progressive_web_apps/loading/index.md @@ -154,7 +154,7 @@ Rappelez-vous de ce que nous avons dit concernant l'approche d'amélioration pro ## Dernières réflexions -C'est fini pour ces séries de tutoriels — nous avons examiné le [code source code de l'exemple d'application js13kPWA](https://github.com/mdn/pwa-examples/tree/master/js13kpwa) et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une [Introduction](/fr/docs/Web/Progressive_web_apps/Introduction), [la structure des PWA, ](/fr/docs/Web/Progressive_web_apps/App_structure)[la disponibilité en mode déconnectégrâce aux Service Workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers), [les PWAs installable](/fr/docs/Web/Progressive_web_apps/Installable_PWAs) et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du [Service Worker Cookbook](https://serviceworke.rs/). Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'[API ntersection Observer](/fr/docs/Web/API/Intersection_Observer_API). +C'est fini pour ces séries de tutoriels — nous avons examiné le [code source code de l'exemple d'application js13kPWA](https://github.com/mdn/pwa-examples/tree/master/js13kpwa) et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une [Introduction](/fr/docs/Web/Progressive_web_apps/Introduction), [la structure des PWA](/fr/docs/Web/Progressive_web_apps/App_structure), [la disponibilité en mode déconnectégrâce aux Service Workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers), [les PWAs installable](/fr/docs/Web/Progressive_web_apps/Installable_PWAs) et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du [Service Worker Cookbook](https://serviceworke.rs/). Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'[API ntersection Observer](/fr/docs/Web/API/Intersection_Observer_API). N'hésitez pas à faire des essais avec le code, à améliorer votre application existante avec des des fonctionnalités PWA ou à bâtir quelque chose d'entièrement nouveau de vous même. Les PWAs amènent un énorme avantage sur les applications web classiques. diff --git a/files/fr/web/progressive_web_apps/offline_service_workers/index.md b/files/fr/web/progressive_web_apps/offline_service_workers/index.md index 6d04712c4a..e4a376c6cb 100644 --- a/files/fr/web/progressive_web_apps/offline_service_workers/index.md +++ b/files/fr/web/progressive_web_apps/offline_service_workers/index.md @@ -221,7 +221,7 @@ Servir des fichiers depuis le cache n'est pas la seule fonctionnalité que le Se Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) et comment l'exploiter au mieux. -Les Service Workers sont également utilisés pour gérer les [push notifications ](/fr/docs/Web/API/Push_API)[](/fr/docs//Web/API/Push_API)— ceci sera expliqué dans un prochain article. +Les Service Workers sont également utilisés pour gérer les [push notifications](/fr/docs/Web/API/Push_API) — ceci sera expliqué dans un prochain article. {{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}} diff --git a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md index a7782be0e0..75752e6e9f 100644 --- a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md +++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md @@ -90,7 +90,7 @@ Les données peuvent être récupérées puis affichées immédiatement à l'uti ### Exemple de Push -Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le [Service Worker Cookbook](https://serviceworke.rs/) — voir la[ démonstration de charge utile poussée](https://serviceworke.rs/push-payload.html). +Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le [Service Worker Cookbook](https://serviceworke.rs/) — voir la [démonstration de charge utile poussée](https://serviceworke.rs/push-payload.html). Cette démonstration comporte trois fichiers: diff --git a/files/fr/web/security/same-origin_policy/index.md b/files/fr/web/security/same-origin_policy/index.md index fa7fc96871..ce2a713f38 100644 --- a/files/fr/web/security/same-origin_policy/index.md +++ b/files/fr/web/security/same-origin_policy/index.md @@ -24,7 +24,7 @@ Les cookies utilisent une définition de l'origine différente de celle qui vien ## Changer l'origine -Une page peut changer son origine dans une certaine mesure. Un script peut définir la valeur de `document.domain `vers un suffixe du domaine courant. S'il procéde ainsi, le domaine le plus court sera utilisé pour les prochaines vérifications d'origines. Par exemple, un script dans la page `http://store.company.com/dir/other.html` exécute le code suivant : +Une page peut changer son origine dans une certaine mesure. Un script peut définir la valeur de `document.domain` vers un suffixe du domaine courant. S'il procéde ainsi, le domaine le plus court sera utilisé pour les prochaines vérifications d'origines. Par exemple, un script dans la page `http://store.company.com/dir/other.html` exécute le code suivant : document.domain = "company.com"; @@ -43,12 +43,12 @@ La same-origin policy contrôle les interactions entre deux origines différente Voici quelques exemples de ressources qui peuvent être embarqués malgré leur origine incompatible avec la same-origin policy : - JavaScript avec `<script src="..."></script>`. Les messages d'erreur de syntaxe ne sont disponibles que pour les scripts ayant la même origine. -- CSS avec` <link rel="stylesheet" href="...">`. Étant donnée la [souplesse des règles de syntaxe](http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html) du CSS, les CSS d'origine différentes nécessitent une entête `Content-Type` correcte. Les restrictions varient selon les navigateurs : [IE](http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx), [Firefox](http://www.mozilla.org/security/announce/2010/mfsa2010-46.html), [Chrome](http://code.google.com/p/chromium/issues/detail?id=9877), [Safari](http://support.apple.com/kb/HT4070) et [Opera](http://www.opera.com/support/kb/view/943/). +- CSS avec `<link rel="stylesheet" href="...">`. Étant donnée la [souplesse des règles de syntaxe](http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html) du CSS, les CSS d'origine différentes nécessitent une entête `Content-Type` correcte. Les restrictions varient selon les navigateurs : [IE](http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx), [Firefox](http://www.mozilla.org/security/announce/2010/mfsa2010-46.html), [Chrome](http://code.google.com/p/chromium/issues/detail?id=9877), [Safari](http://support.apple.com/kb/HT4070) et [Opera](http://www.opera.com/support/kb/view/943/). - Images avec [`<img>`](/fr/docs/HTML/Element/Img). Les formats d'image supportés, comprenant PNG, JPEG, GIF, BMP, SVG... - Fichiers média avec [`<video>`](/fr/docs/HTML/Element/video) et [`<audio>`](/fr/docs/HTML/Element/audio). - Objets avec [`<object>`](/fr/docs/HTML/Element/object), [`<embed>`](/fr/docs/HTML/Element/embed) et [`<applet>`](/fr/docs/HTML/Element/applet). - Fontes de polices avec [`@font-face`](/fr/docs/CSS/@font-face). Certain navigateurs autorisent les fontes cross-origin, d'autres appliquent la same-origin policy. -- N'importe quoi avec [`<frame>`](/fr/docs/HTML/Element/frame) et [`<iframe>`](/fr/docs/HTML/Element/iframe). Un site peut utiliser l'entête[` X-Frame-Options`](/fr/docs/HTTP/X-Frame-Options) pour interdire cela depuis une page n'ayant pas la même origine. +- N'importe quoi avec [`<frame>`](/fr/docs/HTML/Element/frame) et [`<iframe>`](/fr/docs/HTML/Element/iframe). Un site peut utiliser l'entête [`X-Frame-Options`](/fr/docs/HTTP/X-Frame-Options) pour interdire cela depuis une page n'ayant pas la même origine. ### Autoriser l'accès cross-origin diff --git a/files/fr/web/security/secure_contexts/index.md b/files/fr/web/security/secure_contexts/index.md index cca5cc5c86..4a1174042c 100644 --- a/files/fr/web/security/secure_contexts/index.md +++ b/files/fr/web/security/secure_contexts/index.md @@ -25,7 +25,7 @@ Les contextes qui ne sont pas servis locallement doivent être servis avec *ht ## Détection des fonctionnalités -Les pages peuvent utiliser la détection de fonctionnalités pour vérifier si elles sont dans un context sécurisé ou non en utilisant le booléen `isSecureContext `qui est présent dans le scope global. +Les pages peuvent utiliser la détection de fonctionnalités pour vérifier si elles sont dans un context sécurisé ou non en utilisant le booléen `isSecureContext` qui est présent dans le scope global. ```js if (window.isSecureContext) { diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md index 443c129b0b..2cafc5a036 100644 --- a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md @@ -106,7 +106,7 @@ p { } ``` -Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID` #clipping-path-1` qui est référencé dans le CSS. `clip-path` peut être associé à n'importe quel élément avec la classe `target`. +Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID `#clipping-path-1` qui est référencé dans le CSS. `clip-path` peut être associé à n'importe quel élément avec la classe `target`. Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du `clip-path` établi ci-dessus : diff --git a/files/fr/web/svg/attribute/seed/index.md b/files/fr/web/svg/attribute/seed/index.md index 52b679461c..a1a659221d 100644 --- a/files/fr/web/svg/attribute/seed/index.md +++ b/files/fr/web/svg/attribute/seed/index.md @@ -49,6 +49,6 @@ Si l'attribut n'est pas spécifié, alors le palier sera fixé à **0**. ## Éléments -Les éléments suivants peuvent être utilisés avec l'attribut `seed ` : +Les éléments suivants peuvent être utilisés avec l'attribut `seed` : - {{ SVGElement("feTurbulence") }} diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.md b/files/fr/web/svg/attribute/stroke-dasharray/index.md index b14d42ec70..104acab79c 100644 --- a/files/fr/web/svg/attribute/stroke-dasharray/index.md +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Attribute/stroke-dasharray --- L'attribut `stroke-dasharray` contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. -> **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray `peut aussi être utilisé directement dans une feuille de style CSS. +> **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray` peut aussi être utilisé directement dans une feuille de style CSS. Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} diff --git a/files/fr/web/svg/compatibility_sources/index.md b/files/fr/web/svg/compatibility_sources/index.md index 790df82f19..d3e5102356 100644 --- a/files/fr/web/svg/compatibility_sources/index.md +++ b/files/fr/web/svg/compatibility_sources/index.md @@ -15,4 +15,4 @@ Les sources suivantes sont utilisées pour les tableaux de compatibilités des - <http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx> pour connaître l'état du support sur IE9 - [Le graphique de support SVG sur Codedread.com](http://www.codedread.com/svg-support.php) pour les vérifications basiques par rapport à la suite de test W3C - [Wikipedia](http://en.wikipedia.org/wiki/SVG) pour des conseils basiques, non normatif -- [Svground.fr/ ](svground.fr/)tuto assez complet sur le SVG +- [SVGround.fr](https://svground.fr) : tuto assez complet sur le SVG diff --git a/files/fr/web/svg/element/altglyphitem/index.md b/files/fr/web/svg/element/altglyphitem/index.md index 56bed16b6f..dd331e1da6 100644 --- a/files/fr/web/svg/element/altglyphitem/index.md +++ b/files/fr/web/svg/element/altglyphitem/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/altGlyphItem --- {{SVGRef}}{{deprecated_header}} -L'élément `altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément `{{ SVGElement("altGlyph") }}. +L'élément `altGlyphItem` fournit un ensemble de candidats pour la substitution de glyphes par l'élément {{ SVGElement("altGlyph") }}. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/ellipse/index.md b/files/fr/web/svg/element/ellipse/index.md index 3a4da75a41..8f5721456c 100644 --- a/files/fr/web/svg/element/ellipse/index.md +++ b/files/fr/web/svg/element/ellipse/index.md @@ -25,16 +25,16 @@ L'élément `ellipse` est une forme basique SVG,utilisé pour créer des ellipse - {{ SVGAttr("cx") }} - : La position x de l'ellipse. - Type de valeur : **[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `0`; Animable : **oui**. + Type de valeur : [**`<longueur>`**](/fr/docs/Web/SVG/Content_type#Length)|[**`<pourcentage>`**](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut :`0`; Animable : **oui**. - {{ SVGAttr("cy") }} - : La position y de l'ellipse. - Type de valeur : **[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `0`; Animable : **oui**. + Type de valeur : [**`<longueur>`**](/fr/docs/Web/SVG/Content_type#Length)|[**`<pourcentage>`**](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut :`0`; Animable :**oui**. - {{ SVGAttr("rx") }} - : Le rayon de l'ellipse sur l'axe x. - Type de valeur : `auto`|**[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `auto`; Animable : **oui**. + Type de valeur : `auto`|[**`<longueur>`**](/fr/docs/Web/SVG/Content_type#Length)|[**`<pourcentage>`**](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut :`auto`; Animable : **oui**. - {{ SVGAttr("ry") }} - : Le rayon de l'ellipse sur l'axe y. - Type de valeur : `auto`|**[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `auto`; Animable : **oui**. + Type de valeur : `auto`|[**`<longueur>`**](/fr/docs/Web/SVG/Content_type#Length)|[**`<pourcentage>`**](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut :`auto`; Animable : **oui**. - {{ SVGAttr("pathLength") }} - : Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur. Type de valeur : **[\<number>](/fr/docs/Web/SVG/Content_type#Number)**; Valeur par défaut : `auto`; Animable : **oui**. diff --git a/files/fr/web/svg/element/line/index.md b/files/fr/web/svg/element/line/index.md index 505be73420..93360395cf 100644 --- a/files/fr/web/svg/element/line/index.md +++ b/files/fr/web/svg/element/line/index.md @@ -42,7 +42,7 @@ html,body,svg { height:100% } - [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ; - [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ; - [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ; -- [Attributs de présentation ](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation "en/SVG/Attribute#Presentation") ; +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation "en/SVG/Attribute#Presentation") ; - {{ SVGAttr("class") }} ; - {{ SVGAttr("style") }} ; - {{ SVGAttr("externalResourcesRequired") }} ; diff --git a/files/fr/web/svg/element/radialgradient/index.md b/files/fr/web/svg/element/radialgradient/index.md index 5cb5bbd0a6..baae55eed4 100644 --- a/files/fr/web/svg/element/radialgradient/index.md +++ b/files/fr/web/svg/element/radialgradient/index.md @@ -7,7 +7,9 @@ tags: - SVG Dégradé translation_of: Web/SVG/Element/radialGradient --- -{{SVGRef}}L'élément [SVG ](/fr/docs/Web/SVG)**`<radialGradient>`** permet de définir un dégradé radial afin de dessiner un contour, ou de remplir des éléments SVG. +{{SVGRef}} + +L'élément [SVG](/fr/docs/Web/SVG) **`<radialGradient>`** permet de définir un dégradé radial afin de dessiner un contour, ou de remplir des éléments SVG. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/symbol/index.md b/files/fr/web/svg/element/symbol/index.md index 74789fa1ef..58a230af5f 100644 --- a/files/fr/web/svg/element/symbol/index.md +++ b/files/fr/web/svg/element/symbol/index.md @@ -74,7 +74,7 @@ html,body,svg { height:100% } - [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) - : {{SVGAttr('class')}}, {{SVGAttr('style')}} - Attributs d'événement - - : [Attributs d'événement globaux](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux), [Attributs d'événement des éléments du document](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document),[ Attributs d'événement graphiques](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques) + - : [Attributs d'événement globaux](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux), [Attributs d'événement des éléments du document](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document), [Attributs d'événement graphiques](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques) - [Atttributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} - Attributs Aria diff --git a/files/fr/web/svg/element/use/index.md b/files/fr/web/svg/element/use/index.md index a1a0a1c747..6c3e975de4 100644 --- a/files/fr/web/svg/element/use/index.md +++ b/files/fr/web/svg/element/use/index.md @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/use --- {{SVGRef}} -L'élement **`<use> `**permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. +L'élement **`<use>`** permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. Puisque les noeuds clonés par `use` ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style [CSS](/fr/docs/Web/CSS "en/CSS") sur l'élément `use` et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les [héritages CSS](/fr/docs/Web/CSS/inheritance "en/CSS/inheritance"). diff --git a/files/fr/web/svg/index.md b/files/fr/web/svg/index.md index cd2d023cd7..c153279ae1 100644 --- a/files/fr/web/svg/index.md +++ b/files/fr/web/svg/index.md @@ -24,7 +24,7 @@ SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est ba SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap). -SVG est une norme développée par le [World Wide Web Consortium (W3C) ](https://www.w3.org/)depuis 1999. +SVG est une norme développée par le [World Wide Web Consortium (W3C)](https://www.w3.org/) depuis 1999. ## Documentation @@ -78,13 +78,13 @@ Comme HTML, SVG dispose d'un modèle de document (DOM) et d'évènements, et est - [svg-wow.org](http://svg-wow.org/) - Extension Firefox ([Grafox](http://schepers.cc/grafox/)) pour ajouter la gestion d'un sous-ensemble des animations SMIL - Manipulation interactive de [photos](http://people.mozilla.com/~vladimir/demos/photos.svg) -- [Transformations HTML ](http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/)utilisant `foreignObject` de SVG +- [Transformations HTML](http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/) utilisant `foreignObject` de SVG ### Cartes, graphiques, jeux et expérimentations 3D Bien qu'un peu de SVG puisse contribuer à améliorer le contenu du web, voici quelques exemples d'utilisation poussée du SVG. -- Un[ Tetris en SVG](http://www.codedread.com/yastframe.php) et [Connect 4](http://www.treebuilder.de/svg/connect4.svg) +- Un [Tetris en SVG](http://www.codedread.com/yastframe.php) et [Connect 4](http://www.treebuilder.de/svg/connect4.svg) - Jeu [Find the State](http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/USStates.svg) - [Boîte 3D](http://www.treebuilder.de/default.asp?file=441875.xml) et [boîtes 3D](http://www.treebuilder.de/default.asp?file=206524.xml) - [jVectorMap](http://jvectormap.com/) (pour représenter des cartes interactives avec des données) (en anglais) diff --git a/files/fr/web/svg/tutorial/other_content_in_svg/index.md b/files/fr/web/svg/tutorial/other_content_in_svg/index.md index 38baec6e28..2dd2b2d299 100644 --- a/files/fr/web/svg/tutorial/other_content_in_svg/index.md +++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.md @@ -27,7 +27,7 @@ L'image embarquée devient un élément SVG normal. Cela implique que vous pouve ### Embarquer du contenu XML quelconque -Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG `foreignObject, `son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la _largeur_ et la _hauteur_ de l'objet embarqué afin de définir la place que celui-ci occupera). +Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG `foreignObject`,son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la _largeur_ et la _hauteur_ de l'objet embarqué afin de définir la place que celui-ci occupera). L'élément **`foreignObject`** est donc la bonne méthode pour embarquer du **XHTML** dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG `text`. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers. diff --git a/files/fr/web/xpath/index.md b/files/fr/web/xpath/index.md index 948a0993e5..7f7ffeaaaf 100644 --- a/files/fr/web/xpath/index.md +++ b/files/fr/web/xpath/index.md @@ -33,7 +33,7 @@ XPath utilise une notation en chemin (à l'instar des URL) pour naviguer dans la - [Transformer du XML avec XSLT](/fr/docs/Web/XSLT/Transforming_XML_with_XSLT) - : XSLT utilise XPath afin de cibler les segments d'un document XML pour ensuite les transformer. - [Fragments de code XPath](/fr/docs/Web/XPath/Snippets) - - : Un ensemble d'exemples de code réutilisables en JavaScript qui utilisent les API [DOM Level 3 XPath ](https://www.w3.org/TR/DOM-Level-3-XPath/). + - : Un ensemble d'exemples de code réutilisables en JavaScript qui utilisent les API [DOM Level 3 XPath](https://www.w3.org/TR/DOM-Level-3-XPath/). - [Qu'est-ce que XSLT ? (en anglais)](https://www.xml.com/pub/a/2000/08/holman/) - : Une introduction à XSLT et XPath sans besoin de connaissances préalables. Le contexte, la structure, les concepts ainsi qu'une terminologie introductive sont fournis au lecteur. diff --git a/files/fr/web/xslt/element/stylesheet/index.md b/files/fr/web/xslt/element/stylesheet/index.md index 2f47f3e8ed..038e5a681e 100644 --- a/files/fr/web/xslt/element/stylesheet/index.md +++ b/files/fr/web/xslt/element/stylesheet/index.md @@ -32,7 +32,7 @@ Un pseudo-attribut est nécessaire pour identifier le document comme étant une ### Attributs optionnels -- `id `(Supporté comme dans Netscape 7.0 uniquement s'il est explicitement appelé par une DTD intégrée) +- `id` (Supporté comme dans Netscape 7.0 uniquement s'il est explicitement appelé par une DTD intégrée) - : Définit un identifiant `id` pour cette feuille de style. Cet attribut est le plus souvent utilisé lorsque la feuille de style est incorporée dans un autre document XML. <!----> |
