From 79843297a1d97045c504575ab9a6a29b3af8ffae Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 5 Nov 2021 15:44:38 +0100 Subject: Fixes #2842 - Fixing EmbedLiveSample errors for fr docs (#2851) * Fixes #2842 for CSS pages * Fixes #2842 for Web API pages * Fixes #2842 for other sections * Fix EmbedLiveSample for moved CSS page * Fixes #2842 for conflicting / orphaned docs --- files/fr/_redirects.txt | 31 +- files/fr/_wikihistory.json | 79 - .../learn/css/building_blocks/selectors/index.html | 138 - .../learn/css/css_layout/introduction/index.html | 405 --- .../index.html | 272 -- files/fr/glossary/css_selector/index.html | 51 +- .../user_interface/browser_styles/index.html | 9 +- files/fr/orphaned/web/api/body/index.html | 97 - files/fr/orphaned/web/api/body/json/index.html | 87 - .../api/detecting_device_orientation/index.html | 220 -- .../@media/prefers-reduced-transparency/index.html | 83 - .../orphaned/web/css/linear-gradient()/index.html | 295 -- files/fr/web/api/batterymanager/charging/index.md | 2 +- .../web/api/batterymanager/chargingtime/index.md | 2 +- .../api/batterymanager/dischargingtime/index.md | 2 +- files/fr/web/api/batterymanager/level/index.md | 2 +- files/fr/web/api/canvas_api/index.md | 6 +- .../tutorial/advanced_animations/index.md | 6 +- .../tutorial/applying_styles_and_colors/index.md | 34 +- .../api/canvas_api/tutorial/compositing/index.md | 26 +- .../api/canvas_api/tutorial/drawing_text/index.md | 13 +- .../pixel_manipulation_with_canvas/index.md | 6 +- .../api/canvas_api/tutorial/using_images/index.md | 14 +- .../web/api/canvasgradient/addcolorstop/index.md | 2 +- .../web/api/canvasrenderingcontext2d/arc/index.md | 9 +- .../canvasrenderingcontext2d/beginpath/index.md | 6 +- .../beziercurveto/index.md | 4 +- .../canvasrenderingcontext2d/clearrect/index.md | 8 +- .../canvasrenderingcontext2d/closepath/index.md | 4 +- .../createlineargradient/index.md | 9 +- .../canvasrenderingcontext2d/direction/index.md | 9 +- .../canvasrenderingcontext2d/drawimage/index.md | 8 +- .../api/canvasrenderingcontext2d/ellipse/index.md | 8 +- .../web/api/canvasrenderingcontext2d/fill/index.md | 10 +- .../api/canvasrenderingcontext2d/fillrect/index.md | 7 +- .../canvasrenderingcontext2d/fillstyle/index.md | 10 +- .../api/canvasrenderingcontext2d/filltext/index.md | 8 +- .../web/api/canvasrenderingcontext2d/font/index.md | 8 +- .../canvasrenderingcontext2d/globalalpha/index.md | 10 +- .../globalcompositeoperation/index.md | 8 +- .../imagesmoothingenabled/index.md | 12 +- .../api/canvasrenderingcontext2d/linecap/index.md | 10 +- .../api/canvasrenderingcontext2d/linejoin/index.md | 11 +- .../api/canvasrenderingcontext2d/lineto/index.md | 8 +- .../api/canvasrenderingcontext2d/moveto/index.md | 6 +- .../quadraticcurveto/index.md | 17 +- .../web/api/canvasrenderingcontext2d/rect/index.md | 7 +- .../api/canvasrenderingcontext2d/rotate/index.md | 8 +- .../api/canvasrenderingcontext2d/scale/index.md | 10 +- .../canvasrenderingcontext2d/setlinedash/index.md | 13 +- .../canvasrenderingcontext2d/settransform/index.md | 8 +- .../api/canvasrenderingcontext2d/stroke/index.md | 2 +- .../canvasrenderingcontext2d/strokerect/index.md | 8 +- .../canvasrenderingcontext2d/strokestyle/index.md | 4 +- .../canvasrenderingcontext2d/stroketext/index.md | 8 +- .../canvasrenderingcontext2d/textalign/index.md | 10 +- .../canvasrenderingcontext2d/textbaseline/index.md | 8 +- .../canvasrenderingcontext2d/transform/index.md | 8 +- .../canvasrenderingcontext2d/translate/index.md | 8 +- .../web/api/document/caretrangefrompoint/index.md | 8 +- .../api/document/createdocumentfragment/index.md | 9 +- files/fr/web/api/document/createelement/index.md | 9 +- .../api/document/domcontentloaded_event/index.md | 2 +- files/fr/web/api/document/dragstart_event/index.md | 4 +- .../fr/web/api/document/elementsfrompoint/index.md | 2 +- files/fr/web/api/document/getelementbyid/index.md | 11 +- files/fr/web/api/document/keypress_event/index.md | 8 +- .../index.md | 19 +- .../using_the_w3c_dom_level_1_core/index.md | 7 +- files/fr/web/api/domtokenlist/add/index.md | 9 +- files/fr/web/api/domtokenlist/contains/index.md | 9 +- files/fr/web/api/domtokenlist/entries/index.md | 9 +- files/fr/web/api/domtokenlist/foreach/index.md | 10 +- files/fr/web/api/domtokenlist/index.md | 11 +- files/fr/web/api/domtokenlist/item/index.md | 8 +- files/fr/web/api/domtokenlist/keys/index.md | 11 +- files/fr/web/api/domtokenlist/length/index.md | 8 +- files/fr/web/api/domtokenlist/remove/index.md | 8 +- files/fr/web/api/domtokenlist/replace/index.md | 8 +- files/fr/web/api/domtokenlist/value/index.md | 7 +- files/fr/web/api/domtokenlist/values/index.md | 9 +- .../api/element/compositionstart_event/index.md | 8 +- .../web/api/element/getboundingclientrect/index.md | 24 +- files/fr/web/api/element/queryselector/index.md | 17 +- files/fr/web/api/element/scrollheight/index.md | 2 - files/fr/web/api/element/scrolltop/index.md | 7 +- files/fr/web/api/element/setattribute/index.md | 8 +- files/fr/web/api/event/eventphase/index.md | 2 +- files/fr/web/api/event/preventdefault/index.md | 10 +- files/fr/web/api/event/timestamp/index.md | 8 +- files/fr/web/api/event/type/index.md | 2 +- .../web/api/eventtarget/addeventlistener/index.md | 35 +- files/fr/web/api/filereader/readasdataurl/index.md | 8 +- .../web/api/globaleventhandlers/onselect/index.md | 8 +- files/fr/web/api/htmlbuttonelement/labels/index.md | 6 +- .../web/api/htmlelement/beforeinput_event/index.md | 2 +- files/fr/web/api/htmlelement/change_event/index.md | 10 +- files/fr/web/api/htmlelement/hidden/index.md | 2 +- .../web/api/htmlelement/iscontenteditable/index.md | 9 +- .../api/htmltablerowelement/insertcell/index.md | 2 +- .../fr/web/api/intersection_observer_api/index.md | 7 +- files/fr/web/api/keyboardevent/code/index.md | 9 +- files/fr/web/api/location/index.md | 9 +- files/fr/web/api/mouseevent/index.md | 10 +- files/fr/web/api/node/isequalnode/index.md | 8 +- files/fr/web/api/node/issamenode/index.md | 7 +- .../using_the_notifications_api/index.md | 2 +- files/fr/web/api/storagemanager/estimate/index.md | 2 +- .../webgl_api/by_example/color_masking/index.md | 9 +- files/fr/web/api/window/find/index.md | 2 +- .../css/-moz-outline-radius-bottomright/index.md | 7 +- files/fr/web/css/-webkit-text-fill-color/index.md | 7 +- files/fr/web/css/-webkit-text-security/index.md | 7 +- files/fr/web/css/@media/forced-colors/index.md | 32 +- files/fr/web/css/@media/prefers-contrast/index.md | 28 +- .../web/css/@media/prefers-reduced-motion/index.md | 9 +- files/fr/web/css/_colon_-moz-list-number/index.md | 7 +- .../web/css/_colon_-moz-only-whitespace/index.md | 8 +- files/fr/web/css/_colon_checked/index.md | 6 +- files/fr/web/css/_colon_lang/index.md | 6 +- files/fr/web/css/_colon_local-link/index.md | 2 +- files/fr/web/css/_colon_nth-child/index.md | 6 +- files/fr/web/css/_colon_nth-col/index.md | 2 +- files/fr/web/css/_colon_nth-last-col/index.md | 2 +- files/fr/web/css/_colon_target-within/index.md | 2 +- .../index.md | 7 +- .../index.md | 7 +- files/fr/web/css/accent-color/index.md | 2 +- files/fr/web/css/align-self/index.md | 6 +- files/fr/web/css/all/index.md | 12 +- files/fr/web/css/animation/index.md | 7 +- files/fr/web/css/attr()/index.md | 6 +- files/fr/web/css/border-image/index.md | 7 +- files/fr/web/css/content/index.md | 8 +- .../css_animations/using_css_animations/index.md | 7 +- .../border-image_generator/index.md | 2612 +--------------- .../box-shadow_generator/index.md | 2865 +---------------- .../using_multiple_backgrounds/index.md | 10 +- .../web/css/css_colors/color_picker_tool/index.md | 3247 +------------------- .../basic_concepts_of_grid_layout/index.md | 8 +- .../box_alignment_in_css_grid_layout/index.md | 20 +- .../css_grid_and_progressive_enhancement/index.md | 10 +- .../index.md | 12 +- .../css_grid_layout/grid_template_areas/index.md | 7 +- .../layout_using_named_grid_lines/index.md | 4 +- .../index.md | 8 +- .../relationship_of_grid_layout/index.md | 4 +- .../css/css_images/using_css_gradients/index.md | 6 +- .../stacking_and_float/index.md | 10 +- files/fr/web/css/cursor/index.md | 13 +- files/fr/web/css/display-box/index.md | 6 +- files/fr/web/css/easing-function/index.md | 2 +- files/fr/web/css/env()/index.md | 9 +- files/fr/web/css/flex-wrap/index.md | 43 +- files/fr/web/css/flex/index.md | 6 +- files/fr/web/css/forced-color-adjust/index.md | 2 +- files/fr/web/css/gap/index.md | 7 +- files/fr/web/css/gradient/index.md | 8 +- .../fr/web/css/gradient/linear-gradient()/index.md | 194 ++ files/fr/web/css/hanging-punctuation/index.md | 7 +- files/fr/web/css/list-style-image/index.md | 6 +- files/fr/web/css/mask-type/index.md | 9 +- files/fr/web/css/min()/index.md | 26 - files/fr/web/css/minmax()/index.md | 10 +- files/fr/web/css/mix-blend-mode/index.md | 6 +- files/fr/web/css/outline-style/index.md | 6 +- files/fr/web/css/overflow/index.md | 7 +- files/fr/web/css/repeat()/index.md | 8 +- files/fr/web/css/scale/index.md | 6 +- files/fr/web/css/text-overflow/index.md | 10 +- files/fr/web/css/text-shadow/index.md | 10 +- files/fr/web/css/transform-origin/index.md | 9 +- files/fr/web/css/transition-delay/index.md | 7 +- files/fr/web/css/transition-duration/index.md | 7 +- .../web/css/using_css_custom_properties/index.md | 9 +- files/fr/web/css/word-break/index.md | 6 +- .../understanding_the_text_format/index.html | 436 +-- 177 files changed, 565 insertions(+), 11928 deletions(-) delete mode 100644 files/fr/conflicting/learn/css/building_blocks/selectors/index.html delete mode 100644 files/fr/conflicting/learn/css/css_layout/introduction/index.html delete mode 100644 files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html delete mode 100644 files/fr/orphaned/web/api/body/index.html delete mode 100644 files/fr/orphaned/web/api/body/json/index.html delete mode 100644 files/fr/orphaned/web/api/detecting_device_orientation/index.html delete mode 100644 files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html delete mode 100644 files/fr/orphaned/web/css/linear-gradient()/index.html create mode 100644 files/fr/web/css/gradient/linear-gradient()/index.md (limited to 'files') diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 7a241e04bc..03b0bf4097 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -104,7 +104,7 @@ /fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow /fr/docs/Learn/CSS/CSS_layout/Normal_Flow /fr/docs/Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs /fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers /fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design /fr/docs/Learn/CSS/CSS_layout/Responsive_Design -/fr/docs/Apprendre/CSS/CSS_properties /fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/fr/docs/Apprendre/CSS/CSS_properties /fr/docs/Learn/CSS/Building_blocks/Selectors /fr/docs/Apprendre/CSS/Comment /fr/docs/Learn/CSS/Howto /fr/docs/Apprendre/CSS/Comment/Créer_de_belles_boîtes /fr/docs/Learn/CSS/Howto/create_fancy_boxes /fr/docs/Apprendre/CSS/Comment/Generated_content /fr/docs/Learn/CSS/Howto/Generated_content @@ -116,7 +116,7 @@ /fr/docs/Apprendre/CSS/Introduction_à_CSS/Debugging_CSS /en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS /fr/docs/Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension /fr/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension /fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_disposition /fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction +/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_disposition /fr/docs/Learn/CSS/CSS_layout/Introduction /fr/docs/Apprendre/CSS/Introduction_à_CSS/La_syntaxe /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_fonctionnement_de_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte /en-US/docs/Learn/CSS/Building_blocks/The_box_model @@ -126,12 +126,12 @@ /fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /fr/docs/Apprendre/CSS/Les_bases /en-US/docs/Learn/CSS/First_steps /fr/docs/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/fr/docs/Apprendre/CSS/Les_bases/La_disposition /fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction +/fr/docs/Apprendre/CSS/Les_bases/La_disposition /fr/docs/Learn/CSS/CSS_layout/Introduction /fr/docs/Apprendre/CSS/Les_bases/La_syntaxe /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /fr/docs/Apprendre/CSS/Les_bases/Le_fonctionnement_de_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /fr/docs/Apprendre/CSS/Les_bases/Le_modèle_de_boîte /en-US/docs/Learn/CSS/Building_blocks/The_box_model /fr/docs/Apprendre/CSS/Les_bases/Les_sélecteurs /en-US/docs/Learn/CSS/Building_blocks/Selectors -/fr/docs/Apprendre/CSS/Les_propriétés_CSS /fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/fr/docs/Apprendre/CSS/Les_propriétés_CSS /fr/docs/Learn/CSS/Building_blocks/Selectors /fr/docs/Apprendre/CSS/Utiliser_CSS_dans_une_page_web /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works /fr/docs/Apprendre/CSS/formatage_texte_CSS /fr/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_9e7ba587262abbb02304cbc099c1f0d8 /fr/docs/Apprendre/CSS/styliser_boites /en-US/docs/Learn/CSS/Building_blocks @@ -185,13 +185,13 @@ /fr/docs/Apprendre/HTML/Comment/Annoter_des_images_et_graphiques /fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Images_in_HTML_2c0377f7605f693cad465c2b4839addc /fr/docs/Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web /fr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_cf31463f874ecd8e10e648dacde4a995 /fr/docs/Apprendre/HTML/Comment/Comment_créer_un_document_HTML_simple /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started -/fr/docs/Apprendre/HTML/Comment/Comment_identifier_et_expliquer_des_abréviations /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446 +/fr/docs/Apprendre/HTML/Comment/Comment_identifier_et_expliquer_des_abréviations /fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting /fr/docs/Apprendre/HTML/Comment/Créer_un_document_HTML_simple /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started /fr/docs/Apprendre/HTML/Comment/Créer_un_hyperlien /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks /fr/docs/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals /fr/docs/Apprendre/HTML/Comment/Découper_une_page_web_en_sections_logiques /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Document_and_website_structure /fr/docs/Apprendre/HTML/Comment/Définir_des_termes_avec_HTML /fr/docs/Learn/HTML/Howto/Define_terms_with_HTML -/fr/docs/Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446 +/fr/docs/Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations /fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting /fr/docs/Apprendre/HTML/Comment/Intégrer_une_page_web_dans_une_autre_page_web /fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d /fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hiérarchie_de_titres /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc /fr/docs/Apprendre/HTML/Comment/Mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important /fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6 @@ -309,7 +309,7 @@ /fr/docs/CSS/-moz-grab /en-US/docs/Web/CSS/cursor#grab /fr/docs/CSS/-moz-grabbing /en-US/docs/Web/CSS/cursor#grab /fr/docs/CSS/-moz-image-region /fr/docs/Web/CSS/-moz-image-region -/fr/docs/CSS/-moz-linear-gradient /fr/docs/orphaned/Web/CSS/linear-gradient() +/fr/docs/CSS/-moz-linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/CSS/-moz-margin-end /fr/docs/Web/CSS/margin-inline-end /fr/docs/CSS/-moz-margin-start /fr/docs/Web/CSS/margin-inline-start /fr/docs/CSS/-moz-opacity /fr/docs/Web/CSS/opacity @@ -585,7 +585,7 @@ /fr/docs/CSS/length /fr/docs/Web/CSS/length /fr/docs/CSS/letter-spacing /fr/docs/Web/CSS/letter-spacing /fr/docs/CSS/line-height /fr/docs/Web/CSS/line-height -/fr/docs/CSS/linear-gradient /fr/docs/orphaned/Web/CSS/linear-gradient() +/fr/docs/CSS/linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/CSS/list-style /fr/docs/Web/CSS/list-style /fr/docs/CSS/list-style-image /fr/docs/Web/CSS/list-style-image /fr/docs/CSS/list-style-position /fr/docs/Web/CSS/list-style-position @@ -3463,8 +3463,6 @@ /fr/docs/Web/API/AnimationEvent.elapsedTime /fr/docs/Web/API/AnimationEvent/elapsedTime /fr/docs/Web/API/AnimationEvent.pseudoElement /fr/docs/Web/API/AnimationEvent/pseudoElement /fr/docs/Web/API/AudioContext/createGain /fr/docs/Web/API/BaseAudioContext/createGain -/fr/docs/Web/API/Body /fr/docs/orphaned/Web/API/Body -/fr/docs/Web/API/Body/json /fr/docs/orphaned/Web/API/Body/json /fr/docs/Web/API/ByteString /fr/docs/Web/JavaScript/Reference/Global_Objects/String /fr/docs/Web/API/CSSMatrix /fr/docs/Web/API/DOMMatrix /fr/docs/Web/API/Canvas_API/Tutoriel_canvas /fr/docs/Web/API/Canvas_API/Tutorial @@ -3494,7 +3492,6 @@ /fr/docs/Web/API/DOMLocator /fr/docs/orphaned/Web/API/DOMLocator /fr/docs/Web/API/DOMTokenList/DOMTokenList.add() /fr/docs/Web/API/DOMTokenList/add /fr/docs/Web/API/DOMUserData /fr/docs/orphaned/Web/API/DOMUserData -/fr/docs/Web/API/Detecting_device_orientation /fr/docs/orphaned/Web/API/Detecting_device_orientation /fr/docs/Web/API/DeviceOrientationEvent.absolute /fr/docs/Web/API/DeviceOrientationEvent/absolute /fr/docs/Web/API/DeviceRotationRate /fr/docs/Web/API/DeviceMotionEventRotationRate /fr/docs/Web/API/DeviceRotationRate/alpha /fr/docs/Web/API/DeviceMotionEventRotationRate/alpha @@ -3885,7 +3882,7 @@ /fr/docs/Web/CSS/-moz-copy /fr/docs/Web/CSS/cursor /fr/docs/Web/CSS/-moz-grab /en-US/docs/Web/CSS/cursor#grab /fr/docs/Web/CSS/-moz-grabbing /en-US/docs/Web/CSS/cursor#grab -/fr/docs/Web/CSS/-moz-linear-gradient /fr/docs/orphaned/Web/CSS/linear-gradient() +/fr/docs/Web/CSS/-moz-linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/Web/CSS/-moz-margin-end /fr/docs/Web/CSS/margin-inline-end /fr/docs/Web/CSS/-moz-margin-start /fr/docs/Web/CSS/margin-inline-start /fr/docs/Web/CSS/-moz-opacity /fr/docs/Web/CSS/opacity @@ -3921,7 +3918,6 @@ /fr/docs/Web/CSS/:before /fr/docs/Web/CSS/::before /fr/docs/Web/CSS/:matches /fr/docs/Web/CSS/:is /fr/docs/Web/CSS/:visited_et_la_vie_privée /fr/docs/Web/CSS/Privacy_and_the_:visited_selector -/fr/docs/Web/CSS/@media/prefers-reduced-transparency /fr/docs/orphaned/Web/CSS/@media/prefers-reduced-transparency /fr/docs/Web/CSS/@media/scan /fr/docs/orphaned/Web/CSS/@media/scan /fr/docs/Web/CSS/@page/bleed /fr/docs/orphaned/Web/CSS/@page/bleed /fr/docs/Web/CSS/@page/marks /fr/docs/orphaned/Web/CSS/@page/marks @@ -4211,8 +4207,8 @@ /fr/docs/Web/CSS/image-set /fr/docs/orphaned/Web/CSS/image-set() /fr/docs/Web/CSS/image-set() /fr/docs/orphaned/Web/CSS/image-set() /fr/docs/Web/CSS/imagefunction /fr/docs/orphaned/Web/CSS/image() -/fr/docs/Web/CSS/linear-gradient /fr/docs/orphaned/Web/CSS/linear-gradient() -/fr/docs/Web/CSS/linear-gradient() /fr/docs/orphaned/Web/CSS/linear-gradient() +/fr/docs/Web/CSS/linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() +/fr/docs/Web/CSS/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/Web/CSS/longueur /fr/docs/Web/CSS/length /fr/docs/Web/CSS/marks /fr/docs/orphaned/Web/CSS/@page/marks /fr/docs/Web/CSS/max /fr/docs/Web/CSS/max() @@ -5628,7 +5624,6 @@ /fr/docs/Web/XSLT/Éléments/element /fr/docs/Web/XSLT/Element/element /fr/docs/WebAPI /fr/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 /fr/docs/WebAPI/Battery_Status /fr/docs/Web/API/Battery_status_API -/fr/docs/WebAPI/Detecting_device_orientation /fr/docs/orphaned/Web/API/Detecting_device_orientation /fr/docs/WebAPI/Network_Information /fr/docs/Web/API/Network_Information_API /fr/docs/WebAPI/Pointer_Lock /fr/docs/Web/API/Pointer_Lock_API /fr/docs/WebAPI/Proximity /fr/docs/Web/API/Proximity_Events @@ -5852,6 +5847,9 @@ /fr/docs/XSLT_dans_Gecko:Génération_de_HTML /fr/docs/Web/API/XSLTProcessor/Generating_HTML /fr/docs/Zoom_pleine_page /fr/docs/Mozilla/Firefox/Releases/3/Full_page_zoom /fr/docs/appendChild /fr/docs/Web/API/Node/appendChild +/fr/docs/conflicting/Learn/CSS/Building_blocks/Selectors /fr/docs/Learn/CSS/Building_blocks/Selectors +/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction /fr/docs/Learn/CSS/CSS_layout/Introduction +/fr/docs/conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446 /fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting /fr/docs/document.createElement /fr/docs/Web/API/Document/createElement /fr/docs/document.getElementById /fr/docs/Web/API/Document/getElementById /fr/docs/en /en-US/ @@ -5861,6 +5859,7 @@ /fr/docs/inset-inline-end /fr/docs/Web/CSS/inset-inline-end /fr/docs/inset-inline-start /fr/docs/Web/CSS/inset-inline-start /fr/docs/orphaned/Introduction_à_la_cryptographie_à_clef_publique/Signatures_numériques /fr/docs/Glossary/Signature/Security +/fr/docs/orphaned/Web/CSS/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/orphaned/Web/Guide/Events/Media_events /fr/docs/Web/Events#media /fr/docs/setAttribute /fr/docs/Web/API/Element/setAttribute /fr/docs/toSource /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object/toSource diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 7dc80ddcb4..32fd0e5e7c 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -42534,13 +42534,6 @@ "BenoitL" ] }, - "conflicting/Learn/CSS/Building_blocks/Selectors": { - "modified": "2020-07-16T22:25:39.574Z", - "contributors": [ - "SphinxKnight", - "Oliviermoz" - ] - }, "conflicting/Learn/CSS/Building_blocks/Selectors_9bc80fea302c91cd60fb72c4e83c83e9": { "modified": "2019-03-24T00:11:21.423Z", "contributors": [ @@ -42583,12 +42576,6 @@ "BenoitL" ] }, - "conflicting/Learn/CSS/CSS_layout/Introduction": { - "modified": "2020-07-16T22:25:40.392Z", - "contributors": [ - "SphinxKnight" - ] - }, "conflicting/Learn/CSS/First_steps": { "modified": "2019-03-23T23:43:26.964Z", "contributors": [ @@ -42749,12 +42736,6 @@ "SphinxKnight" ] }, - "conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446": { - "modified": "2020-07-16T22:22:37.801Z", - "contributors": [ - "SphinxKnight" - ] - }, "conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682": { "modified": "2020-07-16T22:22:41.315Z", "contributors": [ @@ -44106,26 +44087,6 @@ "SphinxKnight" ] }, - "orphaned/Web/API/Body": { - "modified": "2020-10-15T22:00:04.273Z", - "contributors": [ - "Voulto", - "Retroscilo", - "Arzak656", - "SphinxKnight", - "vqrs" - ] - }, - "orphaned/Web/API/Body/json": { - "modified": "2020-10-15T22:00:00.599Z", - "contributors": [ - "SphinxKnight", - "jdvauguet", - "enkienki", - "MaximeSarrato", - "Nithramir" - ] - }, "orphaned/Web/API/ChildNode": { "modified": "2020-10-15T21:28:06.168Z", "contributors": [ @@ -44179,18 +44140,6 @@ "loella16" ] }, - "orphaned/Web/API/Detecting_device_orientation": { - "modified": "2019-03-23T23:28:22.437Z", - "contributors": [ - "mgagnon555", - "a-mt", - "tregagnon", - "Fredchat", - "FredB", - "achraf", - "darnuria" - ] - }, "orphaned/Web/API/DocumentTouch": { "modified": "2019-03-23T22:50:40.193Z", "contributors": [ @@ -44465,12 +44414,6 @@ "Aaaaaaa" ] }, - "orphaned/Web/CSS/@media/prefers-reduced-transparency": { - "modified": "2020-10-15T22:20:20.333Z", - "contributors": [ - "SphinxKnight" - ] - }, "orphaned/Web/CSS/@media/scan": { "modified": "2020-10-15T21:47:29.526Z", "contributors": [ @@ -44522,28 +44465,6 @@ "SphinxKnight" ] }, - "orphaned/Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:57:11.795Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight", - "edspeedy", - "Javarome", - "lhapaipai", - "Guillaume.Wulpes", - "Simplexible", - "wizAmit", - "slayslot", - "prayash", - "Nazcange", - "nicofrand", - "teoli", - "Golmote", - "tregagnon", - "FredB", - "thenew" - ] - }, "orphaned/Web/CSS/paint()": { "modified": "2020-11-16T12:34:32.285Z", "contributors": [ diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 6f8167820f..0000000000 --- a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Les propriétés CSS et comment s'en servir -slug: conflicting/Learn/CSS/Building_blocks/Selectors -tags: - - Beginner - - CSS - - CodingScripting - - NeedsActiveLearning -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Learn/CSS/CSS_properties -original_slug: Apprendre/CSS/Les_propriétés_CSS ---- -
{{IncludeSubnav("/fr/Apprendre")}}
-
-

{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.

-
- - - - - - - - - - - - -
Prérequis :Comprendre les bases de {{Glossary("HTML")}}, des éléments HTML, et comment lier des documents HTML aux feuilles de style CSS.
Objectif :Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.
- -

Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).

- -

La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.

- -
p {
-   font-family: "Times New Roman", georgia, sans-serif;
-   font-size: 24px;
-}
- -

Dans l'exemple précédent,  p est un sélecteur qui applique un style à tous les éléments {{HTMLElement("p")}} en même temps. Les propriétés CSS font-family et font-size sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.

- -

Il existe plus de 250 propriétés pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. Vous pouvez néanmoins contribuer.

- -

Aller plus loin

- -

Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.

- -

Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les sélecteurs les plus précis prend le dessus sur les règles avec les sélecteurs plus basiques.

- -

Le sélecteur d'élément

- -

Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.

- -

Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :

- -
<h1>Je suis un exemple.</h1>
-<p>Dans cet exemple, je suis un paragraphe.</p>
-<p>Et je suis un second paragraphe.</p>
-
- -

Dans la règle CSS qui suit, le sélecteur d'élement p applique les styles définis à tous les éléments {{HTMLElement("p")}} de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).

- -
p {
-  font-family: "Helvetica", Arial, sans-serif;
-  font-size  : 12px;
-}
- -

La prochaine règle CSS s'applique uniquement à l'élément {{HTMLElement("h1")}}. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.

- -
h1 {
-  font-size  : 24px;
-  font-weight: bold;
-}
- -

La règle CSS suivante applique les styles demandés à la fois aux éléments {{HTMLElement("h1")}} et aux éléments {{HTMLElement("p")}}, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des h1 et à celui des paragraphes.

- -
h1, p {
-  color: darkmagenta;
-}
- -

Voici le résultat obtenu avec ce code :

- -

{{EmbedLiveSample('Le_sélecteur_d\'élément')}}

- -

Le sélecteur id

- -

L'attribut id d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur id est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.

- -

Pour notre prochain exemple, prenons le fragment de code HTML suivant :

- -
<p id="coucou">Coucou monde !</p>
- -

La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur id, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (id). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe,  {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.

- -
#coucou {
-  text-align: center;
-  border    : 1px solid black;
-  padding   : 8px;
-}
- -

Voici le résultat final obtenu:

- -

{{EmbedLiveSample('Le_sélecteur_id')}}

- -

Le sélecteur class

- -

À l'intérieur du code HTML, l'attribut class permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.

- -

Pour notre prochain exemple, analysez le fragment de code HTML suivant :

- -
<h1 class="coucou">Coucou !</h1>
-<p class="coucou salut">Retrouvons-nous !</p>
-<p class="salut">Et déplaçons des montagnes.</p>
-
- -

Nous allons appliquer une règle CSS à tous les éléments contenant la classe coucou. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.

- -
.coucou {
-  font-style: italic;
-}
- -

En voici une autre pour tous les éléments avec la classe salut. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.

- -
.salut {
-  text-decoration: line-through;
-}
- -

Voici le résultat obtenu :

- -

{{EmbedLiveSample('Le_sélecteur_class')}}

- -

Prochaines étapes

- -

Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en apprendre davantage sur le formatage du texte ou commencer à explorer nos tutoriels CSS dès maintenant.

diff --git a/files/fr/conflicting/learn/css/css_layout/introduction/index.html b/files/fr/conflicting/learn/css/css_layout/introduction/index.html deleted file mode 100644 index 4c66ddf62d..0000000000 --- a/files/fr/conflicting/learn/css/css_layout/introduction/index.html +++ /dev/null @@ -1,405 +0,0 @@ ---- -title: La disposition en CSS -slug: conflicting/Learn/CSS/CSS_layout/Introduction -tags: - - Apprendre - - CSS -translation_of: Learn/CSS/CSS_layout/Introduction -translation_of_original: Learn/CSS/Basics/Layout -original_slug: Apprendre/CSS/Introduction_à_CSS/La_disposition ---- -

{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}

- -

Pour organiser un document en positionnant ses éléments pour que la forme corresponde aux spécifications, on utilisera différentes propriétés CSS afin d'organiser la disposition des élément. CSS fournit de nombreux mécanismes pour organiser la disposition du contenu d'un document et les techniques modernes sont suffisamment complexes pour être décrites dans des articles séparés. Dans cet article, nous verrons les techniques de base, utilisées depuis plusieurs années.

- -

Pour organiser correctement la disposition d'un document avec CSS, il y a quelques notions qu'il est préférable de connaître. Le concept le plus important est le flux du texte {{Glossary("HTML")}} et les façons dont on peut le modifier. Ces concepts clés sont essentiels et tous les mécanismes liés à la disposition feront référence à ce qui est expliqué ici..

- -

Le flux

- -

Simplifié à l'extrême, un document HTML est un document texte organisé avec des {{Glossary("balise","balises")}}. Dans un tel document, le texte « coule » sur les différentes lignes. Autrement dit, le texte est affiché dans le sens de lecture (de gauche à droite pour les langages latins comme le français ou l'italien) et est fragmenté automatiquement pour passer à la ligne à chaque fois que le texte atteint le bord du document.

- -

- -

- -

Chaque {{Glossary("élément")}} du document pourra modifier ce flux de texte :

- - - -

Les catégories d'affichage des éléments

- -

CSS est utilisé pour définir la façon dont un élément HTML se comporte dans ce flux et comment il s'y inscrit. Le comportement d'un élément est défini avec la propriété {{cssxref('display')}}. Cette propriété peut prendre plusieurs valeurs mais voyons ici les quatre valeurs les plus importantes :

- -
-
none
-
Cette valeur retire l'élément du flux, comme si l'élément et son contenu n'existaient pas.
-
inline
-
Cette valeur rend l'élément transparent au sens où il s'inscrit dans le flux de texte global, il est donc associé au texte l'environnant.
-
block
-
Cette valeur cassera le flux de texte pour insérer l'élément. Cela provoquera donc un saut de ligne avant et après. Le contenu de cet élément ne fait donc pas partie du flux global et suit donc les contraintes de l'élément définies par le modèle de boîte.
-
inline-block
-
Cette valeur est en quelque sorte un intermédiaire entre inline et block. Comme avec inline, les boîtes seront placées dans le flux global mais , comme avec block, le contenu ne fera pas partie du texte environnant..
-
- -

Prenons un exemple.

- -

Voici le code HTML qui sera utilisé :

- -
<p class="none">
-  1. Je suis un chat noir,
-  <span>qui marche sous l'échelle </span>
-  et qui casse des miroirs.
-</p>
-
-<p class="inline">
-  2. Je suis un chat noir,
-  <span>qui marche sous l'échelle </span>
-  et qui casse des miroirs.
-</p>
-
-<p class="block">
-  3. Je suis un chat noir,
-  <span>wqui marche sous l'échelle </span>
-  et qui casse des miroirs.
-</p>
-
-<p class="inline-block">
-  4. Je suis un chat noir,
-  <span>qui marche sous l'échelle </span>
-  et qui casse des miroirs.
-</p>
-
- -

On appliquera la feuille de style CSS suivante :

- -
span {
-  width: 5em;
-  background: yellow;
-}
-
-.none span         { display: none;         }
-.inline span       { display: inline;       }
-.block span        { display: block;        }
-.inline-block span { display: inline-block; }
- -

Cela fournira le résultat suivant :

- -

{{EmbedLiveSample("Les_catégories_d'affichage_des_éléments", '100%', '300px')}}

- -

Modifier le flux

- -

En utilisant la propriété display, vous pouvez déjà modifier le flux. Il est toutefois possible d'aller plus loin.

- -

La disposition du texte

- -

En fin de compte, un document n'est qu'un long flux de texte et CSS fournit de nombreuses propriétés pour gérer la disposition du texte. La disposition du texte regroupe tout ce qui touche aux règles des sauts de ligne et à la façon dont le texte est positionné par rapport à la ligne de base naturelle.

- -

Ces propriétés sont : {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}} et {{cssxref("word-wrap")}}.

- -

À l'exception de text-align et de text-indent, les autres propriétés ont des effets plutôt subtils sur le texte. Quant à vertical-align, il est souvent utilisé avec des boîtes en mode inline-block.

- -

Là encore, un exemple vaut mieux qu'un long discours.

- -

HTML :

- -
<p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
-<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
-
- -

CSS :

- -
.format {
-  /* On « tire » la première ligne sur
-     une distance de 2em */
-  text-indent: -2em;
-
-  /* Il faut compenser l'indentation négative
-     si on veut éviter que du texte saute et
-     pour garder l'ensemble du texte dans la
-     boîte de l'élément */
-  padding-left: 2em;
-
-  /* Le texte est aligné par rapport aux deux
-     bords et l'espace entre les mots est ajusté
-     pour le remplissage de la ligne */
-  text-align: justify;
-
-  /* La dernière ligne de texte du bloc est
-     centrée*/
-  -moz-text-align-last: center;
-       text-align-last: center;
-
-  /* Plutôt que le saut de ligne se fasse entre deux mots,
-     il peut être fait en découpant un mot, selon les règles
-     de la langue utilisée. Cela permet de découper le texte
-     clairement avec un trait d'union. Si cela ne vous
-     importe pas, vous pouvez utiliser word-break ou
-     word-wrap à la place  */
-  -webkit-hyphens: auto;
-     -moz-hyphens: auto;
-      -ms-hyphens: auto;
-          hyphens: auto;
-}
- -
-

Note : Comme vous avez pu le voir, certaines propriétés sont écrites plusieurs fois avec un préfixe. Certaines propriétés sont expérimentales pour certains navigateurs et doivent donc être préfixées, c'est une bonne pratique que de les utiliser préfixées tant qu'elles sont expérimentales, tout en fournissant le nom de la propriété standard à la fin afin d'avoir la meilleure rétrocompatibilité possible.

-
- -

Le résultat obtenu sera :

- -

{{EmbedLiveSample('La_disposition_du_texte', '100%', '350')}}

- -
-

Note : L'astuce utilisée pour compenser l'indentation négative est une astuce assez courante. Tout propriété qui accepte une longueur peut accepter une valeur négative. En jouant avec les valeurs négatives et en les compensant avec d'autres propriétés, il est possible de produire des effets visuels très intéressants, notamment quand on manipule les propriétés liées au modèle de boîte.

-
- -

Le flottement

- -

C'est une chose que de gérer du texte mais on va également vouloir positionner une boîte dans le document. Pour commencer, il faut gérer les boîtes flottantes. Les boîtes flottantes sont toujours attachées au flux global de texte mais le texte « coulera » autour. Si cela vous paraît, prenons un exemple.

- -

Le flottement simple

- -

HTML :

- -
<div>
-  <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p>
-  <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p>
-</div>
- -

CSS :

- -
.excerpt {
-  /* Une boîte flottante agira comme un bloc
-     quelle que soit la valeur de display */
-  display: block;
-
-  /* La boîte flottera à gauche ce qui signifie
-     qu'elle sera sur la partie gauche du bloc
-     englobant et que le texte « coulera » sur sa
-     droite. */
-  float: left;
-
-  /* Il est nécessaire de déclarer une largeur pour
-     une boîte flottante. Si on ne le fait pas, la
-     largeur sera calculée automatiquement et occupera
-     autant d'espace que possible. Cela aurait eu le
-     même effet qu'un bloc ordinaire. */
-  width: 40%;
-
-  /* On définit une marge à droite et en bas pour éviter
-     que le texte qui flotte autour soit collé à celui de
-     la boîte */
-  margin: 0 1em 1em 0;
-
-  /* On rend la boîte flottante plus visible avec une
-     oucleur d'arrière-plan */
-  background: lightgrey;
-
-  /* Puisque l'arrière-plan est opaque, on ajoute un écart
-     entre le contenu et les bords de la boîte */
-  padding: 1em;
-}
- -

Ces éléments permettront d'avoir :

- -

{{ EmbedLiveSample('Le_flottement_simple', '100%', '280') }}

- -

Organiser une disposition avec le flottement

- -

La méthode précédente est simple et illustre comment manipuler le flux. Il est possible d'aller plus loin et d'organiser l'ensemble de la disposition du document avec. Les boîtes flottantes dans une direction donnée s'empilent horizontalement, cela permet de créer très facilement des lignes de boîtes. Les boîtes qui sont des blocs forment s'empilent elles sous forme de colonnes.

- -

Là encore, illustrons le point avec un exemple.

- -

HTML :

- -
<div class="layout">
-  <div class="row">
-    <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p>
-    <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p>
-  </div>
-  <div class="row">
-    <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p>
-  </div>
-  <div class="row">
-    <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p>
-    <p class="cell size33">
-      "Ding, dong!"<br>
-      "A quarter past," said Scrooge, counting.<br>
-      "Ding, dong!"<br>
-      "Half-past!" said Scrooge.<br>
-      "Ding, dong!"<br>
-      "A quarter to it," said Scrooge.
-    </p>
-    <p class="cell size33">
-      "Ding, dong!"<br>
-      "The hour itself," said Scrooge, triumphantly, "and nothing else!"<br>
-      He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn.
-    </p>
-  </div>
-</div>
- -

CSS :

- -
/* Le conteneur principal pour la disposition */
-.layout {
-  /* On ajoute un arrière-plan pour le rendre
-     visible */
-  background: lightgrey;
-
-  /* On ajoute un léger interstice pour harmoniser
-     la distance entre le contenu des cellules et
-     la bordure du conteneur principal */
-  padding   : 0.5em;
-}
-
-/* Ici, on empêche les boîtes flottantes de
-   dépasser d'un conteneur (ce qui peut arriver
-   si le conteneur est vide car il aura alors
-   une hauteur nulle). Avec overflow
-   hidden, la boîte flottante ne passera pas à
-   travers et la boîte parente sera agrandie
-   pour éviter un dépassement de la boîte.  */
-.row {
-  overflow: hidden;
-}
-
-/* Chaque cellule sera une boîte flottante à gauche */
-.cell {
-  float : left;
-
-  /* On ajoute du padding pour créer un écart visuel
-     entre les cellules */
-  padding   : 0.5em;
-
-  /* Étant donné qu'on ajoute du padding, il faut
-     s'assurer que cela ne touchera pas la largeur
-     de la boîte. */
-  box-sizing: border-box;
-
-  /* Comme la marge ne peut pas être contrôlée par
-     la propriété box-sizing, on s'assure d'en
-     avoir aucune appliquée ici. */
-  margin    : 0;
-}
-
-/* Voici les tailles appliquées aux boîtes */
-.size33  { width:  33%; } /* Pas un tiers mais presque */
-.size50  { width:  50%; } /* Une moitié */
-.size100 { width: 100%; } /* Une ligne */
- -

Cela donnera le résultat suivant :

- -

{{EmbedLiveSample('Organiser_une_disposition_avec_le_flottement', '100%', '520')}}

- -

De nombreux frameworks CSS utilisent ces méthodes de boîtes flottantes. C'est une technique robuste et connue mais qui a ses limites : tout doit être géré avec le flux, il n'est pas possible de gérer un ordre arbitraire pour les boîtes, de gérer des dimensionnements variables et il est impossible de centrer verticalement des éléments. Nous vous encourageons à poursuivre la réflexion, les boîtes flottantes sont étudiées depuis longtemps (article en anglais) et constituent une des solutions les plus robustes pour gérer une disposition simple, compatible avec les navigateurs historiques.

- -

Si vous souhaitez en savoir plus sur les subtilités des boîtes flottantes, nous vous invitons à lire All about float (en anglais) par Chris Coyer.

- -

Le positionnement

- -

Si les boîtes flottantes font partie du flux, il existe un autre mécanisme qui permet d'organiser une disposition en extrayant les boîtes du flux : le positionnement CSS. Le positionnement fonctionne en définissant un contexte de positionnement grâce à la propriété {{cssxref("position")}} puis en permettant aux boites de se positionner en utilisant les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}.

- -

La propriété {{cssxref("position")}} peut prendre quatre valeurs différentes :

- -
-
static
-
La valeur par défaut pour tous les éléments : ils font partie du flux et on ne définit pas un contexte de positionnement spécifique.
-
relative
-
Avec cette valeur, les éléments font toujours partie du flux mais peuvent être déplacés visuellement avec les valeurs des propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Ces propriétés définissent le contexte de positionnement des éléments fils.
-
absolute
-
Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Le point de position 0,0  représente le coin en haut à gauche de l'élément parent le plus proche qui définit un contexte de positionnement autre que static. S'il n'y a pas de tel parent, la position 0,0 représente le coin en haut à gauche du document.
-
fixed
-
Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. La position 0,0 représente le coin en haut à gauche de fenêtre du navigateur ({{Glossary("viewport")}}).
-
- -

Les boîtes positionnées de cette façon peuvent s'empiler les unes sur les autres. Dans ce cas, il est possible de changer l'ordre d'empilement grâce à la propriété {{cssxref("z-index")}}.

- -

Une dernière fois, prenons un exemple pour illustrer le concept.

- -

Le code HTML pour le document sera :

- -
<p>
-  The curtains of his bed were drawn aside, I tell you, by a hand. Not the curtains at his feet, nor the curtains at his back, but those to which his face was addressed. The curtains of his bed were drawn aside; and Scrooge, starting up into a half-recumbent attitude, found himself face to face with the unearthly visitor who drew them: as close to it as I am now to you, and I am standing in the spirit at your elbow.
-  <span class="topleft">1</span>
-</p>
-<p class="relative">
-  It was a strange figure--like a child: yet not so like a child as like an old man, viewed through some supernatural medium, which gave him the appearance of having receded from the view, and being diminished to a child's proportion. Its hair, which hung about its neck and down its back, was white as if with age; and yet the face had not a wrinkle in it, and the tenderest bloom was on the skin. The arms were very long and muscular; the hands the same, as if its hold were of uncommon strength. Its legs and feet, most delicately formed, were, like those upper members, bare. It wore a tunic of the purest white; and round its waist was bound a lustrous belt, the sheen of which was beautiful. It held a branch of fresh green holly in its hand; and, in singular contradiction of that wintry emblem, had its dress trimmed with summer flowers. But the strangest thing about it was, that from the crown of its head there sprung a bright clear jet of light, by which all this was visible; and which was doubtless the occasion of its using, in its duller moments, a great extinguisher for a cap, which it now held under its arm.
-  <span class="topleft">2</span>
-  <span class="stackdown">3</span>
-  <span class="stackup">4</span>
-</p>
- -

La feuille de style CSS sera :

- -
p {
-  margin: 1em
-}
-
-span {
-  font       : 2em sans-serif;
-  width      : 6rem;
-
-  /* Avoir la hauteur de l'élément et la hauteur
-     de la ligne avec la même valeur permet de
-     centrer verticalement une ligne de texte. */
-  height     : 6rem;
-  line-height: 6rem;
-
-  text-align : center;
-  background : rgba(0, 255, 255, 0.8);
-}
-
-.relative {
-  position: relative;
-}
-
-/* Tous les éléments de la classe "topleft"
-   sont positionnés dans le coin en haut à
-   gauche de leur parent dans le contexte
-   de positionnement */
-.topleft {
-  position: absolute;
-  top     : 0;
-  left    : 0;
-}
-
-.stackup {
-  position: absolute;
-  top     : 37%;
-  left    : 62%;
-
-  /* Tous les éléments de la classe "stackup"
-     sont placés au-dessus des éléments dont
-     le z-index est inférieur à 2 dans le même
-     contexte de positionnement. */
-  z-index : 2;
-}
-
-.stackdown {
-  position: absolute;
-  top     : 50%;
-  left    : 66%;
-
-  /* Tous les éléments de la classe "stackdown"
-     sont placés sous les éléments dont le
-     z-index est supérieur à 1 dans le même
-     contexte de positionnement. */
-  z-index : 1;
-}
-
- -

La combinaison de ces deux éléments donnera le résultat suivant :

- -

{{EmbedLiveSample('Le_positionnement', '100%', '400')}}

- -

Bien que le positionnement CSS ne soit pas réellement utile pour complètement organiser une disposition, il est généralement judicieux pour obtenir certains effets liés à la navigation, aux bulles d'informations, etc. C'est un mécanisme que vous rencontrerez fréquemment et nous vous encourageons donc à vous familiariser avec. Parmi les ressources qui existent par ailleurs, nous vous conseillons particulièrement de lire l'article CSS positioning 101 (en anglais), de Noah Stokes.

- -

La suite

- -

Le flux, les boîtes flottantes et le positionnement CSS sont les bases qui vous permettront d'approfondir la création d'une disposition en CSS. Suite à cette série d'articles sur les concepts théoriques de CSS, vous connaissez tout ce qu'il faut pour exploiter au mieux CSS. Après ce vernis théorique, vous pouvez aborder les aspects pratiques de CSS. Si vous souhaitez approfondir les concepts sur la disposition et découvrir les autres mécanismes à ce sujet, vous pouvez consulter les articles sur : les tableaux, l'organisation à plusieurs colonnes et la disposition avec les boîtes flexibles (flexbox).

- -

{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}

diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html deleted file mode 100644 index 2b074bec26..0000000000 --- a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Identifier et expliquer des abréviations avec HTML -slug: >- - conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446 -tags: - - Beginner - - HTML - - Learn - - OpenPractices -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable -original_slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations ---- -
-

HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre à indiquer des abréviations et des acronymes avec HTML.
- -

À propos des abréviations

- -

Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « National Aeronautics and Space Administration ».

- -

Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :

- -
L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.
- -
-

Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.

-
- -

L'élément <abbr>

- -

L'élément HTML abbreviation (pour abréviation en anglais) ({{HTMLElement("abbr")}}) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.

- -
-

Note : Si vous entendez parler de l'élément <acronym>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les {{Glossary("navigateur","navigateurs")}} pourraient arrêter de le supporter à tout moment.

-
- -
<p>Pouvez-vous m'envoyer les documents <abbr>SVP</abbr> ?</p>
- -

Il est possible d'épeler les abréviations grâce à l'attribut title de l'élément :

- -
<p>Pouvez-vous m'envoyer les documents <abbr title="s'il vous plaît">SVP</abbr> ?</p>
- -

Quand faut-il renseigner l'attribut title ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.

- -
-

Note : Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut title que celui de l'élément <abbr>.

-
- -

Grâce à {{glossary("CSS")}}, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut title dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :

- -

{{EmbedLiveSample("L'élément_<abbr>",'100%',90)}}

- -
-

Important : Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut title. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de title. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec title.

-
- -

Exercice

- -

Afin de mieux connaître l'élément {{HTMLElement('abbr')}}, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <abbr> et épelez les avec l'attribut title. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans le glossaire.

- - - -

{{EmbedLiveSample('Exercice','100%',220)}}

- -

En savoir plus

- - diff --git a/files/fr/glossary/css_selector/index.html b/files/fr/glossary/css_selector/index.html index ed038c9715..b5cd5760da 100644 --- a/files/fr/glossary/css_selector/index.html +++ b/files/fr/glossary/css_selector/index.html @@ -13,60 +13,61 @@ original_slug: Glossaire/Sélecteur_CSS ---

Un sélecteur CSS est la partie de la règle CSS qui désigne les éléments d'un document concernés par la règle. Les éléments correspondants auront le style spécifié par la règle qui leur est appliqué.

+

Exemple

Considérez ce code CSS :

-
p {
-  color: green;
-}
+
p {
+  color: green;
+}
 
-div.warning {
-  width: 100%;
-  border: 2px solid yellow;
-  color: white;
-  background-color: darkred;
-  padding:  0.8em 0.8em 0.6em;
-}
+div.warning {
+  width: 100%;
+  border: 2px solid yellow;
+  color: white;
+  background-color: darkred;
+  padding:  0.8em 0.8em 0.6em;
+}
 
-#customized {
-  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
-}

+#customized {
+  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
+}

Les sélecteurs sont ici "p" (qui applique la couleur verte au texte de tout élément {{HTMLElement ("p")}}), "div.warning" (qui fait que tout élément {{HTMLElement ("div")}} appartenant à la {{Glossary ("Class", "classe CSS")}} "warning" ressemble à une boîte d'avertissement) et "#customized", qui définit la police de base de l'élément avec l'ID "customized" à 16 -pixel Lucida Grande ou l'une des polices de secours.

Nous pouvons ensuite appliquer ce CSS à du HTML, tel que :

-
<p>This is happy text.</p>
+
<p>This is happy text.</p>
 
-<div class="warning">
+<div class="warning">
   Be careful! There are wizards present, and they are quick to anger!
-</div>
+</div>
 
-<div id="customized">
-  <p>This is happy text.</p>
+<div id="customized">
+  <p>This is happy text.</p>
 
-  <div class="warning">
+  <div class="warning">
     Be careful! There are wizards present, and they are quick to anger!
-  </div>
-</div>

+  </div>
+</div>

Le contenu de la page résultant ressemble à ceci:

-

{{EmbedLiveSample("glossary-selector-details", 640, 210)}}

+

{{EmbedLiveSample("Exemple", 640, 210)}}

Pour approfondir

Culture générale