From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- files/fr/web/css/--_star_/index.html | 2 +- .../fr/web/css/-moz-context-properties/index.html | 2 +- files/fr/web/css/-moz-float-edge/index.html | 2 +- .../css/-moz-force-broken-image-icon/index.html | 7 +- .../css/-moz-outline-radius-bottomleft/index.html | 2 +- .../css/-moz-outline-radius-bottomright/index.html | 2 +- .../web/css/-moz-outline-radius-topleft/index.html | 2 +- .../css/-moz-outline-radius-topright/index.html | 2 +- files/fr/web/css/-moz-outline-radius/index.html | 6 +- files/fr/web/css/-moz-user-focus/index.html | 4 +- files/fr/web/css/-webkit-box-reflect/index.html | 10 +- files/fr/web/css/-webkit-line-clamp/index.html | 2 +- .../fr/web/css/-webkit-mask-attachment/index.html | 2 +- .../fr/web/css/-webkit-text-fill-color/index.html | 5 +- .../web/css/-webkit-text-stroke-color/index.html | 9 +- .../web/css/-webkit-text-stroke-width/index.html | 3 +- files/fr/web/css/-webkit-text-stroke/index.html | 9 +- .../fr/web/css/@counter-style/fallback/index.html | 2 +- files/fr/web/css/@counter-style/index.html | 2 +- files/fr/web/css/@counter-style/range/index.html | 3 +- files/fr/web/css/@counter-style/system/index.html | 22 +- .../web/css/@font-face/ascent-override/index.html | 2 +- .../web/css/@font-face/descent-override/index.html | 2 +- .../fr/web/css/@font-face/font-display/index.html | 2 +- .../fr/web/css/@font-face/font-stretch/index.html | 4 +- files/fr/web/css/@font-face/font-style/index.html | 8 +- files/fr/web/css/@font-feature-values/index.html | 16 +- files/fr/web/css/@keyframes/index.html | 10 +- .../css/@media/-moz-device-pixel-ratio/index.html | 10 +- .../fr/web/css/@media/-ms-high-contrast/index.html | 4 +- .../@media/-webkit-device-pixel-ratio/index.html | 9 +- .../web/css/@media/-webkit-transform-3d/index.html | 3 +- files/fr/web/css/@media/aspect-ratio/index.html | 65 +- files/fr/web/css/@media/forced-colors/index.html | 2 +- .../web/css/@media/prefers-color-scheme/index.html | 8 +- .../css/@media/prefers-reduced-motion/index.html | 11 +- files/fr/web/css/@media/shape/index.html | 2 +- files/fr/web/css/@page/index.html | 8 +- files/fr/web/css/@page/size/index.html | 2 +- files/fr/web/css/@supports/index.html | 6 +- files/fr/web/css/@viewport/index.html | 2 +- files/fr/web/css/_colon_-moz-first-node/index.html | 4 +- files/fr/web/css/_colon_-moz-last-node/index.html | 4 +- .../web/css/_colon_-moz-only-whitespace/index.html | 6 +- .../web/css/_colon_-moz-window-inactive/index.html | 4 +- files/fr/web/css/_colon_active/index.html | 4 +- files/fr/web/css/_colon_autofill/index.html | 4 +- files/fr/web/css/_colon_blank/index.html | 2 +- files/fr/web/css/_colon_checked/index.html | 104 ++- files/fr/web/css/_colon_default/index.html | 2 +- files/fr/web/css/_colon_dir/index.html | 11 +- files/fr/web/css/_colon_empty/index.html | 16 +- files/fr/web/css/_colon_enabled/index.html | 2 - files/fr/web/css/_colon_first-child/index.html | 2 +- files/fr/web/css/_colon_first-of-type/index.html | 2 +- files/fr/web/css/_colon_first/index.html | 14 +- files/fr/web/css/_colon_focus-visible/index.html | 2 - files/fr/web/css/_colon_fullscreen/index.html | 2 +- files/fr/web/css/_colon_host()/index.html | 2 +- files/fr/web/css/_colon_host-context()/index.html | 2 +- files/fr/web/css/_colon_host/index.html | 4 +- files/fr/web/css/_colon_hover/index.html | 10 +- files/fr/web/css/_colon_in-range/index.html | 14 +- files/fr/web/css/_colon_indeterminate/index.html | 12 +- files/fr/web/css/_colon_is/index.html | 14 +- files/fr/web/css/_colon_last-of-type/index.html | 2 +- files/fr/web/css/_colon_left/index.html | 4 +- files/fr/web/css/_colon_not/index.html | 16 +- files/fr/web/css/_colon_nth-child/index.html | 2 - files/fr/web/css/_colon_nth-of-type/index.html | 26 +- files/fr/web/css/_colon_only-child/index.html | 4 +- files/fr/web/css/_colon_only-of-type/index.html | 9 +- files/fr/web/css/_colon_out-of-range/index.html | 12 +- .../fr/web/css/_colon_placeholder-shown/index.html | 19 +- files/fr/web/css/_colon_read-only/index.html | 4 +- files/fr/web/css/_colon_right/index.html | 4 +- files/fr/web/css/_colon_target/index.html | 4 +- .../css/_doublecolon_-moz-progress-bar/index.html | 4 - .../_doublecolon_-webkit-progress-bar/index.html | 6 +- .../_doublecolon_-webkit-progress-value/index.html | 6 +- files/fr/web/css/_doublecolon_backdrop/index.html | 10 +- files/fr/web/css/_doublecolon_before/index.html | 16 +- .../fr/web/css/_doublecolon_cue-region/index.html | 4 +- files/fr/web/css/_doublecolon_cue/index.html | 2 +- .../web/css/_doublecolon_first-letter/index.html | 20 +- .../fr/web/css/_doublecolon_first-line/index.html | 16 +- files/fr/web/css/_doublecolon_marker/index.html | 2 +- .../fr/web/css/_doublecolon_placeholder/index.html | 16 +- files/fr/web/css/_doublecolon_selection/index.html | 13 +- .../web/css/adjacent_sibling_combinator/index.html | 2 - files/fr/web/css/align-content/index.html | 22 +- files/fr/web/css/align-items/index.html | 29 +- files/fr/web/css/align-self/index.html | 2 - files/fr/web/css/all/index.html | 10 - files/fr/web/css/alpha-value/index.html | 18 +- files/fr/web/css/angle/index.html | 12 +- files/fr/web/css/animation-delay/index.html | 2 - files/fr/web/css/animation-direction/index.html | 2 - files/fr/web/css/animation-duration/index.html | 12 +- files/fr/web/css/animation-fill-mode/index.html | 2 - .../web/css/animation-iteration-count/index.html | 2 - files/fr/web/css/animation-name/index.html | 2 - files/fr/web/css/animation-play-state/index.html | 2 - .../web/css/animation-timing-function/index.html | 24 +- files/fr/web/css/animation/index.html | 13 +- files/fr/web/css/appearance/index.html | 2 - files/fr/web/css/attr()/index.html | 18 +- files/fr/web/css/attribute_selectors/index.html | 2 +- files/fr/web/css/backface-visibility/index.html | 2 - files/fr/web/css/background-attachment/index.html | 6 +- files/fr/web/css/background-blend-mode/index.html | 2 - files/fr/web/css/background-clip/index.html | 2 - files/fr/web/css/background-color/index.html | 2 - files/fr/web/css/background-image/index.html | 10 +- files/fr/web/css/background-origin/index.html | 6 +- files/fr/web/css/background-position-x/index.html | 8 +- files/fr/web/css/background-position-y/index.html | 8 +- files/fr/web/css/background-position/index.html | 11 +- files/fr/web/css/background-repeat/index.html | 10 +- files/fr/web/css/background-size/index.html | 42 +- files/fr/web/css/background/index.html | 8 +- files/fr/web/css/basic-shape/index.html | 23 +- files/fr/web/css/blend-mode/index.html | 418 +++++----- files/fr/web/css/block-size/index.html | 2 - files/fr/web/css/border-block-end-color/index.html | 2 - files/fr/web/css/border-block-end-style/index.html | 2 - files/fr/web/css/border-block-end-width/index.html | 2 - files/fr/web/css/border-block-end/index.html | 2 - .../fr/web/css/border-block-start-color/index.html | 2 - .../fr/web/css/border-block-start-style/index.html | 2 - .../fr/web/css/border-block-start-width/index.html | 2 - files/fr/web/css/border-block-start/index.html | 2 - files/fr/web/css/border-bottom-color/index.html | 2 - .../web/css/border-bottom-left-radius/index.html | 6 +- .../web/css/border-bottom-right-radius/index.html | 6 +- files/fr/web/css/border-bottom-style/index.html | 36 +- files/fr/web/css/border-bottom-width/index.html | 32 +- files/fr/web/css/border-bottom/index.html | 2 - files/fr/web/css/border-collapse/index.html | 2 - files/fr/web/css/border-color/index.html | 2 - files/fr/web/css/border-image-outset/index.html | 2 - files/fr/web/css/border-image-repeat/index.html | 2 - files/fr/web/css/border-image-slice/index.html | 6 +- files/fr/web/css/border-image-source/index.html | 2 - files/fr/web/css/border-image-width/index.html | 2 - files/fr/web/css/border-image/index.html | 2 - .../fr/web/css/border-inline-end-color/index.html | 2 - .../fr/web/css/border-inline-end-style/index.html | 2 - .../fr/web/css/border-inline-end-width/index.html | 2 - files/fr/web/css/border-inline-end/index.html | 2 - .../web/css/border-inline-start-color/index.html | 2 - .../web/css/border-inline-start-width/index.html | 2 - files/fr/web/css/border-inline-start/index.html | 2 - files/fr/web/css/border-left-color/index.html | 2 - files/fr/web/css/border-left-style/index.html | 36 +- files/fr/web/css/border-left-width/index.html | 32 +- files/fr/web/css/border-left/index.html | 2 - files/fr/web/css/border-radius/index.html | 26 +- files/fr/web/css/border-right-color/index.html | 2 - files/fr/web/css/border-right-style/index.html | 36 +- files/fr/web/css/border-right-width/index.html | 32 +- files/fr/web/css/border-right/index.html | 2 - files/fr/web/css/border-spacing/index.html | 4 +- files/fr/web/css/border-style/index.html | 35 +- files/fr/web/css/border-top-color/index.html | 2 - files/fr/web/css/border-top-left-radius/index.html | 6 +- .../fr/web/css/border-top-right-radius/index.html | 6 +- files/fr/web/css/border-top-style/index.html | 36 +- files/fr/web/css/border-top-width/index.html | 32 +- files/fr/web/css/border-top/index.html | 2 - files/fr/web/css/border-width/index.html | 32 +- files/fr/web/css/border/index.html | 8 +- files/fr/web/css/bottom/index.html | 14 +- files/fr/web/css/box-align/index.html | 4 +- files/fr/web/css/box-decoration-break/index.html | 26 +- files/fr/web/css/box-direction/index.html | 8 +- files/fr/web/css/box-flex-group/index.html | 10 +- files/fr/web/css/box-flex/index.html | 8 +- files/fr/web/css/box-lines/index.html | 12 +- files/fr/web/css/box-ordinal-group/index.html | 12 +- files/fr/web/css/box-orient/index.html | 8 +- files/fr/web/css/box-pack/index.html | 10 +- files/fr/web/css/box-shadow/index.html | 18 +- files/fr/web/css/box-sizing/index.html | 8 +- files/fr/web/css/break-after/index.html | 2 +- files/fr/web/css/break-before/index.html | 2 +- files/fr/web/css/calc()/index.html | 14 +- files/fr/web/css/caption-side/index.html | 2 - files/fr/web/css/caret-color/index.html | 6 +- files/fr/web/css/clamp()/index.html | 8 +- files/fr/web/css/clear/index.html | 12 +- files/fr/web/css/clip-path/index.html | 14 +- files/fr/web/css/clip/index.html | 5 +- files/fr/web/css/color-adjust/index.html | 4 +- files/fr/web/css/color/index.html | 2 - files/fr/web/css/color_value/index.html | 80 +- files/fr/web/css/column-count/index.html | 2 - files/fr/web/css/column-fill/index.html | 2 - files/fr/web/css/column-gap/index.html | 8 +- files/fr/web/css/column-rule-color/index.html | 2 - files/fr/web/css/column-rule-style/index.html | 2 - files/fr/web/css/column-rule-width/index.html | 2 - files/fr/web/css/column-rule/index.html | 6 +- files/fr/web/css/column-span/index.html | 2 - files/fr/web/css/column-width/index.html | 2 - files/fr/web/css/columns/index.html | 2 - .../fr/web/css/compositing_and_blending/index.html | 5 - files/fr/web/css/contain/index.html | 2 +- files/fr/web/css/containing_block/index.html | 36 +- files/fr/web/css/content/index.html | 12 +- files/fr/web/css/counter()/index.html | 26 +- files/fr/web/css/counter-increment/index.html | 2 - files/fr/web/css/counter-reset/index.html | 2 - files/fr/web/css/counters()/index.html | 18 +- files/fr/web/css/cross-fade()/index.html | 35 +- .../detecting_css_animation_support/index.html | 4 +- files/fr/web/css/css_animations/index.html | 4 - files/fr/web/css/css_animations/tips/index.html | 4 +- .../css_animations/using_css_animations/index.html | 10 +- .../border-image_generator/index.html | 16 +- .../border-radius_generator/index.html | 16 +- .../box-shadow_generator/index.html | 16 +- .../web/css/css_backgrounds_and_borders/index.html | 2 - .../resizing_background_images/index.html | 16 +- .../fr/web/css/css_basic_user_interface/index.html | 2 - .../index.html | 6 +- .../index.html | 2 +- .../box_alignment_in_flexbox/index.html | 6 +- .../box_alignment_in_grid_layout/index.html | 22 +- .../index.html | 6 +- files/fr/web/css/css_box_alignment/index.html | 38 +- files/fr/web/css/css_box_model/index.html | 10 - files/fr/web/css/css_charsets/index.html | 2 - files/fr/web/css/css_color/index.html | 4 - .../css/css_colors/color_picker_tool/index.html | 13 +- .../basic_concepts_of_multicol/index.html | 2 +- .../handling_content_breaks_in_multicol/index.html | 2 +- .../handling_overflow_in_multicol/index.html | 4 +- files/fr/web/css/css_columns/index.html | 4 - .../css/css_columns/spanning_columns/index.html | 2 +- .../web/css/css_columns/styling_columns/index.html | 2 +- .../using_multi-column_layouts/index.html | 19 +- files/fr/web/css/css_conditional_rules/index.html | 2 - files/fr/web/css/css_containment/index.html | 2 +- files/fr/web/css/css_counter_styles/index.html | 37 +- files/fr/web/css/css_device_adaptation/index.html | 2 - files/fr/web/css/css_display/index.html | 4 - .../aligning_items_in_a_flex_container/index.html | 40 +- .../backwards_compatibility_of_flexbox/index.html | 32 +- .../basic_concepts_of_flexbox/index.html | 18 +- .../index.html | 16 +- .../fr/web/css/css_flexible_box_layout/index.html | 6 - .../mastering_wrapping_of_flex_items/index.html | 4 +- .../ordering_flex_items/index.html | 20 +- .../index.html | 14 +- .../typical_use_cases_of_flexbox/index.html | 14 +- .../index.html | 20 +- .../flow_layout_and_overflow/index.html | 2 +- .../flow_layout_and_writing_modes/index.html | 6 +- .../in_flow_and_out_of_flow/index.html | 2 +- files/fr/web/css/css_flow_layout/index.html | 2 +- .../intro_to_formatting_contexts/index.html | 2 +- files/fr/web/css/css_fonts/index.html | 32 +- .../css/css_fonts/opentype_fonts_guide/index.html | 12 +- .../css/css_fonts/variable_fonts_guide/index.html | 6 +- files/fr/web/css/css_fragmentation/index.html | 2 - files/fr/web/css/css_generated_content/index.html | 2 - .../auto-placement_in_css_grid_layout/index.html | 84 +- .../basic_concepts_of_grid_layout/grid2.jpg | Bin 0 -> 14188 bytes .../basic_concepts_of_grid_layout/grid3.jpg | Bin 0 -> 16414 bytes .../basic_concepts_of_grid_layout/index.html | 80 +- .../screen_shot_2017-03-17_at_14.47.48.png | Bin 0 -> 19519 bytes .../7_block_axis.png | Bin 0 -> 6902 bytes .../box_alignment_in_css_grid_layout/index.html | 92 +-- .../index.html | 43 +- .../css_grid_layout_and_accessibility/index.html | 8 +- .../index.html | 67 +- .../css_grid_layout/grid_template_areas/index.html | 52 +- files/fr/web/css/css_grid_layout/index.html | 12 +- .../layout_using_named_grid_lines/index.html | 62 +- .../line-based_placement_with_css_grid/index.html | 71 +- .../index.html | 64 +- .../relationship_of_grid_layout/index.html | 62 +- .../fr/web/css/css_grid_layout/subgrid/index.html | 10 +- files/fr/web/css/css_images/index.html | 6 - .../css/css_images/using_css_gradients/index.html | 112 +-- .../consistent_list_indentation/index.html | 12 +- files/fr/web/css/css_lists_and_counters/index.html | 2 - .../basic_concepts/index.html | 26 +- .../floating_and_positioning/index.html | 4 +- files/fr/web/css/css_logical_properties/index.html | 52 +- .../margins_borders_padding/index.html | 8 +- .../css/css_logical_properties/sizing/index.html | 6 +- files/fr/web/css/css_masking/index.html | 2 - files/fr/web/css/css_miscellaneous/index.html | 2 - files/fr/web/css/css_motion_path/index.html | 2 - files/fr/web/css/css_namespaces/index.html | 2 - files/fr/web/css/css_overflow/index.html | 6 - files/fr/web/css/css_pages/index.html | 6 - files/fr/web/css/css_positioning/index.html | 2 - .../adding_z-index/index.html | 8 +- .../understanding_z_index/index.html | 2 +- .../stacking_and_float/index.html | 16 +- .../stacking_context_example_1/index.html | 11 +- .../stacking_context_example_2/index.html | 9 +- .../stacking_context_example_3/index.html | 10 +- .../stacking_without_z-index/index.html | 10 +- .../the_stacking_context/index.html | 11 +- .../fr/web/css/css_properties_reference/index.html | 4 +- files/fr/web/css/css_ruby/index.html | 2 - .../css/css_scroll_snap/basic_concepts/index.html | 4 +- .../css/css_scroll_snap/browser_compat/index.html | 6 +- files/fr/web/css/css_scroll_snap/index.html | 2 +- files/fr/web/css/css_scroll_snap_points/index.html | 2 - files/fr/web/css/css_scrollbars/index.html | 6 +- files/fr/web/css/css_selectors/index.html | 24 +- .../index.html | 6 +- .../fr/web/css/css_shapes/basic_shapes/index.html | 16 +- .../web/css/css_shapes/from_box_values/index.html | 8 +- files/fr/web/css/css_shapes/index.html | 6 +- .../css_shapes/overview_of_css_shapes/index.html | 2 +- .../css/css_shapes/shapes_from_images/index.html | 2 +- files/fr/web/css/css_table/index.html | 2 - files/fr/web/css/css_text/index.html | 2 - files/fr/web/css/css_text_decoration/index.html | 2 - files/fr/web/css/css_transforms/index.html | 2 - .../css_transforms/using_css_transforms/index.html | 8 +- files/fr/web/css/css_transitions/index.html | 2 - .../using_css_transitions/index.html | 855 ++------------------- files/fr/web/css/css_types/index.html | 10 +- files/fr/web/css/css_values_and_units/index.html | 18 +- files/fr/web/css/css_variables/index.html | 2 - files/fr/web/css/css_writing_modes/index.html | 2 - .../css/cssom_view/coordinate_systems/index.html | 5 +- files/fr/web/css/cssom_view/index.html | 2 - files/fr/web/css/cursor/index.html | 8 +- files/fr/web/css/custom-ident/index.html | 2 +- files/fr/web/css/dimension/index.html | 4 +- files/fr/web/css/display-inside/index.html | 14 +- files/fr/web/css/display-legacy/index.html | 3 +- files/fr/web/css/display-outside/index.html | 4 +- files/fr/web/css/display/index.html | 10 +- files/fr/web/css/easing-function/index.html | 413 +++++----- files/fr/web/css/element()/index.html | 10 +- files/fr/web/css/empty-cells/index.html | 2 - files/fr/web/css/env()/index.html | 18 +- files/fr/web/css/filter-function/blur()/index.html | 6 +- .../css/filter-function/brightness()/index.html | 6 +- .../web/css/filter-function/contrast()/index.html | 6 +- .../css/filter-function/drop-shadow()/index.html | 12 +- .../web/css/filter-function/grayscale()/index.html | 6 +- .../css/filter-function/hue-rotate()/index.html | 6 +- .../fr/web/css/filter-function/invert()/index.html | 6 +- .../web/css/filter-function/opacity()/index.html | 2 - .../web/css/filter-function/saturate()/index.html | 6 +- .../fr/web/css/filter-function/sepia()/index.html | 6 +- files/fr/web/css/filter/index.html | 138 ++-- files/fr/web/css/filter_effects/index.html | 4 - files/fr/web/css/fit-content/index.html | 7 +- files/fr/web/css/flex-basis/index.html | 18 +- files/fr/web/css/flex-direction/index.html | 2 - files/fr/web/css/flex-flow/index.html | 10 +- files/fr/web/css/flex-grow/index.html | 6 +- files/fr/web/css/flex-shrink/index.html | 6 +- files/fr/web/css/flex-wrap/index.html | 15 +- files/fr/web/css/flex/index.html | 43 +- files/fr/web/css/float/index.html | 25 +- files/fr/web/css/font-family/index.html | 13 +- files/fr/web/css/font-feature-settings/index.html | 11 +- files/fr/web/css/font-kerning/index.html | 2 +- files/fr/web/css/font-optical-sizing/index.html | 4 +- files/fr/web/css/font-size-adjust/index.html | 2 +- files/fr/web/css/font-size/index.html | 28 +- files/fr/web/css/font-smooth/index.html | 6 +- files/fr/web/css/font-stretch/index.html | 52 +- files/fr/web/css/font-style/index.html | 14 +- files/fr/web/css/font-synthesis/index.html | 6 +- .../fr/web/css/font-variant-alternates/index.html | 15 +- files/fr/web/css/font-variant-caps/index.html | 8 +- files/fr/web/css/font-variant-ligatures/index.html | 2 - files/fr/web/css/font-variant-numeric/index.html | 2 - files/fr/web/css/font-variant/index.html | 2 - .../fr/web/css/font-variation-settings/index.html | 17 +- files/fr/web/css/font-weight/index.html | 16 +- files/fr/web/css/font/index.html | 4 +- files/fr/web/css/forced-color-adjust/index.html | 3 +- files/fr/web/css/frequency/index.html | 2 +- files/fr/web/css/gap/index.html | 20 +- .../web/css/general_sibling_combinator/index.html | 8 +- files/fr/web/css/gradient/index.html | 12 +- files/fr/web/css/grid-area/index.html | 10 +- files/fr/web/css/grid-auto-columns/index.html | 12 +- files/fr/web/css/grid-auto-flow/index.html | 4 +- files/fr/web/css/grid-auto-rows/index.html | 12 +- files/fr/web/css/grid-column-end/index.html | 12 +- files/fr/web/css/grid-column-start/index.html | 12 +- files/fr/web/css/grid-column/index.html | 10 +- files/fr/web/css/grid-row-end/index.html | 12 +- files/fr/web/css/grid-row-start/index.html | 14 +- files/fr/web/css/grid-row/index.html | 10 +- files/fr/web/css/grid-template-areas/index.html | 4 +- files/fr/web/css/grid-template-columns/index.html | 20 +- files/fr/web/css/grid-template-rows/index.html | 14 +- files/fr/web/css/grid-template/index.html | 16 +- files/fr/web/css/grid/index.html | 10 +- files/fr/web/css/height/index.html | 2 - files/fr/web/css/hyphens/index.html | 14 +- files/fr/web/css/image-orientation/index.html | 12 +- files/fr/web/css/image-rendering/index.html | 6 +- files/fr/web/css/image/index.html | 16 +- files/fr/web/css/index.html | 73 +- files/fr/web/css/inline-size/index.html | 2 - .../web/css/inline_formatting_context/index.html | 4 +- files/fr/web/css/integer/index.html | 8 +- files/fr/web/css/isolation/index.html | 2 - files/fr/web/css/justify-content/index.html | 16 +- files/fr/web/css/justify-items/index.html | 8 +- files/fr/web/css/justify-self/index.html | 10 +- .../breadcrumb_navigation/index.html | 6 +- files/fr/web/css/layout_cookbook/card/index.html | 14 +- .../layout_cookbook/center_an_element/index.html | 8 +- .../css/layout_cookbook/column_layouts/index.html | 14 +- .../cookbook_template/index.html | 12 +- .../layout_cookbook/contribute_a_recipe/index.html | 10 +- .../css/layout_cookbook/grid_wrapper/index.html | 16 +- files/fr/web/css/layout_cookbook/index.html | 2 +- .../list_group_with_badges/index.html | 14 +- .../css/layout_cookbook/media_objects/index.html | 16 +- .../web/css/layout_cookbook/pagination/index.html | 10 +- .../layout_cookbook/split_navigation/index.html | 6 +- .../css/layout_cookbook/sticky_footers/index.html | 6 +- files/fr/web/css/left/index.html | 2 - files/fr/web/css/length-percentage/index.html | 4 +- files/fr/web/css/length/index.html | 46 +- files/fr/web/css/letter-spacing/index.html | 2 - files/fr/web/css/line-height-step/index.html | 6 +- files/fr/web/css/line-height/index.html | 10 +- files/fr/web/css/list-style-position/index.html | 5 +- files/fr/web/css/list-style-type/index.html | 482 ++---------- files/fr/web/css/list-style/index.html | 2 - .../list_of_proprietary_css_features/index.html | 25 +- files/fr/web/css/margin-block-end/index.html | 4 +- files/fr/web/css/margin-block-start/index.html | 2 - files/fr/web/css/margin-bottom/index.html | 2 - files/fr/web/css/margin-inline-end/index.html | 2 - files/fr/web/css/margin-inline-start/index.html | 2 - files/fr/web/css/margin-left/index.html | 4 +- files/fr/web/css/margin-right/index.html | 4 +- files/fr/web/css/margin-top/index.html | 2 - files/fr/web/css/margin/index.html | 16 +- files/fr/web/css/mask-border-outset/index.html | 2 +- files/fr/web/css/mask-border-repeat/index.html | 2 +- files/fr/web/css/mask-border-slice/index.html | 10 +- files/fr/web/css/mask-border-source/index.html | 2 +- files/fr/web/css/mask-border-width/index.html | 2 +- files/fr/web/css/mask-border/index.html | 42 +- files/fr/web/css/mask-clip/index.html | 2 +- files/fr/web/css/mask-composite/index.html | 12 +- files/fr/web/css/mask-mode/index.html | 4 +- files/fr/web/css/mask-origin/index.html | 2 +- files/fr/web/css/mask-position/index.html | 12 +- files/fr/web/css/mask-repeat/index.html | 6 +- files/fr/web/css/mask-size/index.html | 8 +- files/fr/web/css/mask-type/index.html | 100 +-- files/fr/web/css/mask/index.html | 8 +- files/fr/web/css/max()/index.html | 10 +- files/fr/web/css/max-block-size/index.html | 2 - files/fr/web/css/max-height/index.html | 2 - files/fr/web/css/max-inline-size/index.html | 2 - files/fr/web/css/max-width/index.html | 4 +- files/fr/web/css/media_queries/index.html | 2 - .../media_queries/using_media_queries/index.html | 16 +- files/fr/web/css/microsoft_extensions/index.html | 8 - files/fr/web/css/min()/index.html | 12 +- files/fr/web/css/min-block-size/index.html | 2 - files/fr/web/css/min-height/index.html | 4 +- files/fr/web/css/min-inline-size/index.html | 2 - files/fr/web/css/min-width/index.html | 2 - files/fr/web/css/minmax()/index.html | 4 +- files/fr/web/css/mix-blend-mode/index.html | 16 +- files/fr/web/css/mozilla_extensions/index.html | 184 ++--- files/fr/web/css/number/index.html | 6 +- files/fr/web/css/object-fit/index.html | 2 - files/fr/web/css/object-position/index.html | 2 - files/fr/web/css/offset-anchor/index.html | 10 +- files/fr/web/css/offset-distance/index.html | 5 +- files/fr/web/css/offset-path/index.html | 13 +- files/fr/web/css/offset-position/index.html | 12 +- files/fr/web/css/opacity/index.html | 2 - files/fr/web/css/order/index.html | 12 +- files/fr/web/css/outline-color/index.html | 2 - files/fr/web/css/outline-offset/index.html | 2 - files/fr/web/css/outline-style/index.html | 16 +- files/fr/web/css/outline-width/index.html | 2 - files/fr/web/css/outline/index.html | 6 +- .../guide_to_scroll_anchoring/index.html | 4 +- files/fr/web/css/overflow-block/index.html | 4 +- files/fr/web/css/overflow-inline/index.html | 4 +- files/fr/web/css/overflow-wrap/index.html | 11 +- files/fr/web/css/overflow-x/index.html | 4 - files/fr/web/css/overflow-y/index.html | 4 - files/fr/web/css/overflow/index.html | 97 ++- files/fr/web/css/overscroll-behavior-x/index.html | 2 +- files/fr/web/css/overscroll-behavior-y/index.html | 2 +- files/fr/web/css/overscroll-behavior/index.html | 2 +- files/fr/web/css/padding-block-end/index.html | 2 - files/fr/web/css/padding-block-start/index.html | 2 - files/fr/web/css/padding-bottom/index.html | 2 - files/fr/web/css/padding-inline-end/index.html | 2 - files/fr/web/css/padding-inline-start/index.html | 2 - files/fr/web/css/padding-inline/index.html | 6 +- files/fr/web/css/padding-left/index.html | 2 - files/fr/web/css/padding-right/index.html | 2 - files/fr/web/css/padding-top/index.html | 2 - files/fr/web/css/padding/index.html | 8 +- files/fr/web/css/page-break-after/index.html | 4 +- files/fr/web/css/page-break-before/index.html | 4 +- files/fr/web/css/page-break-inside/index.html | 4 +- files/fr/web/css/paint-order/index.html | 2 +- files/fr/web/css/path()/index.html | 2 +- files/fr/web/css/perspective-origin/index.html | 2 - files/fr/web/css/perspective/index.html | 2 - files/fr/web/css/place-content/index.html | 22 +- files/fr/web/css/place-items/index.html | 16 +- files/fr/web/css/place-self/index.html | 2 - files/fr/web/css/pointer-events/index.html | 6 +- files/fr/web/css/position/index.html | 18 +- files/fr/web/css/position_value/index.html | 8 +- files/fr/web/css/pseudo-classes/index.html | 8 +- files/fr/web/css/pseudo-elements/index.html | 6 +- files/fr/web/css/quotes/index.html | 4 +- files/fr/web/css/ratio/index.html | 12 +- files/fr/web/css/reference/index.html | 113 ++- files/fr/web/css/repeat()/index.html | 6 +- files/fr/web/css/resize/index.html | 6 +- files/fr/web/css/resolution/index.html | 16 +- files/fr/web/css/revert/index.html | 4 +- files/fr/web/css/right/index.html | 2 - files/fr/web/css/rotate/index.html | 2 +- files/fr/web/css/row-gap/index.html | 10 +- files/fr/web/css/ruby-align/index.html | 6 +- files/fr/web/css/ruby-position/index.html | 4 +- files/fr/web/css/scale/index.html | 2 +- .../web/css/scaling_of_svg_backgrounds/index.html | 97 +-- files/fr/web/css/scroll-behavior/index.html | 2 - .../fr/web/css/scroll-margin-block-end/index.html | 2 - .../web/css/scroll-margin-block-start/index.html | 3 - files/fr/web/css/scroll-margin-block/index.html | 2 - files/fr/web/css/scroll-margin-bottom/index.html | 4 - .../fr/web/css/scroll-margin-inline-end/index.html | 3 - .../web/css/scroll-margin-inline-start/index.html | 2 - files/fr/web/css/scroll-margin-left/index.html | 3 - files/fr/web/css/scroll-margin-right/index.html | 3 - files/fr/web/css/scroll-margin-top/index.html | 2 - files/fr/web/css/scroll-margin/index.html | 3 - .../fr/web/css/scroll-padding-block-end/index.html | 4 - .../web/css/scroll-padding-block-start/index.html | 4 - files/fr/web/css/scroll-padding-block/index.html | 3 - files/fr/web/css/scroll-padding-bottom/index.html | 4 - .../web/css/scroll-padding-inline-end/index.html | 3 - .../web/css/scroll-padding-inline-start/index.html | 4 - files/fr/web/css/scroll-padding-inline/index.html | 3 - files/fr/web/css/scroll-padding-left/index.html | 4 - files/fr/web/css/scroll-padding-right/index.html | 2 - files/fr/web/css/scroll-padding-top/index.html | 3 - files/fr/web/css/scroll-padding/index.html | 2 - files/fr/web/css/scroll-snap-align/index.html | 8 +- files/fr/web/css/scroll-snap-type/index.html | 2 - files/fr/web/css/scrollbar-color/index.html | 1 - files/fr/web/css/scrollbar-width/index.html | 3 - files/fr/web/css/shape-image-threshold/index.html | 6 +- files/fr/web/css/shape-margin/index.html | 2 - files/fr/web/css/shape-outside/index.html | 15 +- files/fr/web/css/shape/index.html | 24 +- files/fr/web/css/shorthand_properties/index.html | 36 +- files/fr/web/css/string/index.html | 12 +- files/fr/web/css/tab-size/index.html | 2 +- files/fr/web/css/table-layout/index.html | 2 - files/fr/web/css/text-align-last/index.html | 2 - files/fr/web/css/text-align/index.html | 4 +- files/fr/web/css/text-combine-upright/index.html | 2 +- files/fr/web/css/text-decoration-color/index.html | 2 - files/fr/web/css/text-decoration-line/index.html | 2 - .../fr/web/css/text-decoration-skip-ink/index.html | 5 +- files/fr/web/css/text-decoration-skip/index.html | 5 +- files/fr/web/css/text-decoration-style/index.html | 2 - .../web/css/text-decoration-thickness/index.html | 2 +- files/fr/web/css/text-decoration/index.html | 14 +- files/fr/web/css/text-emphasis-position/index.html | 6 +- files/fr/web/css/text-emphasis/index.html | 2 - files/fr/web/css/text-indent/index.html | 2 - files/fr/web/css/text-orientation/index.html | 4 +- files/fr/web/css/text-overflow/index.html | 311 +++----- files/fr/web/css/text-shadow/index.html | 17 +- files/fr/web/css/text-size-adjust/index.html | 4 +- files/fr/web/css/text-transform/index.html | 12 +- files/fr/web/css/text-underline-offset/index.html | 4 +- files/fr/web/css/time/index.html | 4 +- .../css/tools/linear-gradient_generator/index.html | 2 +- files/fr/web/css/top/index.html | 2 - files/fr/web/css/touch-action/index.html | 10 +- files/fr/web/css/transform-function/index.html | 84 +- .../web/css/transform-function/matrix()/index.html | 10 +- .../css/transform-function/matrix3d()/index.html | 16 +- .../transform-function/perspective()/index.html | 10 +- .../web/css/transform-function/rotate()/index.html | 14 +- .../css/transform-function/rotate3d()/index.html | 21 +- .../css/transform-function/rotatex()/index.html | 14 +- .../css/transform-function/rotatey()/index.html | 14 +- .../css/transform-function/rotatez()/index.html | 14 +- .../web/css/transform-function/scale()/index.html | 4 +- .../css/transform-function/scale3d()/index.html | 10 +- .../web/css/transform-function/scalex()/index.html | 8 +- .../web/css/transform-function/scaley()/index.html | 14 +- .../web/css/transform-function/scalez()/index.html | 8 +- .../web/css/transform-function/skew()/index.html | 14 +- .../web/css/transform-function/skewx()/index.html | 12 +- .../web/css/transform-function/skewy()/index.html | 10 +- .../css/transform-function/translate()/index.html | 14 +- .../transform-function/translate3d()/index.html | 14 +- .../css/transform-function/translatey()/index.html | 10 +- .../css/transform-function/translatez()/index.html | 14 +- files/fr/web/css/transform-origin/index.html | 393 ++++------ files/fr/web/css/transform-style/index.html | 2 - files/fr/web/css/transform/index.html | 12 +- files/fr/web/css/transition-delay/index.html | 288 ++----- files/fr/web/css/transition-duration/index.html | 279 +------ files/fr/web/css/transition-property/index.html | 10 +- .../web/css/transition-timing-function/index.html | 18 +- files/fr/web/css/transition/index.html | 2 - files/fr/web/css/translate/index.html | 2 +- files/fr/web/css/unicode-bidi/index.html | 4 +- files/fr/web/css/url()/index.html | 21 +- files/fr/web/css/used_value/index.html | 2 +- files/fr/web/css/user-modify/index.html | 6 +- files/fr/web/css/user-select/index.html | 2 +- .../web/css/using_css_custom_properties/index.html | 26 +- .../fr/web/css/value_definition_syntax/index.html | 8 +- files/fr/web/css/vertical-align/index.html | 2 - files/fr/web/css/viewport_concepts/index.html | 6 +- files/fr/web/css/visibility/index.html | 7 +- .../fr/web/css/visual_formatting_model/index.html | 20 +- files/fr/web/css/webkit_extensions/index.html | 18 +- files/fr/web/css/white-space/index.html | 2 - files/fr/web/css/widows/index.html | 2 +- files/fr/web/css/width/index.html | 22 +- files/fr/web/css/will-change/index.html | 16 +- files/fr/web/css/word-break/index.html | 2 - files/fr/web/css/word-spacing/index.html | 2 - files/fr/web/css/writing-mode/index.html | 4 +- files/fr/web/css/z-index/index.html | 6 +- files/fr/web/css/zoom/index.html | 4 +- 652 files changed, 3554 insertions(+), 6838 deletions(-) create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid2.jpg create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/grid3.jpg create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png create mode 100644 files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png diff --git a/files/fr/web/css/--_star_/index.html b/files/fr/web/css/--_star_/index.html index 99a4c1f7b0..456b7022d5 100644 --- a/files/fr/web/css/--_star_/index.html +++ b/files/fr/web/css/--_star_/index.html @@ -42,7 +42,7 @@ translation_of: Web/CSS/--*

CSS

-
:root {
+
:root {
   --premiere-couleur: #488cff;
   --seconde-couleur: #ffff8c;
 }
diff --git a/files/fr/web/css/-moz-context-properties/index.html b/files/fr/web/css/-moz-context-properties/index.html
index edda2fb4cc..c7cf7e321f 100644
--- a/files/fr/web/css/-moz-context-properties/index.html
+++ b/files/fr/web/css/-moz-context-properties/index.html
@@ -67,7 +67,7 @@ translation_of: Web/CSS/-moz-context-properties
 
Ici, l'attribut src de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <rect> est paramétré afin de récupérer les valeurs fill et stroke telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément <img> grâce aux mots-clés context-fill/context-stroke. On utilise aussi une couleur de secours pour le remplissage (fill) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.

 
 

-
Note : vous pouvez consulter un exemple complet sur notre dépôt Github.

+
Note : vous pouvez consulter un exemple complet sur notre dépôt Github.

 

 
 
Spécifications

diff --git a/files/fr/web/css/-moz-float-edge/index.html b/files/fr/web/css/-moz-float-edge/index.html
index 0d0eed3a7d..a81710c8d9 100644
--- a/files/fr/web/css/-moz-float-edge/index.html
+++ b/files/fr/web/css/-moz-float-edge/index.html
@@ -58,7 +58,7 @@ translation_of: Web/CSS/-moz-float-edge
 
 
HTML

 
-
<div class="box">
+
<div class="box">
    <p>
       Lorem ipsum dolor sit amet,
       consectetur adipiscing elit.
diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.html b/files/fr/web/css/-moz-force-broken-image-icon/index.html
index df4536f14d..58e1ca993b 100644
--- a/files/fr/web/css/-moz-force-broken-image-icon/index.html
+++ b/files/fr/web/css/-moz-force-broken-image-icon/index.html
@@ -19,7 +19,8 @@ translation_of: Web/CSS/-moz-force-broken-image-icon
 

  
{{cssxref("<integer>")}}

  
Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "alt", "#attr-alt")}}. 0 indique que seul l'attribut alt doit être affiché.
- 
Note : Même si la valeur est 1, l'attribut alt sera affiché. Voir ci-après.

+ 

+   
Note : Même si la valeur est 1, l'attribut alt sera affiché. Voir ci-après.

  

 

 
@@ -45,7 +46,9 @@ translation_of: Web/CSS/-moz-force-broken-image-icon
 
 
{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}

 
-
Note : Si -moz-force-broken-image-icon a la valeur 1 et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut alt sera masqué.

+

+  
Note : Si -moz-force-broken-image-icon a la valeur 1 et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut alt sera masqué.

+

 
 
Spécifications

 
diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html
index 13259534a0..4b4cbfb209 100644
--- a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html
+++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html
@@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-bottomleft
 
 
{{EmbedLiveSample("Exemples")}}

 
-

+

 
Note : Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.

 

 
diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.html b/files/fr/web/css/-moz-outline-radius-bottomright/index.html
index 831cb29e39..8c4e1a813a 100644
--- a/files/fr/web/css/-moz-outline-radius-bottomright/index.html
+++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.html
@@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-bottomright
 
 
{{EmbedLiveSample("Example")}}

 
-

+

 
Note : Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.

 

 
diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.html b/files/fr/web/css/-moz-outline-radius-topleft/index.html
index 28fef48dc0..825b0b8e08 100644
--- a/files/fr/web/css/-moz-outline-radius-topleft/index.html
+++ b/files/fr/web/css/-moz-outline-radius-topleft/index.html
@@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-topleft
 
 
{{EmbedLiveSample("Exemples")}}

 
-

+

 
Note : Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.

 

 
diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.html b/files/fr/web/css/-moz-outline-radius-topright/index.html
index 962f74ece2..df414e6d10 100644
--- a/files/fr/web/css/-moz-outline-radius-topright/index.html
+++ b/files/fr/web/css/-moz-outline-radius-topright/index.html
@@ -31,7 +31,7 @@ translation_of: Web/CSS/-moz-outline-radius-topright
 
 
{{EmbedLiveSample("Exemples")}}

 
-

+

 
Note : Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.

 

 
diff --git a/files/fr/web/css/-moz-outline-radius/index.html b/files/fr/web/css/-moz-outline-radius/index.html
index 4662069831..f91a602fcb 100644
--- a/files/fr/web/css/-moz-outline-radius/index.html
+++ b/files/fr/web/css/-moz-outline-radius/index.html
@@ -36,7 +36,9 @@ translation_of: Web/CSS/-moz-outline-radius
 
 
Valeurs

 
-
Note : Les valeurs pour les coefficients elliptiques et les valeurs de type <percentage> respectent la même syntaxe que pour {{cssxref("border-radius")}}.

+

+  
Note : Les valeurs pour les coefficients elliptiques et les valeurs de type <percentage> respectent la même syntaxe que pour {{cssxref("border-radius")}}.

+

 
 
Une, deux, trois ou quatre valeurs <outline-radius> dont chacune peut être de type :

 
@@ -93,7 +95,7 @@ translation_of: Web/CSS/-moz-outline-radius
 
 
{{EmbedLiveSample('Exemples', '200', '200')}}

 
-

+

 
Note : Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.

 

 
diff --git a/files/fr/web/css/-moz-user-focus/index.html b/files/fr/web/css/-moz-user-focus/index.html
index 76049ca339..62492eb50c 100644
--- a/files/fr/web/css/-moz-user-focus/index.html
+++ b/files/fr/web/css/-moz-user-focus/index.html
@@ -24,7 +24,9 @@ translation_of: Web/CSS/-moz-user-focus
 
 
En utilisant la valeur ignore, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation.

 
-
Note : Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément textbox en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du textbox et que l'élément reçoit le focus. On peut empêcher le textbox de prendre le focus clavier en passant son index de tabulation à -1, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements mousedown.

+

+  
Note : Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément textbox en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du textbox et que l'élément reçoit le focus. On peut empêcher le textbox de prendre le focus clavier en passant son index de tabulation à -1, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements mousedown.

+

 
 
Syntaxe

 
diff --git a/files/fr/web/css/-webkit-box-reflect/index.html b/files/fr/web/css/-webkit-box-reflect/index.html
index d84d50ceb8..856a9ca5b0 100644
--- a/files/fr/web/css/-webkit-box-reflect/index.html
+++ b/files/fr/web/css/-webkit-box-reflect/index.html
@@ -30,7 +30,9 @@ translation_of: Web/CSS/-webkit-box-reflect
 -webkit-box-reflect: unset;
 

 
-
Attention ! Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element", "element()")}}.

+

+  
Attention : Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.

+

 
 
Syntaxe

 
@@ -51,7 +53,7 @@ translation_of: Web/CSS/-webkit-box-reflect
 
 
Spécifications

 
-
Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element", "element()")}}.

+
Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element()", "element()")}}.

 
 
{{cssinfo}}

 
@@ -62,7 +64,7 @@ translation_of: Web/CSS/-webkit-box-reflect
 
Voir aussi

 
 
diff --git a/files/fr/web/css/-webkit-line-clamp/index.html b/files/fr/web/css/-webkit-line-clamp/index.html
index d869807051..26895d4690 100644
--- a/files/fr/web/css/-webkit-line-clamp/index.html
+++ b/files/fr/web/css/-webkit-line-clamp/index.html
@@ -16,7 +16,7 @@ translation_of: Web/CSS/-webkit-line-clamp
 
 
Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).

 
-

+

 
Note : Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification CSS Overflow Module Level 3 définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer -webkit-line-clamp.

 

 
diff --git a/files/fr/web/css/-webkit-mask-attachment/index.html b/files/fr/web/css/-webkit-mask-attachment/index.html
index 1a65e9de55..f278d89b0f 100644
--- a/files/fr/web/css/-webkit-mask-attachment/index.html
+++ b/files/fr/web/css/-webkit-mask-attachment/index.html
@@ -10,7 +10,7 @@ translation_of: Web/CSS/-webkit-mask-attachment
 ---
 
{{CSSRef}}{{Non-standard_header}}

 
-
Si la propriété {{cssxref("-webkit-mask-image")}} est définie, -webkit-mask-attachment permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.

+
Si la propriété {{cssxref("-webkit-mask-image")}} est définie, -webkit-mask-attachment permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.

 
 
/* Valeurs avec un mot-clé */
 -webkit-mask-attachment: scroll;
diff --git a/files/fr/web/css/-webkit-text-fill-color/index.html b/files/fr/web/css/-webkit-text-fill-color/index.html
index f0d8ef51c0..f00bc2ae33 100644
--- a/files/fr/web/css/-webkit-text-fill-color/index.html
+++ b/files/fr/web/css/-webkit-text-fill-color/index.html
@@ -41,7 +41,7 @@ translation_of: Web/CSS/-webkit-text-fill-color
 
 
CSS

 
-
p {
+
p {
   margin: 0;
   font-size: 3em;
   -webkit-text-fill-color: green;
@@ -74,8 +74,7 @@ translation_of: Web/CSS/-webkit-text-fill-color
    Définition initiale dans un standard.
   
   
-   Référence CSS Safari

-    '-webkit-text-fill-color' dans ce document.
+   Référence CSS Safari -webkit-text-fill-color' dans ce document.
    Documentation non-officielle, non-standard.
    Documentation initiale.
   
diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.html b/files/fr/web/css/-webkit-text-stroke-color/index.html
index 9ab30e149d..8717f6e1aa 100644
--- a/files/fr/web/css/-webkit-text-stroke-color/index.html
+++ b/files/fr/web/css/-webkit-text-stroke-color/index.html
@@ -57,14 +57,10 @@ translation_of: Web/CSS/-webkit-text-stroke-color
 }
 

 
-
 
 
Résultat

 
@@ -87,8 +83,7 @@ colorPicker.addEventListener("change", function(evt) {
    Définition initiale dans un standard.
   
   
-   Référence CSS Safari

-    '-webkit-text-stroke-color' dans ce document.
+   Référence CSS Safari -webkit-text-stroke-color dans ce document.
    Documentation non-officielle, non-standard.
    Documentation initiale.
   
diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.html b/files/fr/web/css/-webkit-text-stroke-width/index.html
index c79d9aad32..9e34011338 100644
--- a/files/fr/web/css/-webkit-text-stroke-width/index.html
+++ b/files/fr/web/css/-webkit-text-stroke-width/index.html
@@ -96,8 +96,7 @@ translation_of: Web/CSS/-webkit-text-stroke-width
    Définition initiale dans un standard.
   
   
-   Référence CSS Safari

-    '-webkit-text-stroke-width' dans ce document.
+   Référence CSS Safari -webkit-text-stroke-width dans ce document.
    Documentation non-officielle, non-standard.
    Documentation initiale.
   
diff --git a/files/fr/web/css/-webkit-text-stroke/index.html b/files/fr/web/css/-webkit-text-stroke/index.html
index 2f26e7941b..1b44d52d3b 100644
--- a/files/fr/web/css/-webkit-text-stroke/index.html
+++ b/files/fr/web/css/-webkit-text-stroke/index.html
@@ -12,7 +12,7 @@ translation_of: Web/CSS/-webkit-text-stroke
 
 
La propriété -webkit-text-stroke permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés {{cssxref("-webkit-text-stroke-width")}} et {{cssxref("-webkit-text-stroke-color")}}.

 
-
/* Valeurs de largeur et de couleur */
+
/* Valeurs de largeur et de couleur */
 -webkit-text-stroke: 4px navy;
 
 /* Valeurs globales */
@@ -40,7 +40,7 @@ translation_of: Web/CSS/-webkit-text-stroke
 
 
CSS

 
-
#exemple {
+
#exemple {
   font-size: 3em;
   margin: 0;
   -webkit-text-stroke: 2px red;
@@ -48,7 +48,7 @@ translation_of: Web/CSS/-webkit-text-stroke
 
 
HTML

 
-
<p id="exemple">Le contour de ce texte est rouge.</p>

+
<p id="exemple">Le contour de ce texte est rouge.</p>

 
 
Résultat

 
@@ -71,8 +71,7 @@ translation_of: Web/CSS/-webkit-text-stroke
    Définition initiale dans un standard.
   
   
-   Référence CSS Safari

-    '-webkit-text-stroke' dans ce document.
+   Référence CSS Safari -webkit-text-stroke dans ce document.
    Documentation non-officielle, non-standard.
    Documentation initiale.
   
diff --git a/files/fr/web/css/@counter-style/fallback/index.html b/files/fr/web/css/@counter-style/fallback/index.html
index a1ac0eea87..92c54c2c55 100644
--- a/files/fr/web/css/@counter-style/fallback/index.html
+++ b/files/fr/web/css/@counter-style/fallback/index.html
@@ -41,7 +41,7 @@ fallback: custom-gangnam-style;
 
 
HTML

 
-
<ul class="exemple">
+
<ul class="exemple">
   <li>Un</li>
   <li>Deux</li>
   <li>Trois</li>
diff --git a/files/fr/web/css/@counter-style/index.html b/files/fr/web/css/@counter-style/index.html
index c9c649758c..6a557b88d4 100644
--- a/files/fr/web/css/@counter-style/index.html
+++ b/files/fr/web/css/@counter-style/index.html
@@ -152,7 +152,7 @@ ul {
 
Notes relatives à Quantum

 
 
    
- 
  • Gecko permettait d'utiliser none comme valeur pour les descripteurs system et fallback de @counter-style alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé Stylo, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).
    • 
+ 
  • Gecko permettait d'utiliser none comme valeur pour les descripteurs system et fallback de @counter-style alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé Stylo, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).
    • 
 

 
 
Voir aussi

diff --git a/files/fr/web/css/@counter-style/range/index.html b/files/fr/web/css/@counter-style/range/index.html
index 29d5eeda87..4bc4ce55cd 100644
--- a/files/fr/web/css/@counter-style/range/index.html
+++ b/files/fr/web/css/@counter-style/range/index.html
@@ -46,8 +46,7 @@ range: infinite 6, 10 infinite;
  
auto

  
L'intervalle dépend du système choisi pour le compteur comme indiqué ci-avant.

  
[ [ | infinite ]{2} ]#

- 
Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé infinite est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste.

- 
Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.

+ 
Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé infinite est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste. Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.

 
 
 
Syntaxe formelle

diff --git a/files/fr/web/css/@counter-style/system/index.html b/files/fr/web/css/@counter-style/system/index.html
index 847ba6fa2f..07ba664616 100644
--- a/files/fr/web/css/@counter-style/system/index.html
+++ b/files/fr/web/css/@counter-style/system/index.html
@@ -38,31 +38,21 @@ system: extends decimal;
 
 

  
cyclic

- 
Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols")}}.

+ 
Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols()")}}.

  
fixed

  
Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur symbols. On peut éventuellement ajouter un entier (valeur {{cssxref("integer")}}) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est 1.

  
symbolic

  
Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur symbols. Ce système de compteur ne fonctionne que pour les valeurs positives.

  
alphabetic

- 
Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres a à z sont définies comme symbole dans un style de compteur dont le système est alphabetic, les 26 premières représentations du compteur seront a, b, etc. jusqu'à z (jusqu'ici, le comportement est identique à celui obtenu grâce à symbolic) mais ensuite, le système poursuivra avec aa, ab, ac, etc.

- 

+ 
Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres a à z sont définies comme symbole dans un style de compteur dont le système est alphabetic, les 26 premières représentations du compteur seront a, b, etc. jusqu'à z (jusqu'ici, le comportement est identique à celui obtenu grâce à symbolic) mais ensuite, le système poursuivra avec aa, ab, ac, etc.
  Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme 1, le suivant comme 2 et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.

  
numeric

- 
Les symboles sont interprétés comme les chiffres d'un système de notation positionnelle. Ce système est très proche de celui qu'on peut obtenir avec alphabetic sauf que, pour ce dernier, le premier symbole fourni par symbols sera interprété comme 1, le suivant  comme 2 et ainsi de suite alors que pour numeric, le premier symbole est interprété comme 0, le suivant comme 1, puis 2 etc.

- 

- Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec symbols. Le premier symbole qui est fourni sera interprété comme 0. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de 0 à 9 comme symboles, on obtiendra le même résultat qu'avec le système décimal.

+ 
Les symboles sont interprétés comme les chiffres d'un système de notation positionnelle. Ce système est très proche de celui qu'on peut obtenir avec alphabetic sauf que, pour ce dernier, le premier symbole fourni par symbols sera interprété comme 1, le suivant  comme 2 et ainsi de suite alors que pour numeric, le premier symbole est interprété comme 0, le suivant comme 1, puis 2 etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec symbols. Le premier symbole qui est fourni sera interprété comme 0. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de 0 à 9 comme symboles, on obtiendra le même résultat qu'avec le système décimal.

  
additive

- 
Ce système peut être utilisé pour représenter des systèmes de numérotations additives telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent.

- 

- Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide.

- 

- 
On voit dans l'exemple ci-après que range est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec decimal (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme upper-roman ou lower-roman afin d'éviter de réinventer la roue.

+ 
Ce système peut être utilisé pour représenter des systèmes de numérotations additives telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent. Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide. On voit dans l'exemple ci-après que range est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec decimal (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme upper-roman ou lower-roman afin d'éviter de réinventer la roue.
  

  
extends

- 
Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système extends et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé.

- 

- Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur symbols ou additive-symbols. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal.

- 
Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur lower-alpha mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir (a) (b) etc).

+ 
Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système extends et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé. Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur symbols ou additive-symbols. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal. Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur lower-alpha mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir (a) (b) etc).

 

 
 
Syntaxe formelle

@@ -334,5 +324,5 @@ system: extends decimal;
  
  • {{cssxref("list-style")}},
    • 
  
  • {{cssxref("list-style-image")}},
    • 
  
  • {{cssxref("list-style-position")}},
    • 
- 
  • {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.
    • 
+ 
  • {{cssxref("symbols()", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.
    • 
 
diff --git a/files/fr/web/css/@font-face/ascent-override/index.html b/files/fr/web/css/@font-face/ascent-override/index.html
index 54a738dcdc..dbbeb8eaa3 100644
--- a/files/fr/web/css/@font-face/ascent-override/index.html
+++ b/files/fr/web/css/@font-face/ascent-override/index.html
@@ -6,7 +6,7 @@ translation_of: 'Web/CSS/@font-face/ascent-override'
 ---
 
    {{CSSRef}}
    
 
-
    Le descripteur CSS ascent-override définit la mesure du jambage supérieur (ascendant) de la police (voir la définition de jambage). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.
    
+
    Le descripteur CSS ascent-override définit la mesure du jambage supérieur (ascendant) de la police (voir la définition de jambage). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.
    
 
 
    Syntaxe
    
 
diff --git a/files/fr/web/css/@font-face/descent-override/index.html b/files/fr/web/css/@font-face/descent-override/index.html
index 23655a5f02..6805fdd77f 100644
--- a/files/fr/web/css/@font-face/descent-override/index.html
+++ b/files/fr/web/css/@font-face/descent-override/index.html
@@ -6,7 +6,7 @@ translation_of: 'Web/CSS/@font-face/descent-override'
 ---
 
    {{CSSRef}}
    
 
-
    Le descripteur CSS descent-override définit la mesure du jambage inférieur (descendant) de la police (voir la définition de jambage). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.
    
+
    Le descripteur CSS descent-override définit la mesure du jambage inférieur (descendant) de la police (voir la définition de jambage). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.
    
 
 
    Syntaxe
    
 
diff --git a/files/fr/web/css/@font-face/font-display/index.html b/files/fr/web/css/@font-face/font-display/index.html
index 798e350ac7..2b89c8661d 100644
--- a/files/fr/web/css/@font-face/font-display/index.html
+++ b/files/fr/web/css/@font-face/font-display/index.html
@@ -57,7 +57,7 @@ font-display: optional;
    
 
 
    Exemples
    
 
-
    @font-face {
+
    @font-face {
   font-family: FonteExemple;
   src: url(/chemin/vers/fonts/examplefont.woff) format('woff'),
        url(/chemin/vers/fonts/examplefont.eot) format('eot');
diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html
index 66d3a0211d..505de0c2ac 100644
--- a/files/fr/web/css/@font-face/font-stretch/index.html
+++ b/files/fr/web/css/@font-face/font-stretch/index.html
@@ -130,10 +130,10 @@ font-stretch: condensed ultra-condensed;;
 
 
    Accessibilité
    
 
-
    Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment si le contraste des couleurs est trop faible.
    
+
    Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment si le contraste des couleurs est trop faible.
    
 
 
 
diff --git a/files/fr/web/css/@font-face/font-style/index.html b/files/fr/web/css/@font-face/font-style/index.html
index c9776cadef..672e77a232 100644
--- a/files/fr/web/css/@font-face/font-style/index.html
+++ b/files/fr/web/css/@font-face/font-style/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/@font-face/font-style
 ---
 
    {{CSSRef}}
    
 
-
    Le descripteur font-style, associé à la règle @ {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.
    
+
    Le descripteur font-style, associé à la règle @ {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.
    
 
 
    Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur font-style peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.
    
 
@@ -49,11 +49,11 @@ font-style: oblique 30deg 50deg;
    
   src: url('garamond.ttf');
 }
    
 
-
    unstyled Garamond
    
+
    unstyled Garamond
    
 
 
    La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.
    
 
-
    artificially sloped garamond
    
+
    artificially sloped garamond
    
 
 
    En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur src et indiquer que c'est une police italique via font-style. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.
    
 
@@ -64,7 +64,7 @@ font-style: oblique 30deg 50deg;
    
   font-style: italic;
 }
    
 
-
    italic garamond
    
+
    italic garamond
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/@font-feature-values/index.html b/files/fr/web/css/@font-feature-values/index.html
index a6363edbf5..cf733cde7b 100644
--- a/files/fr/web/css/@font-feature-values/index.html
+++ b/files/fr/web/css/@font-feature-values/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/@font-feature-values
 ---
 
    {{CSSRef}}
    
 
-
    La règle @ @font-feature-values permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.
    
+
    La règle @ @font-feature-values permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.
    
 
 
    @font-feature-values Font One {
 /* On active la caractéristique nice-style
@@ -34,24 +34,24 @@ translation_of: Web/CSS/@font-feature-values
 }
 
    
 
-
    La règle @ @font-feature-values peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein d'un groupe de règles conditionnelles.
    
+
    La règle @ @font-feature-values peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein d'un groupe de règles conditionnelles.
    
 
 
    Syntaxe
    
 
 
    Blocs liés aux caractéristiques
    
 
 
    
- 
    @swash
    
+ 
    @swash
    
  
    Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "swash()", "#swash()")}}. Une telle caractéristique est définie avec une seule valeur : ident1: 2 est valide alors que ident2: 2 4 est invalide.
    
- 
    @annotation
    
+ 
    @annotation
    
  
    Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}}. Une telle caractéristique est définie avec une seule valeur : ident1: 2 est valide alors que ident2: 2 4 est invalide.
    
- 
    @ornaments
    
+ 
    @ornaments
    
  
    Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}}. La caractéristique d'ornement est définie avec une seule valeur : ident1: 2 est valide alors que ident2: 2 4 est invalide.
    
- 
    @stylistic
    
+ 
    @stylistic
    
  
    Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}}. Une telle caractéristique est définie avec une seule valeur : ident1: 2 est valide alors que ident2: 2 4 est invalide.
    
- 
    @styleset
    
+ 
    @styleset
    
  
    Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : ident1: 2 4 12 1 correspondra aux valeurs OpenType ss02, ss04, ss12, ss01. Les valeurs supérieures à 99 sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.
    
- 
    @character-variant
    
+ 
    @character-variant
    
  
    Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : ident1: 2  correspond à cv02=1 et ident2: 2 4 correspond à  cv02)4, en revanche ident2: 2 4 5 est invalide.
    
 
    
 
diff --git a/files/fr/web/css/@keyframes/index.html b/files/fr/web/css/@keyframes/index.html
index dd8fb53d18..9856d8f815 100644
--- a/files/fr/web/css/@keyframes/index.html
+++ b/files/fr/web/css/@keyframes/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/@keyframes
 
 
    La règle @keyframes permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec les transitions.
    
 
-
    @keyframes slidein {
+
    @keyframes slidein {
   from {
     margin-left: 100%;
     width: 300%;
@@ -45,7 +45,7 @@ translation_of: Web/CSS/@keyframes
 
 
    Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :
    
 
-
    @keyframes identifier {
+
    @keyframes identifier {
   0% { top: 0; left: 0; }
   30% { top: 50px; }
   68%, 72% { left: 50px; }
@@ -61,7 +61,7 @@ translation_of: Web/CSS/@keyframes
 
 
    Les déclarations qui utilisent !important dans une description d'étape sont ignorées
    
 
-
    @keyframes important1 {
+
    @keyframes important1 {
   from { margin-top: 50px; }
   50%  { margin-top: 150px !important; } /* ignorée */
   to   { margin-top: 100px; }
@@ -98,7 +98,7 @@ translation_of: Web/CSS/@keyframes
 
 
    CSS
    
 
-
    p {
+
    p {
   animation-duration: 25s;
   animation-name: slidein;
 }
@@ -122,7 +122,7 @@ translation_of: Web/CSS/@keyframes
 
 
    HTML
    
 
-
    <p>
+
    <p>
   Le Chat grimaça en apercevant Alice. Elle trouva qu’il
   avait l’air bon enfant, et cependant il avait de
   très longues griffes et une grande rangée de dents ;
diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
index 36e47eb9d4..10c33af0f5 100644
--- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
+++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
@@ -11,10 +11,10 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio
 ---
 
    {{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}
    
 
-
    La caractéristique média -moz-device-pixel-ratio, associée à @media, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.
    
+
    La caractéristique média -moz-device-pixel-ratio, associée à @media, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.
    
 
 
    
-
    Ne pas utiliser cette fonctionnalité ! La caractéristique resolution et l'unité dppx permettent d'obtenir le même mécanisme.
    
+
    Attention : Ne pas utiliser cette fonctionnalité ! La caractéristique resolution et l'unité dppx permettent d'obtenir le même mécanisme.
    
  
    
  -moz-device-pixel-ratio peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et -webkit-device-pixel-ratio peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge dppx. Par exemple :
    
 
@@ -23,10 +23,12 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio
        (min-resolution: 2dppx),             /* La méthode standard */
        (min-resolution: 192dpi)             /* Utilisée si dppx n'est pas gérée */ 
    
 
-
    Voir cet article du CSSWG pour les bonnes pratiques quant à la compatibilité de resolution et dppx.
    
+
    Voir cet article du CSSWG pour les bonnes pratiques quant à la compatibilité de resolution et dppx.
    
 
    
 
-
    Note : Cette caractéristique est également implémentée par Webkit et IE 11 pour Windows Phone 8.1 sous le nom -webkit-device-pixel-ratio. Les versions préfixées pour les seuils minimal / maximal sont intitulées min--moz-device-pixel-ratio et max--moz-device-pixel-ratio sous Gecko, tandis que sous Webkit, elles sont intitulées  -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio.
    
+
    
+  
    Note : Cette caractéristique est également implémentée par Webkit et IE 11 pour Windows Phone 8.1 sous le nom -webkit-device-pixel-ratio. Les versions préfixées pour les seuils minimal / maximal sont intitulées min--moz-device-pixel-ratio et max--moz-device-pixel-ratio sous Gecko, tandis que sous Webkit, elles sont intitulées  -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio.
    
+
    
 
 
    Syntaxe
    
 
diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html
index aca491ee04..814c43f592 100644
--- a/files/fr/web/css/@media/-ms-high-contrast/index.html
+++ b/files/fr/web/css/@media/-ms-high-contrast/index.html
@@ -12,7 +12,7 @@ original_slug: Web/CSS/-ms-high-contrast
 ---
 
    {{CSSRef}}{{Non-standard_header}}
    
 
-
    La caractéristique média -ms-high-contrast, relative à la règle @ @media, est une extension Microsoft qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.
    
+
    La caractéristique média -ms-high-contrast, relative à la règle @ @media, est une extension Microsoft qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.
    
 
 
    Cette caractéristique média s'applique aux média de type matriciel (bitmap). Elle ne gère pas les préfixes min et max.
    
 
@@ -59,7 +59,7 @@ original_slug: Web/CSS/-ms-high-contrast
 }
 
    
 
-
    Spécifications
    
+
    Spécifications
    
 
 
    Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.
    
 
diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
index 451c83f18d..3d96ba5464 100644
--- a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
+++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
@@ -12,10 +12,10 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
 
 
    -webkit-device-pixel-ratio est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.
    
 
-
    Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter un pixel CSS (px). Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est dppx.
    
+
    Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter un pixel CSS (px). Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est dppx.
    
 
 
    
-
    Attention ! Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.
    
+
    Attention : Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.
    
 
    
 
 
    Syntaxe
    
@@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
 
 
    
  
    {{cssxref("<number>")}}
    
- 
    Le nombre de pixels physiques pour chaque pixel (px) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est dppx.
    
+ 
    Le nombre de pixels physiques pour chaque pixel (px) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est dppx.
    
 
    
 
 
    Implémentation
    
@@ -93,8 +93,7 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
    Définition initiale dans un standard.
   
   
-   Safari CSS Reference
    
-    'media query extensions' in that document.    
+   Safari CSS Reference 'media query extensions'.
    Documentation non-officielle, non-standard.
    Documentation initiale.
   
diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.html b/files/fr/web/css/@media/-webkit-transform-3d/index.html
index 35c5545966..887649670d 100644
--- a/files/fr/web/css/@media/-webkit-transform-3d/index.html
+++ b/files/fr/web/css/@media/-webkit-transform-3d/index.html
@@ -47,8 +47,7 @@ translation_of: Web/CSS/@media/-webkit-transform-3d
    Définition initiale dans un standard.
   
   
-   Safari CSS Reference
    
-    'media query extensions' in that document.    
+   Safari CSS Reference media query extensions in that document.
    Documentation non-officielle, non-standard.
    Documentation initiale.
   
diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html
index 14bdf4689b..0999d4619e 100644
--- a/files/fr/web/css/@media/aspect-ratio/index.html
+++ b/files/fr/web/css/@media/aspect-ratio/index.html
@@ -17,68 +17,25 @@ translation_of: Web/CSS/@media/aspect-ratio
 
 
    Exemples
    
 
-
    
-
    Note : L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (viewport), vous pouvez redimensionner l'iframe afin d'observer l'effet d'aspect-ratio.
    
-
    
+
    Exemples de valeurs pour aspect-ratio
    
 
-
    HTML
    
-
-
    <label id="wf" for="w">width:165</label>
-<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
-<label id="hf" for="w">height:165</label>
-<input id="h" name="h" type="range" min="100" max="250" step="5" value="165">
-
-<iframe id="outer" src="data:text/html,
-  <style>
-    @media (min-aspect-ratio: 8/5) {
-      div {
-        background: %239af;
-      }
-    }
-    @media (max-aspect-ratio: 3/2) {
-      div {
-        background: %239ff;
-      }
-    }
-    @media (aspect-ratio: 1/1) {
-      div {
-        background: %23f9a;
-      }
-    }
-  </style>
-  <div id='inner'>
-    Vous pouvez redimensionner le viewport en largeur
-    et en hauteur pour voir l'effet.
-  </div>
-">
-
-</iframe>
+
    +aspect-ratio: 1 / 1;
+aspect-ratio: 16 / 9;
 
    
 
-
    CSS
    
+
    Correspondance entre width et height et aspect-ratio
    
 
-
    iframe{
-  display:block;
-}
    
-
-
    JavaScript
    
+
    Les navigateurs ont ajouté une propriété aspect-ratio interne qui s'applique aux éléments remplacés et aux autres éléments associés qui acceptent des attributs width et height. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.
    
 
-
    outer.style.width=outer.style.height="165px"
+
    Pour Firefox, la feuille de style interne ressemble à :
    
 
-w.onchange=w.oninput=function(){
-  outer.style.width=w.value+"px"
-  wf.textContent="width:"+w.value
-}
-h.onchange=h.oninput=function(){
-  outer.style.height=h.value+"px"
-  hf.textContent="height:"+h.value
+
    +img, input[type="image"], video, embed, iframe, marquee, object, table {
+  aspect-ratio: attr(width) / attr(height);
 }
    
 
-
    Résultat
    
-
-
    
-
    {{EmbedLiveSample('Exemples')}}
    
-
    
+
    Pour en savoir plus, vous pouvez consulter Définir la hauteur et largeur des images redevient important (en anglais).
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/@media/forced-colors/index.html b/files/fr/web/css/@media/forced-colors/index.html
index d347ae71b9..ab75ac487c 100644
--- a/files/fr/web/css/@media/forced-colors/index.html
+++ b/files/fr/web/css/@media/forced-colors/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/@media/forced-colors
 
 
    La caractéristique média forced-colors est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.
    
 
-
    
+
    
 
    Note : Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur
    
 
    
 
diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.html b/files/fr/web/css/@media/prefers-color-scheme/index.html
index a240eb36c8..4476aacdf7 100644
--- a/files/fr/web/css/@media/prefers-color-scheme/index.html
+++ b/files/fr/web/css/@media/prefers-color-scheme/index.html
@@ -10,8 +10,8 @@ translation_of: Web/CSS/@media/prefers-color-scheme
 ---
 
    {{CSSRef}}
    
 
-
    
-
    Si vous avez modifié privacy.resistFingerprinting à vrai, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à light.
    
+
    
+
    Note : Si vous avez modifié privacy.resistFingerprinting à vrai, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à light.
    
  Sinon, vous pouvez créer le paramètre numérique ui.systemUsesDarkTheme pour redéfinier le comportement par défaut et retourner light (valeur : 0), dark (valeur : 1), or no-preference (valeur : 2). (Firefox retourneralight si une autre valeur est utilisée.)
    
 
    
 
@@ -30,7 +30,7 @@ translation_of: Web/CSS/@media/prefers-color-scheme
 
 
    CSS
    
 
-
    .day   { background: #eee; color: black; }
+
    .day   { background: #eee; color: black; }
 .night { background: #333; color: white; }
 
 @media (prefers-color-scheme: dark) {
@@ -54,7 +54,7 @@ translation_of: Web/CSS/@media/prefers-color-scheme
 
 
    HTML
    
 
-
    <div class="day">Jour (initial)</div>
+
    <div class="day">Jour (initial)</div>
 <div class="day light-scheme">Jour (modifié si utilisation d'un thème clair)</div>
 <div class="day dark-scheme">Jour (modifié si utilisation d'un thème sombre)</div> <br>
 
diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html
index 9f161ee4fd..daf259477f 100644
--- a/files/fr/web/css/@media/prefers-reduced-motion/index.html
+++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html
@@ -12,11 +12,10 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
 ---
 
    {{CSSRef}}
    
 
-
    La requêtes média CSS prefers-reduced-motion détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.
    
+
    La requêtes média CSS prefers-reduced-motion détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.
    
 
-
    
-  
    Important :
    
-  
    Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.
    
+
    
+  
    Attention : Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.
    
 
    
 
 
    Syntaxe
    
@@ -63,8 +62,7 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
 }
 
    
 
-
 
 
    Résultat
    
 
diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html
index c065872f83..0f07c013b2 100644
--- a/files/fr/web/css/@media/shape/index.html
+++ b/files/fr/web/css/@media/shape/index.html
@@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/shape
 
 
    Exemples
    
 
-
    
+
    
 
    Note : Aucun navigateur n'implémente actuellement cette fonctionnalité.
    
 
    
 
diff --git a/files/fr/web/css/@page/index.html b/files/fr/web/css/@page/index.html
index 7dea723ef5..9d44d62546 100644
--- a/files/fr/web/css/@page/index.html
+++ b/files/fr/web/css/@page/index.html
@@ -21,7 +21,9 @@ translation_of: Web/CSS/@page
 
 
    La règle @ @page peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.
    
 
-
    Note : Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("<length>")}}) relative à la zone d'affichage (viewport) : vh, vw, vmin et vmax. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle @page.
    
+
    
+  
    Note : Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("<length>")}}) relative à la zone d'affichage (viewport) : vh, vw, vmin et vmax. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle @page.
    
+
    
 
 
    Syntaxe
    
 
@@ -33,12 +35,12 @@ translation_of: Web/CSS/@page
 
 
 
    
- 
    marks
    
+ 
    marks
    
  
    Ajoute des marques pour la découpe ou l'alignement des pages du document.
    
 
    
 
 
    
- 
    bleed
    
+ 
    bleed
    
  
    Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.
    
 
    
 
diff --git a/files/fr/web/css/@page/size/index.html b/files/fr/web/css/@page/size/index.html
index 4a162a450a..89d4723b4d 100644
--- a/files/fr/web/css/@page/size/index.html
+++ b/files/fr/web/css/@page/size/index.html
@@ -53,7 +53,7 @@ size: A4 portrait;
  
    <length>
    
  
    Une valeur de longueur (cf. {{cssxref("<length>")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.
    
  
    <page-size>
    
- 
    
+ 
    Un mot-clé avec l'une des valeurs suivantes :
    
  
    
   
    A5
    
   
    Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.
    
diff --git a/files/fr/web/css/@supports/index.html b/files/fr/web/css/@supports/index.html
index 05205b390c..163bcdd89f 100644
--- a/files/fr/web/css/@supports/index.html
+++ b/files/fr/web/css/@supports/index.html
@@ -64,7 +64,7 @@ translation_of: Web/CSS/@supports
 
    @supports not ( not ( transform-origin: 2px ) ) { }
 @supports (display: grid) and ( not (display: inline-grid) ) { }
    
 
-
    
+
    
 
    Note : Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur not entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme and ou or, il faudra utiliser des parenthèses.
    
 
    
 
@@ -98,8 +98,8 @@ translation_of: Web/CSS/@supports
 
    @supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
           (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  ))) { }
    
 
-
    
-
    Note : Lorsqu'on utilise à la fois l'opérateur and et l'opérateur or, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.
    
+
    
+
    Note : Lorsqu'on utilise à la fois l'opérateur and et l'opérateur or, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.
    
 
    
 
 
    Syntaxe formelle
    
diff --git a/files/fr/web/css/@viewport/index.html b/files/fr/web/css/@viewport/index.html
index 97247a26e3..b14056c7ea 100644
--- a/files/fr/web/css/@viewport/index.html
+++ b/files/fr/web/css/@viewport/index.html
@@ -58,7 +58,7 @@ translation_of: Web/CSS/@viewport
 
    
 
 
    
-
    Note : Un facteur de zoom de 1.0 ou 100% correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.
    
+
    Note :Un facteur de zoom de 1.0 ou 100% correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.
    
 
    
 
 
    Syntaxe formelle
    
diff --git a/files/fr/web/css/_colon_-moz-first-node/index.html b/files/fr/web/css/_colon_-moz-first-node/index.html
index fd7e45bb27..74fcd7f5bb 100644
--- a/files/fr/web/css/_colon_-moz-first-node/index.html
+++ b/files/fr/web/css/_colon_-moz-first-node/index.html
@@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-first-node'
 
 
    La pseudo-classe :-moz-first-node correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs).
    
 
-
    Note : Tout blanc qui serait au début d'un élément est ignoré pour la détermination de :-moz-last-node.
    
+
    
+  
    Note : Tout blanc qui serait au début d'un élément est ignoré pour la détermination de :-moz-last-node.
    
+
    
 
 
    Syntaxe
    
 
diff --git a/files/fr/web/css/_colon_-moz-last-node/index.html b/files/fr/web/css/_colon_-moz-last-node/index.html
index 4133fb53a9..aab079a2e6 100644
--- a/files/fr/web/css/_colon_-moz-last-node/index.html
+++ b/files/fr/web/css/_colon_-moz-last-node/index.html
@@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-last-node'
 
 
    La pseudo-classe :-moz-last-node correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs).
    
 
-
    Note : Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de :-moz-last-node.
    
+
    
+  
    Note : Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de :-moz-last-node.
    
+
    
 
 
    Syntaxe
    
 
diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.html b/files/fr/web/css/_colon_-moz-only-whitespace/index.html
index 0a34f1d26c..d53499bc80 100644
--- a/files/fr/web/css/_colon_-moz-only-whitespace/index.html
+++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.html
@@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:-moz-only-whitespace'
 ---
 
    {{CSSRef}}{{SeeCompatTable}}
    
 
-
    
+
    
 
    Note : Dans la spécification {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme :-moz-only-whitespace mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.
    
 
    
 
@@ -30,8 +30,7 @@ translation_of: 'Web/CSS/:-moz-only-whitespace'
 
 
    CSS
    
 
-
 
 
    div {
   border: 4px solid red;
diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.html b/files/fr/web/css/_colon_-moz-window-inactive/index.html
index 68c8be972f..e0352a939f 100644
--- a/files/fr/web/css/_colon_-moz-window-inactive/index.html
+++ b/files/fr/web/css/_colon_-moz-window-inactive/index.html
@@ -12,7 +12,9 @@ translation_of: 'Web/CSS/:-moz-window-inactive'
 
 
    La pseudo-classe :-moz-window-inactive, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.
    
 
-
    Note : Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut active="true" sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.
    
+
    
+  
    Note : Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut active="true" sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.
    
+
    
 
 
    :-moz-window-inactive fonctionne également pour le contenu des documents HTML.
    
 
diff --git a/files/fr/web/css/_colon_active/index.html b/files/fr/web/css/_colon_active/index.html
index 617efb14c9..0ac630a4c3 100644
--- a/files/fr/web/css/_colon_active/index.html
+++ b/files/fr/web/css/_colon_active/index.html
@@ -21,7 +21,9 @@ a:active {
 
 
    La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec :active doit être écrite après les autres : :link — :visited — :hover — :active.
    
 
-
    Note : Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe :active ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.
    
+
    
+  
    Note : Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe :active ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.
    
+
    
 
 
    Syntax
    
 
diff --git a/files/fr/web/css/_colon_autofill/index.html b/files/fr/web/css/_colon_autofill/index.html
index 94196944d2..c74d26ed18 100644
--- a/files/fr/web/css/_colon_autofill/index.html
+++ b/files/fr/web/css/_colon_autofill/index.html
@@ -13,7 +13,9 @@ original_slug: Web/CSS/:-webkit-autofill
 
 
    La pseudo-classe :-webkit-autofill correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.
    
 
-
    Note : Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent !important pour les déclarations avec :-webkit-autofill ce qui les rend difficilement modifiables sans utiliser JavaScript.
    
+
    
+  
    Note : Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent !important pour les déclarations avec :-webkit-autofill ce qui les rend difficilement modifiables sans utiliser JavaScript.
    
+
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/_colon_blank/index.html b/files/fr/web/css/_colon_blank/index.html
index b67a791497..db9d6f5d06 100644
--- a/files/fr/web/css/_colon_blank/index.html
+++ b/files/fr/web/css/_colon_blank/index.html
@@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:blank'
 ---
 
    {{CSSRef}}{{Draft}}{{SeeCompatTable}}
    
 
-
    
+
    
 
    Note : Le sélecteur :blank est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir l'issue n°1967 à ce propos.
    
 
    
 
diff --git a/files/fr/web/css/_colon_checked/index.html b/files/fr/web/css/_colon_checked/index.html
index e29ddf49b8..fba13cef19 100644
--- a/files/fr/web/css/_colon_checked/index.html
+++ b/files/fr/web/css/_colon_checked/index.html
@@ -1,15 +1,15 @@
 ---
 title: ':checked'
-slug: 'Web/CSS/:checked'
+slug: Web/CSS/:checked
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:checked'
+translation_of: Web/CSS/:checked
 ---
 
    {{CSSRef}}
    
 
-
    La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (on). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe :checked ne s'applique plus à l'élément en question.
    
+
    La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (on). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe :checked ne s'applique plus à l'élément en question.
    
 
 
    /* cible n'importe quel bouton radio sélectionné, case
 /* à cocher cochée ou option sélectionnée */
@@ -29,70 +29,64 @@ input:checked {
 
 
    Exemples
    
 
-
    Ici, on utilise la pseudo-classe :checked pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (download this demo).
    
-
-
    CSS
    
-
-
    #expand-btn {
-    margin: 0 3px;
-    display: inline-block;
-    font: 12px / 13px "Lucida Grande", sans-serif;
-    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
-    padding: 3px 6px;
-    border: 1px solid rgba(0, 0, 0, 0.6);
-    background-color: #969696;
-    cursor: default;
-    border-radius: 3px;
-    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
-}
+
    Exemple simple
    
 
-#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
-    background: #B5B5B5;
-    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
-}
+
    HTML
    
+
+
    +<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Oui</label>
 
-#isexpanded, .expandable {
-    display: none;
+  <input type="radio" name="my-input" id="no">
+  <label for="no">Non</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Cochez-moi !</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Pommes</option>
+  <option value="opt2">Raisins</option>
+  <option value="opt3">Poires</option>
+</select>
+
    
+
+
    CSS
    
+
+
    +div,
+select {
+  margin: 8px;
 }
 
-#isexpanded:checked ~ * tr.expandable {
-    display: table-row;
-    background: #cccccc;
+/* Libellés pour les entrées cochées */
+input:checked + label {
+  color: red;
+}
 
+/* Éléments radio cochés */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
 }
 
-#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
-    display: block;
-    background: #cccccc;
+/* Éléments cases à cocher cochés */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
 }
-
    
 
-
    HTML
    
-
-
    <input type="checkbox" id="isexpanded" />
-
-<table>
-    <thead>
-        <tr><th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th></tr>
-    </thead>
-    <tbody>
-        <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
-        <tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
-        <tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
-        <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
-        <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
-    </tbody>
-</table>
-
-<p>[Un texte normal]</p>
-<p><label for="isexpanded" id="expand-btn">Afficher les éléments masqués</label></p>
-<p class="expandable">[Un texte caché]</p>
-<p>[Un texte normal]</p>
+/* Éléments options sélectionnés */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
 
    
 
-
    Résultat
    
+
    Résultat
    
 
-
    {{EmbedLiveSample('Exemples','300','450')}}
    
+
    {{EmbedLiveSample("exemple_simple")}}
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/_colon_default/index.html b/files/fr/web/css/_colon_default/index.html
index 0581ed4c6a..195232f149 100644
--- a/files/fr/web/css/_colon_default/index.html
+++ b/files/fr/web/css/_colon_default/index.html
@@ -26,7 +26,7 @@ translation_of: 'Web/CSS/:default'
  
  • L'élément <button> est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments {{htmlelement("input")}} dont le type permet d'envoyer des formulaires tels que image ou submit).
    • 
 
 
-
    
+
    
 
    Note : La spécification WHATWG HTML définit cela dans le paragraphe 4.16.3.
    
 
    
 
diff --git a/files/fr/web/css/_colon_dir/index.html b/files/fr/web/css/_colon_dir/index.html
index 4bc716dd55..258e28c8b5 100644
--- a/files/fr/web/css/_colon_dir/index.html
+++ b/files/fr/web/css/_colon_dir/index.html
@@ -24,20 +24,19 @@ translation_of: 'Web/CSS/:dir'
 
 
    Syntaxe
    
 
-
    La pseudo-classe :dir() nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler
    
+
    La pseudo-classe :dir() nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler
    
 
 
    Paramètres
    
 
 
    
  
    direction
    
  
    La direction du texte pour les éléments qu'on souhaite sélectionner. La valeur peut être ltr (texte écrit de gauche à droite) ou rtl (texte écrit de droite à gauche).
    
- 
    
- 
    Syntaxe formelle
    
-
- {{csssyntax}}
- 
    
 
    
 
+
    Syntaxe formelle
    
+
+
    {{csssyntax}}
    
+
 
    Exemples
    
 
 
    CSS
    
diff --git a/files/fr/web/css/_colon_empty/index.html b/files/fr/web/css/_colon_empty/index.html
index 70af2f5971..81091c8db4 100644
--- a/files/fr/web/css/_colon_empty/index.html
+++ b/files/fr/web/css/_colon_empty/index.html
@@ -1,11 +1,11 @@
 ---
 title: ':empty'
-slug: 'Web/CSS/:empty'
+slug: Web/CSS/:empty
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:empty'
+translation_of: Web/CSS/:empty
 ---
 
    {{CSSRef}}
    
 
@@ -17,8 +17,8 @@ div:empty {
   background: lime;
 }
    
 
-
    
-
    Note : Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur :empty a été modifié afin de se comporter comme {{CSSxRef(":-moz-only-whitespace")}} mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.
    
+
    
+
    Note : Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur :empty a été modifié afin de se comporter comme {{CSSxRef(":-moz-only-whitespace")}} mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.
    
 
    
 
 
    Syntaxe
    
@@ -59,15 +59,15 @@ div:empty {
 
 
    Accessibilité
    
 
-
    Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de l'arbre d'accessibilité, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.
    
+
    Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de l'arbre d'accessibilité, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.
    
 
 
    Le texte fournissant le nom accessible peut être masqué grâce à des propriétés afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.
    
 
 
 
 
    Spécifications
    
diff --git a/files/fr/web/css/_colon_enabled/index.html b/files/fr/web/css/_colon_enabled/index.html
index 3b3cc1ba71..09241724f6 100644
--- a/files/fr/web/css/_colon_enabled/index.html
+++ b/files/fr/web/css/_colon_enabled/index.html
@@ -24,7 +24,6 @@ input:enabled {
 
 
    Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.
    
 
-
    
 
    HTML
    
 
 
    <form action="url_of_form">
@@ -52,7 +51,6 @@ input:disabled {
 
    Résultat
    
 
 
    {{EmbedLiveSample("Exemples",550,95)}}
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/_colon_first-child/index.html b/files/fr/web/css/_colon_first-child/index.html
index 4b4d1012c9..f82d5e854b 100644
--- a/files/fr/web/css/_colon_first-child/index.html
+++ b/files/fr/web/css/_colon_first-child/index.html
@@ -19,7 +19,7 @@ p:first-child {
 }
    
 
 
    
-
    Note : Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.
    
+
    Note : Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.
    
 
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/_colon_first-of-type/index.html b/files/fr/web/css/_colon_first-of-type/index.html
index 4aa63d0fc8..c4582933bd 100644
--- a/files/fr/web/css/_colon_first-of-type/index.html
+++ b/files/fr/web/css/_colon_first-of-type/index.html
@@ -49,7 +49,7 @@ p:first-of-type {
 
    {{EmbedLiveSample('Exemples','100%', '120')}}
    
 
 
    
-
    Note : On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.
    
+
    Note : On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.
    
 
    
 
 
    
diff --git a/files/fr/web/css/_colon_first/index.html b/files/fr/web/css/_colon_first/index.html
index 9587b8d0df..00a1c2771e 100644
--- a/files/fr/web/css/_colon_first/index.html
+++ b/files/fr/web/css/_colon_first/index.html
@@ -1,17 +1,17 @@
 ---
 title: ':first'
-slug: 'Web/CSS/:first'
+slug: Web/CSS/:first
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:first'
+translation_of: Web/CSS/:first
 ---
 
    {{CSSRef}}
    
 
 
    La pseudo-classe :first, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud )
    
 
-
    /* Cible le contenu de la première page */
+
    /* Cible le contenu de la première page */
 /* lorsqu'on imprime */
 @page :first {
   margin-left: 50%;
@@ -26,7 +26,7 @@ translation_of: 'Web/CSS/:first'
  
  • Les propriétés liées aux sauts de page : {{cssxref("page-break")}}
    • 
 
 
-
    De plus, seules les unités absolues peuvent être utilisées pour les marges.
    
+
    De plus, seules les unités absolues peuvent être utilisées pour les marges.
    
 
 
    Syntaxe
    
 
@@ -36,7 +36,7 @@ translation_of: 'Web/CSS/:first'
 
 
    CSS
    
 
-
    @page :first {
+
    @page :first {
   margin-left: 50%;
   margin-top: 50%;
 }
@@ -47,13 +47,13 @@ p {
 
 
    HTML
    
 
-
    <p>Première page.</p>
+
    <p>Première page.</p>
 <p>Deuxième page.</p>
 <button>Imprimer</button>
    
 
 
    JavaScript
    
 
-
    document.querySelector("button").addEventListener('click', () => {
+
    document.querySelector("button").addEventListener('click', () => {
   window.print();
 });
    
 
diff --git a/files/fr/web/css/_colon_focus-visible/index.html b/files/fr/web/css/_colon_focus-visible/index.html
index ecdd7ca410..8354f4329b 100644
--- a/files/fr/web/css/_colon_focus-visible/index.html
+++ b/files/fr/web/css/_colon_focus-visible/index.html
@@ -125,8 +125,6 @@ custom-button:focus-visible {
 
 
    Compatibilité des navigateurs
    
 
-
-
 
    {{Compat("css.selectors.focus-visible")}}
    
 
 
    Voir aussi
    
diff --git a/files/fr/web/css/_colon_fullscreen/index.html b/files/fr/web/css/_colon_fullscreen/index.html
index 5e63891e2c..70a63996e7 100644
--- a/files/fr/web/css/_colon_fullscreen/index.html
+++ b/files/fr/web/css/_colon_fullscreen/index.html
@@ -10,7 +10,7 @@ translation_of: 'Web/CSS/:fullscreen'
 ---
 
    {{CSSRef}}
    
 
-
    La pseudo-classe :fullscreen permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.
    
+
    La pseudo-classe :fullscreen permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.
    
 
 
    Syntaxe
    
 
diff --git a/files/fr/web/css/_colon_host()/index.html b/files/fr/web/css/_colon_host()/index.html
index 9533eaabf0..f2bbe1b429 100644
--- a/files/fr/web/css/_colon_host()/index.html
+++ b/files/fr/web/css/_colon_host()/index.html
@@ -14,7 +14,7 @@ translation_of: 'Web/CSS/:host()'
 
    Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction :host(). Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser  {{cssxref(":host-context()")}}.
    
 
 
    
-
    Note : Cette fonction n'a aucun effet si elle est utilisée en dehors d'un shadow DOM.
    
+
    Note : Cette fonction n'a aucun effet si elle est utilisée en dehors d'un shadow DOM.
    
 
    
 
 
    /* On cible l'hôte du shadow DOM uniquement s'il
diff --git a/files/fr/web/css/_colon_host-context()/index.html b/files/fr/web/css/_colon_host-context()/index.html
index 606220fd36..6457aa73c3 100644
--- a/files/fr/web/css/_colon_host-context()/index.html
+++ b/files/fr/web/css/_colon_host-context()/index.html
@@ -16,7 +16,7 @@ translation_of: 'Web/CSS/:host-context()'
 
    Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — h1 par exemple — afin de sélectionner uniquement les instances d'un élément personnalisé (custom element) présentes à l'intérieur d'un élément <h1>.
    
 
 
    
-
    Note : Cette pseudo-classe n'a aucun effet en dehors d'un shadow DOM.
    
+
    Note : Cette pseudo-classe n'a aucun effet en dehors d'un shadow DOM.
    
 
    
 
 
    /* Cible un hôte uniquement si c'est un descendant
diff --git a/files/fr/web/css/_colon_host/index.html b/files/fr/web/css/_colon_host/index.html
index 93b5e59bde..e8a2a7a89f 100644
--- a/files/fr/web/css/_colon_host/index.html
+++ b/files/fr/web/css/_colon_host/index.html
@@ -12,7 +12,7 @@ translation_of: 'Web/CSS/:host'
 
    La pseudo-classe :host permet de cibler l'hôte d'un shadow DOM contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (custom element) depuis l'intérieur du shadow DOM.
    
 
 
    
-
    Note : Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un shadow DOM.
    
+
    Note : Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un shadow DOM.
    
 
    
 
 
    /* Cible la racine d'un hôte de shadow DOM */
@@ -71,7 +71,7 @@ style.textContent = 'span:hover { text-decoration: underline; }' +
  
 
 
-
    Compatibilité des navigateurs
    
+
    Compatibilité des navigateurs
    
 
 
    {{Compat("css.selectors.host")}}
    
 
diff --git a/files/fr/web/css/_colon_hover/index.html b/files/fr/web/css/_colon_hover/index.html
index cbaa7781ed..3871067514 100644
--- a/files/fr/web/css/_colon_hover/index.html
+++ b/files/fr/web/css/_colon_hover/index.html
@@ -1,11 +1,11 @@
 ---
 title: ':hover'
-slug: 'Web/CSS/:hover'
+slug: Web/CSS/:hover
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:hover'
+translation_of: Web/CSS/:hover
 ---
 
    {{CSSRef}}
    
 
@@ -19,9 +19,11 @@ a:hover {
 
 
    La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle :hover après les règles :link et :visited mais avant la règle :active (l'ordre est  :link — :visited — :hover — :active – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent.
    
 
-
    La pseudo-classe :hover peut être appliquée à n'importe quel pseudo-élément. {{experimental_inline}}
    
+
    La pseudo-classe :hover peut être appliquée à n'importe quel pseudo-élément. {{experimental_inline}}
    
 
-
    Note d'utilisation : sur les écrans tactiles, :hover est problématique voire impossible. La pseudo-classe :hover n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.
    
+
    
+  
    Note : sur les écrans tactiles, :hover est problématique voire impossible. La pseudo-classe :hover n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.
    
+
    
 
 
    Syntaxe
    
 
diff --git a/files/fr/web/css/_colon_in-range/index.html b/files/fr/web/css/_colon_in-range/index.html
index 5283d2fcba..b8c69639c9 100644
--- a/files/fr/web/css/_colon_in-range/index.html
+++ b/files/fr/web/css/_colon_in-range/index.html
@@ -1,11 +1,11 @@
 ---
 title: ':in-range'
-slug: 'Web/CSS/:in-range'
+slug: Web/CSS/:in-range
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:in-range'
+translation_of: Web/CSS/:in-range
 ---
 
    {{CSSRef}}
    
 
@@ -20,7 +20,9 @@ input:in-range {
 
 
    Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.
    
 
-
    Note : Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme dans l'intervalle ou en dehors de l'intervalle.
    
+
    
+  
    Note : Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme dans l'intervalle ou en dehors de l'intervalle.
    
+
    
 
 
    Syntaxe
    
 
@@ -30,7 +32,7 @@ input:in-range {
 
 
    CSS
    
 
-
    li {
+
    li {
   list-style: none;
   margin-bottom: 1em;
 }
@@ -51,7 +53,6 @@ input:out-of-range + label::after {
   content:' non autorisée !';
 }
    
 
-
    
 
    HTML
    
 
 
    <form action="" id="form1">
@@ -64,7 +65,6 @@ input:out-of-range + label::after {
 </form>
    
 
 
    Résultat
    
-
    
 
 
    {{EmbedLiveSample('Exemples',600,140)}}
    
 
@@ -100,5 +100,5 @@ input:out-of-range + label::after {
 
 
diff --git a/files/fr/web/css/_colon_indeterminate/index.html b/files/fr/web/css/_colon_indeterminate/index.html
index cef942a8b3..a94a588e4b 100644
--- a/files/fr/web/css/_colon_indeterminate/index.html
+++ b/files/fr/web/css/_colon_indeterminate/index.html
@@ -1,11 +1,11 @@
 ---
 title: ':indeterminate'
-slug: 'Web/CSS/:indeterminate'
+slug: Web/CSS/:indeterminate
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:indeterminate'
+translation_of: Web/CSS/:indeterminate
 ---
 
    {{CSSRef}}
    
 
@@ -20,8 +20,8 @@ input:indeterminate {
 
    Cela inclut :
    
 
 
      
- 
    • un élément <input type="checkbox"> dont la propriété du DOM indeterminate est fixée à true via du code JavaScript
      • 
- 
    • des éléments <input type="radio"> dont tous les boutons radio du groupe sont décochés
      • 
+ 
    • un élément <input type="checkbox"> dont la propriété du DOM indeterminate est fixée à true via du code JavaScript
      • 
+ 
    • des éléments <input type="radio"> dont tous les boutons radio du groupe sont décochés
      • 
  
    • des éléments {{HTMLElement("progress")}} dans un état indéterminé.
      • 
 
    
 
@@ -35,7 +35,7 @@ input:indeterminate {
 
 
    CSS
    
 
-
    input, span {
+
    input, span {
   background: red;
 }
 
@@ -71,7 +71,7 @@ for(var i = 0; i < inputs.length; i++) {
 
 
    CSS
    
 
-
    progress:indeterminate {
+
    progress:indeterminate {
   opacity: 0.5;
   box-shadow: 0 0 2px 1px red;
 }
diff --git a/files/fr/web/css/_colon_is/index.html b/files/fr/web/css/_colon_is/index.html
index beee9542e7..3268425e30 100644
--- a/files/fr/web/css/_colon_is/index.html
+++ b/files/fr/web/css/_colon_is/index.html
@@ -1,19 +1,19 @@
 ---
 title: ':is() (:matches(), :any())'
-slug: 'Web/CSS/:is'
+slug: Web/CSS/:is
 tags:
   - CSS
   - Experimental
   - Pseudo-classe
   - Reference
   - Web
-translation_of: 'Web/CSS/:is'
+translation_of: Web/CSS/:is
 ---
 
    {{CSSRef}}{{SeeCompatTable}}
    
 
 
    La pseudo-classe :is() prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.
    
 
-
    La plupart des navigateurs prennent encore en charge cette fonctionnalité via :matches(), ou via la pseudo-classe préfixée — :any() (anciennes versions de Chrome, Firefox et Safari). :any() fonctionne exactement comme :matches() et :is() mais nécessite l'utilisation de préfixes et ne prend pas en charge les sélecteurs complexes.
    
+
    La plupart des navigateurs prennent encore en charge cette fonctionnalité via :matches(), ou via la pseudo-classe préfixée — :any() (anciennes versions de Chrome, Firefox et Safari). :any() fonctionne exactement comme :matches() et :is() mais nécessite l'utilisation de préfixes et ne prend pas en charge les sélecteurs complexes.
    
 
 
    
 
    Note : :matches() a été renommé en is() d'après l'issue 3258 du CSSWG.
    
@@ -158,13 +158,13 @@ dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
   list-style-type: square;
 }
    
 
-
    En revanche, le modèle d'usage suivant n'est pas recommandée (cf. la section qui suit sur les performances) :
    
+
    En revanche, le modèle d'usage suivant n'est pas recommandée (cf. la section qui suit sur les performances) :
    
 
 
    :matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
   list-style-type: square;
 }
    
 
-
    Simplifier les sélecteurs de section
    
+
    Simplifier les sélecteurs de section
    
 
 
    La pseudo-classe :matches est particulièrement utile lorsqu'on manipule les sections et en-têtes HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans :matches()) s'avèrerait plutôt compliqué.
    
 
@@ -230,7 +230,7 @@ h1 {
 
 
    Notes
    
 
-
    Problèmes de performances avec any(): et la spécificité
    
+
    Problèmes de performances avec any(): et la spécificité
    
 
 
    {{Bug(561154)}} suit un problème de spécificité relatif à :-moz-any(). L'implémentation  place :-moz-any() dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur.
    
 
@@ -269,7 +269,7 @@ h1 {
  
 
 
-
    Compatibilité des navigateurs
    
+
    Compatibilité des navigateurs
    
 
 
    {{Compat("css.selectors.is")}}
    
 
diff --git a/files/fr/web/css/_colon_last-of-type/index.html b/files/fr/web/css/_colon_last-of-type/index.html
index f2c319d43b..8feeeed2f2 100644
--- a/files/fr/web/css/_colon_last-of-type/index.html
+++ b/files/fr/web/css/_colon_last-of-type/index.html
@@ -18,7 +18,7 @@ p:last-of-type {
 }
    
 
 
    
-
    Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
    
+
    Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
    
 
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/_colon_left/index.html b/files/fr/web/css/_colon_left/index.html
index 44523734fc..545f6f24f1 100644
--- a/files/fr/web/css/_colon_left/index.html
+++ b/files/fr/web/css/_colon_left/index.html
@@ -20,7 +20,9 @@ translation_of: 'Web/CSS/:left'
 
 
    La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page {{cssxref(":right")}}, si elle est définie de « droite à gauche » ce sera une page :left.
    
 
-
    Note : Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de la boîte correspondant à la page peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.
    
+
    
+  
    Note : Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de la boîte correspondant à la page peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.
    
+
    
 
 
    Syntaxe
    
 
diff --git a/files/fr/web/css/_colon_not/index.html b/files/fr/web/css/_colon_not/index.html
index 56d703d285..8cf347c1fc 100644
--- a/files/fr/web/css/_colon_not/index.html
+++ b/files/fr/web/css/_colon_not/index.html
@@ -1,11 +1,11 @@
 ---
 title: ':not'
-slug: 'Web/CSS/:not'
+slug: Web/CSS/:not
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:not'
+translation_of: Web/CSS/:not
 ---
 
    {{CSSRef}}
    
 
@@ -17,25 +17,25 @@ translation_of: 'Web/CSS/:not'
   color: blue;
 }
    
 
-
    La spécificité de la pseudo-classe :not est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.
    
+
    La spécificité de la pseudo-classe :not est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.
    
 
 
    
-
    Notes :
    
-
+
    Note :
 
      
  
    • Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, :not(*) va exclure tous les éléments et ne sera jamais appliqué.
      • 
- 
    • À l'inverse, il est possible d'augmenter la spécificitié d'un sélecteur. Ainsi. toto:not(truc) ciblera les mêmes éléments que toto, mais avec une spécificité plus forte.
      • 
+ 
    • À l'inverse, il est possible d'augmenter la spécificitié d'un sélecteur. Ainsi. toto:not(truc) ciblera les mêmes éléments que toto, mais avec une spécificité plus forte.
      • 
  
    • :not(toto){} ciblera tout élément qui n'est pas toto, notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}.
      • 
  
    • Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, body :not(table) a s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie :not() du sélecteur.
      • 
 
    
+
    
 
    
 
 
    Syntaxe
    
 
-
    La pseudo-classe :not() prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou de pseudo-élément.
    
+
    La pseudo-classe :not() prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou de pseudo-élément.
    
 
 
    
-
    Attention, la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.
    
+
    Attention : la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.
    
 
    
 
 {{csssyntax}}
diff --git a/files/fr/web/css/_colon_nth-child/index.html b/files/fr/web/css/_colon_nth-child/index.html
index ca67129ec6..0e9b1efcac 100644
--- a/files/fr/web/css/_colon_nth-child/index.html
+++ b/files/fr/web/css/_colon_nth-child/index.html
@@ -83,7 +83,6 @@ body :nth-child(4n) {
 
 
    Exemple démonstratif
    
 
-
    
 
    CSS
    
 
 
    html {
@@ -165,7 +164,6 @@ span, div em {
   <span>Puis un dernier</span>
 </div>
 
    
-
    
 
 
    Résultat
    
 
diff --git a/files/fr/web/css/_colon_nth-of-type/index.html b/files/fr/web/css/_colon_nth-of-type/index.html
index 54d7fe30b2..9a64cd08c6 100644
--- a/files/fr/web/css/_colon_nth-of-type/index.html
+++ b/files/fr/web/css/_colon_nth-of-type/index.html
@@ -1,13 +1,13 @@
 ---
 title: ':nth-of-type'
-slug: 'Web/CSS/:nth-of-type'
+slug: Web/CSS/:nth-of-type
 tags:
   - CSS
   - Mise en page
   - Pseudo-classe
   - Reference
   - Web
-translation_of: 'Web/CSS/:nth-of-type'
+translation_of: Web/CSS/:nth-of-type
 ---
 
    {{CSSRef}}
    
 
@@ -39,7 +39,7 @@ p:nth-of-type(4n) {
 
 
    HTML
    
 
-
    <div>
+
    <div>
   <div>Cet élément n'est pas compté.</div>
   <p>1er paragraphe.</p>
   <p>2e paragraphe.</p>
@@ -47,24 +47,24 @@ p:nth-of-type(4n) {
   <p>3e paragraphe.</p>
   <p>4e paragraphe.</p>
 </div>
-
    
+
    
 
 
    CSS
    
 
-
    /* Paragraphes impairs */
+
    /* Paragraphes impairs */
 p:nth-of-type(2n+1) {
   color: red;
 }
 
 /* Paragraphes pairs */
-p:nth-of-type(2n) {
-  color: blue;
-}
-
-/* Premier paragraphe */
-p:nth-of-type(1) {
-  font-weight: bold;
-}
    
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* Premier paragraphe */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
    
 
 
    Résultat
    
 
diff --git a/files/fr/web/css/_colon_only-child/index.html b/files/fr/web/css/_colon_only-child/index.html
index d47ce1274a..0f992ae22e 100644
--- a/files/fr/web/css/_colon_only-child/index.html
+++ b/files/fr/web/css/_colon_only-child/index.html
@@ -65,7 +65,7 @@ p:only-child {
 
 
    CSS
    
 
-
    li li {
+
    li li {
   list-style-type : disc;
 }
 
@@ -77,7 +77,7 @@ li:only-child {
 
 
    HTML
    
 
-
    <ol>
+
    <ol>
   <li>Premier
     <ul>
       <li>Ceci est l'unique élément enfant</li>
diff --git a/files/fr/web/css/_colon_only-of-type/index.html b/files/fr/web/css/_colon_only-of-type/index.html
index 43cab12bcd..4c1042a821 100644
--- a/files/fr/web/css/_colon_only-of-type/index.html
+++ b/files/fr/web/css/_colon_only-of-type/index.html
@@ -17,9 +17,8 @@ p:only-of-type {
   background-color: lime;
 }
    
 
-
    Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
-
-
     
    
+
    
+  
    Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
    
 
    
 
 
    Syntaxe
    
@@ -30,7 +29,7 @@ p:only-of-type {
 
 
    CSS
    
 
-
    li li {
+
    li li {
   list-style-type : disc;
 }
 
@@ -42,7 +41,7 @@ li:only-of-type {
 
 
    HTML
    
 
-
    <ol>
+
    <ol>
   <li>Premier
     <ul>
       <li>Ceci est l'unique li</li>
diff --git a/files/fr/web/css/_colon_out-of-range/index.html b/files/fr/web/css/_colon_out-of-range/index.html
index 8db6dc91da..44486cf80d 100644
--- a/files/fr/web/css/_colon_out-of-range/index.html
+++ b/files/fr/web/css/_colon_out-of-range/index.html
@@ -1,11 +1,11 @@
 ---
 title: ':out-of-range'
-slug: 'Web/CSS/:out-of-range'
+slug: Web/CSS/:out-of-range
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:out-of-range'
+translation_of: Web/CSS/:out-of-range
 ---
 
    {{CSSRef}}
    
 
@@ -18,7 +18,9 @@ input:out-of-range {
   background-color: rgba(255, 0, 0, 0.25);
 }
    
 
-
    Note : Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.
    
+
    
+  
    Note : Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.
    
+
    
 
 
    Syntaxe
    
 
@@ -28,7 +30,7 @@ input:out-of-range {
 
 
    HTML
    
 
-
    <form action="" id="form1">
+
    <form action="" id="form1">
   <ul>Les valeurs entre 1 et 10 sont autorisées.
     <li>
       <input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12">
@@ -101,5 +103,5 @@ input:out-of-range + label::after {
 
 
diff --git a/files/fr/web/css/_colon_placeholder-shown/index.html b/files/fr/web/css/_colon_placeholder-shown/index.html
index e6fe947e5b..93f571be8a 100644
--- a/files/fr/web/css/_colon_placeholder-shown/index.html
+++ b/files/fr/web/css/_colon_placeholder-shown/index.html
@@ -27,17 +27,15 @@ translation_of: 'Web/CSS/:placeholder-shown'
 
 
    CSS
    
 
-
 
-
    input {
+
    input {
   border: 2px solid black;
   padding: 3px;
 }
@@ -64,8 +62,7 @@ input:-moz-placeholder {
 
 
    CSS
    
 
-
 
-
    
 
    all:unset
    
 
 
@@ -102,9 +97,7 @@ blockquote { all: unset; }
    
 {{EmbedLiveSample("ex1", "200", "125")}}
 
 
    L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (inline) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est transparent (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours small (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée).
    
-
    
 
-
    
 
    all:initial
    
 
 
@@ -115,9 +108,7 @@ blockquote { all: initial; }
    
 {{EmbedLiveSample("ex2", "200", "125")}}
 
 
    L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut transparent (sa valeur initiale), {{cssxref("font-size")}} vaut normal (valeur initiale) et {{cssxref("color")}} vaut black (sa valeur initiale).
    
-
    
 
-
    
 
    all:inherit
    
 
 
@@ -128,7 +119,6 @@ blockquote { all: inherit; }
    
 {{EmbedLiveSample("ex3", "200", "125")}}
 
 
    L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut #F0F0F0 (valeur héritée), {{cssxref("font-size")}} vaut small (valeur héritée) et {{cssxref("color")}} vaut blue (valeur héritée).
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/alpha-value/index.html b/files/fr/web/css/alpha-value/index.html
index 2a260de8f1..a2736fad98 100644
--- a/files/fr/web/css/alpha-value/index.html
+++ b/files/fr/web/css/alpha-value/index.html
@@ -25,13 +25,17 @@ translation_of: Web/CSS/alpha-value
 
 
    Certaines fonctionnalités CSS utilisent des valeurs <alpha-value> dont les notations fonctionnelles pour les couleurs telles que rgba() et hsla() et aussi {{cssxref("shape-image-threshold")}} (qui détermine les pixels à prendre en compte pour une image lorsqu'on souhaite en extraire une forme).
    
 
-
    /* <rgba()> */
-color: rgba(34, 12, 64, 0.6);
-color: rgba(34.0 12 64 / 60%);
-
-/* shape-image-threshold */
-shape-image-threshold: 70%;
-shape-image-threshold: 0.7;
    
+
    +/* <rgba()> */
+color: rgba(34, 12, 64, 0.6);
+color: rgba(34.0 12 64 / 60%);
+
    
+
+
    +/* shape-image-threshold */
+shape-image-threshold: 70%;
+shape-image-threshold: 0.7;
+
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/angle/index.html b/files/fr/web/css/angle/index.html
index 1a936ee1fe..f020237b66 100644
--- a/files/fr/web/css/angle/index.html
+++ b/files/fr/web/css/angle/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/angle
 
 
    {{EmbedInteractiveExample("pages/css/type-angle.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    Pour exprimer une valeur de ce type, on utilisera une valeur de type {{cssxref("<number>")}} (un nombre), immédiatement suivie d'une unité deg, grad, rad ou turn. Comme pour les autres dimensions présentes en CSS, il n'y a pas d'espace entre le littéral réservé à l'unité et le nombre qui indique la mesure de l'angle. L'unité est facultative pour la valeur 0 (bien qu'il soit recommandé d'écrire une unité pour des raisons de lisibilité et de cohérence). Il est possible d'utiliser un signe + ou - en préfixe.
    
@@ -43,25 +41,25 @@ translation_of: Web/CSS/angle
 
-   
+   
-   
+   
-   
+   
-   
+   
diff --git a/files/fr/web/css/animation-delay/index.html b/files/fr/web/css/animation-delay/index.html
index f7efca1935..733ba4d654 100644
--- a/files/fr/web/css/animation-delay/index.html
+++ b/files/fr/web/css/animation-delay/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-delay
 
 
    {{EmbedInteractiveExample("pages/css/animation-delay.html")}}
    
 
-
-
 
    La valeur par défaut, 0s, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.
    Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur -1s comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.
    
diff --git a/files/fr/web/css/animation-direction/index.html b/files/fr/web/css/animation-direction/index.html
index 88527d3588..45fa6dbf7b 100644
--- a/files/fr/web/css/animation-direction/index.html
+++ b/files/fr/web/css/animation-direction/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-direction
 
 
    {{EmbedInteractiveExample("pages/css/animation-direction.html")}}
    
 
-
-
 
    Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration.
    Syntaxe
    
diff --git a/files/fr/web/css/animation-duration/index.html b/files/fr/web/css/animation-duration/index.html
index ec4e6dd410..766d826733 100644
--- a/files/fr/web/css/animation-duration/index.html
+++ b/files/fr/web/css/animation-duration/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-duration
 
 
    {{EmbedInteractiveExample("pages/css/animation-duration.html")}}
    
 
-
-
 
    La valeur par défaut est 0s, ce qui indique qu'aucune animation ne doit avoir lieu.
    Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.
    
@@ -34,9 +32,13 @@ animation-duration: 10s, 30s, 230ms;
  
    La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (s comme suffixe pour l'unité) ou en millisecondes (ms comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
    
 
-
    Note : Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de 0s.
    
+
    
+  
    Note : Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de 0s.
    
+
    
 
-
    Note : Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété animation-*, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.
    
+
    
+  
    Note : Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété animation-*, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.
    
+
    Syntaxe formelle
    
 
@@ -103,6 +105,6 @@ animation-duration: 10s, 30s, 230ms;
 
    Voir aussi
    
diff --git a/files/fr/web/css/animation-fill-mode/index.html b/files/fr/web/css/animation-fill-mode/index.html
index fe7afbd8d3..01b33f2513 100644
--- a/files/fr/web/css/animation-fill-mode/index.html
+++ b/files/fr/web/css/animation-fill-mode/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-fill-mode
 
 
    {{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
    
 
-
-
 
    Syntaxe
    /* Valeurs avec un mot-clé */
diff --git a/files/fr/web/css/animation-iteration-count/index.html b/files/fr/web/css/animation-iteration-count/index.html
index 85c80ff18b..7291b39c13 100644
--- a/files/fr/web/css/animation-iteration-count/index.html
+++ b/files/fr/web/css/animation-iteration-count/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/animation-iteration-count
 
 
    {{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}
    
 
-
-
 
    Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/animation-name/index.html b/files/fr/web/css/animation-name/index.html
index 3ea322393f..107ab29d0c 100644
--- a/files/fr/web/css/animation-name/index.html
+++ b/files/fr/web/css/animation-name/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-name
 
 
    {{EmbedInteractiveExample("pages/css/animation-name.html")}}
    
 
-
-
 
    Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées aux animations.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/animation-play-state/index.html b/files/fr/web/css/animation-play-state/index.html
index 98a89cd532..c0dcf45efb 100644
--- a/files/fr/web/css/animation-play-state/index.html
+++ b/files/fr/web/css/animation-play-state/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/animation-play-state
 
 
    {{EmbedInteractiveExample("pages/css/animation-play-state.html")}}
    
 
-
-
 
    Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html
index 736ccbf5cd..f3b7858272 100644
--- a/files/fr/web/css/animation-timing-function/index.html
+++ b/files/fr/web/css/animation-timing-function/index.html
@@ -9,12 +9,10 @@ translation_of: Web/CSS/animation-timing-function
 ---
 
    {{CSSRef}}
    
 
-
    La propriété animation-timing-function définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("<timing-function>")}}.
    
+
    La propriété animation-timing-function définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("easing-function")}}.
    
 
 
    {{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
    
 
-
-
 
    Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.
    
 
 
    Syntaxe
    
@@ -57,7 +55,7 @@ animation-timing-function: unset;
 
 
    
  
    <timing-function>
    
- 
    Chaque valeur {{cssxref("<timing-function>")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}.
+ 
    Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}.
  
    Les valeurs avec des mots-clés (ease, linear, ease-in-out, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction cubic-bezier() permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.
    
 
  
    
@@ -99,7 +97,7 @@ animation-timing-function: unset;
 
    
 
 
    
-
    Note : Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété animation-*, elles seront affectées selon leur ordre aux différentes animations listées par  {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir Paramétrer plusieurs valeurs de propriétés pour les animations.
    
+
    Note : Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété animation-*, elles seront affectées selon leur ordre aux différentes animations listées par  {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir Paramétrer plusieurs valeurs de propriétés pour les animations.
    
 
    
 
 
    Syntaxe formelle
    
@@ -111,8 +109,7 @@ animation-timing-function: unset;
 
    
 
    Courbes de Bézier cubiques
    
 
-
 
 
    .ease {
    animation-timing-function: ease;
@@ -171,8 +167,7 @@ animation-timing-function: unset;
 
    
 
    Fonctions en escalier
    
 
-
 
 
    .jump-start {
    animation-timing-function: steps(5, jump-start);
@@ -264,7 +258,7 @@ animation-timing-function: unset;
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/animation/index.html b/files/fr/web/css/animation/index.html
index 2458dfa40f..fd5be78c0d 100644
--- a/files/fr/web/css/animation/index.html
+++ b/files/fr/web/css/animation/index.html
@@ -27,8 +27,6 @@ translation_of: Web/CSS/animation
 
 
    {{EmbedInteractiveExample("pages/css/animation.html")}}
    
 
-
-
 
    /* @keyframes duration | timing-function | delay |
    iteration-count | direction | fill-mode | play-state | name */
   animation: 3s ease-in 1s 2 reverse both paused slidein;
@@ -40,8 +38,8 @@ translation_of: Web/CSS/animation
   animation: 3s slidein;
 
    
 
-
 
-
    {{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}
    
+
    {{EmbedLiveSample("animation_example", "100%", 260, "", "", "example-outcome-frame")}}
    
 
 
    Une liste des propriétés qui peuvent être animées est disponible. On notera que cette liste est également valable pour les transitions CSS.
    
 
diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html
index 1de60de406..3f709c1ac5 100644
--- a/files/fr/web/css/appearance/index.html
+++ b/files/fr/web/css/appearance/index.html
@@ -21,8 +21,6 @@ browser-compat: css.properties.appearance
 
 
    {{EmbedInteractiveExample("pages/css/appearance.html")}}
    
 
-
-
 
    Cette propriété était utilisée dans les feuilles de style XUL afin de mettre en forme des widgets utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations XBL pour les widgets livrés avec les logiciels Mozilla.
    
 
 
    
diff --git a/files/fr/web/css/attr()/index.html b/files/fr/web/css/attr()/index.html
index cb6a859554..1a026e67da 100644
--- a/files/fr/web/css/attr()/index.html
+++ b/files/fr/web/css/attr()/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/attr()
 
 
    La fonction attr() est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur les pseudo-éléments auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.
    
 
-
    /* Utilisation simple */
+
    /* Utilisation simple */
 attr(data-count);
 attr(title);
 
@@ -168,11 +168,11 @@ attr(data-something, "default");
 
 
    HTML
    
 
-
    <p data-toto="coucou">world</p>
    
+
    <p data-toto="coucou">world</p>
    
 
 
    CSS
    
 
-
    [data-toto]::before {
+
    [data-toto]::before {
   content: attr(data-toto) " ";
 }
    
 
@@ -186,19 +186,17 @@ attr(data-something, "default");
 
 
    HTML
    
 
-
    <div class="background" data-background="lime"></div>
    
+
    <div class="background" data-background="lime"></div>
    
 
 
    CSS
    
 
-
 
-
    .background {
+
    .background {
   background-color: red;
 }
 
@@ -246,7 +244,7 @@ body,
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/attribute_selectors/index.html b/files/fr/web/css/attribute_selectors/index.html
index e90c7d7fec..1c0631a784 100644
--- a/files/fr/web/css/attribute_selectors/index.html
+++ b/files/fr/web/css/attribute_selectors/index.html
@@ -57,7 +57,7 @@ a[class~="logo"] {
  
    Permet de cibler un élément qui possède un attribut attr dont la valeur se termine par valeur.
    
  
    [attr*=valeur]
    
  
    Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur dans la chaîne de caractères.
    
- 
    [attr operateur valeur i]
    
+ 
    [attr operateur valeur i]
    
  
    On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).
    
  
    [attr operateur valeur s] {{experimental_inline}}
    
  
    Ajouter un s (ou S) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).
    
diff --git a/files/fr/web/css/backface-visibility/index.html b/files/fr/web/css/backface-visibility/index.html
index 2f0a69cc68..510a676f14 100644
--- a/files/fr/web/css/backface-visibility/index.html
+++ b/files/fr/web/css/backface-visibility/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/backface-visibility
 
 
    {{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
    
 
-
-
 
    Dans certains cas, on souhaite que la face avant ne soit pas visible par transparence. Par exemple, si on souhaite simuler une carte à jouer qu'on retourne.
    
 
 
    Cette propriété n'aura aucun effet tant que les transformations appliquées sont uniquement en 2D car aucun effet de perspective ne sera introduit.
    
diff --git a/files/fr/web/css/background-attachment/index.html b/files/fr/web/css/background-attachment/index.html
index 549d4d3cc6..a047e44575 100644
--- a/files/fr/web/css/background-attachment/index.html
+++ b/files/fr/web/css/background-attachment/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/background-attachment
 
 
    {{EmbedInteractiveExample("pages/css/background-attachment.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs avec un mot-clé */
@@ -51,7 +49,7 @@ background-attachment: unset;
 
 
    CSS
    
 
-
    p {
+
    p {
   background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
   background-attachment: fixed;
 }
@@ -76,7 +74,7 @@ background-attachment: unset;
 
 
    CSS
    
 
-
    p {
+
    p {
   background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
   background-attachment: fixed, scroll;
   background-repeat: no-repeat, repeat-y;
diff --git a/files/fr/web/css/background-blend-mode/index.html b/files/fr/web/css/background-blend-mode/index.html
index 4a1096ca9d..0b8bc30a7f 100644
--- a/files/fr/web/css/background-blend-mode/index.html
+++ b/files/fr/web/css/background-blend-mode/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/background-blend-mode
 
 
    {{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.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/background-clip/index.html b/files/fr/web/css/background-clip/index.html
index bad08f1652..78a5167402 100644
--- a/files/fr/web/css/background-clip/index.html
+++ b/files/fr/web/css/background-clip/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/background-clip
 
 
    {{EmbedInteractiveExample("pages/css/background-clip.html")}}
    
 
-
-
 
    Si aucune image ({{cssxref("background-image")}}) ni couleur ({{cssxref("background-color")}}) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via {{cssxref("border-style")}} ou {{cssxref("border-image")}}). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/background-color/index.html b/files/fr/web/css/background-color/index.html
index 77f77b6d54..b536c82c49 100644
--- a/files/fr/web/css/background-color/index.html
+++ b/files/fr/web/css/background-color/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/background-color
 
 
    {{EmbedInteractiveExample("pages/css/background-color.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs avec un mot-clé */
diff --git a/files/fr/web/css/background-image/index.html b/files/fr/web/css/background-image/index.html
index 7aed346038..8060b3da48 100644
--- a/files/fr/web/css/background-image/index.html
+++ b/files/fr/web/css/background-image/index.html
@@ -13,15 +13,15 @@ translation_of: Web/CSS/background-image
 
 
    {{EmbedInteractiveExample("pages/css/background-image.html")}}
    
 
-
-
 
    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")}}.
    
 
 
    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.
    
 
-
    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 {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.
    
+
    
 
 
    Syntaxe
    
 
@@ -155,7 +155,7 @@ div {
 
    Voir aussi
    
 
 
      
- 
    • Implémenter des sprites en CSS
      • 
+ 
    • Implémenter des sprites en CSS
      • 
  
    • {{HTMLElement("img")}},
      • 
  
    • {{cssxref("<image>")}},
      • 
  
    • {{cssxref("<gradient>")}},
      • 
@@ -163,7 +163,7 @@ div {
  
    • {{cssxref("radial-gradient")}},
      • 
  
    • {{cssxref("repeating-linear-gradient")}},
      • 
  
    • {{cssxref("repeating-radial-gradient")}},
      • 
- 
    • {{cssxref("element")}},
      • 
+ 
    • {{cssxref("element()")}},
      • 
  
    • {{cssxref("_image", "image()")}},
      • 
  
    • {{cssxref("image-set")}},
      • 
  
    • {{cssxref("url","url()")}}
      • 
diff --git a/files/fr/web/css/background-origin/index.html b/files/fr/web/css/background-origin/index.html
index bbe137266b..30fda75135 100644
--- a/files/fr/web/css/background-origin/index.html
+++ b/files/fr/web/css/background-origin/index.html
@@ -13,11 +13,11 @@ translation_of: Web/CSS/background-origin
 
 
      {{EmbedInteractiveExample("pages/css/background-origin.html")}}
      
 
-
-
 
      Attention, background-origin est ignorée lorsque {{cssxref("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 {{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.
      
+
      
 
 
      Syntaxe
      
 
diff --git a/files/fr/web/css/background-position-x/index.html b/files/fr/web/css/background-position-x/index.html
index 7d841b7ce5..19ef27e117 100644
--- a/files/fr/web/css/background-position-x/index.html
+++ b/files/fr/web/css/background-position-x/index.html
@@ -16,9 +16,9 @@ translation_of: Web/CSS/background-position-x
 
 
      {{EmbedInteractiveExample("pages/css/background-position-x.html")}}
      
 
-
-
-
      Note : La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de background-position-x.
      
+
      
+  
      Note : La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de background-position-x.
      
+
      
 
 
      Syntaxe
      
 
@@ -102,5 +102,5 @@ background-position-x: unset;
  
    • {{cssxref("background-position-y")}}
      • 
  
    • {{cssxref("background-position-inline")}}
      • 
  
    • {{cssxref("background-position-block")}}
      • 
- 
    • Manipuler plusieurs arrière-plans
      • 
+ 
    • Manipuler plusieurs arrière-plans
      • 
 
    
diff --git a/files/fr/web/css/background-position-y/index.html b/files/fr/web/css/background-position-y/index.html
index 07c6c16350..d6346071e7 100644
--- a/files/fr/web/css/background-position-y/index.html
+++ b/files/fr/web/css/background-position-y/index.html
@@ -14,9 +14,9 @@ translation_of: Web/CSS/background-position-y
 
 
    {{EmbedInteractiveExample("pages/css/background-position-y.html")}}
    
 
-
-
-
    Note : La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.
    
+
    
+  
    Note : La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.
    
+
    
 
 
    Syntaxe
    
 
@@ -101,5 +101,5 @@ background-position-y: unset;
  
  • {{cssxref("background-position-x")}}
    • 
  
  • {{cssxref("background-position-inline")}}
    • 
  
  • {{cssxref("background-position-block")}}
    • 
- 
  • Manipuler plusieurs arrière-plans
    • 
+ 
  • Manipuler plusieurs arrière-plans
    • 
 
diff --git a/files/fr/web/css/background-position/index.html b/files/fr/web/css/background-position/index.html
index a132fa982d..5649bec662 100644
--- a/files/fr/web/css/background-position/index.html
+++ b/files/fr/web/css/background-position/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/background-position
 
 
    {{EmbedInteractiveExample("pages/css/background-position.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs utilisant un mot-clé */
@@ -51,12 +49,11 @@ background-position: unset;
 
 
    La propriété background-position peut être définie grâce à une ou plusieurs valeurs <position>, séparées par des virgules.
    
 
-
    Valeurs
    
+
    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.
    
- 
    
+ 
    <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.
  
    Définition avec une valeur : la valeur peut être :
    
 
  
      
@@ -186,7 +183,7 @@ L'ordre est le même entre background-image et -position.
 
      Voir aussi
      
 
 
        
- 
      • Gérer plusieurs arrières-plans
        • 
+ 
      • Gérer plusieurs arrières-plans
        • 
  
      • {{cssxref("background-position-x")}}
        • 
  
      • {{cssxref("background-position-y")}}
        • 
  
      • {{cssxref("background-position-inline")}}
        • 
diff --git a/files/fr/web/css/background-repeat/index.html b/files/fr/web/css/background-repeat/index.html
index faeff47297..91aeac12e6 100644
--- a/files/fr/web/css/background-repeat/index.html
+++ b/files/fr/web/css/background-repeat/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/background-repeat
 
 
        {{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).
        
 
 
        Syntaxe
        
@@ -45,8 +43,7 @@ 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 :
  
    
  
   
    Angle90.png
    
     
    Un angle droit orienté dans le sens horaire : 90deg = 100grad = 0.25turn ≈ 1.5708rad
    
        		
   
    
   
    Angle180.png
    Un angle plat orienté dans le sens horaire : 180deg = 200grad = 0.5turn ≈ 3.1416rad
   
    
   
    AngleMinus90.png
    Un angle droit orienté dans le sens anti-horaire : -90deg = -100grad = -0.25turn ≈ -1.5708rad
   
    
   
    Angle0.png
    
     
    Un angle nul : 0 = 0deg = 0grad = 0turn = 0rad
    
 
-    
    Note :Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.
    
+    
    Note :Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.
    
        		
   
    
      
 
 
 
 
 
 
 
 
 
 
 
 
 
    
@@ -79,8 +76,7 @@ background-repeat: unset;
    
    
   
    
    
       
  
    
- 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 un tableau décrivant chacune des options :
  
@@ -227,5 +223,5 @@ div {
 
    Voir aussi
    
diff --git a/files/fr/web/css/background-size/index.html b/files/fr/web/css/background-size/index.html
index edb088c899..3ab7be1f5f 100644
--- a/files/fr/web/css/background-size/index.html
+++ b/files/fr/web/css/background-size/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/background-size
 
 
    {{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.
    
 
    
@@ -65,15 +63,15 @@ background-size: unset;
 
    Valeurs
    
- 
    contain
    
+ 
    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.
    
- 
    cover
    
+ 
    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).
    
- 
    auto
    
+ 
    auto
    
  
    Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.
    
- 
    <length>
    
+ 
    <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.
    
- 
    <percentage>
    
+ 
    <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.
    
 
    
 
@@ -98,13 +96,10 @@ background-size: unset;
 
 
    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.
        • 
@@ -112,21 +107,18 @@ background-size: unset;
   
      • 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 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.
    
- 
    
- 
    Si background-size possède une composante auto et que l'autre composante est différente de auto :
    
- 
    
+ 
    Note : Les images SVG peuvent contenir un attribut 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.
    
+
+ 
  • 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.
    
+
    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
    
@@ -258,7 +250,7 @@ background-size: unset;
 
    Voir aussi
    
diff --git a/files/fr/web/css/background/index.html b/files/fr/web/css/background/index.html
index ed55b04e8a..a404e63da6 100644
--- a/files/fr/web/css/background/index.html
+++ b/files/fr/web/css/background/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/background
 
 
    {{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")}}.
    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.
    
@@ -92,7 +90,7 @@ background: no-repeat center/80% url("../img/image.png");
 
 
    CSS
    
 
-
    .attention {
+
    .attention {
   background: pink;
 }
 
@@ -153,6 +151,6 @@ background: no-repeat center/80% url("../img/image.png");
 
 
diff --git a/files/fr/web/css/basic-shape/index.html b/files/fr/web/css/basic-shape/index.html
index 30bee0b07c..0205f6ff16 100644
--- a/files/fr/web/css/basic-shape/index.html
+++ b/files/fr/web/css/basic-shape/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/basic-shape
 
 
    {{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs <basic-shape>. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.
    
@@ -22,44 +20,47 @@ translation_of: Web/CSS/basic-shape
 
    Les formes qui suivent sont prises en charge. Toutes les valeurs <basic-shape> sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à cette page explicative).
    
 
 
    
- 
    inset()
    
+ 
    inset()
    
  
    
+   
    Cette fonction permet de définir un rectangle incrusté (inset).
    
  
    inset( <shape-arg>{1,4} [round <border-radius>]? )
    
 
- 
    Cette fonction permet de définir un rectangle incrusté (inset).
    
-
  
    Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.
    
 
  
    L'argument facultatif <border-radius> permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.
    
 
  
    Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.
    
  
    
- 
    polygon()
    
+ 
    polygon()
    
  
    
+   
    Définit un polygone.
    
  
    polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
    
 
  
    <fill-rule> représente la règle de remplissage utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sont nonzero et evenodd. La valeur par défaut pour cet argument est nonzero.
    
 
- 
    Ensuite, chaque paire d'arguments dans la liste représente les coordonnées xi et yi du i-ème sommet du polygone.
    
+ 
    Ensuite, chaque paire d'arguments dans la liste représente les coordonnées xi et yi du i-ème sommet du polygone.
    
  
    
- 
    circle()
    
+ 
    circle()
    
  
    
+  
    Définit un cercle.
    
  
    circle( [<shape-radius>]? [at <position>]? )
    
 
  
    L'argument <shape-radius> représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence sqrt(largeur^2+hauteur^2)/sqrt(2).
    
 
  
    L'argument {{cssxref("<position>")}} définit la position pour le centre du cercle. La valeur par défaut est center.
    
  
    
- 
    ellipse()
    
+ 
    ellipse()
    
  
    
+  
    Définit une ellipse.
    
  
    ellipse( [<shape-radius>{2}]? [at <position>]? )
    
 
  
    Les arguments <shape-radius> représentent les demi-axes horizontaux (rx) et verticaux (ry) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.
    
 
  
    L'argument {{cssxref("<position>")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est center.
    
  
    
- 
    path()
    
+ 
    path()
    
  
    
+  
    Définit un chemin.
    
  
    path( [<fill-rule>,]? <string>)
    
 
  
    L'argument optionnel <fill-rule> représente la règle de remplissage utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sont nonzero et evenodd. La valeur par défaut est nonzero.
    
@@ -89,7 +90,7 @@ translation_of: Web/CSS/basic-shape
 
 
    L'interpolation des formes simples
    
 
-
    Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme des longueurs, des pourcentages ou des valeurs calculées lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.
    
+
    Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme des longueurs, des pourcentages ou des valeurs calculées lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.
    
 
 
     
    
 
diff --git a/files/fr/web/css/blend-mode/index.html b/files/fr/web/css/blend-mode/index.html
index 2f025a5746..cd83ad75cd 100644
--- a/files/fr/web/css/blend-mode/index.html
+++ b/files/fr/web/css/blend-mode/index.html
@@ -23,292 +23,296 @@ translation_of: Web/CSS/blend-mode
  
    normal
    
  
    
  
    La couleur finale obtenue est la couleur du premier plan, quelle que soit la couleur de l'arrière-plan. On obtient ainsi un effet similaire à la superposition de deux feuilles de papier opaques.
    
-
- 
-
- 
    {{EmbedLiveSample('normal', "300", "300")}}
    
  
    
  
    multiply
    
  
    
  
    La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.
    
   Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.
    
+ 
    
+ 
    screen
    
+ 
    
+ 
    La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.
    
+ 
    
+ 
    overlay
    
+ 
    La couleur finale est celle décrite par multiply si l'arrière-plan est plus sombre ou de screen si elle est plus claire. On a un effet semblable à hard-light avec les couches interverties.
+ 
    
+ 
    darken
    
+ 
    
+ 
    La couleur finale est la couleur la plus sombre des deux couches.
    
+ 
    
+ 
    lighten
    
+ 
    
+ 
    La couleur finale est la couleur la plus claire des deux couches.
    
+ 
    
+ 
    color-dodge
    
+ 
    
+ 
    La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.
    
+  Un premier-plan noir n'entraînera aucun changement.
    
+ 
    
+ 
    color-burn
    
+ 
    
+ 
    La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.
    
+ 
    
+ 
    hard-light
    
+ 
    
+ 
    La couleur finale est le résultat de multiply si le premier plan est plus sombre ou de screen si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à overlay avec les deux couches interverties.
    
+ 
    
+ 
    soft-light
    
+ 
    
+ 
    La couleur finale obtenue est semblable à hard-light, mais est plus douce.
    
+ 
    
+ 
    difference
    
+ 
    
+ 
    La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.
    
+ 
    
+ 
    exclusion
    
+ 
    
+ 
    La couleur finale obtenue est semblable à difference avec moins de contraste. Comme pour difference, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.
    
+ 
    
+ 
    hue
    
+ 
    
+ 
    La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.
    
+ 
    
+ 
    saturation
    
+ 
    
+ 
    La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.
    
+ 
    
+ 
    color
    
+ 
    
+ 
    La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.
    
+ 
    
+ 
    luminosity
    
+ 
    
+ 
    La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.
    
+ 
    
+
    
+
 
- 
 
- 
    {{EmbedLiveSample('multiply', "300", "300")}}
    
- 
- 
    screen
    
- 
    
- 
    La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.
    
+
    {{ EmbedLiveSample('normal', "300", "350") }}
    
+
+
    multiply
    
 
- 
 
- 
    {{EmbedLiveSample('screen', "300", "300")}}
    
- 
    
- 
    overlay
    
- 
    La couleur finale est celle décrite par multiply si l'arrière-plan est plus sombre ou de screen si elle est plus claire. On a un effet semblable à hard-light avec les couches interverties.
- 
 
- 
    {{EmbedLiveSample('overlay', "300", "300")}}
    
- 
    
- 
    darken
    
- 
    
- 
    La couleur finale est la couleur la plus sombre des deux couches.
    
+
    {{ EmbedLiveSample('screen', "300", "350") }}
    
 
- 
 
- 
    {{EmbedLiveSample('darken', "300", "300")}}
    
- 
    
- 
    lighten
    
- 
    
- 
    La couleur finale est la couleur la plus claire des deux couches.
    
+
    {{ EmbedLiveSample('overlay', "300", "350") }}
    
 
- 
 
- 
    {{EmbedLiveSample('lighten', "300", "300")}}
    
- 
    
- 
    color-dodge
    
- 
    
- 
    La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.
    
-  Un premier-plan noir n'entraînera aucun changement.
    
+
    {{ EmbedLiveSample('darken', "300", "350") }}
    
 
- 
 
- 
    {{EmbedLiveSample('color-dodge', "300", "300")}}
    
- 
    
- 
    color-burn
    
- 
    
- 
    La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.
    
+
    {{ EmbedLiveSample('lighten', "300", "350") }}
    
 
- 
 
- 
    {{EmbedLiveSample('color-burn', "300", "300")}}
    
- 
    
- 
    hard-light
    
- 
    
- 
    La couleur finale est le résultat de multiply si le premier plan est plus sombre ou de screen si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à overlay avec les deux couches interverties.
    
+
    {{ EmbedLiveSample('color-dodge', "300", "350") }}
    
+
+
    color-burn
    
 
- 
 
- 
    {{EmbedLiveSample('hard-light', "300", "300")}}
    
- 
    
- 
    soft-light
    
- 
    
- 
    La couleur finale obtenue est semblable à hard-light, mais est plus douce.
    
+
    {{ EmbedLiveSample('color-burn', "300", "350") }}
    
+
+
    hard-light
    
 
- 
 
- 
    {{EmbedLiveSample('soft-light', "300", "300")}}
    
- 
    
- 
    difference
    
- 
    
- 
    La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.
    
+
    {{ EmbedLiveSample('hard-light', "300", "350") }}
    
+
+
    soft-light
    
 
- 
 
- 
    {{EmbedLiveSample('difference', "300", "300")}}
    
- 
    
- 
    exclusion
    
- 
    
- 
    La couleur finale obtenue est semblable à difference avec moins de contraste. Comme pour difference, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.
    
+
    {{ EmbedLiveSample('soft-light', "300", "350") }}
    
 
- 
 
- 
    {{EmbedLiveSample('exclusion', "300", "300")}}
    
- 
    
- 
    hue
    
- 
    
- 
    La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.
    
+
    {{ EmbedLiveSample('difference', "300", "350") }}
    
 
- 
 
- 
    {{EmbedLiveSample('hue', "300", "300")}}
    
- 
    
- 
    saturation
    
- 
    
- 
    La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.
    
+
    {{ EmbedLiveSample('exclusion', "300", "350") }}
    
+
+
    hue
    
 
- 
 
- 
    {{EmbedLiveSample('saturation', "300", "300")}}
    
- 
    
- 
    color
    
- 
    
- 
    La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.
    
+
    {{ EmbedLiveSample('hue', "300", "350") }}
    
+
+
    saturation
    
 
- 
 
- 
    {{EmbedLiveSample('color', "300", "300")}}
    
- 
    
- 
    luminosity
    
- 
    
- 
    La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.
    
+
    {{ EmbedLiveSample('saturation', "300", "350") }}
    
 
- 
 
- 
    {{EmbedLiveSample('luminosity', "300", "300")}}
    
- 
    
-
+
    {{ EmbedLiveSample('color', "300", "350") }}
    
+
+
    luminosity
    
+
+ 
+
+ 
    #div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: luminosity;
+}
    
+
+
    {{ EmbedLiveSample('luminosity', "300", "350") }}
    
 
 
    L'interpolation des modes de fusion
    
 
diff --git a/files/fr/web/css/block-size/index.html b/files/fr/web/css/block-size/index.html
index 2994e685a5..4ed59048b2 100644
--- a/files/fr/web/css/block-size/index.html
+++ b/files/fr/web/css/block-size/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/block-size
 
 
    {{EmbedInteractiveExample("pages/css/block-size.html")}}
    
 
-
-
 
    Si le mode d'écriture est vertical, la valeur de block-size fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.
    
 
 
    L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}.
    
diff --git a/files/fr/web/css/border-block-end-color/index.html b/files/fr/web/css/border-block-end-color/index.html
index a6422a9b92..0837a30800 100644
--- a/files/fr/web/css/border-block-end-color/index.html
+++ b/files/fr/web/css/border-block-end-color/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-end-color
 
 
    {{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}
    
 
-
-
 
    Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
    
 
 
      
diff --git a/files/fr/web/css/border-block-end-style/index.html b/files/fr/web/css/border-block-end-style/index.html
index d776b6e2f3..2f381a74bc 100644
--- a/files/fr/web/css/border-block-end-style/index.html
+++ b/files/fr/web/css/border-block-end-style/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end-style
 
 
      {{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}
      
 
-
-
 
      Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :
      
 
 
        
diff --git a/files/fr/web/css/border-block-end-width/index.html b/files/fr/web/css/border-block-end-width/index.html
index 09d58b14b9..a6cd3ee9ea 100644
--- a/files/fr/web/css/border-block-end-width/index.html
+++ b/files/fr/web/css/border-block-end-width/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end-width
 
 
        {{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}
        
 
-
-
 
        Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/border-block-end/index.html b/files/fr/web/css/border-block-end/index.html
index 64b30fe781..4ec15731fe 100644
--- a/files/fr/web/css/border-block-end/index.html
+++ b/files/fr/web/css/border-block-end/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-end
 
 
        {{EmbedInteractiveExample("pages/css/border-block-end.html")}}
        
 
-
-
 
        Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
        
 
 
        On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :
        
diff --git a/files/fr/web/css/border-block-start-color/index.html b/files/fr/web/css/border-block-start-color/index.html
index 2a19ee6af8..95208d2f9b 100644
--- a/files/fr/web/css/border-block-start-color/index.html
+++ b/files/fr/web/css/border-block-start-color/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-start-color
 
 
        {{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}
        
 
-
-
 
        Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
        
 
 
          
diff --git a/files/fr/web/css/border-block-start-style/index.html b/files/fr/web/css/border-block-start-style/index.html
index 1cc6d32187..a6060e2c1d 100644
--- a/files/fr/web/css/border-block-start-style/index.html
+++ b/files/fr/web/css/border-block-start-style/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-start-style
 
 
          {{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}
          
 
-
-
 
          Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :
          
 
 
            
diff --git a/files/fr/web/css/border-block-start-width/index.html b/files/fr/web/css/border-block-start-width/index.html
index 4b4014b773..4e9e0f6139 100644
--- a/files/fr/web/css/border-block-start-width/index.html
+++ b/files/fr/web/css/border-block-start-width/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-block-start-width
 
 
            {{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}
            
 
-
-
 
            Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-inline-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.
            
 
 
            Syntaxe
            
diff --git a/files/fr/web/css/border-block-start/index.html b/files/fr/web/css/border-block-start/index.html
index 2dc10fd173..44fa752755 100644
--- a/files/fr/web/css/border-block-start/index.html
+++ b/files/fr/web/css/border-block-start/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-block-start
 
 
            {{EmbedInteractiveExample("pages/css/border-block-start.html")}}
            
 
-
-
 
            Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
            
 
 
            On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :
            
diff --git a/files/fr/web/css/border-bottom-color/index.html b/files/fr/web/css/border-bottom-color/index.html
index 2c1405eb2e..a1c9a1bf02 100644
--- a/files/fr/web/css/border-bottom-color/index.html
+++ b/files/fr/web/css/border-bottom-color/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-bottom-color
 
 
            {{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
            
 
-
-
 
            Syntaxe
            
 
 
            /* Valeurs de type <color> */
diff --git a/files/fr/web/css/border-bottom-left-radius/index.html b/files/fr/web/css/border-bottom-left-radius/index.html
index 7fbe0c67a8..be45e9ff52 100644
--- a/files/fr/web/css/border-bottom-left-radius/index.html
+++ b/files/fr/web/css/border-bottom-left-radius/index.html
@@ -13,11 +13,11 @@ translation_of: Web/CSS/border-bottom-left-radius
 
 
            {{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}
            
 
-
-
 
            L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.
            
 
-
            Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-bottom-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
            
+
            
+  
            Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-bottom-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
            
+
            
 
 
            Syntaxe
            
 
diff --git a/files/fr/web/css/border-bottom-right-radius/index.html b/files/fr/web/css/border-bottom-right-radius/index.html
index 01202f17c2..9a9fb45657 100644
--- a/files/fr/web/css/border-bottom-right-radius/index.html
+++ b/files/fr/web/css/border-bottom-right-radius/index.html
@@ -13,11 +13,11 @@ translation_of: Web/CSS/border-bottom-right-radius
 
 
            {{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}
            
 
-
-
 
            Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.
            
 
-
            Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-bottom-right-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
            
+
            
+  
            Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-bottom-right-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
            
+
            
 
 
            Syntaxe
            
 
diff --git a/files/fr/web/css/border-bottom-style/index.html b/files/fr/web/css/border-bottom-style/index.html
index 25af11dd26..82a22dc543 100644
--- a/files/fr/web/css/border-bottom-style/index.html
+++ b/files/fr/web/css/border-bottom-style/index.html
@@ -13,9 +13,9 @@ translation_of: Web/CSS/border-bottom-style
 
 
            {{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
            
 
-
-
-
            Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
            
+
            
+  
            Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
            
+
            
 
 
            Syntaxe
            
 
@@ -46,72 +46,42 @@ border-bottom-style: unset;
   
    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
diff --git a/files/fr/web/css/border-bottom-width/index.html b/files/fr/web/css/border-bottom-width/index.html
index 32224d9304..62e85b5adb 100644
--- a/files/fr/web/css/border-bottom-width/index.html
+++ b/files/fr/web/css/border-bottom-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-bottom-width
 
 
    {{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}
    
 
-
-
 
    Syntaxe
    /* Une valeur de longueur */
@@ -39,31 +37,11 @@ border-bottom-width: unset;
 
    
  
    <line-width>
    
  
    Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
- 
    
   
    
    
 
 
 
 
 
 
 
 
 
 
 
 
    
    
    
     none
-     
     
    
-        		
     L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.
    
    
    
    
     hidden
-     
     
    
-        		
     L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.
    
    
    
    
     dotted
-     
     
    
-        		
     Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-bottom-width")}}.
    
    
    
    
     dashed
-     
     
    
-        		
     Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
    
    
    
    
     solid
-     
     
    
-        		
     Affiche une ligne droite continue.
    
    
    
    
     double
-     
     
    
-        		
     Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.
    
    
    
    
     groove
-     
     
    
-        		
     La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
    
    
    
    
     ridge
-     
     
    
-        		
     La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
    
    
    
    
     inset
-     
     
    
-        		
     La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
    
    
    
    
     outset
-     
     
    
-        		
     
      
    La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.
    
         		
 
 
    
-  
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-  
- 
    thin
-     
     
    
-        		Une bordure fine.
    medium
-     
     
    
-        		Une bordure moyenne.
    thick
-     
     
    
-        		Une bordure épaisse.
    
+  
      
+    
    • thin (fin)
      • 
+    
    • medium (intermédiaire)
      • 
+    
    • thick (épais)
      • 
+  
    
  La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée thin ≤ medium ≤ thick et que ces valeurs soient constantes pour un même document.
    
 
 
diff --git a/files/fr/web/css/border-bottom/index.html b/files/fr/web/css/border-bottom/index.html
index b02a21e637..40903908a8 100644
--- a/files/fr/web/css/border-bottom/index.html
+++ b/files/fr/web/css/border-bottom/index.html
@@ -23,8 +23,6 @@ translation_of: Web/CSS/border-bottom
 
 
    {{EmbedInteractiveExample("pages/css/border-bottom.html")}}
    
 
-
-
 
    
 
    Note : Comme pour les autres propriétés raccourcies, border-bottom définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :
    
 
diff --git a/files/fr/web/css/border-collapse/index.html b/files/fr/web/css/border-collapse/index.html
index 44857ef640..1751aa7ddf 100644
--- a/files/fr/web/css/border-collapse/index.html
+++ b/files/fr/web/css/border-collapse/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-collapse
 
 
    {{EmbedInteractiveExample("pages/css/border-collapse.html")}}
    
 
-
-
 
    Le modèle des bordures séparées est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}.
    
 
 
    Le modèle des bordures fusionnées permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs inset et outset de {{cssxref("border-style")}} se comportent respectivement comme groove et ridge.
    
diff --git a/files/fr/web/css/border-color/index.html b/files/fr/web/css/border-color/index.html
index 75ccdf21eb..34c8a624c4 100644
--- a/files/fr/web/css/border-color/index.html
+++ b/files/fr/web/css/border-color/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-color
 
 
    {{EmbedInteractiveExample("pages/css/border-color.html")}}
    
 
-
-
 
    Chaque côté peut être paramétré individuellement grâce aux propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} et {{cssxref("border-left-color")}} ou, si on utilise les propriétés logiques : {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/border-image-outset/index.html b/files/fr/web/css/border-image-outset/index.html
index 268d5a3a87..72861fff31 100644
--- a/files/fr/web/css/border-image-outset/index.html
+++ b/files/fr/web/css/border-image-outset/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-outset
 
 
    {{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é.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/border-image-repeat/index.html b/files/fr/web/css/border-image-repeat/index.html
index cdd8232f24..73277c07d4 100644
--- a/files/fr/web/css/border-image-repeat/index.html
+++ b/files/fr/web/css/border-image-repeat/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-repeat
 
 
    {{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* border-image-repeat                      */
diff --git a/files/fr/web/css/border-image-slice/index.html b/files/fr/web/css/border-image-slice/index.html
index 5466c32526..ab1572f57c 100644
--- a/files/fr/web/css/border-image-slice/index.html
+++ b/files/fr/web/css/border-image-slice/index.html
@@ -13,9 +13,7 @@ translation_of: Web/CSS/border-image-slice
 
 
    {{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
    
 
-
-
-
    Les 9 zones définies par border-image-slice
    
+
    Les 9 zones définies par border-image-slice
    
 
 
    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).
    
 
@@ -126,5 +124,5 @@ border-image-slice: unset;
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/border-image-source/index.html b/files/fr/web/css/border-image-source/index.html
index 904c1ccdfd..f030f45974 100644
--- a/files/fr/web/css/border-image-source/index.html
+++ b/files/fr/web/css/border-image-source/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-source
 
 
    {{EmbedInteractiveExample("pages/css/border-image-source.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeur avec un mot-clé */
diff --git a/files/fr/web/css/border-image-width/index.html b/files/fr/web/css/border-image-width/index.html
index 03f2a742d1..f334914cde 100644
--- a/files/fr/web/css/border-image-width/index.html
+++ b/files/fr/web/css/border-image-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-image-width
 
 
    {{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.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/border-image/index.html b/files/fr/web/css/border-image/index.html
index a17db19da4..d945857f9f 100644
--- a/files/fr/web/css/border-image/index.html
+++ b/files/fr/web/css/border-image/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-image
 
 
    {{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.
    
 
 
    
diff --git a/files/fr/web/css/border-inline-end-color/index.html b/files/fr/web/css/border-inline-end-color/index.html
index 9289f6ecda..bc4b34cade 100644
--- a/files/fr/web/css/border-inline-end-color/index.html
+++ b/files/fr/web/css/border-inline-end-color/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-color
 
 
    {{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
    
 
-
-
 
    Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
    
 
 
      
diff --git a/files/fr/web/css/border-inline-end-style/index.html b/files/fr/web/css/border-inline-end-style/index.html
index e161161904..7fa9597e99 100644
--- a/files/fr/web/css/border-inline-end-style/index.html
+++ b/files/fr/web/css/border-inline-end-style/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-style
 
 
      {{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
      
 
-
-
 
      Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :
      
 
 
        
diff --git a/files/fr/web/css/border-inline-end-width/index.html b/files/fr/web/css/border-inline-end-width/index.html
index 41aac7ad6c..1c01412029 100644
--- a/files/fr/web/css/border-inline-end-width/index.html
+++ b/files/fr/web/css/border-inline-end-width/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end-width
 
 
        {{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
        
 
-
-
 
        Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-start-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/border-inline-end/index.html b/files/fr/web/css/border-inline-end/index.html
index a801d40d70..860957487a 100644
--- a/files/fr/web/css/border-inline-end/index.html
+++ b/files/fr/web/css/border-inline-end/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/border-inline-end
 
 
        {{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
        
 
-
-
 
        Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
        
 
 
        On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :
        
diff --git a/files/fr/web/css/border-inline-start-color/index.html b/files/fr/web/css/border-inline-start-color/index.html
index 8cf5b5b11f..f2b6520344 100644
--- a/files/fr/web/css/border-inline-start-color/index.html
+++ b/files/fr/web/css/border-inline-start-color/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start-color
 
 
        {{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
        
 
-
-
 
        Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
        
 
 
          
diff --git a/files/fr/web/css/border-inline-start-width/index.html b/files/fr/web/css/border-inline-start-width/index.html
index 648cd04479..a530bc3c6e 100644
--- a/files/fr/web/css/border-inline-start-width/index.html
+++ b/files/fr/web/css/border-inline-start-width/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start-width
 
 
          {{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
          
 
-
-
 
          Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.
          
 
 
          Syntaxe
          
diff --git a/files/fr/web/css/border-inline-start/index.html b/files/fr/web/css/border-inline-start/index.html
index 31c508d4ed..1e57c3f268 100644
--- a/files/fr/web/css/border-inline-start/index.html
+++ b/files/fr/web/css/border-inline-start/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-inline-start
 
 
          {{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
          
 
-
-
 
          Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
          
 
 
          On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :
          
diff --git a/files/fr/web/css/border-left-color/index.html b/files/fr/web/css/border-left-color/index.html
index 7c333ed82f..d19f3c7ad2 100644
--- a/files/fr/web/css/border-left-color/index.html
+++ b/files/fr/web/css/border-left-color/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-left-color
 
 
          {{EmbedInteractiveExample("pages/css/border-left-color.html")}}
          
 
-
-
 
          Syntaxe
          
 
 
          /* Valeurs de type <color> */
diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html
index ad7a1c9fb9..3bb7d560f3 100644
--- a/files/fr/web/css/border-left-style/index.html
+++ b/files/fr/web/css/border-left-style/index.html
@@ -13,9 +13,9 @@ translation_of: Web/CSS/border-left-style
 
 
          {{EmbedInteractiveExample("pages/css/border-left-style.html")}}
          
 
-
-
-
          Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
          
+
          
+  
          Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
          
+
          
 
 
          Syntaxe
          
 
@@ -46,72 +46,42 @@ border-left-style: unset;
   
    
     none
-    
-     
           
          
-    
     L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.
    
    
     hidden
-    
-     
           
          
-    
     L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
    
    
     dotted
-    
-     
           
          
-    
     Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.
    
    
     dashed
-    
-     
           
          
-    
     Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
    
    
     solid
-    
-     
           
          
-    
     Affiche une ligne droite continue.
    
    
     double
-    
-     
           
          
-    
     Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.
    
    
     groove
-    
-     
           
          
-    
     La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
    
    
     ridge
-    
-     
           
          
-    
     La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
    
    
     inset
-    
-     
           
          
-    
     La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
    
    
     outset
-    
-     
           
          
-    
     
      
          La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.
          
     
diff --git a/files/fr/web/css/border-left-width/index.html b/files/fr/web/css/border-left-width/index.html
index 4b5b84a190..5c218977d1 100644
--- a/files/fr/web/css/border-left-width/index.html
+++ b/files/fr/web/css/border-left-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-left-width
 
 
          {{EmbedInteractiveExample("pages/css/border-left-width.html")}}
          
 
-
-
 
          Syntaxe
          
 
 
          /* Une valeur de longueur */
@@ -39,31 +37,11 @@ border-left-width: unset;
 
          
  
          <br-width>
          
  
          Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté gauche de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
- 
-  
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-  
- 
          thin
-     
           
          
-              		Une bordure fine.
          medium
-     
           
          
-              		Une bordure moyenne.
          thick
-     
           
          
-              		Une bordure épaisse.
          
+  
            
+    
          • thin (fin)
            • 
+    
          • medium (intermédiaire)
            • 
+    
          • thick (épais)
            • 
+  
          
  La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée thin ≤ medium ≤ thick et que ces valeurs soient constantes pour un même document.
          
 
          
 
diff --git a/files/fr/web/css/border-left/index.html b/files/fr/web/css/border-left/index.html
index b0a1a7de7d..bd60bc0f95 100644
--- a/files/fr/web/css/border-left/index.html
+++ b/files/fr/web/css/border-left/index.html
@@ -23,8 +23,6 @@ translation_of: Web/CSS/border-left
 
 
          {{EmbedInteractiveExample("pages/css/border-left.html")}}
          
 
-
-
 
          
 
          Note : Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.
          
 
diff --git a/files/fr/web/css/border-radius/index.html b/files/fr/web/css/border-radius/index.html
index 779403fa01..540cf83bc4 100644
--- a/files/fr/web/css/border-radius/index.html
+++ b/files/fr/web/css/border-radius/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/border-radius
 
 
          {{EmbedInteractiveExample("pages/css/border-radius.html")}}
          
 
-
-
 
          La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.
          
 
-
          Cette propriété est une propriété raccourcie qui permet de définir :
          
+
          Cette propriété est une propriété raccourcie qui permet de définir :
          
 
 
            
  
          • {{cssxref("border-top-left-radius")}},
            • 
@@ -29,7 +27,9 @@ translation_of: Web/CSS/border-radius
 
 
            La propriété border-radius ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut collapse.
            
 
-
            Note : Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (border-radius:0 0 inherit inherit pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.
            
+
            
+  
            Note : Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (border-radius:0 0 inherit inherit pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.
            
+
            
 
 
            Syntaxe
            
 
@@ -94,46 +94,46 @@ border-radius: unset;
  
   
    Une seule valeur
-   all-corner.png
+   
    Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.
   
   
    Deux valeurs (coin en haut à gauche et en bas à droite)
-   top-left-bottom-right.png
+   
    Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.
   
   
    Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)
-   top-right-bottom-left.png
+   
    Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.
   
   
    Coin en haut à gauche
-   top-left.png
+   
    Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
   
   
    Coin en haut à droite
-   top-right.png
+   
    Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
   
   
    Coin en bas à droite
-   bottom-rigth.png
+   
    Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
   
   
    Coin en bas à gauche
-   bottom-left.png
+   
    Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
   
  
 
 
 
            
- 
            <length>
            
+ 
            <length>
            
  
            Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("<length>")}}. Les valeurs négatives sont considérées comme invalides.
            
- 
            <percentage>
            
+ 
            <percentage>
            
  
            Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("<percentage>")}} pour plus de détails.
            
 
            
 
diff --git a/files/fr/web/css/border-right-color/index.html b/files/fr/web/css/border-right-color/index.html
index 9136bfccec..7ec0703a27 100644
--- a/files/fr/web/css/border-right-color/index.html
+++ b/files/fr/web/css/border-right-color/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-right-color
 
 
            {{EmbedInteractiveExample("pages/css/border-right-color.html")}}
            
 
-
-
 
            Syntaxe
            
 
 
            /* Valeurs de type <color> */
diff --git a/files/fr/web/css/border-right-style/index.html b/files/fr/web/css/border-right-style/index.html
index 63edb2d351..13e84b546f 100644
--- a/files/fr/web/css/border-right-style/index.html
+++ b/files/fr/web/css/border-right-style/index.html
@@ -13,9 +13,9 @@ translation_of: Web/CSS/border-right-style
 
 
            {{EmbedInteractiveExample("pages/css/border-right-style.html")}}
            
 
-
-
-
            Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
            
+
            
+  
            Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
            
+
            
 
 
            Syntaxe
            
 
@@ -46,72 +46,42 @@ border-right-style: unset;
   
    
     none
-    
-     
             
            
-    
     L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.
    
    
     hidden
-    
-     
             
            
-    
     L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
    
    
     dotted
-    
-     
             
            
-    
     Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-right-width")}}.
    
    
     dashed
-    
-     
             
            
-    
     Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
    
    
     solid
-    
-     
             
            
-    
     Affiche une ligne droite continue.
    
    
     double
-    
-     
             
            
-    
     Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.
    
    
     groove
-    
-     
             
            
-    
     La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
    
    
     ridge
-    
-     
             
            
-    
     La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
    
    
     inset
-    
-     
             
            
-    
     La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
    
    
     outset
-    
-     
             
            
-    
     
      
            La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.
            
     
diff --git a/files/fr/web/css/border-right-width/index.html b/files/fr/web/css/border-right-width/index.html
index 3211387ef2..f2233827aa 100644
--- a/files/fr/web/css/border-right-width/index.html
+++ b/files/fr/web/css/border-right-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-right-width
 
 
            {{EmbedInteractiveExample("pages/css/border-right-width.html")}}
            
 
-
-
 
            Syntaxe
            
 
 
            /* Valeurs avec un mot-clé */
@@ -38,31 +36,11 @@ border-right-width: unset;
            
 
            
  
            <br-width>
            
  
            Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
- 
-  
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-  
- 
            thin
-     
             
            
-                		Une bordure fine.
            medium
-     
             
            
-                		Une bordure moyenne.
            thick
-     
             
            
-                		Une bordure épaisse.
            
+  
              
+    
            • thin (fin)
              • 
+    
            • medium (intermédiaire)
              • 
+    
            • thick (épais)
              • 
+  
            
  La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée thin ≤ medium ≤ thick et que ces valeurs soient constantes pour un même document.
            
 
            
 
diff --git a/files/fr/web/css/border-right/index.html b/files/fr/web/css/border-right/index.html
index 5ce5ece5b2..9c33a5c287 100644
--- a/files/fr/web/css/border-right/index.html
+++ b/files/fr/web/css/border-right/index.html
@@ -21,8 +21,6 @@ translation_of: Web/CSS/border-right
 
 
            {{EmbedInteractiveExample("pages/css/border-right.html")}}
            
 
-
-
 
            Ces propriétés permettent de décrire la bordure du côté droit d'un élément.
            
 
 
            
diff --git a/files/fr/web/css/border-spacing/index.html b/files/fr/web/css/border-spacing/index.html
index f06382de34..f6e0d18643 100644
--- a/files/fr/web/css/border-spacing/index.html
+++ b/files/fr/web/css/border-spacing/index.html
@@ -14,12 +14,10 @@ translation_of: Web/CSS/border-spacing
 
 
            {{EmbedInteractiveExample("pages/css/border-spacing.html")}}
            
 
-
-
 
            La valeur de border-spacing est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du border-spacing approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).
            
 
 
            
-
            Note : La propriété border-spacing équivaut à l'attribut déprécié cellspacing de l'élément <table>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.
            
+
            Note : La propriété border-spacing équivaut à l'attribut déprécié cellspacing de l'élément <table>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.
            
 
            
 
 
            Syntaxe
            
diff --git a/files/fr/web/css/border-style/index.html b/files/fr/web/css/border-style/index.html
index 78f8ed3007..1ddbc35fff 100644
--- a/files/fr/web/css/border-style/index.html
+++ b/files/fr/web/css/border-style/index.html
@@ -11,9 +11,7 @@ translation_of: Web/CSS/border-style
 
 
            La propriété CSS border-style est une propriété raccourcie qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément.
            
 
-
            {{EmbedInteractiveExample("pages/css/border-style.html")}}
            
-
-
+
            {{EmbedInteractiveExample("pages/css/border-style.html")}}
            Syntaxe
 
@@ -44,7 +42,9 @@ border-style: initial;
 border-style: unset;
 
            
 
-
            Note : La valeur par défaut de border-style est none. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de none ou de hidden.
            
+
            
+  
            Note : La valeur par défaut de border-style est none. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de none ou de hidden.
            
+
            
 
 
            La propriété border-style peut être définie avec une, deux, trois ou quatre valeurs :
            
 
@@ -73,65 +73,38 @@ border-style: unset;
    
    
     hidden
-    
-     
             
            
-    
     L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
    
    
     dotted
-    
-     
             
            
-    
     Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-width")}}.
    
    
     dashed
-    
-     
             
            
-    
     Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
    
    
     solid
-    
-     
             
            
-    
     Affiche une ligne droite continue.
    
    
     double
-    
-     
             
            
-    
     Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.
    
    
     groove
-    
-     
             
            
-    
     La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
    
    
     ridge
-    
-     
             
            
-    
     La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
    
    
     inset
-    
-     
             
            
-    
     La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
    
    
     outset
-    
-     
             
            
-    
     
      
            La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.
            
     
diff --git a/files/fr/web/css/border-top-color/index.html b/files/fr/web/css/border-top-color/index.html
index d3a9afc9b6..4abdfc1493 100644
--- a/files/fr/web/css/border-top-color/index.html
+++ b/files/fr/web/css/border-top-color/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/border-top-color
 
 
            {{EmbedInteractiveExample("pages/css/border-top-color.html")}}
            
 
-
-
 
            Syntaxe
            
 
 
            /* Valeurs de type <color> */
diff --git a/files/fr/web/css/border-top-left-radius/index.html b/files/fr/web/css/border-top-left-radius/index.html
index d894bf6244..0c34d5e94d 100644
--- a/files/fr/web/css/border-top-left-radius/index.html
+++ b/files/fr/web/css/border-top-left-radius/index.html
@@ -13,9 +13,9 @@ translation_of: Web/CSS/border-top-left-radius
 
 
            {{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
            
 
-
-
-
            Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-top-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
            
+
            
+  
            Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-top-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
            
+
            
 
 
            Syntaxe
            
 
diff --git a/files/fr/web/css/border-top-right-radius/index.html b/files/fr/web/css/border-top-right-radius/index.html
index 6c283db1cb..51c7324d0f 100644
--- a/files/fr/web/css/border-top-right-radius/index.html
+++ b/files/fr/web/css/border-top-right-radius/index.html
@@ -13,11 +13,11 @@ translation_of: Web/CSS/border-top-right-radius
 
 
            {{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}
            
 
-
-
 
            Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.
            
 
-
            Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-top-radius-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
            
+
            
+  
            Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-top-radius-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
            
+
            
 
 
            Syntaxe
            
 
diff --git a/files/fr/web/css/border-top-style/index.html b/files/fr/web/css/border-top-style/index.html
index 6509483f06..aa175464ec 100644
--- a/files/fr/web/css/border-top-style/index.html
+++ b/files/fr/web/css/border-top-style/index.html
@@ -13,9 +13,9 @@ translation_of: Web/CSS/border-top-style
 
 
            {{EmbedInteractiveExample("pages/css/border-top-style.html")}}
            
 
-
-
-
            Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
            
+
            
+  
            Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
            
+
            
 
 
            Syntaxe
            
 
@@ -46,72 +46,42 @@ border-top-style: inherit;
   
    
     none
-    
-     
             
            
-    
     L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.
    
    
     hidden
-    
-     
             
            
-    
     L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
    
    
     dotted
-    
-     
             
            
-    
     Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-top-width")}}.
    
    
     dashed
-    
-     
             
            
-    
     Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
    
    
     solid
-    
-     
             
            
-    
     Affiche une ligne droite continue.
    
    
     double
-    
-     
             
            
-    
     Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.
    
    
     groove
-    
-     
             
            
-    
     La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
    
    
     ridge
-    
-     
             
            
-    
     La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
    
    
     inset
-    
-     
             
            
-    
     La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
    
    
     outset
-    
-     
             
            
-    
     
      
            La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.
            
     
diff --git a/files/fr/web/css/border-top-width/index.html b/files/fr/web/css/border-top-width/index.html
index 835f9c5cc5..e96b5ef89f 100644
--- a/files/fr/web/css/border-top-width/index.html
+++ b/files/fr/web/css/border-top-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border-top-width
 
 
            {{EmbedInteractiveExample("pages/css/border-top-width.html")}}
            
 
-
-
 
            Syntaxe
            
 
 
            /* Une valeur de longueur */
@@ -39,31 +37,11 @@ border-top-width: unset;
 
            
  
            <line-width>
            
  
            Une valeur de longueur ({{cssxref("<length>")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
- 
-  
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-  
- 
            thin
-     
             
            
-                		Une bordure fine.
            medium
-     
             
            
-                		Une bordure moyenne.
            thick
-     
             
            
-                		Une bordure épaisse.
            
+  
              
+    
            • thin (fin)
              • 
+    
            • medium (intermédiaire)
              • 
+    
            • thick (épais)
              • 
+  
            
  La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée thin ≤ medium ≤ thick et que ces valeurs soient constantes pour un même document.
            
 
            
 
diff --git a/files/fr/web/css/border-top/index.html b/files/fr/web/css/border-top/index.html
index 8393224111..4b9d59fe82 100644
--- a/files/fr/web/css/border-top/index.html
+++ b/files/fr/web/css/border-top/index.html
@@ -21,8 +21,6 @@ translation_of: Web/CSS/border-top
 
 
            {{EmbedInteractiveExample("pages/css/border-top.html")}}
            
 
-
-
 
            
 
            Note : Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.
            
 
diff --git a/files/fr/web/css/border-width/index.html b/files/fr/web/css/border-width/index.html
index 2399f59f98..f41d3cb8a7 100644
--- a/files/fr/web/css/border-width/index.html
+++ b/files/fr/web/css/border-width/index.html
@@ -26,8 +26,6 @@ translation_of: Web/CSS/border-width
 
 
            {{EmbedInteractiveExample("pages/css/border-width.html")}}
            
 
-
-
 
            Syntaxe
            
 
 
            /* Valeurs avec un mot-clé */
@@ -68,31 +66,11 @@ border-width: unset;
 
            
  
            <line-width>
            
  
            Une valeur de longueur (type {{cssxref("<length>")}} ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :
- 
-  
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-   
-    
-    
-    
-   
-  
- 
            thin
-     
             
            
-                		La bordure est fine.
            medium
-     
             
            
-                		La bordure est moyenne.
            thick
-     
             
            
-                		La bordure est épaisse.
            
+  
              
+    
            • thin (fin)
              • 
+    
            • medium (intermédiaire)
              • 
+    
            • thick (épais)
              • 
+  
            
   La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : thin ≤ medium ≤ thick et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.
            
 
            
 
diff --git a/files/fr/web/css/border/index.html b/files/fr/web/css/border/index.html
index c44cac3e09..1c1edbdede 100644
--- a/files/fr/web/css/border/index.html
+++ b/files/fr/web/css/border/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/border
 
 
            {{EmbedInteractiveExample("pages/css/border.html")}}
            
 
-
-
 
            Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est none). Ainsi, border peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.
            
 
 
            
@@ -59,11 +57,11 @@ border: unset;
 
            Valeurs
            
 
 
            
- 
            <line-width>
            
+ 
            <line-width>
            
  
            Voir {{cssxref("border-width")}} (la valeur par défaut est medium).
            
- 
            <line-style>
            
+ 
            <line-style>
            
  
            Voir {{cssxref("border-style")}} (la valeur par défaut est none).
            
- 
            <color>
            
+ 
            <color>
            
  
            Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("<color>")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).
            
 
            
 
diff --git a/files/fr/web/css/bottom/index.html b/files/fr/web/css/bottom/index.html
index 3a23446bda..b1b5d78f15 100644
--- a/files/fr/web/css/bottom/index.html
+++ b/files/fr/web/css/bottom/index.html
@@ -11,9 +11,7 @@ translation_of: Web/CSS/bottom
 
 
            La propriété bottom contribue à la définition de l'emplacement vertical des éléments positionnés. Elle n'a aucun effet pour les éléments non-positionnés.
            
 
-
            {{EmbedInteractiveExample("pages/css/bottom.html")}}
            
-
-
+
            {{EmbedInteractiveExample("pages/css/bottom.html")}}
            Pour les éléments positionnés de façon absolue, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut absolute ou fixed, la propriété bottom définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.
            
 
@@ -50,17 +48,17 @@ bottom: unset;
  
            <length>
            
  
            Une longueur (type {{cssxref("<length>")}} qui représente :
  
              
-  
            • La distance depuis le bord bas du bloc englobant pour les éléments positionnés de façon absolue
              • 
-  
            • Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour les éléments positionnés de façon relative .
              • 
+  
            • La distance depuis le bord bas du bloc englobant pour les éléments positionnés de façon absolue
              • 
+  
            • Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour les éléments positionnés de façon relative.
              • 
  
            
  
            
  
            <percentage>
            
  
            Une valeur de pourcentage (type {{cssxref("<percentage>")}} exprimée par rapport à la hauteur du bloc englobant.
            
  
            auto
            
- 
            
+ 
             Indique pour :
  
              
-  
            • Pour les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété {{cssxref("top")}} et height: auto est traitée comme une hauteur basée sur la taille du contenu
              • 
-  
            • Pour les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également auto, l'élément n'est pas déplacé verticalement.
              • 
+  
            • Les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété {{cssxref("top")}} et height: auto est traitée comme une hauteur basée sur la taille du contenu
              • 
+  
            • Les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également auto, l'élément n'est pas déplacé verticalement.
              • 
  
            
  
            
  
            inherit
            
diff --git a/files/fr/web/css/box-align/index.html b/files/fr/web/css/box-align/index.html
index 65c0e3ea92..731682f8ba 100644
--- a/files/fr/web/css/box-align/index.html
+++ b/files/fr/web/css/box-align/index.html
@@ -112,8 +112,8 @@ div.exemple > p {
 
            Spécifications
            
 
 
 
 
            {{cssinfo}}
            
diff --git a/files/fr/web/css/box-decoration-break/index.html b/files/fr/web/css/box-decoration-break/index.html
index 989fe8020e..cfbe10973c 100644
--- a/files/fr/web/css/box-decoration-break/index.html
+++ b/files/fr/web/css/box-decoration-break/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/box-decoration-break
 
 
            {{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
            
 
-
-
 
            Syntaxe
            
 
 
            /* Valeurs avec un mot-clé */
@@ -72,7 +70,7 @@ box-decoration-break: unset;
 
 
            Image équivalente
            
 
-
            A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.
            
+
            A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.
            
 
 
            Avec clone
            
 
@@ -103,29 +101,21 @@ box-decoration-break: unset;
 
 
            Image équivalente
            
 
-
            A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example
            
+
            A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example
            
 
 
            Gestion des fragments pour les boîtes en bloc
            
 
-
            Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc :
            
-
-
              
- 
            1. Sans fragmentation
              2. 
-
            
+
            Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc sans fragmentation:
            
 
-
            A screenshot of the rendering of the block element used in the examples without any fragmentation.
            
+
            A screenshot of the rendering of the block element used in the examples without any fragmentation.
            
 
-
              
- 
            1. En décomposant le bloc sur trois colonnes, normalement (slice), on aura :
              2. 
-
            
+
            En décomposant le bloc sur trois colonnes, normalement (slice), on aura :
            
 
-
            A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.
            
+
            A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.
            
 
-
              
- 
            1. Si on applique box-decoration-break:clone, voici le résultat :
              2. 
-
            
+
            Si on applique box-decoration-break:clone, voici le résultat :
            
 
-
            A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.
            
+
            A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.
            
 
 
            Spécifications
            
 
diff --git a/files/fr/web/css/box-direction/index.html b/files/fr/web/css/box-direction/index.html
index 749a876f1f..9a62ce1e3f 100644
--- a/files/fr/web/css/box-direction/index.html
+++ b/files/fr/web/css/box-direction/index.html
@@ -11,10 +11,10 @@ translation_of: Web/CSS/box-direction
 
            {{CSSRef}}{{Non-standard_header}}
            
 
 
            
-
            Attention ! Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version. La propriété -moz-box-direction ne peut être utilisée que dans des composants XUL tandis que la propriété box-direction a été remplacée par la propriété standard flex-direction. Voir la page Flexbox pour plus d'informations sur ce qui doit être utilisé à la place.
            
+
            Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version. La propriété -moz-box-direction ne peut être utilisée que dans des composants XUL tandis que la propriété box-direction a été remplacée par la propriété standard flex-direction. Voir la page Flexbox pour plus d'informations sur ce qui doit être utilisé à la place.
            
 
            
 
-
            La propriété box-direction définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page Flexbox.
            
+
            La propriété box-direction définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page Flexbox.
            
 
 
            /* Valeurs avec un mot-clé */
 box-direction: normal;
@@ -58,8 +58,8 @@ box-direction: unset;
 
            Spécifications
            
 
 
 
 
            {{cssinfo}}
            
diff --git a/files/fr/web/css/box-flex-group/index.html b/files/fr/web/css/box-flex-group/index.html
index 39b0639069..c04d6907b0 100644
--- a/files/fr/web/css/box-flex-group/index.html
+++ b/files/fr/web/css/box-flex-group/index.html
@@ -11,12 +11,12 @@ translation_of: Web/CSS/box-flex-group
 
            {{CSSRef}}{{Non-standard_header}}
            
 
 
            
-
            Attention ! Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
+
            Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
 
            
 
-
            Voir la page Flexbox pour plus d'informations.
            
+
            Voir la page Flexbox pour plus d'informations.
            
 
-
            La propriété box-flex-group permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
+
            La propriété box-flex-group permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
 
 
            /* Un entier désignant le groupe */
 /* Type <integer>                */
@@ -44,8 +44,8 @@ box-flex-group: unset;
 
            Spécifications
            
 
 
 
 
            {{cssinfo}}
            
diff --git a/files/fr/web/css/box-flex/index.html b/files/fr/web/css/box-flex/index.html
index 33eb7e1a38..8029705961 100644
--- a/files/fr/web/css/box-flex/index.html
+++ b/files/fr/web/css/box-flex/index.html
@@ -10,9 +10,11 @@ translation_of: Web/CSS/box-flex
 ---
 
            {{CSSRef}}{{Non-standard_header}}
            
 
-
            Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour box-flex ni au comportement de -webkit-box-flex. Voir la page Flexbox pour plus d'informations sur ce qui doit être utilisé à la place.
            
+
            
+  
            Attention : Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour box-flex ni au comportement de -webkit-box-flex. Voir la page Flexbox pour plus d'informations sur ce qui doit être utilisé à la place.
            
+
            
 
-
            Les propriétés -moz-box-flex et -webkit-box-flex définissent la façon dont une boîte -moz-box ou -webkit-box s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
+
            Les propriétés -moz-box-flex et -webkit-box-flex définissent la façon dont une boîte -moz-box ou -webkit-box s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
 
 
            /* Valeurs numériques */
 /* Type <number>      */
@@ -90,7 +92,7 @@ div.exemple > p:nth-child(2) {
 
 
            Spécifications
            
 
-
            Cette propriété n'est pas une propriété standard. Une ancienne version de la spécification CSS3 pour les boîtes flexibles définissait une propriété box-flex mais ce brouillon a depuis été remplacé.
            
+
            Cette propriété n'est pas une propriété standard. Une ancienne version de la spécification CSS3 pour les boîtes flexibles définissait une propriété box-flex mais ce brouillon a depuis été remplacé.
            
 
 
            {{cssinfo}}
            
 
diff --git a/files/fr/web/css/box-lines/index.html b/files/fr/web/css/box-lines/index.html
index 8807932717..9c01911dbc 100644
--- a/files/fr/web/css/box-lines/index.html
+++ b/files/fr/web/css/box-lines/index.html
@@ -10,13 +10,13 @@ translation_of: Web/CSS/box-lines
 ---
 
            {{CSSRef}}{{Non-standard_header}}
            
 
-
            
-
            Attention ! Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
+
            
+
            Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
 
            
 
-
            Voir la page Flexbox pour plus d'informations.
            
+
            Voir la page Flexbox pour plus d'informations.
            
 
-
            La propriété box-lines détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
+
            La propriété box-lines détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
 
 
            /* Valeurs avec un mot-clé */
 box-lines: single;
@@ -58,8 +58,8 @@ box-lines: unset;
 
            Spécifications
            
 
 
 
 
            {{cssinfo}}
            
diff --git a/files/fr/web/css/box-ordinal-group/index.html b/files/fr/web/css/box-ordinal-group/index.html
index 34b81a4c1f..b9d400c5d1 100644
--- a/files/fr/web/css/box-ordinal-group/index.html
+++ b/files/fr/web/css/box-ordinal-group/index.html
@@ -11,12 +11,12 @@ translation_of: Web/CSS/box-ordinal-group
 
            {{CSSRef}}{{Non-standard_header}}
            
 
 
            
-
            Attention ! Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
+
            Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
 
            
 
-
            La propriété box-ordinal-group permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
+
            La propriété box-ordinal-group permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
 
-
            Voir la page Flexbox pour plus d'informations.
            
+
            Voir la page Flexbox pour plus d'informations.
            
 
 
            /* Un entier indiquant le groupe */
 /* Type <integer>                */
@@ -29,7 +29,7 @@ box-ordinal-group: initial;
 box-ordinal-group: unset;
 
            
 
-
            Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque la valeur calculée de box-direction est normal, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.
            
+
            Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque la valeur calculée de box-direction est normal, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.
            
 
 
            Syntaxe
            
 
@@ -42,8 +42,8 @@ box-ordinal-group: unset;
 
            Spécifications
            
 
 
 
 
            {{cssinfo}}
            
diff --git a/files/fr/web/css/box-orient/index.html b/files/fr/web/css/box-orient/index.html
index ee9e876725..9c5220bd16 100644
--- a/files/fr/web/css/box-orient/index.html
+++ b/files/fr/web/css/box-orient/index.html
@@ -11,12 +11,12 @@ translation_of: Web/CSS/box-orient
 
            {{CSSRef}}{{Non-standard_header}}
            
 
 
            
-
            Attention ! Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
+
            Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
 
            
 
 
            La propriété CSS box-orient définit si un élément organise son contenu horizontalement ou verticalement.
            
 
-
            Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
+
            Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
 
 
            /* Valeurs avec un mot-clé */
 box-orient: horizontal;
@@ -89,8 +89,8 @@ box-orient: unset;
 
            Spécifications
            
 
 
 
 
            {{cssinfo}}
            
diff --git a/files/fr/web/css/box-pack/index.html b/files/fr/web/css/box-pack/index.html
index 6462999d93..45fd486ed7 100644
--- a/files/fr/web/css/box-pack/index.html
+++ b/files/fr/web/css/box-pack/index.html
@@ -10,11 +10,11 @@ translation_of: Web/CSS/box-pack
 ---
 
            {{CSSRef}}{{Non-standard_header}}
            
 
-
            
-
            Attention ! Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
+
            
+
            Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.
            
 
            
 
-
            Les propriétés CSS -moz-box-pack et -webkit-box-pack définissent la façon dont une boîte -moz-box ou -webkit-box groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
+
            Les propriétés CSS -moz-box-pack et -webkit-box-pack définissent la façon dont une boîte -moz-box ou -webkit-box groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.
            
 
 
            /*  Valeurs avec un mot-clé */
 box-pack: start;
@@ -28,7 +28,7 @@ box-pack: initial;
 box-pack: unset;
 
            
 
-
            Voir la page Flexbox pour plus d'informations.
            
+
            Voir la page Flexbox pour plus d'informations.
            
 
 
            La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.
            
 
@@ -130,7 +130,7 @@ div.exemple p {
 
 
            Spécifications
            
 
-
            Cette propriété n'est pas standard mais une propriété semblable est apparue avec les brouillons de spécification pour les boîtes flexibles CSS3 et a été remplacée dans les versions suivantes de la spécification.
            
+
            Cette propriété n'est pas standard mais une propriété semblable est apparue avec les brouillons de spécification pour les boîtes flexibles CSS3 et a été remplacée dans les versions suivantes de la spécification.
            
 
 
            {{cssinfo}}
            
 
diff --git a/files/fr/web/css/box-shadow/index.html b/files/fr/web/css/box-shadow/index.html
index 6c8ec5bc41..a8e3cae319 100644
--- a/files/fr/web/css/box-shadow/index.html
+++ b/files/fr/web/css/box-shadow/index.html
@@ -11,9 +11,7 @@ translation_of: Web/CSS/box-shadow
 
 
            La propriété CSS box-shadow ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et avec une couleur.
            
 
-
            {{EmbedInteractiveExample("pages/css/box-shadow.html")}}
            
-
-
+
            {{EmbedInteractiveExample("pages/css/box-shadow.html")}}
            Elle permet de projeter une ombre depuis un élément. Si une {{cssxref("border-radius")}} est définie sur l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (z order) pour plusieurs ombres sera le même que pour les ombres texte (la première ombre est sur le dessus).
            
 
@@ -59,17 +57,17 @@ box-shadow: unset;
 
            Valeurs
            
 
 
            
- 
            inset
            
+ 
            inset
            
  
            Si la valeur n'est pas définie (le cas par défaut), l'ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).
            
  La présence du mot-clé inset modifie l'ombre afin qu'elle soit tournée vers l'intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l'intérieur sont dessinées à l'intérieur de la bordure (même les transparentes), au-dessus de l'arrière-plan mais sous le contenu.
            
- 
            <offset-x> <offset-y>
            
+ 
            <offset-x> <offset-y>
            
  
            Deux valeurs de longueur ({{cssxref("<length>")}} qui permettent de définir le décalage de l'ombre. <offset-x> définit la distance horizontale du décalage et les valeurs négatives placeront l'ombre à gauche de l'élément. <offset-y> définit la distance verticale et les distances négatives placent l'ombre au-dessus de l'élément (cf. {{cssxref("<length>")}} pour les différentes unités possibles).
            
  Si les deux valeurs sont 0, l'ombre est placée derrière l'élément (et peut générer un effet de flou si <blur-radius> et/ou <spread-radius> est utilisé).
            
- 
            <blur-radius>
            
+ 
            <blur-radius>
            
  
            Une troisième valeur de longueur ({{cssxref("<length>")}}). Plus cette valeur sera grande, plus le flou de l'ombre sera diffus : l'ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas définie, sa valeur par défaut est 0 (le côté de l'ombre est rectiligne).
            
- 
            <spread-radius>
            
+ 
            <spread-radius>
            
  
            Une quatrième valeur de longueur ({{cssxref("<length>")}}). Les valeurs positives étaleront l'ombre et les valeurs négatives rétréciront l'ombre. Si elle n'est pas définie, la valeur par défaut est 0 (l'ombre aura la même taille que l'élément).
            
- 
            <color>
            
+ 
            <color>
            
  
            Une valeur de couleur ({{cssxref("<color>")}}). Si la valeur n'est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété {{cssxref("color")}} mais Safari affiche une ombre transparente.
            
 
            
 
@@ -81,7 +79,7 @@ box-shadow: unset;
 
 {{csssyntax}}
 
-
            Exemples
            
+
            Exemples
            
 
 
            CSS
            
 
@@ -117,7 +115,7 @@ box-shadow: unset;
 
 
            {{EmbedLiveSample("Exemples","400","300")}}
            
 
-
            Spécifications
            
+
            Spécifications
            
 
 
diff --git a/files/fr/web/css/box-sizing/index.html b/files/fr/web/css/box-sizing/index.html
index ddcdaf9e90..2108d237cb 100644
--- a/files/fr/web/css/box-sizing/index.html
+++ b/files/fr/web/css/box-sizing/index.html
@@ -22,8 +22,6 @@ translation_of: Web/CSS/box-sizing
 
 
            {{EmbedInteractiveExample("pages/css/box-sizing.html")}}
            
 
-
-
 
            En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (content box) de l'élément. Si l'élément possède une bordure (border) ou du remplissage (padding), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite.
            La propriété box-sizing peut être utilisée afin d'ajuster ce comportement :
            
@@ -33,7 +31,7 @@ translation_of: Web/CSS/box-sizing
  
          • border-box indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.
            • 
 
-
            
+
            
 
            Note : Il est souvent utile de définir box-sizing à border-box aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu.  D'autre part, lors de l'utilisation de la position: relative ou position: absolute, l'utilisation de box-sizing: content-box permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.
            
 
            
 
@@ -66,8 +64,8 @@ box-sizing: unset;
 
 {{csssyntax}}
 
-
            
-
            Note : La valeur padding-box a été dépréciée.
            
+
            
+
            Note : La valeur padding-box a été dépréciée.
            
 
            
 
 
            Exemples
            
diff --git a/files/fr/web/css/break-after/index.html b/files/fr/web/css/break-after/index.html
index b2191bb0a0..4ed535eaf6 100644
--- a/files/fr/web/css/break-after/index.html
+++ b/files/fr/web/css/break-after/index.html
@@ -125,7 +125,7 @@ break-after: unset;
  
 
            
  
 
 
 
            
 
-
            
+
            
 
            Note : La valeur always de page-break-* a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est page et pas always.
            
 
            
 
diff --git a/files/fr/web/css/break-before/index.html b/files/fr/web/css/break-before/index.html
index 35bf0c5215..7ea0446d08 100644
--- a/files/fr/web/css/break-before/index.html
+++ b/files/fr/web/css/break-before/index.html
@@ -143,7 +143,7 @@ break-before: unset;
  
 
 
-
            
+
            
 
            Note : La valeur always pour page-break-before a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est page et non always.
            
 
            
 
diff --git a/files/fr/web/css/calc()/index.html b/files/fr/web/css/calc()/index.html
index 6f3cbb1c7e..b3eb962d7b 100644
--- a/files/fr/web/css/calc()/index.html
+++ b/files/fr/web/css/calc()/index.html
@@ -12,7 +12,7 @@ translation_of: Web/CSS/calc()
 
 
            La fonction calc() peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à calc(), il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.
            
 
-
            /* property: calc(expression) */
+
            /* property: calc(expression) */
 width: calc(100% - 80px);
 
            
 
@@ -55,7 +55,7 @@ width: calc(100% - 80px);
 
 
            calc() rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :
            
 
-
            .banniere {
+
            .banniere {
   position: absolute;
   left: 40px;
   width: calc(100% - 80px);
@@ -68,7 +68,7 @@ width: calc(100% - 80px);
 }
 
            
 
-
            <div class="banniere">C'est une bannière !</div>
            
+
            <div class="banniere">C'est une bannière !</div>
            
 
 
            {{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}
            
 
@@ -78,7 +78,7 @@ width: calc(100% - 80px);
 
 
            Regardons un peu le CSS :
            
 
-
            input {
+
            input {
   padding: 2px;
   display: block;
   width: calc(100% - 1em);
@@ -93,7 +93,7 @@ width: calc(100% - 80px);
 
 
            Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons calc() pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :
            
 
-
            <form>
+
            <form>
   <div id="boiteformulaire">
   <label>Tapez quelque chose :</label>
   <input type="text">
@@ -107,7 +107,7 @@ width: calc(100% - 80px);
 
 
            Prenons la feuille de style suivante :
            
 
-
            .toto {
+
            .toto {
   --largeurA: 100px;
   --largeurB: calc(var(--largeurA) / 2);
   --largeurC: calc(var(--largeurB) / 2);
@@ -120,7 +120,7 @@ width: calc(100% - 80px);
 
 
            Lorsque vous utilisez calc() pour définir la taille d'un texte, assurez-vous d'inclure une unité de longueur relative. Par exemple :
            
 
-
            h1 {
+
            h1 {
   font-size: calc(1.5rem + 3vw);
 }
            
 
diff --git a/files/fr/web/css/caption-side/index.html b/files/fr/web/css/caption-side/index.html
index e708794974..46b1691fd8 100644
--- a/files/fr/web/css/caption-side/index.html
+++ b/files/fr/web/css/caption-side/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/caption-side
 
 
            {{EmbedInteractiveExample("pages/css/caption-side.html")}}
            
 
-
-
 
            Syntaxe
            
 
 
            /* Valeurs avec un mot-clé */
diff --git a/files/fr/web/css/caret-color/index.html b/files/fr/web/css/caret-color/index.html
index 71a7d3ed85..ef1f0eb278 100644
--- a/files/fr/web/css/caret-color/index.html
+++ b/files/fr/web/css/caret-color/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/caret-color
 
 
            {{EmbedInteractiveExample("pages/css/caret-color.html")}}
            
 
-
-
 
            
 
            Note : Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque {{cssxref("cursor")}} vaut auto ou text ou vertical-text, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.
            
 
            
@@ -39,7 +37,7 @@ caret-color: hsla(228, 4%, 24%, 0.8);
            
 
            
  
            auto
            
  
            L'agent utilisateur doit utiliser currentcolor mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.).
- 
            Note : Bien que l'agent utilisateur puisse utiliser currentcolor pour la valeur auto, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur currentcolor).
            
+ 
            Note : Bien que l'agent utilisateur puisse utiliser currentcolor pour la valeur auto, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur currentcolor).
            
  
            
  
            <color>
            
  
            L'agent utilisateur utilise la couleur ({{cssxref("<color>")}}) indiquée comme couleur pour le curseur de saisie.
            
@@ -95,7 +93,7 @@ caret-color: hsla(228, 4%, 24%, 0.8);
            
 
              
  
            • {{HTMLElement("input")}}
              • 
  
            • L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément éditable
              • 
- 
            • Rendre du contenu éditable
              • 
+ 
            • Rendre du contenu éditable
              • 
  
            • Appliquer des couleurs sur des éléments HTML grâce à CSS
              • 
  
            • Le type de données {{cssxref("<color>")}}
              • 
  
            • Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.
              • 
diff --git a/files/fr/web/css/clamp()/index.html b/files/fr/web/css/clamp()/index.html
index 2781cfa678..242f7aa3f6 100644
--- a/files/fr/web/css/clamp()/index.html
+++ b/files/fr/web/css/clamp()/index.html
@@ -15,14 +15,14 @@ translation_of: Web/CSS/clamp()
 
              Note : l'expression  clamp(MIN, VAL, MAX) sera résolue comme max(MIN, min(VAL, MAX))).
              
 
            
 
-
            width: clamp(10px, 4em, 80px);
+
            width: clamp(10px, 4em, 80px);
 
            
 
 
            Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.
            
 
 
            Prenons comme hypothèse qu'un em mesure 16px de large :
            
 
-
            width: clamp(10px, 4em, 80px);
+
            width: clamp(10px, 4em, 80px);
 /* avec 1em = 16px, on a 4em = 16px * 4 = 64px */
 width: clamp(10px, 64px, 80px);
 /* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */
@@ -65,7 +65,7 @@ width: 64px;
 
 
            CSS
            
 
-
            h1 {
+
            h1 {
   font-size: 2rem;
 }
 h1.responsive {
@@ -77,7 +77,7 @@ h1.responsive {
 
 
            HTML
            
 
-
            <h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1>
+
            <h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1>
 <h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1>
 
            
 
diff --git a/files/fr/web/css/clear/index.html b/files/fr/web/css/clear/index.html
index 1b2fba1541..541ff870fa 100644
--- a/files/fr/web/css/clear/index.html
+++ b/files/fr/web/css/clear/index.html
@@ -13,16 +13,14 @@ translation_of: Web/CSS/clear
 
 
            {{EmbedInteractiveExample("pages/css/clear.html")}}
            
 
-
-
-
            Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace le bord de la bordure de l'élément sous le bord de la marge de tous les éléments flottants concernés. Il y aura fusion des marges (margin collapsing) verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.
            
+
            Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace le bord de la bordure de l'élément sous le bord de la marge de tous les éléments flottants concernés. Il y aura fusion des marges (margin collapsing) verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.
            
 
 
            Lorsqu'elle est appliquée aux éléments flottants, elle déplace le bord de la marge de l'élément sous le bord de la marge de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.
            
 
-
            Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du même contexte de formatage.
            
+
            Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du même contexte de formatage.
            
 
 
            
-
            Note : Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser clear sur un pseudo-élément remplacé {{cssxref("::after")}}.
            
+
            Note : Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser clear sur un pseudo-élément remplacé {{cssxref("::after")}}.
            
 
 
            #conteneur::after {
    content: "";
@@ -34,7 +32,7 @@ translation_of: Web/CSS/clear
 
 
            Syntaxe
            
 
-
            /* Valeurs avec mot-clé */
+
            /* Valeurs avec mot-clé */
 clear: none;
 clear: left;
 clear: right;
@@ -230,5 +228,5 @@ p {
 
            Voir aussi
            
 
 
diff --git a/files/fr/web/css/clip-path/index.html b/files/fr/web/css/clip-path/index.html
index 0e59f1bbec..1888fb3c17 100644
--- a/files/fr/web/css/clip-path/index.html
+++ b/files/fr/web/css/clip-path/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/clip-path
 
 
            {{EmbedInteractiveExample("pages/css/clip-path.html")}}
            
 
-
-
 
            
 
            Note : La propriété clip-path remplace la propriété {{cssxref("clip")}} désormais dépréciée.
            
 
            
@@ -98,8 +96,7 @@ clip-path: unset;
 
 
            Comparaison entre HTML et SVG
            
 
-
 
-
            {{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}
            
+
            {{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}}
            
 
 
            Exemple complet
            
 
@@ -556,15 +552,11 @@ svg text.em {
 }
 
            
 
-
 
 
            Résultat
            
 
diff --git a/files/fr/web/css/clip/index.html b/files/fr/web/css/clip/index.html
index 8b882c9078..a7cf1ead61 100644
--- a/files/fr/web/css/clip/index.html
+++ b/files/fr/web/css/clip/index.html
@@ -27,7 +27,7 @@ clip: unset;
 
            
 
 
            
-
            Attention ! Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.
            
+
            Attention : Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.
            
 
            
 
 
            {{cssinfo}}
            
@@ -38,8 +38,7 @@ clip: unset;
 
 
            
  
            <shape>
            
- 
            Une forme rectangulaire indiquée avec rect(<haut>, <droite>, <bas>, <gauche>) ou avec rect(<haut> <droite> <bas> <gauche>). <haut> et <bas> indiquent les décalages à partir du haut de la boîte de bordure, <gauche> et <droite> indiquent les décalages à partir du bord gauche de la boîte de bordure.
            
- 
            <haut>, <droite>, <bas> et <gauche> peuvent avoir une valeur de longueur (type {{cssxref("<length>")}}) ou auto. Si un des côtés vaut auto, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.
            
+ 
            Une forme rectangulaire indiquée avec rect(<haut>, <droite>, <bas>, <gauche>) ou avec rect(<haut> <droite> <bas> <gauche>). <haut> et <bas> indiquent les décalages à partir du haut de la boîte de bordure, <gauche> et <droite> indiquent les décalages à partir du bord gauche de la boîte de bordure.<haut>, <droite>, <bas> et <gauche> peuvent avoir une valeur de longueur (type {{cssxref("<length>")}}) ou auto. Si un des côtés vaut auto, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.
            
  
            auto
            
  
            L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que rect(auto, auto, auto, auto).
            
 
            
diff --git a/files/fr/web/css/color-adjust/index.html b/files/fr/web/css/color-adjust/index.html
index 88640a6c4d..53e02b582a 100644
--- a/files/fr/web/css/color-adjust/index.html
+++ b/files/fr/web/css/color-adjust/index.html
@@ -11,12 +11,10 @@ translation_of: Web/CSS/color-adjust
 ---
 
            {{CSSRef}}
            
 
-
            La propriété CSS color-adjust contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.
            
+
            La propriété CSS color-adjust contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.
            
 
 
            {{EmbedInteractiveExample("pages/css/color-adjust.html")}}
            
 
-
-
 
            Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), #411 qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (black pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité.
            
 
 
            Syntaxe
            
diff --git a/files/fr/web/css/color/index.html b/files/fr/web/css/color/index.html
index 8b6d594f54..2b31fd1dae 100644
--- a/files/fr/web/css/color/index.html
+++ b/files/fr/web/css/color/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/color
 
 
            {{EmbedInteractiveExample("pages/css/color.html")}}
            
 
-
-
 
            La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé ({{cssxref("<gradient>")}}) car en CSS un dégradé est considéré comme une image (type {{cssxref("<image>")}}) et pas comme une couleur.
            
 
 
            Syntaxe
            
diff --git a/files/fr/web/css/color_value/index.html b/files/fr/web/css/color_value/index.html
index c362b45dab..e35eb28083 100644
--- a/files/fr/web/css/color_value/index.html
+++ b/files/fr/web/css/color_value/index.html
@@ -10,24 +10,24 @@ original_slug: Web/CSS/Type_color
 ---
 
            {{CSSRef}}
            
 
-
            Le type de données CSS <color> permet de représenter des couleurs dans l'espace de couleurs sRGB. Une couleur pourra être décrite de trois façons :
            
+
            Le type de données CSS <color> permet de représenter des couleurs dans l'espace de couleurs sRGB. Une couleur pourra être décrite de trois façons :
            
 
 
 
 
            En plus de la couleur exprimée dans l'espace RGB, une valeur <color> contient également un canal alpha qui décrit la transparence de l'image et donc la façon dont cette image se compose avec son arrière-plan.
            
 
 
            
-
            Note : Cet article décrit le type de donnée CSS <color> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire Appliquer des couleurs à des éléments HTML grâce à CSS.
            
+
            Note : Cet article décrit le type de donnée CSS <color> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire Appliquer des couleurs à des éléments HTML grâce à CSS.
            
 
            
 
 
            Syntaxe
            
 
 
            
-
            Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge le profil de couleurs de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.
            
+
            Note : Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge le profil de couleurs de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.
            
 
            
 
 
            Il existe plusieurs méthodes pour décrire une valeur <color>.
            
@@ -65,7 +65,7 @@ original_slug: Web/CSS/Type_color
  
          • Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.
            • 
 
          
 
-
+
          
@@ -981,7 +981,8 @@ original_slug: Web/CSS/Type_color
 
          Note : Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, la spécification W3C indique que transparent devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur alpha de 0.
          
 
-
          Note historique : Le mot-clé transparent n'était pas une valeur de type <color> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via les canaux alpha, transparent a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <color> est nécessaire (la propriété {{cssxref("color")}} par exemple).
          
+
          
+  
          Note : Historiquement, le mot-clé transparent n'était pas une valeur de type <color> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via les canaux alpha, transparent a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <color> est nécessaire (la propriété {{cssxref("color")}} par exemple).
          Le mot-clé currentColor
          
 
@@ -1018,7 +1019,7 @@ original_slug: Web/CSS/Type_color
 
          {{EmbedLiveSample('Exemple_live_n°2')}}
          
 
-
          Les couleurs RGB
          
+
          Les couleurs RGB
          Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.
          
 
@@ -1080,7 +1081,7 @@ rgba(1e2, .5e1, .5e0, +.25e2%)
 rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
 rgba(255 0 0 / 40%) /* 40% opacité - rouge */
 
-
          Les couleurs HSL
          
+
          Les couleurs HSL
          Les couleurs peuvent également être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-clarté).
          
 
@@ -1113,7 +1114,7 @@ rgba(255 0 0 / 40%) /* 40% opacité - rouge */
          HSL
          
 
-
          hsl(0,  100%,50%)   /* red */
+
          hsl(0,  100%,50%)   /* red */
 hsl(30, 100%,50%)
 hsl(60, 100%,50%)
 hsl(90, 100%,50%)
@@ -1155,7 +1156,7 @@ hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */
 
 
          HSLa
          
 
-
          hsla(240,100%,50%,0.05)  /* 5% opaque blue */
+
          hsla(240,100%,50%,0.05)  /* 5% opaque blue */
 hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
 hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
 hsla(240,100%,50%,   1)  /* full opaque blue */
@@ -1176,7 +1177,7 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
          
 
 
          Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).
          
 
-
          
+
          
  
          ActiveBorder
          
  
          La bordure de la fenêtre active.
          
  
          ActiveCaption
          
@@ -1237,7 +1238,7 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
          
 
 
          Ajouts propres à Mozilla pour les couleurs système
          
 
-
          
+
          
  
          -moz-ButtonDefault
          
  
          La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.
          
  
          -moz-ButtonHoverFace
          
@@ -1249,70 +1250,59 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
          
  
          -moz-CellHighlightText
          
  
          La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlight comme couleur d'arrière-plan. Voir aussi -moz-html-CellHighlightText.
          
  
          -moz-Combobox
          
- 
          {{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec -moz-ComboboxText comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-Field à la place.
          
+ 
           La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec -moz-ComboboxText comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-Field à la place.
          
  
          -moz-ComboboxText
          
- 
          {{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec -moz-Combobox comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-FieldText à la place.
          
+ 
           La couleur du texte pour les listes déroulantes. Devrait être utilisée avec -moz-Combobox comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-FieldText à la place.
          
  
          -moz-Dialog
          
  
          La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec -moz-DialogText comme couleur de premier-plan.
          
  
          -moz-DialogText
          
  
          La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec -moz-Dialog comme couleur d'arrière-plan.
          
  
          -moz-dragtargetzone
          
  
          -moz-EvenTreeRow
          
- 
          {{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-OddTreeRow.
          
+ 
           La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-OddTreeRow.
          
  
          -moz-Field
          
  
          La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec -moz-FieldText comme couleur de premier-plan.
          
  
          -moz-FieldText
          
  
          La couleur du texte pour les champs texte. Devrait être utilisée avec -moz-Field, -moz-EvenTreeRow, ou -moz-OddTreeRow comme couleur d'arrière-plan.
          
  
          -moz-html-CellHighlight
          
- 
          {{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlightText comme couleur de premier-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlight.
          
+ 
           La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlightText comme couleur de premier-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlight.
          
  
          -moz-html-CellHighlightText
          
- 
          {{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlight comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlightText.
          
- 
          -moz-mac-accentdarkestshadow
          
- 
          -moz-mac-accentdarkshadow
          
- 
          -moz-mac-accentface
          
- 
          -moz-mac-accentlightesthighlight
          
- 
          -moz-mac-accentlightshadow
          
- 
          -moz-mac-accentregularhighlight
          
- 
          -moz-mac-accentregularshadow
          
- 
          -moz-mac-chrome-active
          
- 
          {{Gecko_minversion_inline("1.9.1")}}
          
- 
          -moz-mac-chrome-inactive
          
- 
          {{Gecko_minversion_inline("1.9.1")}}
          
- 
          -moz-mac-focusring
          
- 
          -moz-mac-menuselect
          
- 
          -moz-mac-menushadow
          
- 
          -moz-mac-menutextselect
          
- 
          -moz-MenuHover
          
+ 
           La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlight comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlightText.
          
+ 
          -moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow
          
+ 
          Couleurs d'accentuation.
          
+ 
          -moz-mac-chrome-active, -moz-mac-chrome-inactive
          
+ 
          Couleurs pour les éléments de chrome actifs/inactifs
          
+ 
          -moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover
          
  
          La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à Highlight. Devrait être utilisée avec -moz-MenuHoverText ou -moz-MenuBarHoverText comme couleur de premier-plan.
          
  
          -moz-MenuHoverText
          
  
          La couleur du texte pour les éléments de menu survolés. Généralement similaire à HighlightText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
          
  
          -moz-MenuBarText
          
- 
          {{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à MenuText. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
          
+ 
           La couleur du texte dans les barres de menu. Généralement similaire à MenuText. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
          
  
          -moz-MenuBarHoverText
          
  
          La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à -moz-MenuHoverText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
          
  
          -moz-nativehyperlinktext
          
- 
          {{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.
          
+ 
           La couleur par défaut de la plate-forme pour les hyperliens.
          
  
          -moz-OddTreeRow
          
- 
          {{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-EvenTreeRow.
          
+ 
           La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-EvenTreeRow.
          
  
          -moz-win-accentcolor
          
- 
          {{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.
          
+ 
           Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.
          
  
          -moz-win-accentcolortext
          
- 
          {{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.
          
+ 
           Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.
          
  
          -moz-win-communicationstext
          
- 
          {{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
          
+ 
           Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("appearance")}}: -moz-win-communications-toolbox;.
          
  
          -moz-win-mediatext
          
- 
          {{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
          
+ 
           Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("appearance")}}: -moz-win-media-toolbox.
          
 
 
 
          Ajout de Mozilla pour les couleurs liées aux préférences
          
 
-
          
+
          
  
          -moz-activehyperlinktext
          
  
          La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
          
  
          -moz-default-background-color
          
- 
          {{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
          
+ 
           La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
          
  
          -moz-default-color
          
- 
          {{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.
          
+ 
           La couleur choisie par l'utilisateur pour la couleur du texte.
          
  
          -moz-hyperlinktext
          
  
          La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
          
  
          -moz-visitedhyperlinktext
          
@@ -1321,11 +1311,11 @@ hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
          Interpolation
          
 
-
          Les valeurs de type <color> peuvent être interpolées afin de créer des animations ou des dégradés (type <gradient>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans l'espace de couleurs alpha sRGBA prémultiplié afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon la fonction de temporisation associée à l'animation.
          
+
          Les valeurs de type <color> peuvent être interpolées afin de créer des animations ou des dégradés (type <gradient>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans l'espace de couleurs alpha sRGBA prémultiplié afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon la fonction de temporisation associée à l'animation.
          Accessibilité
          
 
-
          La recommandation du W3C : WCAG 2.0 conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur Ies couleurs et le contraste pour plus d'informations).
          
+
          La recommandation du W3C : WCAG 2.0 conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur Ies couleurs et le contraste pour plus d'informations).
          Spécifications
          
 
diff --git a/files/fr/web/css/column-count/index.html b/files/fr/web/css/column-count/index.html
index 5bc759d2f4..372e04db1d 100644
--- a/files/fr/web/css/column-count/index.html
+++ b/files/fr/web/css/column-count/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/column-count
 
 
          {{EmbedInteractiveExample("pages/css/column-count.html")}}
          
 
-
-
 
          Syntaxe
          /* Valeurs avec un mot-clé */
diff --git a/files/fr/web/css/column-fill/index.html b/files/fr/web/css/column-fill/index.html
index c2d4e37d2c..9d27ef3d0e 100644
--- a/files/fr/web/css/column-fill/index.html
+++ b/files/fr/web/css/column-fill/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/column-fill
 
 
          {{EmbedInteractiveExample("pages/css/column-fill.html")}}
          
 
-
-
 
          Syntaxe
          
 
 
          /* Valeurs avec un mot-clé */
diff --git a/files/fr/web/css/column-gap/index.html b/files/fr/web/css/column-gap/index.html
index 2a0e75cfe3..d59b181788 100644
--- a/files/fr/web/css/column-gap/index.html
+++ b/files/fr/web/css/column-gap/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/column-gap
 
 
          {{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}
          
 
-
-
 
          La propriété column-gap était initialement définie dans le module de spécification Multi-column Layout (disposition en colonnes). Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification Box Alignment. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.
          
 
 
          
@@ -125,7 +123,7 @@ column-gap: unset;
 
 
          CSS
          
 
-
          #grid {
+
          #grid {
   display: grid;
   height: 100px;
   grid-template-columns: repeat(3, 1fr);
@@ -138,11 +136,9 @@ column-gap: unset;
 }
 
          
 
-
 
 
          Résultat
          
 
diff --git a/files/fr/web/css/column-rule-color/index.html b/files/fr/web/css/column-rule-color/index.html
index bfcd701946..c3d4c6938b 100644
--- a/files/fr/web/css/column-rule-color/index.html
+++ b/files/fr/web/css/column-rule-color/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-color
 
 
          {{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
          
 
-
-
 
          Syntaxe
          
 
 
          /* Valeurs de couleur */
diff --git a/files/fr/web/css/column-rule-style/index.html b/files/fr/web/css/column-rule-style/index.html
index ef4d7763fc..70bab31e69 100644
--- a/files/fr/web/css/column-rule-style/index.html
+++ b/files/fr/web/css/column-rule-style/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-style
 
 
          {{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
          
 
-
-
 
          Syntaxe
          
 
 
          /* Valeurs avec un mot-clé */
diff --git a/files/fr/web/css/column-rule-width/index.html b/files/fr/web/css/column-rule-width/index.html
index 9794388667..27b3b4397a 100644
--- a/files/fr/web/css/column-rule-width/index.html
+++ b/files/fr/web/css/column-rule-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule-width
 
 
          {{EmbedInteractiveExample("pages/css/column-rule-width.html")}}
          
 
-
-
 
          Syntaxe
          
 
 
          /* Valeurs avec un mot-clé */
diff --git a/files/fr/web/css/column-rule/index.html b/files/fr/web/css/column-rule/index.html
index 3e63b413ed..9ac19f4c6f 100644
--- a/files/fr/web/css/column-rule/index.html
+++ b/files/fr/web/css/column-rule/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/column-rule
 
 
          {{EmbedInteractiveExample("pages/css/column-rule.html")}}
          
 
-
-
 
          Cette propriété est une propriété raccourcie qui permet de définir {{cssxref("column-rule-width")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-color")}} (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).
          
 
 
          
@@ -56,14 +54,12 @@ column-rule: unset;
 
 
          HTML
          
 
-
          
-
          <div id="col_rul">
+
          <div id="col_rul">
   <p> column one </p>
   <p> column two </p>
   <p> column three </p>
 </div>
 
          
-
          
 
 
          CSS
          
 
diff --git a/files/fr/web/css/column-span/index.html b/files/fr/web/css/column-span/index.html
index fe0ca74b74..ab7508ea5b 100644
--- a/files/fr/web/css/column-span/index.html
+++ b/files/fr/web/css/column-span/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/column-span
 
 
          {{EmbedInteractiveExample("pages/css/column-span.html")}}
          
 
-
-
 
          /* Valeurs avec un mot-clé */
 column-span: none;
 column-span: all;
diff --git a/files/fr/web/css/column-width/index.html b/files/fr/web/css/column-width/index.html
index 52dc069f9c..ebc538bee6 100644
--- a/files/fr/web/css/column-width/index.html
+++ b/files/fr/web/css/column-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/column-width
 
 
          {{EmbedInteractiveExample("pages/css/column-width.html")}}
          
 
-
-
 
          Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px. Ce réglage permet donc d'obtenir des effets qui s'adaptent aux différentes tailles d'écrans. Manipulée avec la propriété {{cssxref("column-count")}} qui a la précédence, il est nécessaire de définir toutes les valeurs de longueur pour avoir une largeur de colonne CSS exacte. Pour du texte horizontal, ces propriétés sont {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} et {{cssxref('column-rule-width')}}.
          
 
 
          Syntaxe
          
diff --git a/files/fr/web/css/columns/index.html b/files/fr/web/css/columns/index.html
index 8faef4d595..f13537bfe4 100644
--- a/files/fr/web/css/columns/index.html
+++ b/files/fr/web/css/columns/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/columns
 
 
          {{EmbedInteractiveExample("pages/css/columns.html")}}
          
 
-
-
 
          Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).
          
 
 
          Syntaxe
          
diff --git a/files/fr/web/css/compositing_and_blending/index.html b/files/fr/web/css/compositing_and_blending/index.html
index 3c62524882..721ca17ac9 100644
--- a/files/fr/web/css/compositing_and_blending/index.html
+++ b/files/fr/web/css/compositing_and_blending/index.html
@@ -17,22 +17,17 @@ translation_of: Web/CSS/Compositing_and_Blending
 
 
          Propriétés
          
 
-
          
 
            
  
          • {{cssxref("background-blend-mode")}}
            • 
  
          • {{cssxref("isolation")}}
            • 
  
          • {{cssxref("mix-blend-mode")}}
            • 
- 
          •  
            • 
 
          
-
          
 
 
          Types de donnée
          
 
-
          
 
            
  
          • {{cssxref("<blend-mode>")}}
            • 
 
          
-
          
 
 
          Spécifications
          
 
diff --git a/files/fr/web/css/contain/index.html b/files/fr/web/css/contain/index.html
index b98788d18f..e08a63ec08 100644
--- a/files/fr/web/css/contain/index.html
+++ b/files/fr/web/css/contain/index.html
@@ -29,7 +29,7 @@ contain: unset;
 
 
          Cette propriété s'avère utile pour les pages qui contiennent de nombreux composants indépendants et permet de limiter la portée des règles sur le reste de la page.
          
 
-
          
+
          
 
          Note : Lorsqu'elle est appliquée avec une valeur paint, strict ou content, cette propriété crée :
          
 
 
            
diff --git a/files/fr/web/css/containing_block/index.html b/files/fr/web/css/containing_block/index.html
index 538fa642c6..8e3bff8fb9 100644
--- a/files/fr/web/css/containing_block/index.html
+++ b/files/fr/web/css/containing_block/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
 ---
 
            {{CSSRef}}
            
 
-
            Le bloc englobant (containing block) affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la zone de contenu de l'ancêtre de bloc le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.
            
+
            Le bloc englobant (containing block) affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la zone de contenu de l'ancêtre de bloc le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.
            
 
 
            Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :
            
 
@@ -21,7 +21,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
  
          • La zone de marge (margin area)
            • 
 
 
-
            Diagram of the box model
            
+
            Diagram of the box model
            
 
 
            
 
            Note : Voir cet article pour découvrir le modèle de boîtes en CSS.
            
@@ -70,7 +70,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
 
 
            Le code HTML utilisé pour les exemples suivants sera :
            
 
-
            <body>
+
            <body>
   <section>
     <p>Et voici un paragraphe !</p>
   </section>
@@ -81,16 +81,14 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
 
 
            Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.
            
 
-
 
-
            body {
+
            body {
   background: beige;
 }
 
@@ -116,16 +114,14 @@ p {
 
 
            Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}} car <section> n'est pas un conteneur de bloc en raison de display: inline et il ne crée pas de contexte de formatage.
            
 
-
 
-
            body {
+
            body {
   background: beige;
 }
 
@@ -147,16 +143,14 @@ p {
 
 
            Ici, le bloc englobant du paragraphe est <section> car la propriété position de ce dernier vaut absolute. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait border-box).
            
 
-
 
-
            body {
+
            body {
   background: beige;
 }
 
@@ -186,16 +180,14 @@ p {
 
 
            Dans cet exemple, la propriété position du paragraphe vaut fixed. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le viewport pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.
            
 
-
 
-
            body {
+
            body {
   background: beige;
 }
 
@@ -223,16 +215,14 @@ p {
 
 
            Dans cet exemple, la propriété position du paragraphe vaut absolute. Son bloc englobant est donc <section> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas none.
            
 
-
 
-
            body {
+
            body {
   background: beige;
 }
 
diff --git a/files/fr/web/css/content/index.html b/files/fr/web/css/content/index.html
index 6e2af97e48..cd5ad04b5f 100644
--- a/files/fr/web/css/content/index.html
+++ b/files/fr/web/css/content/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/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.
            
+
            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.
            
 
 
            /* Des mots-clés qui ne peuvent pas être mélangés
   avec d'autres valeurs */
@@ -60,11 +60,9 @@ content: unset;
  
            {{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("<counter>")}})
            
- 
            Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("counter")}} 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 et sur la numérotation pour plus d'informations.
            
+ 
            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 et sur la numérotation pour plus d'informations.
            
  
            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
            
@@ -216,7 +214,7 @@ li {
 
 
            Accessibilité
            
 
-
            Le contenu généré par CSS n'est pas inclus dans le DOM. Pour cette raison, il ne fait pas partie de l'arbre d'accessibilité 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.
            
+
            Le contenu généré par CSS n'est pas inclus dans le DOM. Pour cette raison, il ne fait pas partie de l'arbre d'accessibilité 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)
              • 
diff --git a/files/fr/web/css/counter()/index.html b/files/fr/web/css/counter()/index.html
index a5ca778b1b..073e209928 100644
--- a/files/fr/web/css/counter()/index.html
+++ b/files/fr/web/css/counter()/index.html
@@ -10,7 +10,7 @@ translation_of: Web/CSS/counter()
 ---
 
              {{CSSRef}}
              
 
-
              La fonction CSS counter() renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un pseudo-élément mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("<string>")}} est attendue.
              
+
              La fonction CSS counter() renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un pseudo-élément mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("<string>")}} est attendue.
              
 
 
              /* Usage simple */
 counter(nomcompteur);
@@ -18,12 +18,12 @@ counter(nomcompteur);
 /* Modifier le type d'affichage du compteur */
 counter(nomcompteur, upper-roman)
              
 
-
              Un compteur CSS n'a aucun effet visible en lui-même. C'est la fonction counter() (ainsi que counters()) qui permet d'utiliser la chaîne de caractère ou l'image résultante.
              
+
              Un compteur CSS n'a aucun effet visible en lui-même. C'est la fonction counter() (ainsi que counters()) qui permet d'utiliser la chaîne de caractère ou l'image résultante.
              
 
-
              
-
              Note  : La fonction counter() peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.
              
+
              
+
              Note : La fonction counter() peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.
              
 
-
              Veillez à consulter le tableau de compatibilité des navigateurs avant d'utiliser ces fonctionnalités en production.
              
+
              Veillez à consulter le tableau de compatibilité des navigateurs avant d'utiliser ces fonctionnalités en production.
              
 
              
 
 
              Syntaxe
              
@@ -33,8 +33,8 @@ counter(nomcompteur, upper-roman)
            
 
            
  
            {{cssxref("<custom-ident>")}}
            
  
            Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et  {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés none, unset, initial ou inherit.
            
- 
            <counter-style>
            
- 
            Un nom de style de compteur ou une fonction symbols(). Le nom d'un style de compteur peut indiquer un compteur alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien ou un autre style de compteur prédéfini. Si cette valeur n'est pas fournie, le style par défaut est décimal.
            
+ 
            <counter-style>
            
+ 
            Un nom de style de compteur ou une fonction symbols(). Le nom d'un style de compteur peut indiquer un compteur alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien ou un autre style de compteur prédéfini. Si cette valeur n'est pas fournie, le style par défaut est décimal.
            
  
            none
            
  
            Représente la chaîne de caractère vide.
            
 
            
@@ -49,7 +49,7 @@ counter(nomcompteur, upper-roman)
            
 
 
            HTML
            
 
-
            <ol>
+
            <ol>
   <li></li>
   <li></li>
   <li></li>
@@ -57,7 +57,7 @@ counter(nomcompteur, upper-roman)
            
 
 
            CSS
            
 
-
            ol {
+
            ol {
   counter-reset: listCounter;
 }
 li {
@@ -76,7 +76,7 @@ li::after {
 
 
            HTML
            
 
-
            <ol>
+
            <ol>
   <li></li>
   <li></li>
   <li></li>
@@ -84,7 +84,7 @@ li::after {
 
 
            CSS
            
 
-
            ol {
+
            ol {
   counter-reset: count;
 }
 
@@ -132,9 +132,9 @@ li::after {
 
            Voir aussi
            
 
 
diff --git a/files/fr/web/css/counter-increment/index.html b/files/fr/web/css/counter-increment/index.html
index 9757170c1d..d9e0aa20db 100644
--- a/files/fr/web/css/counter-increment/index.html
+++ b/files/fr/web/css/counter-increment/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/counter-increment
 
 
            {{EmbedInteractiveExample("pages/css/counter-increment.html")}}
            
 
-
-
 
            
 
            Note : La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété {{cssxref("counter-reset")}}.
            
 
            
diff --git a/files/fr/web/css/counter-reset/index.html b/files/fr/web/css/counter-reset/index.html
index a36bb40929..1b46b41b63 100644
--- a/files/fr/web/css/counter-reset/index.html
+++ b/files/fr/web/css/counter-reset/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/counter-reset
 
 
            {{EmbedInteractiveExample("pages/css/counter-reset.html")}}
            
 
-
-
 
            
 
            Note : Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS {{cssxref("counter-increment")}}.
            
 
            
diff --git a/files/fr/web/css/counters()/index.html b/files/fr/web/css/counters()/index.html
index d0ecac78bc..6f78f5f900 100644
--- a/files/fr/web/css/counters()/index.html
+++ b/files/fr/web/css/counters()/index.html
@@ -16,7 +16,7 @@ translation_of: Web/CSS/counters()
  
          • counters(name, string, style)
            • 
 
          
 
-
          Cette fonction est généralement utilisée sur des pseudo-éléments mais peut théoriquement être utilisée à tout endroit où une valeur <string> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera decimal).
          
+
          Cette fonction est généralement utilisée sur des pseudo-éléments mais peut théoriquement être utilisée à tout endroit où une valeur <string> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera decimal).
          
 
 
          /* Utilisation simple - style decimal par défaut */
 counters(countername, '-');
@@ -26,7 +26,7 @@ counters(countername, '.', upper-roman)
          
 
 
          Un compteur n'est pas visible en tant que tel. Les fonctions counters() et counter() doivent être utilisées pour créer du contenu.
          
 
-
          
+
          
 
          Note : Bien que la fonction counters() puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale.
          
 
 
          Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.
          
@@ -39,8 +39,8 @@ counters(countername, '.', upper-roman)
          
 
          
  
          {{cssxref("<custom-ident>")}}
          
  
          Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être none, unset, initial ou inherit.
          
- 
          <counter-style>
          
- 
          Un style de compteur (cf. les valeurs décrites pour list-style-type) ou une fonction symbols(). En absence de valeur, le style utilisé sera decimal.
          
+ 
          <counter-style>
          
+ 
          Un style de compteur (cf. les valeurs décrites pour list-style-type) ou une fonction symbols(). En absence de valeur, le style utilisé sera decimal.
          
  
          {{cssxref("<string>")}}
          
  
          Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. \000A9 représentera par exemple le symbole copyright (©).
          
  
          none
          
@@ -57,7 +57,7 @@ counters(countername, '.', upper-roman)
          
 
 
          HTML
          
 
-
          <ol>
+
          <ol>
   <li>
      <ol>
         <li></li>
@@ -83,7 +83,7 @@ counters(countername, '.', upper-roman)
          
 
 
          CSS
          
 
-
          ol {
+
          ol {
   counter-reset: listCounter;
 }
 li {
@@ -104,7 +104,7 @@ li::before {
 
 
          HTML
          
 
-
          <ol>
+
          <ol>
   <li>
      <ol>
         <li></li>
@@ -130,7 +130,7 @@ li::before {
 
 
          CSS
          
 
-
          ol {
+
          ol {
   counter-reset: count;
 }
 li {
@@ -178,7 +178,7 @@ li::before {
 
          Voir aussi
          
 
 
            
- 
          • Utiliser les compteurs CSS
            • 
+ 
          • Utiliser les compteurs CSS
            • 
  
          • {{cssxref("counter-reset")}}
            • 
  
          • {{cssxref("counter-increment")}}
            • 
  
          • {{cssxref("@counter-style")}}
            • 
diff --git a/files/fr/web/css/cross-fade()/index.html b/files/fr/web/css/cross-fade()/index.html
index 454b03cc02..452ff95ab5 100644
--- a/files/fr/web/css/cross-fade()/index.html
+++ b/files/fr/web/css/cross-fade()/index.html
@@ -12,11 +12,11 @@ translation_of: Web/CSS/cross-fade()
 
 
            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.
            
 
-
            
-
            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.
            
+
            
+
            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 (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%.
            
 
@@ -26,7 +26,7 @@ translation_of: Web/CSS/cross-fade()
 
 
            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.
            
 
-
            cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
+
            cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
 cross-fade(url(white.png)  25%, url(black.png)  75%); /* 25% blanche, 75% noire*/
 cross-fade(url(white.png)  50%, url(black.png)  50%); /* 50% blanche, 50% noire */
 cross-fade(url(white.png)  75%, url(black.png)  25%); /* 75% blanche, 25% noire */
@@ -38,7 +38,7 @@ cross-fade(url(green.png)  75%, url(red.png)    75%); /* image avec du rouge et
 
 
            Les lignes précédentes peuvent ainsi s'écrire également :
            
 
-
            cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
+
            cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
 cross-fade(url(white.png)  25%, url(black.png)); /* 25% blanche, 75% noire*/
 cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */
 cross-fade(url(white.png)  75%, url(black.png)); /* 75% blanche, 25% noire */
@@ -50,22 +50,17 @@ cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et ver
 
 
            Syntaxe formelle
            
 
-
-
-{{csssyntax}}
-
-
              
-
            
+
            {{csssyntax}}
            
 
 
            Exemples
            
 
 
            HTML
            
 
-
            <div id="div"></div>
            
+
            <div id="div"></div>
            
 
 
            CSS
            
 
-
            #div {
+
            #div {
     width: 300px;
     height: 300px;
     background-image: cross-fade(
@@ -79,11 +74,11 @@ cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et ver
 
 
            Ancienne syntaxe (implémentations)
            
 
-
            cross-fade( <image, <image>, <percentage> )
            
+
            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, 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.
            
 
-
            cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
+
            cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
 cross-fade(url(white.png), url(black.png), 25%);  /* 25% blanche, 75% noire */
 cross-fade(url(white.png), url(black.png), 50%);  /* 50% blanche, 50% noire */
 cross-fade(url(white.png), url(black.png), 75%);  /* 75% blanche, 25% noire */
@@ -98,7 +93,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
 
 
            CSS
            
 
-
            .crossfade {
+
            .crossfade {
     width: 300px;
     height: 300px;
     background-image: -webkit-cross-fade(
@@ -113,7 +108,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
 
 
            HTML
            
 
-
            <div class="crossfade"></div>
            
+
            <div class="crossfade"></div>
            
 
 
            Résultat
            
 
@@ -158,7 +153,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
  
          • {{cssxref("url")}}
            • 
  
          • {{cssxref("_image", "image()")}}
            • 
  
          • {{cssxref("image-set")}}
            • 
- 
          • {{cssxref("element")}}
            • 
- 
          • Utiliser les dégradés CSS
            • 
+ 
          • {{cssxref("element()")}}
            • 
+ 
          • Utiliser les dégradés CSS
            • 
  
          • 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()")}},
            • 
 
          
diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html
index 0824678ff8..7f33e6daf9 100644
--- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html
+++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html
@@ -11,7 +11,7 @@ original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animation
 
          {{CSSRef}}{{obsolete_header}}
          
 
 
          
-
          Attention ! Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.
          
+
          Attention : Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.
          
 
          
 
 
          Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, basé sur ce billet de Christian Heilmann, illustre une technique pour détecter la prise en charge des animations CSS.
          
@@ -96,5 +96,5 @@ if( animation === false ) {
 
          Voir aussi
          
 
 
diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html
index 393e33754d..a0db694124 100644
--- a/files/fr/web/css/css_animations/index.html
+++ b/files/fr/web/css/css_animations/index.html
@@ -15,7 +15,6 @@ original_slug: Web/CSS/Animations_CSS
 
 
          Propriétés CSS
          
 
-
          
 
            
  
          • {{cssxref("animation")}}
            • 
  
          • {{cssxref("animation-delay")}}
            • 
@@ -27,15 +26,12 @@ original_slug: Web/CSS/Animations_CSS
  
          • {{cssxref("animation-play-state")}}
            • 
  
          • {{cssxref("animation-timing-function")}}
            • 
 
          
-
          
 
 
          Règles @ CSS
          
 
-
          
 
            
  
          • {{cssxref("@keyframes")}}
            • 
 
          
-
          
 
 
          Guides
          
 
diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html
index adb261195e..011e1c6e3a 100644
--- a/files/fr/web/css/css_animations/tips/index.html
+++ b/files/fr/web/css/css_animations/tips/index.html
@@ -22,8 +22,7 @@ original_slug: Web/CSS/Animations_CSS/Conseils
 
 
          Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).
          
 
-
 
 
          @keyframes colorchange {
   0% { background: yellow }
diff --git a/files/fr/web/css/css_animations/using_css_animations/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html
index ab83e1e420..2c0364c3f4 100644
--- a/files/fr/web/css/css_animations/using_css_animations/index.html
+++ b/files/fr/web/css/css_animations/using_css_animations/index.html
@@ -56,7 +56,9 @@ original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS
 
 
          Exemples
          
 
-
          Note : Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « live » ne fonctionnera pas.
          
+
          
+  
          Note : Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « live » ne fonctionnera pas.
          
+
          
 
 
          Utiliser une animation pour que le texte traverse la fenêtre du navigateur
          
 
@@ -231,7 +233,7 @@ her in a languid, sleepy voice.</p>
 }
          
 
 
          
-
          Note : Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.
          
+
          Note : Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.
          
 
          
 
 
          Utiliser plusieurs valeurs pour différentes animations
          
@@ -358,7 +360,7 @@ element.className = "slidein";
 
 
diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html
index 9aa3cd49f6..c598a24870 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html
+++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -9,12 +9,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 ---
 
          Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.
          
 
-
 
 
          {{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}
          
diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
index 993940bcdc..0cb8e25181 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
+++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -9,12 +9,9 @@ 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")}}.
          
 
-
 
 
          {{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}
          
diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
index 78e9288be3..bc0470ae50 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
+++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
@@ -9,12 +9,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
 ---
 
          Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.
          
 
-
 
 
          {{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
          
 
diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html
index 3180021066..bac2b33946 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/index.html
+++ b/files/fr/web/css/css_backgrounds_and_borders/index.html
@@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders
 
 
          Propriétés CSS
          
 
-
          
 
            
  
          • {{cssxref("background")}}
            • 
  
          • {{cssxref("background-attachment")}}
            • 
@@ -63,7 +62,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders
  
          • {{cssxref("border-width")}}
            • 
  
          • {{cssxref("box-shadow")}}
            • 
 
          
-
          
 
 
          Guides
          
 
diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
index 14ce7bad58..6a92d4d7e5 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
+++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
@@ -17,11 +17,11 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
 
 
          Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.
          
 
-
          
+
          
 
 
          On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :
          
 
-
          .square {
+
          .square {
   width: 300px;
   height: 300px;
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
@@ -43,15 +43,15 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
 
 
          L'image suivante montre le résultat obtenu.
          
 
-
          Logo de Firefox étité
          
+
          Logo de Firefox étité
          
 
 
          Agrandir une image
          
 
 
          On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.
          
 
-
          Logo MDN à l'échelle
          
+
          Logo MDN à l'échelle
          
 
-
          .square2 {
+
          .square2 {
   width: 300px;
   height: 300px;
   background-image: url(favicon.png);
@@ -74,15 +74,13 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
 
 
          Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur contain en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).
          
 
-
          
 
          {{EmbedLiveSample("contain", "100%", "220")}}
          
-
          
 
 
          <div class="bgSizeContain">
   <p>Redimensionnez la fenêtre de votre navigateur.</p>
 </div>
          
 
-
          .bgSizeContain {
+
          .bgSizeContain {
   height: 200px;
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: contain;
@@ -102,7 +100,7 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
   <p>Redimensionnez la fenêtre de votre navigateur.</p>
 </div>
          
 
-
          .bgSizeCover {
+
          .bgSizeCover {
   height: 200px;
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: cover;
diff --git a/files/fr/web/css/css_basic_user_interface/index.html b/files/fr/web/css/css_basic_user_interface/index.html
index 2e2abcc1f1..b8e3ba66e4 100644
--- a/files/fr/web/css/css_basic_user_interface/index.html
+++ b/files/fr/web/css/css_basic_user_interface/index.html
@@ -17,7 +17,6 @@ translation_of: Web/CSS/CSS_Basic_User_Interface
 
 
          Propriétés
          
 
-
          
 
            
  
          • {{CSSxRef("appearance")}} {{Experimental_Inline}}
            • 
  
          • {{CSSxRef("box-sizing")}}
            • 
@@ -36,7 +35,6 @@ translation_of: Web/CSS/CSS_Basic_User_Interface
  
          • {{CSSxRef("text-overflow")}}
            • 
  
          • {{CSSxRef("user-select")}} {{Experimental_Inline}}
            • 
 
          
-
          
 
 
          Guides
          
 
diff --git a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html
index c1b95b6eb2..d9cfe6891d 100644
--- a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html
+++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html
@@ -16,7 +16,7 @@ original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propri
 
 
          La syntaxe de base (CSS 2.1) pour cette propriété est :
          
 
-
          {{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
          
+
          {{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
          
 
 
          Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme auto ou pointer.
          
 
@@ -27,9 +27,9 @@ original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propri
 
 
          En utilisant cette règle, le moteur essaiera d'abord de charger toto.cur. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de truc.gif qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur auto sera utilisé.
          
 
-
          Le support de la syntaxe CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.
          
+
          Le support de la syntaxe CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.
          
 
-
          {{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
+
          {{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
 
          
 
 
          Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:
          
diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html
index 9487c666d5..f7fc54380d 100644
--- a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html
+++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html
@@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_abs
 ---
 
          {{CSSRef}}
          
 
-
          Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
          
+
          Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
          
 
 
          
 
          Note : À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.
          
diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
index f644790b67..2eb9626f5a 100644
--- a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
+++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox
 ---
 
          {{CSSRef}}
          
 
-
          Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
          
+
          Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
          
 
 
          Exemple simple
          
 
@@ -81,7 +81,6 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox
 
 
          Propriétés CSS
          
 
-
          
 
            
  
          • {{cssxref("justify-content")}}
            • 
  
          • {{cssxref("align-content")}}
            • 
@@ -94,16 +93,13 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox
  
          • {{cssxref("column-gap")}}
            • 
  
          • {{cssxref("gap")}}
            • 
 
          
-
          
 
 
          Termes du glossaire
          
 
-
          
 
-
          
 
 
          Guides
          
 
diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html
index 7efe8c5be7..8e6f9623b5 100644
--- a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html
+++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html
@@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
 ---
 
          {{CSSRef}}
          
 
-
          Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les grilles CSS. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
          
+
          Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les grilles CSS. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
          
 
 
          Exemple simple
          
 
@@ -25,7 +25,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
 
 
          L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.
          
 
-
          
+
          
 
 
          Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par justify- : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.
          
 
@@ -33,7 +33,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
 
 
          Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par align- : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.
          
 
-
          
+
          
 
 
          Alignement individuel
          
 
@@ -66,12 +66,12 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
  
        • {{cssxref("row-gap")}}
          • 
  
        • {{cssxref("column-gap")}}
          • 
  
        • {{cssxref("gap")}}
          • 
- 
        • {{cssxref("grid-row-gap")}}
          • 
+ 
        • {{cssxref("row-gap")}}
          • 
  
        • {{cssxref("grid-column-gap")}}
          • 
- 
        • {{cssxref("grid-gap")}}
          • 
+ 
        • {{cssxref("gap")}}
          • 
 
 
-
          La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.
          
+
          La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.
          
 
 
          À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe grid-) afin d'assurer une meilleure compatibilité.
          
 
@@ -79,7 +79,6 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
 
 
          Propriétés CSS
          
 
-
          
 
            
  
          • {{cssxref("justify-content")}}
            • 
  
          • {{cssxref("align-content")}}
            • 
@@ -94,21 +93,18 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
  
          • {{cssxref("column-gap")}}
            • 
  
          • {{cssxref("gap")}}
            • 
 
          
-
          
 
 
          Termes du glossaire
          
 
-
          
 
-
          
 
 
          Guides
          
 
 
 
 
          Ressources externes
          
diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html
index 81fa6692ae..f6195db8dc 100644
--- a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html
+++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html
@@ -9,7 +9,7 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes
 ---
 
          {{CSSRef}}
          
 
-
          Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
          
+
          Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.
          
 
 
          Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.
          
 
@@ -33,20 +33,16 @@ original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes
 
 
          Propriétés CSS
          
 
-
          
 
            
  
          • {{cssxref("justify-content")}}
            • 
  
          • {{cssxref("align-content")}}
            • 
  
          • {{cssxref("column-gap")}}
            • 
 
          
-
          
 
 
          Termes du glossaire
          
 
-
          
 
-
          
diff --git a/files/fr/web/css/css_box_alignment/index.html b/files/fr/web/css/css_box_alignment/index.html
index e0787aca03..18feaec140 100644
--- a/files/fr/web/css/css_box_alignment/index.html
+++ b/files/fr/web/css/css_box_alignment/index.html
@@ -9,21 +9,21 @@ translation_of: Web/CSS/CSS_Box_Alignment
 ---
 
          {{CSSRef}}
          
 
-
          Le module de spécification CSS Box Alignment (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.
          
+
          Le module de spécification CSS Box Alignment (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.
          
 
 
          
-
          Note : La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.
          
+
          Note : La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.
          
 
          
 
 
          Anciennes méthodes d'alignement
          
 
 
          Par le passé, CSS disposait de peu d'outils pour l'alignement. Le texte pouvait être aligné grâce à {{cssxref("text-align")}}, les blocs pouvaient être centrés avec des marges ({{cssxref("margin")}}) automatique et les tableaux ou éléments en affichage inline-block pouvaient tirer parti de {{cssxref("vertical-align")}}. Désormais, l'alignement du texte est couvert par les modules Inline Layout et CSS Text et, pour la première fois, avec le module Box Alignment, on dispose d'outils complets pour l'alignement vertical et horizontal.
          
 
-
          Si vous connaissez déjà les boîtes flexibles (flexbox), vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification Box Alignment est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.
          
+
          Si vous connaissez déjà les boîtes flexibles (flexbox), vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification Box Alignment est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.
          
 
 
          Exemples simples
          
 
-
          Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions en grille ou utilisant les boîtes flexibles.
          
+
          Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions en grille ou utilisant les boîtes flexibles.
          
 
 
          Alignement pour une disposition en grille
          
 
@@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Box_Alignment
 
 
          Lorsqu'on utilise les propriétés d'alignement, on aligne le contenu selon deux axes : l'axe en ligne (inline axis) et l'axe de bloc (block axis). L'axe en ligne correspond à l'axe selon lequel les mots sont écrits pour ce mode d'écriture. En français, par exemple, l'axe en ligne est un axe horizontal dirigé de la gauche vers la droite. L'axe de bloc est orthogonal à l'axe en ligne et suit la direction selon laquelle les blocs de texte sont disposés les uns à la suite des autres.
          
 
-
          
+
          
 
 
          Lorsqu'on aligne des objets le long de l'axe en ligne, on utilisera les propriétés qui commencent par justify-:
          
 
@@ -79,7 +79,7 @@ translation_of: Web/CSS/CSS_Box_Alignment
 
 
          Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.
          
 
-
          
+
          
 
 
          L'alignement de recours (fallback)
          
 
@@ -117,7 +117,7 @@ translation_of: Web/CSS/CSS_Box_Alignment
 
 
          On voit ici que ces deux exemples utilisent justify-content: start mais que l'emplacement des sujets varie selon le mode d'écriture.
          
 
-
          
+
          
 
 
          Alignement selon la ligne de base
          
 
@@ -146,11 +146,11 @@ translation_of: Web/CSS/CSS_Box_Alignment
 
 
          Ainsi, si des objets flexibles sont alignés avec flex-start et qu'on travaille dans un mode d'écriture horizontal de gauche à droite et de haut en bas (comme le français) avec flex-direction qui vaut row, les sujets commenceront à gauche et l'espace disponible sera affiché à droite après que les sujets aient été placés.
          
 
-
          
+
          
 
 
          Si on utilise justify-content: space-between sur le conteneur flexible, l'espace disponible sera alors réparti entre les objets.
          
 
-
          
+
          
 
 
          Pour que ces mots-clés aient un effet, il est nécessaire qu'il reste de l'espace supplémentaire. S'il n'y a plus d'espace, aucune distribution ne pourra être effectuée.
          
 
@@ -176,12 +176,12 @@ translation_of: Web/CSS/CSS_Box_Alignment
 
 
          {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}
          
 
-
          Dans cet exemple, on utilise la propriété {{cssxref("grid-gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par grid- et certains navigateurs ne prennent encore en charge que ces versions préfixées :
          
+
          Dans cet exemple, on utilise la propriété {{cssxref("gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par grid- et certains navigateurs ne prennent encore en charge que ces versions préfixées :
          
 
 
            
- 
          • {{cssxref("grid-row-gap")}}
            • 
+ 
          • {{cssxref("row-gap")}}
            • 
  
          • {{cssxref("grid-column-gap")}}
            • 
- 
          • {{cssxref("grid-gap")}}
            • 
+ 
          • {{cssxref("gap")}}
            • 
 
          
 
 
          Ces versions préfixées seront maintenues comme des alias des propriétés non-préfixées. Toutefois, il est toujours possible de les dédoubler comme on le fait avec les propriétés préfixées des différents éditeurs : déclarer la propriété grid-gap puis gap avec la même valeur.
          
@@ -203,7 +203,6 @@ translation_of: Web/CSS/CSS_Box_Alignment
 
 
          Propriétés CSS
          
 
-
          
 
            
  
          • {{cssxref("justify-content")}}
            • 
  
          • {{cssxref("align-content")}}
            • 
@@ -218,26 +217,23 @@ translation_of: Web/CSS/CSS_Box_Alignment
  
          • {{cssxref("column-gap")}}
            • 
  
          • {{cssxref("gap")}}
            • 
 
          
-
          
 
 
          Termes du glossaire
          
 
-
          
 
-
          
 
 
          Guides
          
 
 
 
 
          Ressources externes
          
diff --git a/files/fr/web/css/css_box_model/index.html b/files/fr/web/css/css_box_model/index.html
index 53493637fa..61ad9dfd61 100644
--- a/files/fr/web/css/css_box_model/index.html
+++ b/files/fr/web/css/css_box_model/index.html
@@ -20,17 +20,14 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS
 
 
          Les propriétés qui définissent le flux du contenu dans une boîte
          
 
-
          
 
            
  
          • {{cssxref("overflow")}}
            • 
  
          • {{cssxref("overflow-x")}}
            • 
  
          • {{cssxref("overflow-y")}}
            • 
 
          
-
          
 
 
          Les propriétés qui définissent la taille d'une boîte
          
 
-
          
 
            
  
          • {{cssxref("height")}}
            • 
  
          • {{cssxref("width")}}
            • 
@@ -39,11 +36,9 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS
  
          • {{cssxref("min-height")}}
            • 
  
          • {{cssxref("min-width")}}
            • 
 
          
-
          
 
 
          Les propriétés qui définissent les marges d'une boîte
          
 
-
          
 
            
  
          • {{cssxref("margin")}}
            • 
  
          • {{cssxref("margin-bottom")}}
            • 
@@ -52,11 +47,9 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS
  
          • {{cssxref("margin-top")}}
            • 
  
          • {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
            • 
 
          
-
          
 
 
          Les propriétés qui définissent le remplissage (padding) d'une boîte
          
 
-
          
 
            
  
          • {{cssxref("padding")}}
            • 
  
          • {{cssxref("padding-bottom")}}
            • 
@@ -64,16 +57,13 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS
  
          • {{cssxref("padding-right")}}
            • 
  
          • {{cssxref("padding-top")}}
            • 
 
          
-
          
 
 
          Les autres propriétés
          
 
-
          
 
            
  
          • {{cssxref("box-shadow")}}
            • 
  
          • {{cssxref("visibility")}}
            • 
 
          
-
          
 
 
          Guides
          
 
diff --git a/files/fr/web/css/css_charsets/index.html b/files/fr/web/css/css_charsets/index.html
index 46991607c2..07d2f1c593 100644
--- a/files/fr/web/css/css_charsets/index.html
+++ b/files/fr/web/css/css_charsets/index.html
@@ -17,11 +17,9 @@ original_slug: Web/CSS/Jeux_de_caractères_CSS
 
 
          Règles @
          
 
-
          
 
            
  
          • {{cssxref("@charset")}}
            • 
 
          
-
          
 
 
          Spécifications
          
 
diff --git a/files/fr/web/css/css_color/index.html b/files/fr/web/css/css_color/index.html
index eb61cf41cd..f07f716fe6 100644
--- a/files/fr/web/css/css_color/index.html
+++ b/files/fr/web/css/css_color/index.html
@@ -18,21 +18,17 @@ translation_of: Web/CSS/CSS_Color
 
 
          Propriétés
          
 
-
          
 
            
  
          • {{cssxref("color")}}
            • 
  
          • {{cssxref("opacity")}}
            • 
  
          • {{cssxref("color-adjust")}}
            • 
 
          
-
          
 
 
          Types de données
          
 
-
          
 
            
  
          • {{cssxref("<color>")}}
            • 
 
          
-
          
 
 
          Guides
          
 
diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.html b/files/fr/web/css/css_colors/color_picker_tool/index.html
index 1996401a8b..0715ba2707 100644
--- a/files/fr/web/css/css_colors/color_picker_tool/index.html
+++ b/files/fr/web/css/css_colors/color_picker_tool/index.html
@@ -7,12 +7,7 @@ tags:
 translation_of: Web/CSS/CSS_Colors/Color_picker_tool
 original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs
 ---
-
 
-
          {{ EmbedLiveSample('nesting', '600', '340') }}
          
+
          {{ EmbedLiveSample('Grilles_imbriquées', '600', '340') }}
          
 
-
          Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.
          
+
          Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.
          
 
 
          Sous-grille
          
 
@@ -517,7 +497,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 
 
          Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.
          
 
-
          
 
          <div class="wrapper">
   <div class="box box1">Un</div>
   <div class="box box2">Deux</div>
@@ -545,8 +524,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 }
 
          
 
-
-
          
 
-
          {{ EmbedLiveSample('l_ex', '230', '420') }}
          
+
          {{ EmbedLiveSample('Superposer_les_éléments_avec_z-index', '230', '420') }}
          
 
 
          L'élément box2 est maintenant superposé avec box1, et comme il arrive après dans le code source il s'affiche par-dessus.
          
 
@@ -591,8 +567,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 }
 
          
 
-
 
 
          {{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}
          
 
diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png
new file mode 100644
index 0000000000..33e4a5efab
Binary files /dev/null and b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/screen_shot_2017-03-17_at_14.47.48.png differ
diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png
new file mode 100644
index 0000000000..d0d2ce3199
Binary files /dev/null and b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/7_block_axis.png differ
diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index 7830f9ab48..6721ff8c67 100644
--- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -14,7 +14,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 
 
          {{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}
          
 
-
          Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.
          
+
          Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.
          
 
 
          Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.
          
 
@@ -22,11 +22,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 
 
          Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (block layout). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.
          
 
-
          
+
          
 
 
          L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.
          
 
-
          
+
          
 
 
          Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.
          
 
@@ -34,6 +34,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 
 
          Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.
          
 
+
          Utiliser align-items
          
+
 
          Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :
          
 
 
            
@@ -48,9 +50,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
  
          • last baseline
            • 
 
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -102,18 +101,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
 
          
 
-
          {{EmbedLiveSample('alignment_1', '500', '450')}}
          
-
          
+
          {{EmbedLiveSample('utiliser_align-items', '500', '450')}}
          
 
 
          Lorsqu'on utilise align-self: start, la hauteur de chaque <div> sera déterminée par le contenu du <div>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <div> sera étiré afin de remplir la zone de la grille.
          
 
 
          La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant align-self pour les objets.
          
 
+
          Utiliser align-self
          
+
 
          Dans le prochain exemple, on utilise la propriété align-self afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour align-self : l'objet est étiré. Le deuxième objet utilise la valeur start, le troisième utilise end et le quatrième utilise center.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -167,8 +164,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
 
          
 
-
          {{EmbedLiveSample('alignment_2', '500', '450')}}
          
-
          
+
          {{EmbedLiveSample('utiliser_align-self', '500', '450')}}
          
 
 
          Gestion des objets avec un ratio intrinsèque
          
 
@@ -196,9 +192,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 
 
          Là encore, la valeur par défaut stretch pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -251,9 +244,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
   <div class="item4">Objet 4</div>
 </div>
 
          
-
+Justifier_les_objets_sur_laxe_en_ligne_inline_axis
 
          {{EmbedLiveSample('alignment_3', '500', '450')}}
          
-
          
 
 
          Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.
          
 
@@ -267,9 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 
 
          En combinant les propriétés align-* et justify-*, on peut facilement centrer un objet sur sa zone de grille.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -308,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
 
          
 
-
          {{EmbedLiveSample('alignment_4', '500', '480')}}
          
-
          
+
          {{EmbedLiveSample('Centrer_un_objet_sur_une_zone', '500', '480')}}
          
 
 
          Aligner les pistes d'une grille sur l'axe de bloc
          
 
@@ -337,9 +325,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 
 
          La propriété align-content s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est start : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -391,14 +378,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
 
          
 
-
          {{EmbedLiveSample('alignment_5', '500', '520')}}
          
-
          
+
          {{EmbedLiveSample('alignement_par_defaut', '500', '520')}}
          
+
+
          Utiliser align-content: end
          
 
 
          Si on ajoute align-content avec la valeur end sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -451,14 +436,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
 
          
 
-
          {{EmbedLiveSample('alignment_6', '500', '520')}}
          
-
          
+
          {{EmbedLiveSample('align-content_end', '500', '520')}}
          
+
+
          Utiliser align-content: space-between
          
 
 
          Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : space-between, space-around et space-evenly qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec space-between pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -511,14 +494,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
 
          
 
-
          {{EmbedLiveSample('alignment_7', '500', '1570')}}
          
-
          
+
          {{EmbedLiveSample('align-content_end_space-between', '500', '1570')}}
          
 
 
          On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.
          
 
 
          Dans l'image qui suit, on a a placé une grille en utilisant align-content: start et une autre grille qui utilise align-content: space-between. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.
          
 
-
          
+
          
 
 
          Justifier les pistes sur l'axe des lignes
          
 
@@ -526,9 +508,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 
 
          Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur space-around. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -582,8 +561,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
 
          
 
-
          {{EmbedLiveSample('alignment_8', '500', '500')}}
          
-
          
+
          {{EmbedLiveSample('Justifier_les_pistes_sur_laxe_des_lignes', '500', '500')}}
          
 
 
          Alignement et marges automatiques
          
 
@@ -591,9 +569,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 
 
          Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec auto. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -646,12 +621,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 </div>
 
          
 
-
          {{EmbedLiveSample('alignment_9', '500', '500')}}
          
-
          
+
          {{EmbedLiveSample('Alignement_et_marges_automatiques', '500', '500')}}
          
 
 
          On peut voir comment l'objet est aligné grâce à l'outil de mise en évidence des grilles dans Firefox.
          
 
-
          
+
          
 
 
          L'alignement et les modes d'écriture
          
 
diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
index 6071aa815d..1b93e665ec 100644
--- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
+++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
@@ -59,7 +59,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progre
 
 
          Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.
          
 
-
          
 
          * {box-sizing: border-box;}
 img {
   max-width: 100%;
@@ -103,22 +102,21 @@ img {
 </div>
 
          
 
-
          {{EmbedLiveSample('enhancement_1', '500', '180')}}
          
-
          
+
          {{EmbedLiveSample('Effectuer_la_transition_depuis_une_disposition_flottante', '500', '180')}}
          
 
 
          Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.
          
 
-
          A simple example of overriding a floated layout using grid.
          
+
          A simple example of overriding a floated layout using grid.
          
 
 
          Utiliser les requêtes de fonctionnalité (feature queries)
          
 
 
          L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.
          
 
+
          Un exemple plus complexe
          
+
 
          Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.
          
 
-
          
-
 
 
          .wrapper ul {
   overflow: hidden;
@@ -180,22 +177,23 @@ img {
 </div>
 
          
 
-
          {{EmbedLiveSample('enhancement_2', '550', '400')}}
          
-
          
+
          {{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}}
          
 
 
          Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.
          
 
-
          A floated cards layout demonstrating the problem caused by uneven content height.
          
+
          A floated cards layout demonstrating the problem caused by uneven content height.
          
 
 
          Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…
          
 
 
          Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.
          
 
-
          After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.
          
+
          After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.
          
 
 
          Si on réinitialise la largeur avec auto, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce aux requêtes de fonctionnalité CSS, on peut le faire directement en CSS.
          
 
-
          Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.
          
+
          Une solution avec les requêtes de fonctionnalité
          
+
+
          Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.
          
 
 
          @supports (display: grid) {
   .wrapper {
@@ -208,11 +206,9 @@ img {
 
 
          La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.
          
 
-
          On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.
          
+
          On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.
          
 
-
          
-
 
 
          .wrapper ul {
     overflow: hidden;
@@ -287,8 +282,7 @@ img {
 </div>
 
          
 
-
          {{EmbedLiveSample('enhancement_3', '550', '480')}}
          
-
          
+
          {{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}}
          
 
 
          Surcharger les autres valeurs pour display
          
 
@@ -296,9 +290,7 @@ img {
 
 
          Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger display: inline-block. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par inline-block, ils deviendront des objets de la grille et inline-block ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété vertical-align sur les éléments lorsqu'on utilise le mode inline-block, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.
          
 
-
          
-
+
 
 
          .wrapper ul {
   margin: 0 -10px;
@@ -374,8 +366,7 @@ img {
 </div>
 
          
 
-
          {{EmbedLiveSample('enhancement_4', '500', '480')}}
          
-
          
+
          {{EmbedLiveSample('Surcharger_les_autres_valeurs_pour_display', '500', '480')}}
          
 
 
          Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé grid-gap plutôt que des marges et des marges négatives pour créer les « gouttières ».
          
 
diff --git a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
index ccde0b5c42..2270ae2deb 100644
--- a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
+++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
@@ -47,9 +47,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
 
 
          Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -88,8 +85,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
 </div>
 
          
 
-
          {{EmbedLiveSample('accessibility_1', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample('Un_ré-ordonnancement_visuel_et_non_logique', '500', '330')}}
          
 
 
          Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.
          
 
diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
index b8ec3a91d3..d43798fd7f 100644
--- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
+++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
@@ -42,7 +42,7 @@ original_slug: >-
 
 
          Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise text-align avec left et on ajoute dir="rtl" sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec text-align value: left, l'alignement reste à gauche.
          
 
-
          A simple example of text direction.
          
+
          A simple example of text direction.
          
 
 
          Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.
          
 
@@ -54,7 +54,7 @@ original_slug: >-
 
 
          Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (block axis en anglais) et l'axe en ligne (inline axis). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes logiques sont très utiles et on comprend mieux leurs rôles sur la grille.
          
 
-
          An image showing the default direction of the Block and Inline Axes.
          
+
          An image showing the default direction of the Block and Inline Axes.
          
 
 
          Les modes d'écriture CSS
          
 
@@ -74,9 +74,7 @@ original_slug: >-
 
 
          Sur le Web, c'est la valeur horizontal-tb qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut horizontal-tb et le second utilise la valeur vertical-rl. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (inline) est donc l'axe vertical.
          
 
-
          
-
 
 
          <div class="wrapper">
   <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p>
@@ -94,18 +91,17 @@ original_slug: >-
 </div>
 
          
 
-
          {{EmbedLiveSample('writing_1', '500', '420')}}
          
-
          
+
          {{EmbedLiveSample("writing-mode", '500', '420')}}
          
 
 
          La gestion des modes d'écriture avec une grille
          
 
 
          Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.
          
 
+
          Mode d'écriture par défaut
          
+
 
          Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -140,14 +135,13 @@ original_slug: >-
 </div>
 
          
 
-
          {{EmbedLiveSample('writing_2', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}}
          
+
+
          Définir writing-mode
          
 
 
          Si on ajoute writing-mode: vertical-lr au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.
          
 
-
          
-
 
 
          .wrapper {
   writing-mode: vertical-lr;
@@ -183,10 +176,9 @@ original_slug: >-
 </div>
 
          
 
-
          {{EmbedLiveSample('writing_3', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample("definir_writing-mode", '500', '330')}}
          
 
-
          A image showing the direction of Block and Inline when writing-mode is vertical-lr
          
+
          A image showing the direction of Block and Inline when writing-mode is vertical-lr
          
 
 
          L'utilisation de valeurs logiques pour l'alignement
          
 
@@ -194,9 +186,7 @@ original_slug: >-
 
 
          Dans le prochain exemple, on aligne des objets dans une grille pour laquelle writing-mode: vertical-lr. Les valeurs start et end fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.
          
 
-
          
-
 
 
          .wrapper {
   writing-mode: vertical-lr;
@@ -248,8 +237,7 @@ original_slug: >-
 </div>
 
          
 
-
          {{EmbedLiveSample('writing_4', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}}
          
 
 
          Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de vertical-lr à vertical-rl pour changer de mode d'écriture.
          
 
@@ -269,9 +257,9 @@ original_slug: >-
  
        • L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.
          • 
 
 
-
          
-
+
          {{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}}
          
+
+
          Placement sur les lignes pour du texte de droite à gauche
          
 
 
          Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur rtl pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.
          
 
-
          
-
 
 
          .wrapper {
   direction: rtl;
@@ -365,8 +351,7 @@ original_slug: >-
 </div>
 
          
 
-
          {{EmbedLiveSample('writing_6', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}}
          
 
 
          On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.
          
 
@@ -398,7 +383,6 @@ original_slug: >-
 
 
          Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.
          
 
-
          
 
          .wrapper {
   display: grid;
   grid-gap: 20px;
@@ -435,12 +419,11 @@ original_slug: >-
 </div>
 
          
 
-
          {{EmbedLiveSample('writing_7', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}}
          
 
 
          Les valeurs physiques et les grilles CSS
          
 
-
          On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.
          
+
          On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.
          
 
 
          Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode ltr à un mode rtl.
          
 
diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html
index 259dd33bbc..2b45f2fac6 100644
--- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html
+++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html
@@ -13,7 +13,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 
 
          {{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}
          
 
-
          Dans le guide précédent, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des zones de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !
          
+
          Dans le guide précédent, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des zones de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !
          
 
 
          Donner un nom à une zone de grille
          
 
@@ -26,7 +26,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 
 
          Ici, on définit les quatre lignes qui entourent la zone en question :
          
 
-
          The Grid Area defined by lines
          
+
          The Grid Area defined by lines
          
 
 
          On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :
          
 
@@ -37,11 +37,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
  
        • Le contenu principale (content)
          • 
 
 
-
          An image showing a simple two column layout with header and footer
          
+
          An image showing a simple two column layout with header and footer
          
 
 
          Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :
          
 
-
          
 
          .header {
   grid-area: hd;
 }
@@ -69,8 +68,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
 
          
 
-
 
 
          <div class="wrapper">
   <div class="header">En-tête</div>
@@ -97,8 +94,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   <div class="footer">Pied de page</div>
 </div>
          
 
-
          {{EmbedLiveSample('Grid_Area_1', '300', '330')}}
          
-
          
+
          {{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}
          
 
 
          Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.
          
 
@@ -120,8 +116,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
 
          
 
-
 
 
          .wrapper {
   display: grid;
@@ -159,7 +153,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   <div class="footer">Pied de page</div>
 </div>
          
 
-
          {{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}
          
+
          {{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}
          
 
 
          Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.
          
 
@@ -183,8 +177,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
 
          
 
-
 
 
          .wrapper {
   display: grid;
@@ -215,16 +207,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
 
          
 
-
 
-
          {{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}
          
+
          {{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}
          
 
 
          La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.
          
 
@@ -236,8 +226,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 
 
          Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :
          
 
-
 
 
          .header {
   grid-area: hd;
@@ -302,14 +290,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 }
 
          
 
-
 
 
          {{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}
          
 
@@ -317,15 +303,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 
 
          La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.
          
 
+
          Exemple d'objet média
          
+
 
          Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.
          
 
-
          Images showing an example media object design
          
+
          Images showing an example media object design
          
 
 
          Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec 1fr et celle pour le texte reçoit 3fr. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser 1fr pour la zone du texte. Cette colonne de 1fr aurait alors occupé le reste de l'espace.
          
 
 
          Pour la zone dédiée à l'image, on crée une zone de grille intitulée img et pour le texte, on crée une seconde zone intitulée content. Ensuite, on utilise ces noms pour créer l'organisation via la propriété grid-template-areas.
          
 
-
          
 
          * {box-sizing: border-box;}
 
 .media {
@@ -361,14 +348,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   </div>
 </div>
          
 
-
          {{EmbedLiveSample('Media_1', '300', '200')}}
          
-
          
+
          {{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}
          
 
 
          Afficher l'image de l'autre côté
          
 
 
          Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure 1fr est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.
          
 
-
          
 
          * {box-sizing: border-box;}
 
 .media {
@@ -409,8 +394,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   </div>
 </div>
          
 
-
          {{EmbedLiveSample('Media_2', '300', '200') }}
          
-
          
+
          {{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}
          
 
 
          Les propriétés raccourcies pour les grilles CSS
          
 
@@ -463,7 +447,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
  
        • {{cssxref("grid-auto-flow")}}
          • 
 
 
-
          Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur 0 mais, en revanche, elle ne permet pas de définir des espaces.
          
+
          Cette propriété réinitialise également la propriété {{cssxref("gap")}} avec la valeur 0 mais, en revanche, elle ne permet pas de définir des espaces.
          
 
 
          On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :
          
 
diff --git a/files/fr/web/css/css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/index.html
index b097f662db..6d622ed3af 100644
--- a/files/fr/web/css/css_grid_layout/index.html
+++ b/files/fr/web/css/css_grid_layout/index.html
@@ -18,8 +18,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
 
 
          Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.
          
 
-
 
 
          HTML
          
 
@@ -85,7 +83,6 @@ translation_of: Web/CSS/CSS_Grid_Layout
 
 
          Propriétés CSS
          
 
-
          
 
            
  
          • {{cssxref("grid-template-columns")}}
            • 
  
          • {{cssxref("grid-template-rows")}}
            • 
@@ -106,17 +103,14 @@ translation_of: Web/CSS/CSS_Grid_Layout
  
          • {{cssxref("column-gap")}}
            • 
  
          • {{cssxref("gap")}}
            • 
 
          
-
          
 
 
          Fonctions CSS
          
 
-
          
 
            
  
          • {{cssxref("repeat", "repeat()")}}
            • 
  
          • {{cssxref("minmax", "minmax()")}}
            • 
  
          • {{cssxref("fit-content", "fit-content()")}}
            • 
 
          
-
          
 
 
          Types de donnée CSS
          
 
@@ -124,7 +118,6 @@ translation_of: Web/CSS/CSS_Grid_Layout
 
 
          Termes définis dans le glossaire
          
 
-
          
 
-
          
 
 
          Guides
          
 
-
          
 
-
          
 
 
          Ressources externes
          
 
diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index a7fbb6e569..d31fb16a38 100644
--- a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -19,9 +19,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 
 
          Lorsqu'on définit une grille avec grid-template-rows et grid-template-columns, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.
          
 
-
          
-
 
 
          Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici content-start et content-end), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.
          
 
@@ -79,8 +76,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 </div>
 
          
 
-
          {{EmbedLiveSample('example_named_lines', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample("Nommer_des_lignes_lorsqu'on_définit_une_grille", '500', '330')}}
          
+
 
 
          Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition responsive où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les media queries.
          
 
@@ -94,9 +91,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 
 
          Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes -start et -end pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise content-start et content-end pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée content qu'on peut également manipuler
          
 
-
          
-
 
 
          On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée content.
          
 
@@ -133,8 +127,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 </div>
 
          
 
-
          {{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}
          
-
+
          {{EmbedLiveSample("Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées", '500', '330')}}
          
 
 
          Il n'est pas nécessaire de définir l'emplacement de cette zone avec grid-template-areas car les lignes suffisent à créer la zone et à la placer.
          
 
@@ -166,13 +159,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 
 
          Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, sd-end et main-start font référence à la même ligne verticale).
          
 
-
          An image showing the implicit line names created by our grid areas.
          
+
          An image showing the implicit line names created by our grid areas.
          
 
 
          On peut positionner overlay grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -231,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 </div>
 
          
 
-
          {{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample("Définir_des_lignes_implicites_à_l'aide_de_zones_nommées", '500', '330')}}
          
 
 
          Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.
          
 
@@ -240,11 +229,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 
 
          Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec repeat() car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec repeat(), vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.
          
 
+
          Une grille à 12 colonnes avec repeat()
          
+
 
          Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (1fr), on définit un nom : [col-start]. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées col-start et qui mesureront chacune 1fr de large.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -286,12 +274,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div>
 </div>
          
 
-
          {{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample("une_grille_à_12_colonnes_avec_repeat", '500', '330')}}
          
 
 
          Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :
          
 
-
          The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.
          
+
          The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.
          
+
+
          Définir des lignes nommées avec une liste de piste
          
 
 
          La syntaxe repeat() permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (1fr), intitulée col1-start, et qui est suivie par une colonne plus large (3fr), intitulée col2-start.
          
 
@@ -316,9 +305,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 
 
          Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé span pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.
          
 
-
          
-
 
 
          .wrapper {
   display: grid;
@@ -355,14 +341,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 </div>
 
          
 
-
          {{EmbedLiveSample('span_line_number', '500', '330')}}
          
-
          
+
          {{EmbedLiveSample('Définir_des_lignes_nommées_avec_une_liste_de_piste', '500', '330')}}
          
+
+
          Cadre d'une grille à 12 colonnes
          
 
 
          Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.
          
 
 
          Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des frameworks tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le framework importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel framework se résume à :
          
 
-
          
 
          .wrapper {
   display: grid;
   grid-gap: 10px;
@@ -372,8 +358,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 
 
          On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :
          
 
-
 
 
          <div class="wrapper">
   <header class="main-header">Je suis l'en-tête</header>
@@ -420,12 +404,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 }
 
          
 
-
          {{EmbedLiveSample('three_column', '500', '330')}}
          
+
          {{ EmbedLiveSample('cadre_d_une_grille_à_12_colonnes', '500', '330') }}
          
 
 
          Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :
          
 
-
          The layout with the grid highlighted.
          
-
          
+
          The layout with the grid highlighted.
          
+
 
 
          Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent 1fr. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !
          
 
diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
index 96ba332efb..08aff7df63 100644
--- a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
+++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -16,7 +16,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
          Dans l'article sur les concepts de base, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.
          
 
-
          Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.
          
+
          Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.
          
 
 
          Un exemple simple
          
 
@@ -24,10 +24,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
          Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez l'outil de mise en évidence des grilles de Firefox, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.
          
 
-
          Our Grid highlighted in DevTools
          
+
          Our Grid highlighted in DevTools
          
 
-
 
 
          .wrapper {
   display: grid;
@@ -66,7 +64,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
          On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :
          
 
-
          
 
          .box1 {
    grid-column-start: 1;
    grid-column-end: 2;
@@ -75,12 +72,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
          
 
-
          Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.
          
+
          Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.
          
 
 
          On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.
          
 
-
 
 
          <div class="wrapper">
    <div class="box1">Un</div>
@@ -129,16 +124,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
          
 
-
          {{EmbedLiveSample('Line_Number', '300', '330')}}
          
-
          
+
          {{EmbedLiveSample("Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne", '300', '330')}}
          
+
 
-
          
 
          Les propriétés raccourcies grid-column et grid-row
          
 
 
          On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.
          
 
-
 
 
          <div class="wrapper">
   <div class="box1">Un</div>
@@ -185,16 +177,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
          
 
-
          {{EmbedLiveSample('Grid_Shorthands', '300', '330')}}
          
-
          
+
          {{EmbedLiveSample('Les_propriétés_raccourcies_grid-column_et_grid-row', '300', '330')}}
          
 
-
          La taille par défaut
          
+
          La taille par défaut
          
 
 
          Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre grid-column-end ou grid-row-end. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :
          
 
-
          
-
 
 
          <div class="wrapper">
   <div class="box1">Un</div>
@@ -244,14 +232,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
          
 
-
          {{EmbedLiveSample('End_Lines', '300', '330')}}
          
-
          
+
          {{EmbedLiveSample('La_taille_par_défaut', '300', '330')}}
          
+
+
          Tailles par défaut avec les propriétés raccourcies
          
 
 
          Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).
          
 
-
          
-
 
 
          <div class="wrapper">
   <div class="box1">Un</div>
@@ -298,8 +284,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 }
 
          
 
-
          {{EmbedLiveSample('New_Shorthand', '300', '330')}}
          
-
          
+
          {{EmbedLiveSample('Tailles_par_défaut_avec_les_propriétés_raccourcies', '300', '330')}}
          
 
 
          La propriété grid-area
          
 
@@ -312,8 +297,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
  
        • grid-column-end
          • 
 
 
-
 
 
          <div class="wrapper">
   <div class="box1">Un</div>
@@ -358,7 +341,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
          {{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}
          
 
-
          L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :
          
+
          L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :
          
 
 
            
  
          • block-start
            • 
@@ -377,8 +360,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
            Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.
            
 
-
 
 
            <div class="wrapper">
    <div class="box1">Un</div>
@@ -446,18 +427,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
            Les gouttières
            
 
-
            La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.
            
+
            La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.
            
 
 
            
-
            Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.
            
+
            Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.
            
 
 
            Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.
            
 
            
 
 
            Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :
            
 
-
 
 
            <div class="wrapper">
   <div class="box1">Un</div>
@@ -515,7 +494,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
            Les propriétés raccourcies pour les gouttières
            
 
-
            Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.
            
+
            Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.
            
 
 
            .wrapper {
   display: grid;
@@ -531,8 +510,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 
 
            On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.
            
 
-
 
 
            <div class="wrapper">
   <div class="box1">Un</div>
diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index ca59709909..b7af0ce06d 100644
--- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -15,21 +15,19 @@ original_slug: >-
 
 
            {{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}
            
 
-
            Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.
            
+
            Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.
            
 
 
            Une disposition adaptative avec une à trois colonnes en utilisant grid-template-areas
            
 
 
            De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit responsive, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.
            
 
-
            Image of the three different layouts created by redefining our grid at two breakpoints.
            
+
            Image of the three different layouts created by redefining our grid at two breakpoints.
            
 
-
            Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.
            
+
            Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.
            
 
 
            Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.
            
 
-
            
-
 
 
            <div class="wrapper">
   <header class="main-head">L'en-tête</header>
@@ -114,7 +111,7 @@ nav ul {
 }
 
            
 
-
            Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :
            
+
            Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :
            
 
 
            @media (min-width: 500px) {
   .wrapper {
@@ -155,8 +152,7 @@ nav ul {
 
 
            Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.
            
 
-
            {{EmbedLiveSample('layout_1', '800', '430')}}
            
-
            
+
            {{EmbedLiveSample('Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas', '800', '430')}}
            
 
 
            Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc ad dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.
            
 
@@ -164,9 +160,7 @@ nav ul {
 
 
            Si vous travaillez avec un framework ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure 1fr-unit et commence par une ligne intitulée col-start. Autrement dit, on aura 12 colonnes intitulées col-start.
            
 
-
            
-
 
 
            .wrapper {
   display: grid;
@@ -216,24 +209,21 @@ nav ul {
 }
 
            
 
-
            {{EmbedLiveSample('layout_2', '800', '330')}}
            
-
            
+
            {{EmbedLiveSample('Une_disposition_flexible_avec_12_colonnes', '800', '330')}}
            
 
-
            Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.
            
+
            Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.
            
 
 
            Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé span pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé l'inspecteur de grille de Firefox qui indique de façon claire comment les objets sont placés.
            
 
-
            Showing the items placed on the grid with grid tracks highlighted.
            
+
            Showing the items placed on the grid with grid tracks highlighted.
            
 
 
            Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant stricte, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.
            
 
-
            Construire une disposition avec ce système à 12 colonnes
            
+
            Construire une disposition avec ce système à 12 colonnes
            
 
 
            Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :
            
 
-
            
-
 
 
            <div class="wrapper">
   <header class="main-head">L'en-tête</header>
@@ -350,22 +339,20 @@ nav ul {
 }
 
            
 
-
            {{EmbedLiveSample('layout_3', '800', '430')}}
            
-
            
+
            {{EmbedLiveSample('Construire_une_disposition_avec_ce_système_à_12_colonnes', '800', '430')}}
            
 
 
            On peut à nouveau profiter de l'inspecteur de grille pour voir comment se compose effectivement notre disposition :
            
 
-
            Showing the layout with grid tracks highlighted by the grid inspector.
            
+
            Showing the layout with grid tracks highlighted by the grid inspector.
            
 
 
            On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..
            
 
 
            Une liste produit utilisant le placement automatique
            
 
-
            De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.
            
+
            De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.
            
 
 
            Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.
            
 
-
            
 
            <ul class="listing">
   <li>
     <h2>Produit n°1</h2>
@@ -398,8 +385,7 @@ nav ul {
 </ul>
 
            
 
-
 
 
            Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction minmax() avec la notation repeat pour la propriété grid-template-columns qui permet de dimensionner les pistes.
            
 
@@ -454,18 +439,17 @@ h2 {
 
 
            Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.
            
 
-
            {{EmbedLiveSample('layout_4', '800', '900')}}
            
-
            
+
            {{EmbedLiveSample('Une_liste_produit_utilisant_le_placement_automatique', '800', '900')}}
            
+
+
            Empêcher les espaces avec dense
            
 
 
            Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe wide sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur span 2. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :
            
 
-
            The layout has gaps as there is not space to layout a two track item.
            
+
            The layout has gaps as there is not space to layout a two track item.
            
 
 
            Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}: dense sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (tab order) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.
            
 
-
            
-
 
 
            .listing {
   list-style: none;
@@ -544,10 +527,9 @@ h2 {
 }
 
            
 
-
            {{EmbedLiveSample('layout_5', '800', '900')}}
            
+
            {{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}}
            
 
 
            Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.
            
-
            
 
 
            Aller plus loin
            
 
diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 6cfbf09b73..f32d5cd4b9 100644
--- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Les grilles et les boîtes flexibles (flexbox)
            
 
-
            La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.
            
+
            La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.
            
 
 
            Disposition sur une dimension ou sur deux dimensions
            
 
@@ -20,9 +20,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur wrap, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver flex-basis.
            
 
-
            
-
 
 
            <div class="wrapper">
   <div>Un</div>
@@ -58,9 +55,8 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   flex: 1 1 150px;
 }
 
            
-
            
 
-
            {{EmbedLiveSample('onedtwod', '500', '230')}}
            
+
            {{EmbedLiveSample('Disposition_sur_une_dimension_ou_sur_deux_dimensions', '500', '230')}}
            
 
 
            On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.
            
 
@@ -70,9 +66,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes 1fr. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.
            
 
-
            
-
 
 
            <div class="wrapper">
   <div>Un</div>
@@ -105,7 +98,6 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 
            
 
-
            
 
            {{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}
            
 
 
            Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :
            
@@ -133,8 +125,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut flex-end pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur box1 afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à box2 afin que box1 soit alignée avec le début du conteneur flexible.
            
 
-
 
 
            <div class="wrapper">
   <div class="box1">Un</div>
@@ -178,8 +168,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à start et end plutôt que par rapport à flex-start et flex-end. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.
            
 
-
 
 
            <div class="wrapper">
   <div class="box1">Un</div>
@@ -233,8 +221,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Dans l'exemple qui suit, on utilise le mot-clé auto-fill à la place d'un entier dans la fonction repeat et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.
            
 
-
 
 
            <div class="wrapper">
   <div>Un</div>
@@ -273,8 +259,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec minmax. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de 1fr. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum 1fr afin de répartir l'espace restant entre les objets.
            
 
-
 
 
            <div class="wrapper">
   <div>Un</div>
@@ -319,8 +303,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a position: relative et devient donc le contexte de positionnement pour cet objet.
            
 
-
 
 
            <div class="wrapper">
   <div class="box1">Un</div>
@@ -379,7 +361,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire position: relative dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le viewport) :
            
 
-
            Image of grid container as parent
            
+
            Image of grid container as parent
            
 
 
            Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.
            
 
@@ -389,8 +371,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            On indique que .box3 a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.
            
 
-
 
 
            <div class="wrapper">
   <div class="box1">Un</div>
@@ -458,9 +438,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            Si on utilise display: contents sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.
            
 
-
            
-
 
 
            <div class="wrapper">
   <div class="box box1">
@@ -509,14 +488,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 
            
 
-
            {{EmbedLiveSample('Display_Contents_Before', '400', '420')}}
            
-
            
+
            {{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}}
            
 
+
            Utiliser display contents après
            
+  
 
            Si on ajoute display: contents aux règles qui ciblent box1, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.
            
 
-
            
-
 
 
            <div class="wrapper">
   <div class="box box1">
@@ -565,8 +542,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 
            
 
-
            {{EmbedLiveSample('Display_Contents_After', '400', '330')}}
            
-
            
+
            {{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}}
            
 
 
            Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (subgrids) lorsqu'elles seront implémentées. Vous pouvez également utiliser display: contents de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.
            
 
diff --git a/files/fr/web/css/css_grid_layout/subgrid/index.html b/files/fr/web/css/css_grid_layout/subgrid/index.html
index 10eee83ae2..bfd9bb1b1b 100644
--- a/files/fr/web/css/css_grid_layout/subgrid/index.html
+++ b/files/fr/web/css/css_grid_layout/subgrid/index.html
@@ -12,8 +12,8 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
 
 
            La valeur subgrid a été ajoutée par le module de spécification CSS Grid Layout de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.
            
 
-
            
-
            Attention ! Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger Firefox Nightly afin de tester les exemples ci-après.
            
+
            
+
            Attention : Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger Firefox Nightly afin de tester les exemples ci-après.
            
 
            
 
 
            Une introduction à subgrid
            
@@ -72,7 +72,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
 
 
            Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.
            
 
-
            The smaller item displays in the gap as row-gap is set to 0 on the subgrid.
            
+
            The smaller item displays in the gap as row-gap is set to 0 on the subgrid.
            
 
 
            Les lignes nommées
            
 
@@ -106,7 +106,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
   
          
-   
+   
          
  
   
          
    Spécification
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
          
    {{SpecName("CSS Grid 2")}}
    {{Spec2("CSS Grid 2")}}Définition initiale des sous-grilles (subgrids).Définition initiale des sous-grilles (subgrids).
   
          
  
 
          
@@ -114,5 +114,5 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
 
          Voir aussi
          
 
 
diff --git a/files/fr/web/css/css_images/index.html b/files/fr/web/css/css_images/index.html
index 1bc5acf7c8..71e61e5b8d 100644
--- a/files/fr/web/css/css_images/index.html
+++ b/files/fr/web/css/css_images/index.html
@@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Images
 
 
          Propriétés
          
 
-
          
 
            
  
          • {{CSSxRef("image-orientation")}}
            • 
  
          • {{CSSxRef("image-rendering")}}
            • 
@@ -24,11 +23,9 @@ translation_of: Web/CSS/CSS_Images
  
          • {{CSSxRef("object-fit")}}
            • 
  
          • {{CSSxRef("object-position")}}
            • 
 
          
-
          
 
 
          Fonctions
          
 
-
          
 
            
  
          • {{CSSxRef("linear-gradient", "linear-gradient()")}}
            • 
  
          • {{CSSxRef("radial-gradient", "radial-gradient()")}}
            • 
@@ -41,16 +38,13 @@ translation_of: Web/CSS/CSS_Images
  
          • {{CSSxRef("_image", "image()")}}
            • 
  
          • {{CSSxRef("cross-fade", "cross-fade()")}}
            • 
 
          
-
          
 
 
          Types de données
          
 
-
          
 
            
  
          • {{cssxref("<image>")}}
            • 
  
          • {{cssxref("<gradient>")}}
            • 
 
          
-
          
 
 
          Guides
          
 
diff --git a/files/fr/web/css/css_images/using_css_gradients/index.html b/files/fr/web/css/css_images/using_css_gradients/index.html
index 5b836a6e21..6826ef0070 100644
--- a/files/fr/web/css/css_images/using_css_gradients/index.html
+++ b/files/fr/web/css/css_images/using_css_gradients/index.html
@@ -115,7 +115,7 @@ div {
 
 
          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 :
          
 
-
          linear_redangles.png
          
+
          
 
 
          background: linear-gradient(<angle>, red, white);
          
 
@@ -233,15 +233,13 @@ div {
 
 
          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%:
          
 
-
 
 
          .striped {
    background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
@@ -253,17 +251,15 @@ div {
 
 
          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.
          
 
-
 
 
          .multiposition-stops {
    background: linear-gradient(to left,
@@ -289,17 +285,15 @@ div {
 
 
          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.
          
 
-
 
 
          .colorhint-gradient {
   background: linear-gradient(to top, black, 20%, cyan);
@@ -350,15 +344,13 @@ div {
 
 
          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.
          
 
-
 
 
          .simple-radial {
   background: radial-gradient(red, blue);
@@ -371,15 +363,13 @@ div {
 
 
          À 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.
          
 
-
 
 
          .radial-gradient {
   background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
@@ -392,15 +382,13 @@ div {
 
 
          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.
          
 
-
 
 
          .radial-gradient {
   background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
@@ -417,15 +405,13 @@ div {
 
 
          Dans l'exemple qui suit, on utilise la valeur closest-side pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.
          
 
-
 
 
          .radial-ellipse-side {
   background: radial-gradient(ellipse closest-side,
@@ -439,15 +425,13 @@ div {
 
 
          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.
          
 
-
 
 
          .radial-ellipse-far {
   background: radial-gradient(ellipse farthest-corner,
@@ -461,15 +445,13 @@ div {
 
 
          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.
          
 
-
 
 
          .radial-circle-close {
   background: radial-gradient(circle closest-side,
@@ -483,15 +465,13 @@ div {
 
 
          À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.
          
 
-
 
 
          .stacked-radial {
   background:
@@ -523,15 +503,13 @@ div {
 
 
          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 :
          
 
-
 
 
          .simple-conic {
   background: conic-gradient(red, blue);
@@ -546,15 +524,13 @@ div {
 
 
          À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé at.
          
 
-
 
 
          .conic-gradient {
   background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
@@ -567,15 +543,13 @@ div {
 
          
 
          Modifier l’angle
          
 
-
 
 
          .conic-gradient {
   background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
@@ -595,15 +569,13 @@ div {
 
 
          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.
          
 
-
 
 
          .repeating-linear {
   background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
@@ -614,15 +586,13 @@ div {
 
 
          Répéter plusieurs dégradés linéaires
          
 
-
 
 
          .multi-repeating-linear {
   background:
@@ -646,14 +616,12 @@ div {
 
 
          Créer un tartan
          
 
-
 
 
          .plaid-gradient {
   background:
@@ -682,15 +650,13 @@ div {
 
 
          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.
          
 
-
 
 
          .repeating-radial {
   background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
@@ -701,15 +667,13 @@ div {
 
 
          Répéter plusieurs dégradés radiaux
          
 
-
 
 
          .multi-target {
   background:
@@ -743,6 +707,6 @@ div {
    
        • {{cssxref("background")}}, {{cssxref("background-image")}}
          • 
   
        
  
- 
      • Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou
        • 
+ 
      • Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou
        • 
  
      • Un générateur de dégradé CSS
        • 
 
      
diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html
index 632152b9d6..019656613c 100644
--- a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html
+++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html
@@ -18,21 +18,21 @@ original_slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes
 
 
      Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.
      
 
-
      
+
      
 
 
      La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (padding) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :
      
 
-
      
+
      
 
 
      À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon le modèle de boîtes CSS, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (padding). On obtient donc ce résultat :
      
 
-
      
+
      
 
 
      Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément ul. Puisqu'il n'a pas de remplissage (padding), cette limite épouse étroitement celles des trois éléments de la liste.
      
 
 
      On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :
      
 
-
      
+
      
 
 
      Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément ul, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments li. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque li.
      
 
@@ -61,12 +61,12 @@ original_slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes
 
 
      Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément ul. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément ul, nous obtenons le résultat qui suit :
      
 
-
      
+
      
 
 
      De son côté, Gecko applique un padding gauche de 40 pixels à cet élément ul. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :
      
 
 

      
- 
      
+ 
      
 
 
      Comme nous pouvons le voir, les marqueurs restent attachés aux éléments li, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément ul est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément ul
      
 
diff --git a/files/fr/web/css/css_lists_and_counters/index.html b/files/fr/web/css/css_lists_and_counters/index.html
index 40b79a5e95..44ea497254 100644
--- a/files/fr/web/css/css_lists_and_counters/index.html
+++ b/files/fr/web/css/css_lists_and_counters/index.html
@@ -15,14 +15,12 @@ original_slug: Web/CSS/CSS_Lists
 
 
      Propriétés
      
 
-
      
 
        
  
      • {{cssxref("list-style-image")}}
        • 
  
      • {{cssxref("list-style-type")}}
        • 
  
      • {{cssxref("list-style-position")}}
        • 
  
      • {{cssxref("list-style")}}
        • 
 
      
-
      
 
 
      Guides
      
 
diff --git a/files/fr/web/css/css_logical_properties/basic_concepts/index.html b/files/fr/web/css/css_logical_properties/basic_concepts/index.html
index 0df0049658..82079917e4 100644
--- a/files/fr/web/css/css_logical_properties/basic_concepts/index.html
+++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base
 ---
 
      {{CSSRef}}
      
 
-
      La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.
      
+
      La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.
      
 
 
      Quel intérêt pour les propriétés logiques ?
      
 
@@ -18,21 +18,21 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base
 
 
      Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : justify-self: start aligne l'élément au début de l'axe en ligne et align-self: start aligne l'élément au début de l'axe de bloc.
      
 
-
      A grid in a horizontal writing mode
      
+
      A grid in a horizontal writing mode
      
 
 
      Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur vertical-rl, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.
      
 
-
      A grid in vertical writing mode.
      
+
      A grid in vertical writing mode.
      
 
 
      Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que width, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.
      
 
-
      A grid layout in vertical writing mode
      
+
      A grid layout in vertical writing mode
      
 
 
      Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété writing-mode pour la passer de vertical-rl à horizontal-tb sur le sélecteur .box afin d'observer la façon dont les différentes propriétés modifient la disposition.
      
 
 
      {{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}
      
 
-
      Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.
      
+
      Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.
      
 
 
      Axe de bloc et axe en ligne
      
 
@@ -44,20 +44,20 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base
 
 
      Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :
      
 
-
      diagram showing the inline axis running horizontally, block axis vertically.
      
+
      diagram showing the inline axis running horizontally, block axis vertically.
      
 
 
      Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :
      
 
-
      Diagram showing the block axis running horizontally the inline axis vertically.
      
+
      Diagram showing the block axis running horizontally the inline axis vertically.
      
 
 
      Prise en charge des navigateurs
      
 
-
      Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).
      
+
      Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).
      
 
 
      On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.
      
 
-
      
-
      Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.
      
+
      
+
      Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.
      
 
      
 
 
      Tester la compatibilité des navigateurs
      
@@ -69,8 +69,8 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base
 
      Voir aussi
      
 
 
diff --git a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html
index dbb69adc26..e7105dad8a 100644
--- a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html
+++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_
 ---
 
      {{CSSRef}}
      
 
-
      La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.
      
+
      La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.
      
 
 
      Correspondance entre les propriétés et les valeurs
      
 
@@ -129,7 +129,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_
  
    • {{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc
      • 
 
    
 
-
    
+
    
 
    Note : Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.
    
 
    
 
diff --git a/files/fr/web/css/css_logical_properties/index.html b/files/fr/web/css/css_logical_properties/index.html
index bf77e064c1..7d671c63ed 100644
--- a/files/fr/web/css/css_logical_properties/index.html
+++ b/files/fr/web/css/css_logical_properties/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Logical_Properties
 ---
 
    {{CSSRef}}
    
 
-
    CSS Logical Properties (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : block et inline, perpendiculaires, qui dépendent du sens de l'orientation du document.
    
+
    CSS Logical Properties (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : block et inline, perpendiculaires, qui dépendent du sens de l'orientation du document.
    
 
 
    Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec CSS 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.
    
 
@@ -20,9 +20,9 @@ translation_of: Web/CSS/CSS_Logical_Properties
 
    Les propriétés et valeurs logiques utilisent les termes abstraits bloc (block) ou ligne (inline) afin de décrire leur direction. La signification physique de ces termes dépend du mode d'écriture.
    
 
 
    
- 
    Dimension de bloc
    
+ 
    Dimension de bloc
    
  
    C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).
    
- 
    Dimension en ligne
    
+ 
    Dimension en ligne
    
  
    C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).
    
 
    
 
@@ -30,7 +30,6 @@ translation_of: Web/CSS/CSS_Logical_Properties
 
 
    Propriétés relatives au dimensionnement
    
 
-
    
 
      
  
    • {{CSSxRef("block-size")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("inline-size")}} {{Experimental_Inline}}
      • 
@@ -39,11 +38,9 @@ translation_of: Web/CSS/CSS_Logical_Properties
  
    • {{CSSxRef("min-block-size")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("min-inline-size")}} {{Experimental_Inline}}
      • 
 
    
-
    
 
 
    Propriétés relatives aux marges, bordures et remplissages
    
 
-
    
 
      
  
    • {{CSSxRef("border-block")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("border-block-color")}} {{Experimental_Inline}}
      • 
@@ -57,7 +54,7 @@ translation_of: Web/CSS/CSS_Logical_Properties
  
    • {{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("border-block-style")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("border-block-width")}} {{Experimental_Inline}}
      • 
- 
    • {{CSSxRef("border-color")}} (mot-clé logical {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("border-color")}} (mot-clé logical {{Experimental_Inline}})
      • 
  
    • {{CSSxRef("border-inline")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("border-inline-color")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("border-inline-end")}} {{Experimental_Inline}}
      • 
@@ -74,16 +71,16 @@ translation_of: Web/CSS/CSS_Logical_Properties
  
    • {{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}
      • 
- 
    • {{CSSxRef("border-style")}} (mot-clé logical {{Experimental_Inline}})
      • 
- 
    • {{CSSxRef("border-width")}} (mot-clé logical {{Experimental_Inline}})
      • 
- 
    • {{CSSxRef("margin")}} (mot-clé logical {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("border-style")}} (mot-clé logical {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("border-width")}} (mot-clé logical {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("margin")}} (mot-clé logical {{Experimental_Inline}})
      • 
  
    • {{CSSxRef("margin-block")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("margin-block-end")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("margin-block-start")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("margin-inline")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}
      • 
- 
    • {{CSSxRef("padding")}} (mot-clé logical {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("padding")}} (mot-clé logical {{Experimental_Inline}})
      • 
  
    • {{CSSxRef("padding-block")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("padding-block-end")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("padding-block-start")}} {{Experimental_Inline}}
      • 
@@ -91,14 +88,12 @@ translation_of: Web/CSS/CSS_Logical_Properties
  
    • {{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}
      • 
 
    
-
    
 
 
    Propriétés relatives aux flottements et au positionnement
    
 
-
    
 
      
- 
    • {{CSSxRef("clear")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • 
- 
    • {{CSSxRef("float")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("clear")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("float")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • 
  
    • {{CSSxRef("inset")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("inset-block")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("inset-block-end")}} {{Experimental_Inline}}
      • 
@@ -107,38 +102,33 @@ translation_of: Web/CSS/CSS_Logical_Properties
  
    • {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}
      • 
 
    
-
    
 
 
    Autres propriétés
    
 
-
    
 
      
- 
    • {{CSSxRef("caption-side")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("caption-side")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • 
  
    • {{CSSxRef("overflow-block")}} {{Experimental_Inline}}
      • 
  
    • {{CSSxRef("overflow-inline")}} {{Experimental_Inline}}
      • 
- 
    • {{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés block {{Experimental_Inline}} et inline {{Experimental_Inline}})
      • 
- 
    • {{CSSxRef("text-align")}} (mots-clés end {{Experimental_Inline}} et start {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés block {{Experimental_Inline}} et inline {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("text-align")}} (mots-clés end {{Experimental_Inline}} et start {{Experimental_Inline}})
      • 
 
    
-
    
 
 
    Propriétés dépréciées
    
 
-
    
 
      
- 
    • {{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
      • 
- 
    • {{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
      • 
- 
    • {{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
      • 
- 
    • {{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("inset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("inset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("inset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
      • 
+ 
    • {{CSSxRef("inset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
      • 
 
    
-
    
 
 
    Guides
    
 
 
 
 
    Spécifications
    
diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html
index 82b2995802..cf45a45e67 100644
--- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html
+++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html
@@ -11,7 +11,7 @@ original_slug: >-
 ---
 
    {{CSSRef}}
    
 
-
    La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.
    
+
    La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.
    
 
 
    Si vous avez consulté la page principale sur les propriétés et valeurs logiques, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.
    
 
@@ -227,7 +227,7 @@ original_slug: >-
   margin-block: 5px 10px;
 }
    
 
-
    
+
    
 
    Note : Ces propriétés raccourcies, margin-inline et margin-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
    
 
    
 
@@ -253,7 +253,7 @@ original_slug: >-
   padding-block: 5px 10px;
 }
    
 
-
    
+
    
 
    Note : Ces propriétés raccourcies, padding-inline et padding-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
    
 
    
 
@@ -276,7 +276,7 @@ original_slug: >-
   border-inline-color: rebeccapurple;
 }
    
 
-
    
+
    
 
    Note : Ces propriétés raccourcies, border-inline et border-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
    
 
    
 
diff --git a/files/fr/web/css/css_logical_properties/sizing/index.html b/files/fr/web/css/css_logical_properties/sizing/index.html
index 4b5c4dd892..2ede7d1bca 100644
--- a/files/fr/web/css/css_logical_properties/sizing/index.html
+++ b/files/fr/web/css/css_logical_properties/sizing/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement
 ---
 
    {{CSSRef}}
    
 
-
    Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.
    
+
    Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.
    
 
 
    Lorsqu'on définit la taille d'un objet, la spécification sur les propriétés et les valeurs logiques permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs logiques, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs physiques en combinaison avec ces propriétés et ces valeurs logiques.
    
 
@@ -85,6 +85,6 @@ original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement
 
 
    {{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}
    
 
-
    
-
    Attention ! À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.
    
+
    
+
    Attention : À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.
    
 
    
diff --git a/files/fr/web/css/css_masking/index.html b/files/fr/web/css/css_masking/index.html
index 4d7acfab53..7eee5da307 100644
--- a/files/fr/web/css/css_masking/index.html
+++ b/files/fr/web/css/css_masking/index.html
@@ -17,7 +17,6 @@ original_slug: Web/CSS/CSS_Masks
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("clip")}} {{deprecated_inline}}
      • 
  
    • {{cssxref("clip-path")}}
      • 
@@ -40,7 +39,6 @@ original_slug: Web/CSS/CSS_Masks
  
    • {{cssxref("mask-size")}}
      • 
  
    • {{cssxref("mask-type")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_miscellaneous/index.html b/files/fr/web/css/css_miscellaneous/index.html
index 45e4685f89..e7d51f4938 100644
--- a/files/fr/web/css/css_miscellaneous/index.html
+++ b/files/fr/web/css/css_miscellaneous/index.html
@@ -15,12 +15,10 @@ translation_of: Web/CSS/CSS_Miscellaneous
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("all")}}
      • 
  
    • {{cssxref("text-rendering")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_motion_path/index.html b/files/fr/web/css/css_motion_path/index.html
index cf8b5c7c5a..a20d3067bb 100644
--- a/files/fr/web/css/css_motion_path/index.html
+++ b/files/fr/web/css/css_motion_path/index.html
@@ -18,14 +18,12 @@ original_slug: Web/CSS/Motion_Path
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("offset")}}
      • 
  
    • {{cssxref("offset-distance")}}
      • 
  
    • {{cssxref("offset-path")}}
      • 
  
    • {{cssxref("offset-rotate")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_namespaces/index.html b/files/fr/web/css/css_namespaces/index.html
index 0e2b6ce694..ca72f88a6c 100644
--- a/files/fr/web/css/css_namespaces/index.html
+++ b/files/fr/web/css/css_namespaces/index.html
@@ -16,11 +16,9 @@ translation_of: Web/CSS/CSS_Namespaces
 
 
    Règles @
    
 
-
    
 
      
  
    • {{cssxref("@namespace")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_overflow/index.html b/files/fr/web/css/css_overflow/index.html
index 9f5697820a..cbac890ad5 100644
--- a/files/fr/web/css/css_overflow/index.html
+++ b/files/fr/web/css/css_overflow/index.html
@@ -22,13 +22,10 @@ translation_of: Web/CSS/CSS_Overflow
 
 
    {{EmbedInteractiveExample("pages/css/overflow.html")}}
    
 
-
-
 
    Référence
    
 
 
    Propriétés CSS
    
 
-
    
 
      
  
    • {{CSSxRef("overflow")}}
      • 
  
    • {{CSSxRef("overflow-block")}}
      • 
@@ -41,15 +38,12 @@ translation_of: Web/CSS/CSS_Overflow
  
    • {{CSSxRef("max-lines")}} {{experimental_inline}}
      • 
  
    • {{CSSxRef("continue")}} {{experimental_inline}}
      • 
 
    
-
    
 
 
    Propriétés spécifiques
    
 
-
    
 
      
  
    • {{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_pages/index.html b/files/fr/web/css/css_pages/index.html
index 1d191006f2..a7f074727b 100644
--- a/files/fr/web/css/css_pages/index.html
+++ b/files/fr/web/css/css_pages/index.html
@@ -16,32 +16,26 @@ translation_of: Web/CSS/CSS_Pages
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("page-break-after")}}
      • 
  
    • {{cssxref("page-break-before")}}
      • 
  
    • {{cssxref("page-break-inside")}}
      • 
 
    
-
    
 
 
    Règles @
    
 
-
    
 
      
  
    • {{cssxref('@page')}}
      • 
 
    
-
    
 
 
    Pseudo-classes
    
 
-
    
 
      
  
    • {{cssxref(':blank')}}
      • 
  
    • {{cssxref(':first')}}
      • 
  
    • {{cssxref(':left')}}
      • 
  
    • {{cssxref(':right')}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_positioning/index.html b/files/fr/web/css/css_positioning/index.html
index 518a4abaeb..7271af1172 100644
--- a/files/fr/web/css/css_positioning/index.html
+++ b/files/fr/web/css/css_positioning/index.html
@@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Positioning
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("bottom")}}
      • 
  
    • {{cssxref("clear")}}
      • 
@@ -27,7 +26,6 @@ translation_of: Web/CSS/CSS_Positioning
  
    • {{cssxref("top")}}
      • 
  
    • {{cssxref("z-index")}}
      • 
 
    
-
    
 
 
    Guides
    
 
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
index e0076181f3..bfbc64fb1c 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
@@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
 
 
    Ajouter z-index
    
 
-
    Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.
    
+
    Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.
    
 
 
    Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.
    
 
@@ -36,12 +36,12 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
 
 
 
    
-
    Notes :
    
+
    Note :
 
 
      
  
    • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
      • 
- 
    • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
      • 
-
    
+ 
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
    • 
+
    
 
    
 
 
    Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le z-index du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.
    
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html
index 1f41be9467..92a9a86a4e 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html
@@ -16,7 +16,7 @@ original_slug: Web/CSS/Comprendre_z-index
 
    Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement. 
    
 
 
-
    Source : Section 9.9.1. de CSS 2.1 - La présentation en couches
    
+
    Source : Section 9.9.1. de CSS 2.1 - La présentation en couches
    
 
 
    Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.
    
 
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
index ef04a825c1..2b0dc727af 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
@@ -37,7 +37,9 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float
  
  • Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
    • 
 
 
-
    Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
    
+
    
+  
    Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
    
+
    
 
 
    {{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}
    
 
@@ -123,12 +125,12 @@ b {
 
    Voir aussi
    
 
 
 
 
    {{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
    
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
index ed1138131b..dadbe3ec99 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -16,15 +16,15 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1
 
 
    Le seul et unique contexte d'empilement est le contexte racine. Sans z-index, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.
    
 
-
    Figure 5a : Exemple de contexte d'empilement 1
    
+
    Figure 5a : Exemple de contexte d'empilement 1
    
 
 
    Si on assigne au bloc DIV #2 une valeur de z-index positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.
    
 
-
    Figure 5b : Exemple de contexte d'empilement 1
    
+
    Figure 5b : Exemple de contexte d'empilement 1
    
 
 
    Si maintenant on assigne également au bloc DIV #4 une valeur de z-index positive, plus grande que celle du DIV #2, le bloc DIV #4 est rendu par dessus tous les autres, y compris par dessus le bloc DIV #2.
    
 
-
    Figure 5c : Exemple de contexte d'empilement 1
    
+
    Figure 5c : Exemple de contexte d'empilement 1
    
 
 
    Dans le dernier exemple, vous pouvez voir que les blocs DIV #2 et DIV #4 ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc DIV #4, tout en respectant le bloc DIV #2, peut être contrôlé avec la propriété z-index. Il se fait que les éléments DIV #1 et DIV #3 n'ayant pas de z-index défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs DIV #2 et DIV #3, appartient au contexte d'empilement de la racine.
    
 
@@ -39,7 +39,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1
  
 
 
-
    Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
    
+
    
+  
    Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
+  
    
+
    
 
 
    Exemple
    
 
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
index 161afae998..e4dcfaa383 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
@@ -14,7 +14,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2
 
 
    Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.
    
 
-
    Figure 6 : Exemple de contexte d'empilement 2
    
+
    {{ EmbedLiveSample('Exemple', '352', '270') }}
    
 
 
    Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.
    
 
@@ -35,7 +35,9 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2
  
 
 
-
    Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
    
+
    
+  
    Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
    
+
    
 
 
    Exemple
    
 
@@ -122,8 +124,5 @@ span.bold {
 </div>
 
    
 
-
    Résultat
    
-
-
    {{EmbedLiveSample("Exemple")}}
    
 
 
    {{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
    
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
index ae2dfa1046..0668f2416a 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
@@ -18,7 +18,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3
 
 
    Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.
    
 
-
    Figure 7 : Exemple de contexte d'empilement 3
    
+
    {{ EmbedLiveSample('Exemple', '320', '330') }}
    
 
 
    Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.
    
 
@@ -54,7 +54,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3
 
 
    On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de z-index individuelles (et différentes) assignées à l'aide de sélecteurs d'id plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.
    
 
-
    Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
    
+
    
+  
    Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
+  
    
+
    
 
 
    Exemple
    
 
@@ -154,8 +157,5 @@ div.lev3 {
 </div>
 
    
 
-
    Résultat
    
-
-
    {{EmbedLiveSample("Exemple")}}
    
 
 
    {{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
    
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
index 89eddc49b5..f5c69a0055 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
@@ -26,16 +26,16 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index
 
    Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.
    
 
 
    
-
    Notes :
    
-
+
    Note :
 
      
  
    • Dans un groupe d'éléments sans aucune propriété z-index, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
      • 
  
    • Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
      • 
  
    • Attention : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.
      • 
 
    
+
    
 
    
 
-
    Figure 1. Exemple de règles d'empilement sans propriété z-index
    
+
    {{EmbedLiveSample("Exemple", 600, 400)}}
    
 
 
    Exemple
    
 
@@ -116,8 +116,4 @@ div {
 }
 
    
 
-
    Résultat
    
-
-
    {{EmbedLiveSample("Exemple","600","400")}}
    
-
 
    {{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
    
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
index da1de35a86..a377b3b7ff 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
 
 
    Le contexte d'empilement
    
 
-
    Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.
    
+
    Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.
    
 
 
    Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.
    
 
@@ -52,11 +52,13 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
  
  • Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.
    • 
 
 
-
    Notes : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
    
+
    
+  
    Note : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
    
+
    
 
 
    Illustration
    
 
-
    Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index
    
+
    Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index
    
 
 
    Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur z-index. La hiérarchie des contextes d'empilement est organisée comme suit :
    
 
@@ -79,13 +81,14 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
 
    Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfants du bloc DIV #3, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément DIV #3 est prise en compte pour l'empilement dans l'élément racine par rapport à ses DIV voisins.
    
 
 
    
-
    Notes :
    
+
    Note :
 
 
      
  
    • DIV #4 est rendu dans le bloc DIV #1 car le z-index (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le z-index (6) du bloc DIV #4 est valide à l'intérieur du contexte d'empilement du bloc DIV #3. Ainsi, DIV #4 se trouve sous DIV #1, parce que DIV #4 appartient à DIV #3, qui possède une valeur de z-index plus petite.
      • 
  
    • Pour la même raison DIV #2 (dont le z-index est 2) est rendu sous DIV#5 (de z-index égal à 1) parce que DIV #5 appartient à DIV #3, qui possède une valeur de z-index plus grande.
      • 
  
    • Le z-index du bloc DIV #3 est 4, mais cette valeur est indépendante du z-index du bloc DIV #4, DIV #5 et DIV #6, parce qu'il appartient à un contexte d'empilement différent.
      • 
 
    
+
    
 
    
 
 
    Exemple
    
diff --git a/files/fr/web/css/css_properties_reference/index.html b/files/fr/web/css/css_properties_reference/index.html
index 7c0812f001..a6c6fcca3a 100644
--- a/files/fr/web/css/css_properties_reference/index.html
+++ b/files/fr/web/css/css_properties_reference/index.html
@@ -11,7 +11,9 @@ translation_of: Web/CSS/CSS_Properties_Reference
 
 
    Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM,  habituellement utilisée avec JavaScript :
    
 
-
    Note :  Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir la référence CSS et les extensions CSS spécifiques à Mozilla.
    
+
    
+  
    Note :  Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir la référence CSS et les extensions CSS spécifiques à Mozilla.
    
+
    
 
 
diff --git a/files/fr/web/css/css_ruby/index.html b/files/fr/web/css/css_ruby/index.html
index cc9c44a3bb..1f9fade2e6 100644
--- a/files/fr/web/css/css_ruby/index.html
+++ b/files/fr/web/css/css_ruby/index.html
@@ -17,12 +17,10 @@ translation_of: Web/CSS/CSS_Ruby
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("ruby-align")}}
      • 
  
    • {{cssxref("ruby-position")}}
      • 
 
    
-
    Spécifications
    
 
diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html
index 8fbc368201..2eebe3962b 100644
--- a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html
+++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base
 ---
 
    {{CSSRef}}
    
 
-
    Le module de spécification CSS Scroll Snap fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).
    
+
    Le module de spécification CSS Scroll Snap fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).
    Principes fondamentaux
    
 
@@ -62,7 +62,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base
 
 
    Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.
    
 
-
    
+
    
 
    Note : La propriété scroll-snap-stop est actuellement mise en question dans la version Candidate Recommendation de la spécification et pourrait être retirée.
    
 
    
 
diff --git a/files/fr/web/css/css_scroll_snap/browser_compat/index.html b/files/fr/web/css/css_scroll_snap/browser_compat/index.html
index 095ea0b616..c1eb4da23a 100644
--- a/files/fr/web/css/css_scroll_snap/browser_compat/index.html
+++ b/files/fr/web/css/css_scroll_snap/browser_compat/index.html
@@ -11,9 +11,9 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs
 ---
 
    {{CSSRef}}
    
 
-
    Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.
    
+
    Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.
    
 
-
    Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?
    
+
    Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?
    
 
 
    Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par Scroll Snap Points, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.
    
 
@@ -26,7 +26,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs
 
 
    Comment utiliser l'ancienne implémentation comme méthode de recours ?
    
 
-
    Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.
    
+
    Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.
    
 
 
    Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.
    
 
diff --git a/files/fr/web/css/css_scroll_snap/index.html b/files/fr/web/css/css_scroll_snap/index.html
index 6e79f674df..0c9ccd8baa 100644
--- a/files/fr/web/css/css_scroll_snap/index.html
+++ b/files/fr/web/css/css_scroll_snap/index.html
@@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Scroll_Snap
 ---
 
    {{CSSRef}}
    
 
-
    CSS Scroll Snap est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.
    
+
    CSS Scroll Snap est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.
    
 
 
    
 
    Note : La version précédente ce module, Scroll Snap Points, est dépréciée et est désormais remplacée par CSS Scroll Snap.
    
diff --git a/files/fr/web/css/css_scroll_snap_points/index.html b/files/fr/web/css/css_scroll_snap_points/index.html
index 8d728f0b0c..bc27bffd62 100644
--- a/files/fr/web/css/css_scroll_snap_points/index.html
+++ b/files/fr/web/css/css_scroll_snap_points/index.html
@@ -21,7 +21,6 @@ translation_of: Web/CSS/CSS_Scroll_Snap_Points
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("scroll-snap-coordinate")}}
      • 
  
    • {{cssxref("scroll-snap-destination")}}
      • 
@@ -29,7 +28,6 @@ translation_of: Web/CSS/CSS_Scroll_Snap_Points
  
    • {{cssxref("scroll-snap-points-y")}}
      • 
  
    • {{cssxref("scroll-snap-type")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_scrollbars/index.html b/files/fr/web/css/css_scrollbars/index.html
index 5a0fe0b208..acba92423a 100644
--- a/files/fr/web/css/css_scrollbars/index.html
+++ b/files/fr/web/css/css_scrollbars/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Scrollbars
 ---
 
    {{CSSRef}} {{SeeCompatTable}}
    
 
-
    Le module de spécification CSS Scrollbars standardise la mise en forme des barres de défilement (scrollbar) notamment introduite en 2000 avec Windows IE 5.5.
    
+
    Le module de spécification CSS Scrollbars standardise la mise en forme des barres de défilement (scrollbar) notamment introduite en 2000 avec Windows IE 5.5.
    
 
 
    Exemples
    
 
@@ -17,7 +17,6 @@ translation_of: Web/CSS/CSS_Scrollbars
 
 
    CSS
    
 
-
    
 
    .scroller {
   width: 300px;
   height: 100px;
@@ -33,18 +32,15 @@ translation_of: Web/CSS/CSS_Scrollbars
 
    Résultat
    
 
 
    {{EmbedLiveSample("Exemples")}}
    
-
    
 
 
    Référence
    
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("scrollbar-width")}}
      • 
  
    • {{cssxref("scrollbar-color")}}
      • 
 
    
-
    
 
 
    Accessibilité
    
 
diff --git a/files/fr/web/css/css_selectors/index.html b/files/fr/web/css/css_selectors/index.html
index 34200fe468..ead1aa386e 100644
--- a/files/fr/web/css/css_selectors/index.html
+++ b/files/fr/web/css/css_selectors/index.html
@@ -12,28 +12,28 @@ original_slug: Web/CSS/Sélecteurs_CSS
 ---
 
    {{CSSRef}}
    
 
-
    Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.
    
+
    Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.
    
 
 
    Les sélecteurs simples
    
 
 
    
- 
    Les sélecteurs de type
    
+ 
    Les sélecteurs de type
    
  
    Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
    
  Syntaxe : nomelement
    
  Exemple : input permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
    
- 
    Les sélecteurs de classe
    
+ 
    Les sélecteurs de classe
    
  
    Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
    
  Syntaxe : .nomclasse
    
  Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").
    
- 
    Les sélecteurs d'identifiant
    
+ 
    Les sélecteurs d'identifiant
    
  
    Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
    
  Syntaxe : #valeurid
    
  Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
    
- 
    Le sélecteur universel
    
+ 
    Le sélecteur universel
    
  
    Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
    
  Syntaxe : * ns|* *|*
    
  Exemple : * permettra de cibler tous les éléments du document.
    
- 
    Les sélecteurs d'attribut
    
+ 
    Les sélecteurs d'attribut
    
  
    Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
    
  Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
    
  Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).
    
@@ -42,23 +42,23 @@ original_slug: Web/CSS/Sélecteurs_CSS
 
    Les combinateurs
    
 
 
    
- 
    Les sélecteurs de voisin direct
    
+ 
    Les sélecteurs de voisin direct
    
  
    Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
    
  Syntaxe : A + B
    
  Exemple : div + p permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
    
- 
    Les sélecteurs de voisins
    
+ 
    Les sélecteurs de voisins
    
  
    Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
    
  Syntaxe : A ~ B
    
  Exemple : p ~ span permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
    
- 
    Les sélecteurs d'éléments enfants
    
+ 
    Les sélecteurs d'éléments enfants
    
  
    Le combinateur '>' permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné.
    
  Syntaxe : A > B
    
  Exemple : ul > li permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
    
- 
    Les sélecteurs d'éléments descendants
    
+ 
    Les sélecteurs d'éléments descendants
    
  
    Le combinateur   (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné.
    
  Syntaxe : A B
    
  Exemple : div span permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
    
- 
    Le combinateur de colonne{{experimental_inline}}
    
+ 
    Le combinateur de colonne{{experimental_inline}}
    
  
    Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B
    
  Exemple : col || td permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
    
 
    
@@ -73,7 +73,7 @@ original_slug: Web/CSS/Sélecteurs_CSS
 
    Les pseudo-éléments
    
 
 
    
- 
    Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
    
+ 
    Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
    
  
    Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
    
 
    
 
diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
index 4c55b270d4..72c96372e8 100644
--- a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
+++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un
 ---
 
    {{CSSRef}}
    
 
-
    Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.
    
+
    Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.
    
 
 
    Choisir une cible
    
 
@@ -41,7 +41,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un
 
 
    Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le <h1 id="un"> devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.
    
 
-
    
 
    <h4 id="un">...</h4> <p id="deux">...</p>
 <div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
 
@@ -50,7 +49,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un
 <a href="#trois">Troisième</a>
 <a href="#quatre">Quatrième</a>
 <a href="#cinq">Cinquième</a>
    
-
    
 
 
    Conclusion
    
 
@@ -59,6 +57,6 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/css_shapes/basic_shapes/index.html b/files/fr/web/css/css_shapes/basic_shapes/index.html
index eed2d48370..46e4ebee5a 100644
--- a/files/fr/web/css/css_shapes/basic_shapes/index.html
+++ b/files/fr/web/css/css_shapes/basic_shapes/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples
 ---
 
    {{CSSRef}}
    
 
-
    Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.
    
+
    Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.
    
 
 
    Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :
    
 
@@ -27,11 +27,11 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples
 
 
    La boîte de référence
    
 
-
    La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte dans le guide sur la création de formes à partir des boîtes où nous avons directement utilisé la boîte de référence afin de créer une forme.
    
+
    La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte dans le guide sur la création de formes à partir des boîtes où nous avons directement utilisé la boîte de référence afin de créer une forme.
    
 
 
    L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec shape-outside: circle(50%), l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du modèle de boîtes.
    
 
-
    
+
    
 
 
    La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .
    
 
@@ -115,13 +115,13 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples
 
 
    Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.
    
 
-
    img {
+
    img {
   float: left;
   shape-outside: circle(50% at 60%);
 }
-
    
+
    
 
-
    The circle shape is clipped by the margin box
    
+
    The circle shape is clipped by the margin box
    
 
 
    ellipse()
    
 
@@ -145,6 +145,6 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples
 
 
    L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.
    
 
-
    The polygon basic shape, highlighted with the Shapes Inspector.
    
+
    The polygon basic shape, highlighted with the Shapes Inspector.
    
 
-
    Une autre ressource qui peut s'avérer utile sur ces sujets est Clippy : cet outil permet de créer des formes pour clip-path. Or, les formes utilisées pour clip-path sont les mêmes que pour les formes simples.
    
+
    Une autre ressource qui peut s'avérer utile sur ces sujets est Clippy : cet outil permet de créer des formes pour clip-path. Or, les formes utilisées pour clip-path sont les mêmes que pour les formes simples.
    
diff --git a/files/fr/web/css/css_shapes/from_box_values/index.html b/files/fr/web/css/css_shapes/from_box_values/index.html
index ec57c04537..5ba429d0e6 100644
--- a/files/fr/web/css/css_shapes/from_box_values/index.html
+++ b/files/fr/web/css/css_shapes/from_box_values/index.html
@@ -12,7 +12,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 ---
 
    {{CSSRef}}
    
 
-
    Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.
    
+
    Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.
    
 
 
    Les valeurs de boîte qui sont autorisées pour les formes sont :
    
 
@@ -29,7 +29,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 
 
    Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (content), du remplissage (padding), une bordure (border) ainsi qu'une marge (margin).
    
 
-
    The Box Model consists of the margin, border, padding and content boxes.
    
+
    The Box Model consists of the margin, border, padding and content boxes.
    
 
 
    En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.
    
 
@@ -62,7 +62,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 
    {{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}
    
 
 
    
-
    Note : Pour en savoir plus sur le modèle de boîte CSS, voir cet article.
    
+
    Note : Pour en savoir plus sur le modèle de boîte CSS, voir cet article.
    
 
    
 
 
    Quand utiliser les valeurs de boîte
    
@@ -73,4 +73,4 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 
 
    {{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}
    
 
-
    Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.
    
+
    Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.
    
diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html
index 485385aa10..585e96ac67 100644
--- a/files/fr/web/css/css_shapes/index.html
+++ b/files/fr/web/css/css_shapes/index.html
@@ -12,7 +12,7 @@ translation_of: Web/CSS/CSS_Shapes
 
 
    CSS Shapes est un module de spécification CSS qui décrit les formes géométriques. Selon le niveau 1 de cette spécification, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.
    
 
-
    Exemple simple
    
+
    Exemple simple
    
 
 
    Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété shape-outside qui lui est appliquée vaut circle(50%). Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.
    
 
@@ -22,21 +22,17 @@ translation_of: Web/CSS/CSS_Shapes
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("shape-image-threshold")}}
      • 
  
    • {{cssxref("shape-margin")}}
      • 
  
    • {{cssxref("shape-outside")}}
      • 
 
    
-
    
 
 
    Types de donnée
    
 
-
    
 
      
  
    • {{cssxref("<basic-shape>")}}
      • 
 
    
-
    
 
 
    Guides
    
 
diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html
index 4f7abd917f..ad57ea506d 100644
--- a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html
+++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html
@@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS
 ---
 
    {{CSSRef}}
    
 
-
    La spécification CSS Shapes Level 1 définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.
    
+
    La spécification CSS Shapes Level 1 définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.
    
 
 
    Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.
    
 
diff --git a/files/fr/web/css/css_shapes/shapes_from_images/index.html b/files/fr/web/css/css_shapes/shapes_from_images/index.html
index 58a1729e2c..bbb1f822f7 100644
--- a/files/fr/web/css/css_shapes/shapes_from_images/index.html
+++ b/files/fr/web/css/css_shapes/shapes_from_images/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Shapes/Générer_formes_images
 ---
 
    {{CSSRef}}
    
 
-
    Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.
    
+
    Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.
    
 
 
    Générer une forme simple avec une image
    
 
diff --git a/files/fr/web/css/css_table/index.html b/files/fr/web/css/css_table/index.html
index 928231d528..7b01e5fe58 100644
--- a/files/fr/web/css/css_table/index.html
+++ b/files/fr/web/css/css_table/index.html
@@ -15,7 +15,6 @@ translation_of: Web/CSS/CSS_Table
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("border-collapse")}}
      • 
  
    • {{cssxref("border-spacing")}}
      • 
@@ -24,7 +23,6 @@ translation_of: Web/CSS/CSS_Table
  
    • {{cssxref("table-layout")}}
      • 
  
    • {{cssxref("vertical-align")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_text/index.html b/files/fr/web/css/css_text/index.html
index 91ca768d97..31160cd80f 100644
--- a/files/fr/web/css/css_text/index.html
+++ b/files/fr/web/css/css_text/index.html
@@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Text
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("hanging-punctuation")}}
      • 
  
    • {{cssxref("hyphens")}}
      • 
@@ -34,7 +33,6 @@ translation_of: Web/CSS/CSS_Text
  
    • {{cssxref("word-break")}}
      • 
  
    • {{cssxref("word-spacing")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_text_decoration/index.html b/files/fr/web/css/css_text_decoration/index.html
index 885c8cdd54..e008cdc147 100644
--- a/files/fr/web/css/css_text_decoration/index.html
+++ b/files/fr/web/css/css_text_decoration/index.html
@@ -15,7 +15,6 @@ translation_of: Web/CSS/CSS_Text_Decoration
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("letter-spacing")}}
      • 
  
    • {{cssxref("text-align")}}
      • 
@@ -34,7 +33,6 @@ translation_of: Web/CSS/CSS_Text_Decoration
  
    • {{cssxref("white-space")}}
      • 
  
    • {{cssxref("word-spacing")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_transforms/index.html b/files/fr/web/css/css_transforms/index.html
index 66190eedac..be8a54dc82 100644
--- a/files/fr/web/css/css_transforms/index.html
+++ b/files/fr/web/css/css_transforms/index.html
@@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Transforms
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("backface-visibility")}}
      • 
  
    • {{cssxref("perspective")}}
      • 
@@ -29,7 +28,6 @@ translation_of: Web/CSS/CSS_Transforms
  
    • {{cssxref("transform-style")}}
      • 
  
    • {{cssxref("translate")}}
      • 
 
    
-
    
 
 
    Types de donnée
    
 
diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.html b/files/fr/web/css/css_transforms/using_css_transforms/index.html
index 93716e66d0..e52bf437be 100644
--- a/files/fr/web/css/css_transforms/using_css_transforms/index.html
+++ b/files/fr/web/css/css_transforms/using_css_transforms/index.html
@@ -19,7 +19,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS
 
    En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.
    
 
 
    
-
    Attention ! Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.
    
+
    Attention : Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.
    
 
    
 
 
    Propriétés des transformations CSS
    
@@ -37,7 +37,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS
 
 
    Voici une version originale du logo MDN :
    
 
-
    MDN Logo
    
+
    MDN Logo
    
 
 
    Rotation
    
 
@@ -45,7 +45,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS
 
 
    <img style="transform: rotate(90deg);
             transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+     src="screen_shot_2016-02-16_at_15.53.54.png">
 
    
 
 
    {{EmbedLiveSample('Rotation','auto',240)}}
    
@@ -56,7 +56,7 @@ original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS
 
 
    <img style="transform: skewx(10deg) translatex(150px);
             transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+     src="screen_shot_2016-02-16_at_15.53.54.png">
 
    
 
 
    {{EmbedLiveSample('Distorsion_et_translation')}}
    
diff --git a/files/fr/web/css/css_transitions/index.html b/files/fr/web/css/css_transitions/index.html
index 5135e7a632..c9bcefcbf6 100644
--- a/files/fr/web/css/css_transitions/index.html
+++ b/files/fr/web/css/css_transitions/index.html
@@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Transitions
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("transition")}}
      • 
  
    • {{cssxref("transition-delay")}}
      • 
@@ -24,7 +23,6 @@ translation_of: Web/CSS/CSS_Transitions
  
    • {{cssxref("transition-property")}}
      • 
  
    • {{cssxref("transition-timing-function")}}
      • 
 
    
-
    
 
 
    Guides
    
 
diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.html b/files/fr/web/css/css_transitions/using_css_transitions/index.html
index 19d7aefd57..9403828edb 100644
--- a/files/fr/web/css/css_transitions/using_css_transitions/index.html
+++ b/files/fr/web/css/css_transitions/using_css_transitions/index.html
@@ -15,7 +15,7 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
 
 
    Les animations qui utilisent des transitions entre deux états sont souvent appelées transitions implicites car l'état initial et l'état final sont définis implicitement par le navigateur.
    
 
-
    A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.
    
+
    A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.
    
 
 
    Les transitions CSS vous permettent de choisir :
    
 
@@ -28,18 +28,22 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
 
 
    Quelles sont les propriétés CSS qui peuvent être animées ?
    
 
-
    On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et la liste des propriétés concernées est limitée.
    
+
    On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et la liste des propriétés concernées est limitée.
    
 
-
    Note : La gestion de la valeur auto représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec auto.
    
+
    
+  
    Note : La gestion de la valeur auto représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec auto.
    
+
    
 
-
    Note : Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via .appendChild() ou en modiant display: none;. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer window.setTimeout() pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.
    
+
    
+  
    Note : Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via .appendChild() ou en modiant display: none;. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer window.setTimeout() pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.
    
+
    
 
 
    Les propriétés CSS relatives aux transitions
    
 
 
    Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :
    
 
 
    
-
    Note : Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.
    
+
    Note :Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.
    
 
    
 
 
    
@@ -47,815 +51,12 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
  
    Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.
    
  
    {{cssxref("transition-duration")}}
    
  
    Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés.
- 
    
- 
    
- 
    transition-duration: 0.5s
    
-
- 
-
- 
    {{EmbedLiveSample("duration_0_5s", 275, 150)}}
    
- 
    
-
- 
    
- 
    transition-duration: 1s
    
-
- 
-
- 
    {{EmbedLiveSample("duration_1s",275,150)}}
    
- 
    
-
- 
    
- 
    transition-duration: 2s
    
-
- 
-
- 
    {{EmbedLiveSample("duration_2s",275,150)}}
    
- 
    
-
- 
    
- 
    transition-duration: 4s
    
-
- 
-
- 
    {{EmbedLiveSample("duration_4s",275,150)}}
    
- 
    
- 
    
  
    
  
    {{cssxref("transition-timing-function")}}
    
- 
    Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des fonctions de temporisation.
- 
    
- 
    
- 
    transition-timing-function: ease
    
-
- 
-
- 
    {{EmbedLiveSample("ttf_ease",275,150)}}
    
- 
    
-
- 
    
- 
    transition-timing-function: linear
    
-
- 
-
- 
    {{EmbedLiveSample("ttf_linear",275,150)}}
    
- 
    
-
- 
    
- 
    transition-timing-function: step-end
    
-
- 
-
- 
    {{EmbedLiveSample("ttf_stepend",275,150)}}
    
- 
    
-
- 
    
- 
    transition-timing-function: steps(4, end)
    
-
- 
-
- 
    {{EmbedLiveSample("ttf_step4end",275,150)}}
    
- 
    
- 
    
+ 
    Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des fonctions de temporisation.
  
    
  
    {{cssxref("transition-delay")}}
    
  
    Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition.
- 
    
- 
    
- 
    transition-delay: 0.5s
    
-
- 
-
- 
    {{EmbedLiveSample("delay_0_5s",275,150)}}
    
- 
    
-
- 
    
- 
    transition-delay: 1s
    
-
- 
-
- 
    {{EmbedLiveSample("delay_1s",275,150)}}
    
- 
    
-
- 
    
- 
    transition-delay: 2s
    
-
- 
-
- 
    {{EmbedLiveSample("delay_2s",275,150)}}
    
- 
    
-
- 
    
- 
    transition-delay: 4s
    
-
- 
-
- 
    {{EmbedLiveSample("delay_4s",275,150)}}
    
- 
    
- 
    
  
    
 
    
 
@@ -882,6 +83,36 @@ var intervalID = window.setInterval(updateTransition, 7000);
   font-size: 36px;
 }
 
+
    Exemple avec plusieurs propriétés animées
    
+
+
+
+
    CSS Content
    
+
+
    .box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+    background-color: #FFCCCC;
+    width: 200px;
+    height: 200px;
+    transform: rotate(180deg);
+}
+
    
+
+
    {{EmbedLiveSample('Exemple_avec_plusieurs_propriétés_animées', 600, 300)}}
    
+
+
 
    Appliquer une transition sur plusieurs propriétés
    
 
 
    CSS
    
@@ -1066,7 +297,9 @@ document.addEventListener('click', function(ev){
 
    el.addEventListener("transitionrun", signalStart, true);
 el.addEventListener("transitionstart", signalStart, true);
    
 
-
    Note : L'événement transitionend n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}: none ou si la valeur de la propriété est modifiée.
    
+
    
+  
    Note : L'événement transitionend n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}: none ou si la valeur de la propriété est modifiée.
    
+
    
 
 
    Spécifications
    
 
@@ -1091,5 +324,5 @@ el.addEventListener("transitionstart", signalStart, true);
 
 
diff --git a/files/fr/web/css/css_types/index.html b/files/fr/web/css/css_types/index.html
index 5642f8cf43..eb632cdba0 100644
--- a/files/fr/web/css/css_types/index.html
+++ b/files/fr/web/css/css_types/index.html
@@ -15,12 +15,11 @@ original_slug: Web/CSS/Types_CSS
 
    Le module CSS basic data types définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (< >).
    
 
 
    
-
    Note : Les types de donnée CSS sont un type spécial de composant de type de valeur.
    
+
    Note : Les types de donnée CSS sont un type spécial de composant de type de valeur.
    
 
    
 
 
    Référence
    
 
-
    
 
      
  
    • {{cssxref("<angle>")}}
      • 
  
    • {{cssxref("<angle-percentage>")}}
      • 
@@ -61,7 +60,7 @@ original_slug: Web/CSS/Types_CSS
  
    • {{cssxref("<string>")}}
      • 
  
    • {{cssxref("<time>")}}
      • 
  
    • {{cssxref("<time-percentage>")}}
      • 
- 
    • {{cssxref("<timing-function>")}}
      • 
+ 
    • {{cssxref("easing-function")}}
      • 
  
    • {{cssxref("<toggle-value>")}}
      • 
  
    • {{cssxref("<transform-function>")}}
      • 
  
    • {{cssxref("<type-or-unit>")}}
      • 
@@ -69,7 +68,6 @@ original_slug: Web/CSS/Types_CSS
  
    • {{cssxref("<url-modifier>")}}
      • 
  
    • {{cssxref("<zero>")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
@@ -98,6 +96,6 @@ original_slug: Web/CSS/Types_CSS
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/css_values_and_units/index.html b/files/fr/web/css/css_values_and_units/index.html
index b49a59e9aa..623b4118a6 100644
--- a/files/fr/web/css/css_values_and_units/index.html
+++ b/files/fr/web/css/css_values_and_units/index.html
@@ -58,10 +58,10 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS
 
 
    Dans une déclaration, on pourra donc écrire (sans quote) :
    
 
-
    .box {
+
    .box {
   break-inside: avoid;
 }
-
    
+
    
 
 
    Mots-clés généraux
    
 
@@ -409,18 +409,18 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS
 
 
      
  
    • {{cssxref("calc()")}}
      • 
- 
    • {{cssxref("min", "min()")}}
      • 
- 
    • {{cssxref("max", "max()")}}
      • 
- 
    • {{cssxref("clamp", "clamp()")}}
      • 
+ 
    • {{cssxref("min()", "min()")}}
      • 
+ 
    • {{cssxref("max()", "max()")}}
      • 
+ 
    • {{cssxref("clamp()", "clamp()")}}
      • 
  
    • {{cssxref("toggle", "toggle()")}}
      • 
- 
    • {{cssxref("attr", "attr()")}}
      • 
+ 
    • {{cssxref("attr()", "attr()")}}
      • 
 
    
 
 
    Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche ( suivie des arguments de la notation, suivis d'une parenthèse droite). Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.
    
 
 
    Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.
    
 
-
    
+
    
 
    Note : Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.
    
 
    
 
@@ -490,6 +490,6 @@ original_slug: Web/CSS/Valeurs_et_unités_CSS
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/css_variables/index.html b/files/fr/web/css/css_variables/index.html
index 7d439c68e8..df08214795 100644
--- a/files/fr/web/css/css_variables/index.html
+++ b/files/fr/web/css/css_variables/index.html
@@ -16,11 +16,9 @@ translation_of: Web/CSS/CSS_Variables
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("--*")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/css_writing_modes/index.html b/files/fr/web/css/css_writing_modes/index.html
index 7671959e67..66fa80e82d 100644
--- a/files/fr/web/css/css_writing_modes/index.html
+++ b/files/fr/web/css/css_writing_modes/index.html
@@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Writing_Modes
 
 
    Propriétés
    
 
-
    
 
      
  
    • {{cssxref("direction")}}
      • 
  
    • {{cssxref("glyph-orientation-horizontal")}}
      • 
@@ -25,7 +24,6 @@ translation_of: Web/CSS/CSS_Writing_Modes
  
    • {{cssxref("unicode-bidi")}}
      • 
  
    • {{cssxref("writing-mode")}}
      • 
 
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/cssom_view/coordinate_systems/index.html b/files/fr/web/css/cssom_view/coordinate_systems/index.html
index 2d356ed5c8..a4de1dd910 100644
--- a/files/fr/web/css/cssom_view/coordinate_systems/index.html
+++ b/files/fr/web/css/cssom_view/coordinate_systems/index.html
@@ -129,9 +129,7 @@ inner.addEventListener("mouseleave", update, false);
   </div>
 </div>
 
-
    
 
    CSS
    
-    
 
 
    Le code CSS est uniquement utilisé à des fins stylistiques. La classe "outer" est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir scroller horizontalement. La boîte "inner" est celle sur laquelle on suit les évènements.
    
 
@@ -161,7 +159,6 @@ inner.addEventListener("mouseleave", update, false);
   width: 100%;
   text-align: center;
 }
-
    
 
 
    Résultat
    
 
@@ -172,7 +169,7 @@ inner.addEventListener("mouseleave", update, false);
 
    Voir aussi
    
 
 
      
- 
    • Utiliser les transformations CSS : comment modifier un système de coordonnées
      • 
+ 
    • Utiliser les transformations CSS : comment modifier un système de coordonnées
      • 
  
    • Les coordonnées relatives aux évènements de la souris :
   
        
    
      • {{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}
        • 
diff --git a/files/fr/web/css/cssom_view/index.html b/files/fr/web/css/cssom_view/index.html
index 155869c28d..d052cb0abc 100644
--- a/files/fr/web/css/cssom_view/index.html
+++ b/files/fr/web/css/cssom_view/index.html
@@ -17,11 +17,9 @@ translation_of: Web/CSS/CSSOM_View
 
 
        Propriétés
        
 
-
        
 
          
  
        • {{cssxref("scroll-behavior")}}
          • 
 
        
-
        
 
 
        Guide
        
 
diff --git a/files/fr/web/css/cursor/index.html b/files/fr/web/css/cursor/index.html
index a413586854..2931c1851a 100644
--- a/files/fr/web/css/cursor/index.html
+++ b/files/fr/web/css/cursor/index.html
@@ -51,11 +51,11 @@ cursor: unset;
 
        Valeurs
        
 
 
        
- 
        <url>
        
+ 
        <url>
        
  
        Une url(…) ou une liste d'URL séparées par des virgules url(…), url(…), … pointant vers un fichier image. On peut utiliser plusieurs url(), au cas où certains types d'images ne sont pas pris en charge. Il est obligatoire qu'une valeur non-URL soit présente à la fin de cette liste.
        
- 
        <x> <y> {{experimental_inline}}
        
+ 
        <x> <y> {{experimental_inline}}
        
  
        Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.
        
- 
        Valeurs utilisant un mot-clé
        
+ 
        Valeurs utilisant un mot-clé
        
  
        
  
        Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.
        
 
@@ -153,7 +153,7 @@ cursor: unset;
     
    
-   
+   
-   
-   
-   
-   
-   
-   
-   
-   
-   
+   
+   
+   
+   
+   
+   
+   
+   
+   
-   
-   
-   
-   
-   
-   
-   
-   
-   
+   
+   
+   
+   
+   
+   
+   
+   
+   
    
  
 
 
 
 
    no-drop.gif
     Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit. bug 275173 pour Windows et Mac OS X, « no-drop a le même effet que not-allowed ».
    
    
     grab
     grab.gif
     
diff --git a/files/fr/web/css/custom-ident/index.html b/files/fr/web/css/custom-ident/index.html
index 64c288514d..b9581cd660 100644
--- a/files/fr/web/css/custom-ident/index.html
+++ b/files/fr/web/css/custom-ident/index.html
@@ -21,7 +21,7 @@ translation_of: Web/CSS/custom-ident
  
  • un tiret (-)
    • 
  
  • un tiret bas (underscore) (_),
    • 
  
  • un caractère échappé via une barre oblique inversée (\),
    • 
- 
  • un caractère Unicode (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).
    • 
+ 
  • un caractère Unicode (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).
    • 
 
 
 
    Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur <custom-ident> ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("<string>")}}.
    
diff --git a/files/fr/web/css/dimension/index.html b/files/fr/web/css/dimension/index.html
index 230fa2a0f6..6be0130cde 100644
--- a/files/fr/web/css/dimension/index.html
+++ b/files/fr/web/css/dimension/index.html
@@ -21,7 +21,7 @@ translation_of: Web/CSS/dimension
 
 
    Dimensions valides
    
 
-
    12px      12 pixels
+
    12px      12 pixels
 1rem      1 rem
 1.2pt     1.2 points
 2200ms    2200 millisecondes
@@ -31,7 +31,7 @@ translation_of: Web/CSS/dimension
 
 
    Dimensions invalides
    
 
-
    12 px       L'unité doit immédiatement être indiquée après le nombre
+
    12 px       L'unité doit immédiatement être indiquée après le nombre
 12"px"      Les unités sont des identifiants et ne doivent pas être entourées de quotes
 
    
 
diff --git a/files/fr/web/css/display-inside/index.html b/files/fr/web/css/display-inside/index.html
index 384a69f5bb..697b44c4c9 100644
--- a/files/fr/web/css/display-inside/index.html
+++ b/files/fr/web/css/display-inside/index.html
@@ -20,22 +20,22 @@ translation_of: Web/CSS/display-inside
  
    L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « block and inline layout » en anglais).
  
    Si le type d'affichage extérieur est inline ou run-in et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.
    
 
- 
    Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau contexte de formatage de bloc (BFC) pour son contenu ou intègre son contenu dans le contexte parent.
    
+ 
    Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau contexte de formatage de bloc (BFC) pour son contenu ou intègre son contenu dans le contexte parent.
    
  
    
  
    flow-root {{Experimental_Inline}}
    
- 
    L'élément génère un bloc qui établit un nouveau contexte de formatage de bloc, définissant ainsi une nouvelle racine pour le formatage.
    
+ 
    L'élément génère un bloc qui établit un nouveau contexte de formatage de bloc, définissant ainsi une nouvelle racine pour le formatage.
    
  
    table
    
  
    L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc.
    
  
    flex
    
- 
    L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle des boîtes flexibles.
    
+ 
    L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle des boîtes flexibles.
    
  
    grid
    
- 
    L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle des grilles.
    
+ 
    L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle des grilles.
    
  
    ruby {{Experimental_Inline}}
    
  
    L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}.
    
 
 
 
    
-
    Note : Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <display-inside> lorsque c'est cohérent. Ainsi, avec display: flex ou display: grid, la valeur utilisée de <display-outside> sera nécessairement block. On a ainsi le résultat attendu car on doit avoir display: grid avec un conteneur qui soit un bloc.
    
+
    Note : Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <display-inside> lorsque c'est cohérent. Ainsi, avec display: flex ou display: grid, la valeur utilisée de <display-outside> sera nécessairement block. On a ainsi le résultat attendu car on doit avoir display: grid avec un conteneur qui soit un bloc.
    
 
    
 
 
    Syntaxe formelle
    
@@ -113,6 +113,6 @@ translation_of: Web/CSS/display-inside
    
  • {{CSSxRef("<display-legacy>")}}
    • 
   
  
- 
  • Concepts de base des boîtes flexibles (flexbox)
    • 
- 
  • Concepts de base des grilles CSS
    • 
+ 
  • Concepts de base des boîtes flexibles (flexbox)
    • 
+ 
  • Concepts de base des grilles CSS
    • 
 
diff --git a/files/fr/web/css/display-legacy/index.html b/files/fr/web/css/display-legacy/index.html
index 7980688bf4..759ab90d24 100644
--- a/files/fr/web/css/display-legacy/index.html
+++ b/files/fr/web/css/display-legacy/index.html
@@ -40,7 +40,6 @@ translation_of: Web/CSS/display-legacy
 
 
    Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique inline-flex.
    
 
-
    
 
    CSS
    
 
 
    .container {
@@ -60,7 +59,7 @@ Pas d'élément flexible
 
 
    Résultat
    
 
-
    {{EmbedLiveSample("Exemple", 300, 150)}}
    
+
    {{EmbedLiveSample("Exemples", 300, 150)}}
    
 
    
 
 
    Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (inline) et la seconde pour le mode d'affichage intérieur (flex).
    
diff --git a/files/fr/web/css/display-outside/index.html b/files/fr/web/css/display-outside/index.html
index 7200b30672..5bde80335d 100644
--- a/files/fr/web/css/display-outside/index.html
+++ b/files/fr/web/css/display-outside/index.html
@@ -29,7 +29,7 @@ translation_of: Web/CSS/display-outside
 
 
 
    
-
    Note : Browsers that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.
    
+
    Note : Browsers that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.
    
 
 
    Note : Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut flow pour le mode intérieur si display: block ou display: inline.  On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).
    
 
    
@@ -81,5 +81,5 @@ translation_of: Web/CSS/display-outside
   
  
  
  • Block and Inline layout in Normal Flow
    • 
- 
  • Formatting Contexts explained
    • 
+ 
  • Formatting Contexts explained
    • 
 
diff --git a/files/fr/web/css/display/index.html b/files/fr/web/css/display/index.html
index 1b09df2677..2f322c669c 100644
--- a/files/fr/web/css/display/index.html
+++ b/files/fr/web/css/display/index.html
@@ -18,7 +18,7 @@ translation_of: Web/CSS/display
 
 
    Syntaxe
    
 
-
    /* Valeurs de type <display-outside> */
+
    /* Valeurs de type <display-outside> */
 display: block;
 display: inline;
 display: run-in;
@@ -100,13 +100,13 @@ display: unset;
 
 
    Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :
    
 
-
    .container {
+
    .container {
   display: inline flex;
 }
    
 
 
    On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.
    
 
-
    .container {
+
    .container {
   display: inline-flex;
 }
 
    
@@ -127,7 +127,7 @@ display: unset;
 
 
    HTML
    
 
-
    <p>
+
    <p>
   Texte visible
 </p>
 <p class="secret">
@@ -136,7 +136,7 @@ display: unset;
 
 
    CSS
    
 
-
    p.secret {
+
    p.secret {
   display: none;
 }
    
 
diff --git a/files/fr/web/css/easing-function/index.html b/files/fr/web/css/easing-function/index.html
index 4c5aa1924d..ed1e420f89 100644
--- a/files/fr/web/css/easing-function/index.html
+++ b/files/fr/web/css/easing-function/index.html
@@ -1,243 +1,311 @@
 ---
-title: 
+title: 
 slug: Web/CSS/easing-function
-tags:
-  - CSS
-  - Reference
-  - Type
 translation_of: Web/CSS/easing-function
-translation_of_original: Web/CSS/timing-function
-original_slug: Web/CSS/timing-function
 ---
 
    {{CSSRef}}
    
 
-
    Le type de donnée <timing-function> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « easing functions » (en anglais).
    
+
    Le type de données CSS <easing-function> indique une fonction mathématique qui décrit la façon dont une valeur numérique évolue.
    
 
-
    Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("<number>")}}) allant également de 0.0 à 1.0.
    
+
    Cette transition entre deux valeurs peut être appliquées dans différentes situations. Elle peut être utilisée pour décrire la rapidité selon laquelle les valeurs évoluent durant les animations. Elle permet ainsi de faire varier la vitesse de l'animation au fur et à mesure de sa progression. Elle peut aussi être utilisée pour interpoler deux couleurs au sein d'un dégradé.
    
 
-
    
+
    Les fonctions d'évolution qui appartiennent au sous ensemble des courbes de Bézier cubiques sont souvent appelées des fonctions « douces » car elles permettent d'avoir des évolutions légères en début et en fin d'interpolation. Les fonctions d'évolution relient un ratio d'entrée à un ratio de sortie, tous les deux exprimés comme des nombres (<number>). Pour ces valeurs, 0.0 représente l'état initial et 1.0 représente l'état final.
    
 
-
    Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de rebondissement.
    
+
    Selon la fonction utilisée, la sortie calculée peut parfois être supérieure à 1.0 ou être inférieure à 0.0 pendant le cours de l'animation. Cela placera la valeur plus loin que son état final puis la fera revenir. Pour les animations de certaines propriétés (comme left ou right), cela crée un effet de rebond.
    
 
-
    Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).
    
+
 
-
    Valeurs
    
+
    Toutefois, certaines propriétés restreindront la valeur de sortie au sein d'un intervalle acceptable. Ainsi, pour une valeur représentant la composante d'une couleur, celle-ci sera écrétée pour rester dans l'intervalle autorisé 0-255. Certaines courbes cubic-bezier() illustrent cette propriété.
    
 
-
    
-
    CSS prend en charge deux types de fonctions de temporisation :
    
+
 
-
      
- 
    • un sous-ensemble des courbes de Bézier cubiques
      • 
- 
    • des fonctions en escalier.
      • 
-
    
-
-
    Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.
    
-
-
    La classe de fonctions cubic-bezier()
    
-
-
    
-
-
    La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.
    
-
-
    Une courbe de Bézier cubique se définit par quatre points P0, P1, P2, et P3. P0 et P3 correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P0 est donc (0, 0) (instant initial et état initial) et P3 est (1, 1) (instant final et état final).
    
+
    Syntaxe
    
 
-
    Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P0 et P3 sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P1 et P2 sont toutes les deux comprises dans l'intervalle [0, 1].
    
+
    Il existe trois types de fonctions de transition : linéaires, courbes de Bézier cubiques et les fonctions en escalier. Une valeur du type <easing-function> décrit la fonction de transition en utilisant l'un de ces trois types.
    
 
-
    Les courbes de Bézier cubiques pour lesquelles les ordonnées de P1 et/ou P2 sont situées en dehors de l'intervalle [0, 1] génèreront un effet de rebondissement.
    
+
    Fonctions de transition
    
 
-
    Lorsqu'on définit une courbe de Bézier invalide en CSS via cubic-bezier, le moteur ignore la déclaration dans son intégralité.
    
-
    
-
-
    Syntaxe
    
-
-
    cubic-bezier(x1, y1, x2, y2)
-
    
+
    CSS prend en charge trois sortes de fonction de transition : les fonctions linéaires, le sous ensemble des courbes cubiques de Bézier qui sont des fonctions et les fonctions en escalier. Les fonctions les plus utiles peuvent être facilement utilisées grâce à des mots-clés.
    
 
-
    avec
    
-
-
    
- 
    x1, y1, x2, y2
    
- 
    qui sont des valeurs de type {{cssxref("<number>")}} représentant les abscisses et les ordonnées des points P1 et P2 définissant la courbe de Bézier cubique. x1 et x2 doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.
    
-
    
+
    Les fonctions de transition linéaires
    
 
-
    Exemples
    
+
    linear
    
 
-
    Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :
    
+Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne diagonale droite par de l'origine 0 0 jusqu'à arriver à la position 1 1.
 
-
    cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
    L'interpolation se fait à évolution constante, du début jusqu'à la fin. Ce mot-clé représente la fonction de transition décrite par cubic-bezier(0.0, 0.0, 1.0, 1.0).
    
 
-cubic-bezier(0, 0, 1, 1)
-
-/* Des valeurs négatives pour les ordonnées pour */
-/* créer du rebondissement                       */
-cubic-bezier(0.1, -0.6, 0.2, 0)
-
-/* Idem avec des valeurs > 1                     */
-cubic-bezier(0, 1.1, 0.8, 4)       
    
-
-
    En revanche, ces définitions sont invalides :
    
-
-
    /* Bien que le type de sortie puisse être une couleur */
-/* les courbes de Bézier fonctionnent avec des ratios */
-/* numériques */
-cubic-bezier(0.1, red, 1.0, green)
-
-/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
-/* car sinon la courbe n'est pas une fonction temporelle. */
-cubic-bezier(2.45, 0.6, 4, 0.1)
-
-/* Il faut définir les deux points, il n'y a pas de valeur */
-/* par défaut. */
-cubic-bezier(0.3, 2.1)
-
-/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
-/* car sinon la courbe n'est pas une fonction temporelle. */
-cubic-bezier(-1.9, 0.3, -0.2, 2.1)
-
    
+
    La classe des fonctions de transition cubic-bezier()
    
 
-
    La classe de fonction steps()
    
+Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe par de l'origine jusqu'à atteindre la position 1 1. Le point à l'origine est appelé 'P₀ = (0, 0)'. En partant de l'origine, on a une poignée de Bézier intitulée 'P₁ = (0.075, 0.75)'. Le point aux coordonnées 1 1 est intitulé 'P₃ = (1, 1)'. En partant du point 1 1, on a une poignée de Bézier intitulée 'P₂ = (0.0875, 0.36)'.
 
-
    La notation fonctionnelle steps() permet de définir une fonction en escalier qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.
    
+
    La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes étant continues, elles sont souvent utilisées afin de démarrer et de finir progressivement une interpolation. Elles sont parfois appelées fonctions de transition.
    
 
-
    
+
    Une courbe de Bézier cubique est définie par quatre points P0, P1, P2 et P3. P0 et P3 représentent les points de début et de fin de la courbe. Pour les fonctions de transition CSS, ces points sont fixes, car les coordonnées représentent des ratios (sur les abscisses, le ratio en temps et sur les ordonnées, le ratio en sortie). P0 est donc situé en (0, 0) et représente l'état initial. P3 est en (1, 1) et réprésente l'état final.
    
 
-
    steps(2, start)
    
+
    Toutes les courbes de Bézier cubiques ne sont pas des fonctions de transition, car toutes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui, pour une abscisse donnée, ont une seule ou zéro valeur). Avec les contraintes imposées sur P0 et P3 en CSS, une courbe de Bézier cubique sera une fonction mathématique et pourra être utilisée comme fonction de transition, si et seulement si les abscisses de P1 et P2 appartiennent, tous les deux, à l'intervalle [0, 1].
    
 
-
    
+
    Les courbes de Bézier cubiques pour lesquelles les ordonnées des points P1 ou P2 sont en dehors de l'intervalle [0, 1] pourront générer un effet de rebond.
    
 
-
    steps(4, end)
    
+
    Si on utilise une déclaration cubic-bezier avec une fonction invalide, CSS ignorera l'ensemble de la propriété.
    
 
-
    Syntaxe
    
+
    Syntaxe
    
 
-
    steps(nombre_de_marche, direction)
+
    cubic-bezier(x1, y1, x2, y2)
 
    
 
-
    avec
    
+
    avec :
    
 
 
    
- 
    nombre_de_marche
    
- 
    Un entier (valeur de type {{cssxref("<integer>")}} qui représente le nombre de marches composant la fonction en escalier.
    
- 
    direction
    
- 
    Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :
- 
      
-  
    • start indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation
      • 
-  
    • end indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.
      • 
- 
    
- end est la valeur par défaut.
    
+ 
    x1, y1, x2, y2
    
+ 
    Des valeurs numériques (<number>) qui représentent les abscisses et ordonnées des points P1 et P2 qui définissent la courbe de Bézier cubique. x1 et x2 doivent appartenir à l'intervalle [0, 1] afin que la valeur soit valide.
    
 
    
 
-
    Exemples
    
+
    Mots-clés pour les fonctions de transition communes
    
 
-
    Voici des exemples de fonction de temporisation en escalier valides :
    
+
    ease
    
 
-
    /* Il y a cinq marches et la dernière est utilisée */
-/* avant la fin de l'animation.                    */
-steps(5, end)
+
    Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'au point 1 1 en démarrant rapidement et finissant par un arc plat.
    
 
-/* Une fonction à deux marches dont la première se */
-/* déroule au début de l'animation.                */
-steps(2, start)
+
    L'interpolation démarre doucement puis accélère vivement avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition cubic-bezier(0.25, 0.1, 0.25, 1.0). Cette valeur est semblable à ease-in-out, bien qu'elle accélère plus rapidement au début.
    
 
-/* Le deuxième paramètre est facultatif. */
-steps(2)
-
    
+
    ease-in
    
 
-
    En revanche, celles-ci sont invalides :
    
+
    Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une courbe part l'origine jusqu'au point 1 1 avec une bonne partie de la courbe proche de l'origine et qui s'élève en quasi-ligne droite afin d'atteindre le point d'arrivée 1 1.
    
 
-
    /* Le premier paramètre doit être un entier (type */
-/* <integer>)                                     */
-steps(2.0, end)
+
    L'interpolation démarre lentement puis s'accélère progressivement jusqu'à la fin où elle s'arrête de façon abrutpe. Ce mot-clé représente la fonction de transition cubic-bezier(0.42, 0.0, 1.0, 1.0).
    
 
-/* Le nombre d'étapes ne peut pas être négatif. */
-steps(-3, start)
+
    ease-in-out
    
 
-/* Il ne peut pas être nul.*/
-steps(0, end)
-
    
+
    Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe qui part de l'origine jusqu'à atteindre le point 1 1. La courbe est symétrique et ressemble à un S étiré
    
 
-
    La classe de fonction frames()
    
+
    L'interpolation démarre lentement puis accélère avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition cubic-bezier(0.42, 0.0, 0.58, 1.0). Au début, elle se comporte comme ease-in et à la fin, elle se comporte comme ease-out.
    
 
-
    
-
    Note : Le nom "frames" est actuellement en discussion et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.
    
-
    
+
    ease-out
    
 
-
    La notation fonctionnelle frames() définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre frames() et steps() est que frames() considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.
    
+
    Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'à atteindre le point 1 1. Cette courbe démarre comme une ligne droite en diagonale puis se courbe progressivement à l'approche de 1 1.
    
 
-
    frames(2), frames(4)
    
+
    L'interpolation démarre abruptement puis ralentit progressivement vers la fin. Ce mot-clé correspond à la fonction de transition cubic-bezier(0.0, 0.0, 0.58, 1.0).
    
 
-
     
    
+
    Les fonctions de transition en escalier
    
 
-
     
    
+
    La notation fonctionnelle steps() définit une fonction en escalier qui divise le domaine des valeurs de sorties en marches équidistantes.
    
 
-
    Syntaxe
    
+
    Syntaxe
    
 
-
    steps(nombre_etapes)
+
    steps(nombre_de_marches, direction)
 
    
 
-
    où :
    
+
    avec :
    
 
 
    
- 
    nombre_etapes
    
- 
    Est un entier ({{cssxref("<integer>")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.
    
+ 
    nombre_de_marches
    
+ 
    Un entier (<integer>) strictement positif qui représente le nombre de segments équidistants qui composent la fonction en escalier.
    
+ 
    direction
    
+ 
    
+   
    Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :
    
+   
      
+    
    • jump-start indique une fonction continue à gauche : le premier saut a lieu au début de l'interpolation ;
      • 
+    
    • jump-end indique une fonction continue à droite : le dernier saut a lieu à la fin de l'interpolation ;
      • 
+    
    • jump-both indique une fonction continue à droite et à gauche avec des pauses au début et à la fin, ce qui se traduit par l'ajout d'une étape lors de l'itération de l'interpolation ;
      • 
+    
    • jump-none indique qu'il n'y a pas de saut au début ou à la fin mais une temporisation de 1/n de la durée totale à chaque extrêmité.
      • 
+    
    • start est équivalent à jump-start
      • 
+    
    • end est équivalent à jump-end
      • 
+   
    
+   
    end est la valeur par défaut.
    
+ 
    
 
    
 
-
    Exemples
    
+
    steps( n, <direction> )
    
 
-
    Ces fonctions de temporisation sont valides :
    
-
-
    /* Le paramètre est un entier positif. */
-frames(10)
-
    
-
-
    
-
    Note : une démo de la fonction frames() avec un exemple fonctionnel est disponible sur notre dépôt GitHub.
    
-
    
-
-
    Ces fonctions de temporisation sont invalides :
    
+
      
+ 
    • 
+  
      steps(2, jump-start)
      
+   steps(2, start)
      
+  Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Trois points sont affichés : le premier aux coordonnées 0 0, le deuxième aux coordonnées 0,5 0,5 et le troisième aux coordonnées 1 1. Les deuxième et troisième points sont le début de lignes horizontales qui partent vers la gauche sur 0,5 unités.
      • 
+ 
    • 
+  
      steps(4, jump-end)
      
+   steps(4, end)
      
+  Quatre marches avec un saut de la quatrième à la valeur située à la fin.
      • 
+ 
    • 
+  
      steps(5, jump-none)
      
+  Cinq marches, sans saut : 20% de temps s'écoule à l'étape initiale et 20% de temps s'écoule à l'étape finale.
      • 
+ 
    • 
+  
      steps(3, jump-both)
      
+  Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Cinq points sont affichés, respectivement aux coordonnées 0 0, 0 0,25, 0,5 0,5, 0,75 0,75, 1 1. Les deuxième, troisième et quatrième points ont des lignes qui partent vers la droite sur 0,25 unités.
      • 
+
    
 
-
    /* Le paramètre passé à la fonction doit être un entier
-   et pas une valeur décimale, même si cette dernière est
-   égale à un entier. */
-frames(2.0)
+
    step-start
    
+
+
    Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du deuxième point vers l'axe Y. L'interpolation saute directement à l'état final et reste ainsi jusqu'à la fin. Ce mot-clé correspond à la fonction de transition steps(1, jump-start) ou steps(1, start).
    
+
+
    step-end
    
+
+
    Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du premier point et reste sur l'axe des abscisses. L'interpolation reste dans son état initial jusqu'à la fin où elle saute directement à l'état final. Ce mot-clé représente la fonction de transition steps(1, jump-end) ou steps(1, end).
    
+
+
    Exemples
    
+
+
    Comparaison des fonctions de transition
    
+
+
    Dans cet exemple, on crée une animation qui peut être démarrée ou stoppée à l'aide du bouton fourni et un menu est affiché pour choisir la fonction de transition à utiliser : différents mots-clés sont disponibles ainsi que des exemples utilisant cubic-bezier() et steps(). L'idée est de fournir un outil de comparaison simple entre ces fonctions.
    
+
+
    HTML
    
+
+
    <div>
+  <div></div>
+</div>
+<ul>
+  <li>
+    <button class="animation-button">Démarrer l'animation</button>
+  </li>
+  <li>
+    <label for="easing-select">Choisir une fonction de transition :</label>
+    <select id="easing-select">
+      <option selected>linear</option>
+      <option>ease</option>
+      <option>ease-in</option>
+      <option>ease-in-out</option>
+      <option>ease-out</option>
+      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
+      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
+      <option>steps(5, end)</option>
+      <option>steps(3, start)</option>
+      <option>steps(4)</option>
+    </select>
+  </li>
+</ul>
    
+
+
    CSS
    
+
+
    body > div {
+  position: relative;
+  height: 100px;
+}
+
+div > div {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4));
+  border-radius: 50%;
+  top: 25px;
+  animation: 1.5s infinite alternate;
+}
+
+@keyframes move-right {
+  from {
+    left: 10%;
+  }
+
+  to {
+    left: 90%;
+  }
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
    
+
+
    JavaScript
    
+
+
    const selectElem = document.querySelector("select");
+const startBtn = document.querySelector("button");
+const divElem = document.querySelector("div > div");
+
+startBtn.addEventListener("click", () => {
+  if(startBtn.textContent === "Démarrer l'animation") {
+    divElem.style.animationName = "move-right";
+    startBtn.textContent = "Arrêter l'animation";
+    divElem.style.animationTimingFunction = selectElem.value;
+  } else {
+    divElem.style.animationName = "unset";
+    startBtn.textContent = "Démarrer l'animation";
+  }
+});
+
+selectElem.addEventListener("change", () => {
+  divElem.style.animationTimingFunction = selectElem.value;
+});
    
+
+
    Résultat
    
+
+
    {{EmbedLiveSample('comparaison_des_fonctions_de_transition', '100%', 300)}}
    
+
+
    Exemples avec cubic-bezier()
    
+
+
    Ces courbes de Bézier cubiques sont valides pour être utilisées en CSS :
    
+
+
    /* La courbe de Bézier canonique avec quatre nombres dans l'intervalle [0,1]. */
+cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+/* On peut aussi utiliser des valeurs entières (<integer>) car ce sont des nombres. */
+cubic-bezier(0, 0, 1, 1)
 
-/* Le nombre de frames doit être positif. */
-frames(-3)
+/* Les valeurs négatives pour les ordonnées sont valides et créent un effet de rebond.*/
+cubic-bezier(0.1, -0.6, 0.2, 0)
 
-/* Il doit y avoir au moins une frame. */
-frames(0)
+/* Les valeurs supérieures à 1.0 pour les ordonnées sont aussi valides. */
+cubic-bezier(0, 1.1, 0.8, 4)
 
    
 
-
    Mots-clés pour les fonctions de temporisation usuelles
    
+
    Ces courbes de Bézier cubiques sont invalides en CSS :
    
 
-
    linear
    
+
    +/* Bien que les valeurs animées puissent être des couleurs,
+   les courbes de Bézier ne fonctionnent qu'avec des ratios numériques.*/
+cubic-bezier(0.1, red, 1.0, green)
 
-
    Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 1.0, 1.0). Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.
    
+/* Les abscisses doivent être dans l'intervalle [0, 1] car sinon l'intervalle
+   couvert par la courbe n'est pas valide. */
+cubic-bezier(2.45, 0.6, 4, 0.1)
 
-
    ease
    
+/* Les deux points doivent être explicitement définis, il n'y a pas de valeur
+   par défaut. */
+cubic-bezier(0.3, 2.1)
 
-
    Ce mot-clé représente la fonction de temporisation cubic-bezier(0.25, 0.1, 0.25, 1.0). Cette fonction est semblable à ease-in-out sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..
    
+/* Les abscisses doivent être dans l'intervalle [0, 1], sinon la courbe
+   ne représente pas une fonction du temps. */
+cubic-bezier(-1.9, 0.3, -0.2, 2.1) 
    
 
-
    ease-in
    
+
    Exemples avec steps()
    
 
-
    Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 1.0, 1.0). L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.
    
+
    Ces fonctions de transition sont valides :
    
 
-
    ease-in-out
    
+
    +/* Il y a 5 étapes, la dernière se produit juste avant
+   la fin de l'animation. */
+steps(5, end)
 
-
    Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 0.58, 1.0). L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.
    
+/* Un escalier à deux marches, la première se produisant
+   au début de l'animation. */
+steps(2, start)
 
-
    ease-out
    
+/* Le deuxième paramètre est optionnel. */
+steps(2)
+
    
 
-
    Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 0.58, 1.0). L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.
    
+
    
+  
    Note : Si l'animation contient plusieurs arrêts, les marches décrites dans la fonction steps() s'appliqueront à chaque section. Ainsi, pour une animation avec trois segments et steps(2), on aura au total 6 étapes, 2 pour chaque segment.
    
+
    
 
-
    step-start
    
+
    Les fonctions de transitions qui suivent sont invalides :
    
 
-
    Ce mot-clé représente la fonction de temporisation steps(1, start) (ou steps(1, jump-start)). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.
    
+
    +/* Le premier paramètre doit être un entier et ne peut pas être
+   une valeur décimale (même si celle-ci est égale à une valeur entière). */
+steps(2.0, jump-end)
 
-
    step-end
    
+/* La quantité de marches ne doit pas être négative. */
+steps(-3, start)
 
-
    Ce mot-clé représente la fonction de temporisation steps(1, end) (ou steps(1, jump-end)). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.
    
+/* Il doit y avoir au moins une marche.*/
+steps(0, jump-none)
    
 
-
    Spécifications
    
+
    Spécifications
    
 
 
@@ -249,26 +317,21 @@ frames(0)
  
-   
-   
+   
+   
-  
-   
-   
-   
-  
    
  
  
   
    {{SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>')}}{{Spec2('CSS3 Transitions')}}{{SpecName('CSS Easing 1', '#typedef-easing-function', '<easing-function>')}}{{Spec2('CSS Easing 1')}}
    Définition initiale.
   
    {{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}{{Spec2('CSS3 Animations')}}Définition de <single-timing-function> comme synonyme de <single-transition-timing-function> selon le module CSS pour les transitions.
    
      
 
    
 
-
    Compatibilité des navigateurs
    
+
    Compatibilité des navigateurs
    
 
-
    {{Compat("css.types.timing-function", 2)}}
    
+
    {{Compat("css.types.easing-function", 2)}}
    
 
-
    Voir aussi
    
+
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/element()/index.html b/files/fr/web/css/element()/index.html
index 79ceb799cc..a0f0f92cc2 100644
--- a/files/fr/web/css/element()/index.html
+++ b/files/fr/web/css/element()/index.html
@@ -17,7 +17,7 @@ translation_of: Web/CSS/element()
 
 
    Syntaxe
    
 
-
    element(id)
    
+
    element(id)
    
 
 
    Paramètres
    
 
@@ -32,7 +32,7 @@ translation_of: Web/CSS/element()
 
 
    CSS
    
 
-
    .exemple {
+
    .exemple {
   width: 400px;
   height: 400px;
   background: -moz-element(#monArrierePlan) no-repeat;
@@ -58,7 +58,7 @@ translation_of: Web/CSS/element()
 
 
    HTML
    
 
-
    <div class="exemple">
+
    <div class="exemple">
   <p>
     Cet élément utilise l'élément
     #monArrierePlan comme image
@@ -85,7 +85,7 @@ translation_of: Web/CSS/element()
 
 
    CSS
    
 
-
    .exemple {
+
    .exemple {
   width: 400px;
   height: 100px;
   background: -moz-element(#monArrierePlan);
@@ -98,7 +98,7 @@ translation_of: Web/CSS/element()
 
 
    HTML
    
 
-
    <div class="exemple"></div>
+
    <div class="exemple"></div>
 
 <div class="cache">
   <button id="monArrierePlan" type="button">
diff --git a/files/fr/web/css/empty-cells/index.html b/files/fr/web/css/empty-cells/index.html
index 13447bc517..dc25ad57ab 100644
--- a/files/fr/web/css/empty-cells/index.html
+++ b/files/fr/web/css/empty-cells/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/empty-cells
 
 
    {{EmbedInteractiveExample("pages/css/empty-cells.html")}}
    
 
-
-
 
    Cette propriété est uniquement appliquée lorsque border-collapse vaut separate.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/env()/index.html b/files/fr/web/css/env()/index.html
index af2aa40afa..d155dcdd77 100644
--- a/files/fr/web/css/env()/index.html
+++ b/files/fr/web/css/env()/index.html
@@ -16,7 +16,7 @@ translation_of: Web/CSS/env()
 
 
    env() peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction var().
    
 
-
    body {
+
    body {
   padding:
     env(safe-area-inset-top, 20px)
     env(safe-area-inset-right, 20px)
@@ -26,13 +26,13 @@ translation_of: Web/CSS/env()
 
 
    La fonction env() peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une requête média) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.
    
 
-
    
+
    
 
    Note : Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (viewport) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.
    
 
    
 
 
    Syntaxe
    
 
-
    /* Utilisation des quatre zones sûres */
+
    /* Utilisation des quatre zones sûres */
 env(safe-area-inset-top)
 env(safe-area-inset-right)
 env(safe-area-inset-bottom)
@@ -48,11 +48,11 @@ env(safe-area-inset-left, 1.4rem);
 
    Valeurs
    
 
 
    
- 
    safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
    
+ 
    safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
    
  
    Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (viewport) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.
    
 
    
 
-
    
+
    
 
    Note : À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.
    
 
    
 
@@ -66,7 +66,7 @@ env(safe-area-inset-left, 1.4rem);
 
 
    HTML
    
 
-
    <p>
+
    <p>
   Si la fonction <code>env()</code> est prise en charge dans votre
   navigateur, le texte de ce paragraphe aura 50 pixels de padding avec
   la bordure gauche mais pas la droite / basse et haute.
@@ -77,7 +77,7 @@ env(safe-area-inset-left, 1.4rem);
 
 
    CSS
    
 
-
    p {
+
    p {
   width: 300px;
   border: 2px solid red;
   padding:
@@ -93,7 +93,7 @@ env(safe-area-inset-left, 1.4rem);
 
 
    Exemples de valeurs
    
 
-
    /* zéro pour les agents utilisateurs rectangulaires */
+
    /* zéro pour les agents utilisateurs rectangulaires */
 padding: env(safe-area-inset-bottom, 50px);
 
 /* 50px car les propriétés de l'agent sont sensibles à la casse */
@@ -110,7 +110,7 @@ padding: env(x, 50px, 20px);
 
 
    Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.
    
 
-
    
+
    
 
    Note : Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.
    
 
    
 
diff --git a/files/fr/web/css/filter-function/blur()/index.html b/files/fr/web/css/filter-function/blur()/index.html
index ae64a917d5..c181809d64 100644
--- a/files/fr/web/css/filter-function/blur()/index.html
+++ b/files/fr/web/css/filter-function/blur()/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/blur()
 
 
    {{EmbedInteractiveExample("pages/css/function-blur.html")}}
    
 
-
-
 
    Syntaxe
    
 
-
    blur(rayon)
    
+
    blur(rayon)
    
 
 
    Paramètres
    
 
@@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/blur()
 
 
    Exemples
    
 
-
    blur(0);        /* Aucun effet */
+
    blur(0);        /* Aucun effet */
 blur(8px);      /* Un flou avec un rayon de 8px */
 blur(1.17rem);  /* Un flou avec un rayon de 1.17rem */
    
 
diff --git a/files/fr/web/css/filter-function/brightness()/index.html b/files/fr/web/css/filter-function/brightness()/index.html
index d06071ac24..3d3b983c25 100644
--- a/files/fr/web/css/filter-function/brightness()/index.html
+++ b/files/fr/web/css/filter-function/brightness()/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/brightness()
 
 
    {{EmbedInteractiveExample("pages/css/function-brightness.html")}}
    
 
-
-
 
    Syntaxe
    
 
-
    brightness(multiplicateur)
    
+
    brightness(multiplicateur)
    
 
 
    Paramètres
    
 
@@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/brightness()
 
 
    Exemples
    
 
-
    brightness(0%)   /* Complètement noir */
+
    brightness(0%)   /* Complètement noir */
 brightness(0.4)  /* 40% de la clarté */
 brightness(1)    /* Aucun effet */
 brightness(200%) /* Double la clarté */
    
diff --git a/files/fr/web/css/filter-function/contrast()/index.html b/files/fr/web/css/filter-function/contrast()/index.html
index 714787a110..84c66f25d3 100644
--- a/files/fr/web/css/filter-function/contrast()/index.html
+++ b/files/fr/web/css/filter-function/contrast()/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/contrast()
 
 
    {{EmbedInteractiveExample("pages/css/function-contrast.html")}}
    
 
-
-
 
    Syntaxe
    
 
-
    contrast(multiplicateur)
    
+
    contrast(multiplicateur)
    
 
 
    Paramètres
    
 
@@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/contrast()
 
 
    Exemples
    
 
-
    contrast(0);     /* Completely gray */
+
    contrast(0);     /* Completely gray */
 contrast(65%);   /* 65% contrast */
 contrast(1);     /* No effect */
 contrast(200%);  /* Double contrast */
    
diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.html b/files/fr/web/css/filter-function/drop-shadow()/index.html
index 51b2288aac..a39ea431ef 100644
--- a/files/fr/web/css/filter-function/drop-shadow()/index.html
+++ b/files/fr/web/css/filter-function/drop-shadow()/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/filter-function/drop-shadow()
 
 
    {{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
    
 
-
-
 
    En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image.
    
 
 
    
@@ -24,7 +22,7 @@ translation_of: Web/CSS/filter-function/drop-shadow()
 
 
    Syntaxe
    
 
-
    drop-shadow(décalage-x, décalage-y, rayon-flou, rayon-étalement, couleur)
    
+
    drop-shadow(décalage-x, décalage-y, rayon-flou, rayon-étalement, couleur)
    
 
 
    La fonction drop-shadow() accepte un paramètre de type <shadow> (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé inset n'est pas autorisé.
    
 
@@ -36,9 +34,9 @@ translation_of: Web/CSS/filter-function/drop-shadow()
  
    rayon-flou {{optional_inline}}
    
  
    Une longueur ({{cssxref("<length>")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est 0 ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives
    
  
    rayon-étalement{{optional_inline}}
    
- 
    Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("<length>")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est 0 : l'ombre a alors la même taille que l'image.
    
- 
    
- 
    Attention ! Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.
    
+ 
    Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("<length>")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est 0 : l'ombre a alors la même taille que l'image.
+ 
    
+   
    Attention : Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.
    
  
    
  
    couleur{{optional_inline}}
    
  
    La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("<color>")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut.
    
@@ -46,7 +44,7 @@ translation_of: Web/CSS/filter-function/drop-shadow()
 
 
    Exemples
    
 
-
    /* Une ombre noire avec un flou de 10px de rayon. */
+
    /* Une ombre noire avec un flou de 10px de rayon. */
 drop-shadow(16px 16px 10px black)
 
 /* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */
diff --git a/files/fr/web/css/filter-function/grayscale()/index.html b/files/fr/web/css/filter-function/grayscale()/index.html
index f469d4e70d..90c6abfb8e 100644
--- a/files/fr/web/css/filter-function/grayscale()/index.html
+++ b/files/fr/web/css/filter-function/grayscale()/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/grayscale()
 
 
    {{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
    
 
-
-
 
    Syntaxe
    
 
-
    grayscale(multiplicateur)
    
+
    grayscale(multiplicateur)
    
 
 
    Paramètres
    
 
@@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/grayscale()
 
 
    Exemples
    
 
-
    grayscale(0)     /* Aucun effet */
+
    grayscale(0)     /* Aucun effet */
 grayscale(.7)    /* Converti à 70% en niveaux de gris */
 grayscale(100%)  /* Uniquement en niveaux de gris */
    
 
diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.html b/files/fr/web/css/filter-function/hue-rotate()/index.html
index 051c35b96b..b6d4eb4938 100644
--- a/files/fr/web/css/filter-function/hue-rotate()/index.html
+++ b/files/fr/web/css/filter-function/hue-rotate()/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/hue-rotate()
 
 
    { {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}
    
 
-
-
 
    Syntaxe
    
 
-
    hue-rotate(angle)
    
+
    hue-rotate(angle)
    
 
 
    Paramètres
    
 
@@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/hue-rotate()
 
 
    Exemples
    
 
-
    hue-rotate(-90deg);  /* Correspond à une rotation de 270deg */
+
    hue-rotate(-90deg);  /* Correspond à une rotation de 270deg */
 hue-rotate(0deg);    /* Sans effet */
 hue-rotate(90deg);   /* Rotation de 90deg */
 hue-rotate(.5turn);  /* Rotation de 180deg */
diff --git a/files/fr/web/css/filter-function/invert()/index.html b/files/fr/web/css/filter-function/invert()/index.html
index 25a034fdd1..040d4f17b6 100644
--- a/files/fr/web/css/filter-function/invert()/index.html
+++ b/files/fr/web/css/filter-function/invert()/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/invert()
 
 
    {{EmbedInteractiveExample("pages/css/function-invert.html")}}
    
 
-
-
 
    Syntaxe
    
 
-
    invert(multiplicateur)
    
+
    invert(multiplicateur)
    
 
 
    Paramètres
    
 
@@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/invert()
 
 
    Exemples
    
 
-
    invert(0);     /* Aucun effet */
+
    invert(0);     /* Aucun effet */
 invert(.6);    /* Inversion à 60% */
 invert(100%);  /* Négatif de l'image originale */
    
 
diff --git a/files/fr/web/css/filter-function/opacity()/index.html b/files/fr/web/css/filter-function/opacity()/index.html
index 6518f7b998..5bea0891bf 100644
--- a/files/fr/web/css/filter-function/opacity()/index.html
+++ b/files/fr/web/css/filter-function/opacity()/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/filter-function/opacity()
 
 
    { {EmbedInteractiveExample("pages/css/function-opacity.html")}}
    
 
-
-
 
    
 
    Note : Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.
    
 
    
diff --git a/files/fr/web/css/filter-function/saturate()/index.html b/files/fr/web/css/filter-function/saturate()/index.html
index 4d5e6ac851..148cb8c934 100644
--- a/files/fr/web/css/filter-function/saturate()/index.html
+++ b/files/fr/web/css/filter-function/saturate()/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/saturate()
 
 
    {{EmbedInteractiveExample("pages/css/function-saturate.html")}}
    
 
-
-
 
    Syntaxe
    
 
-
    saturate(multiplicateur)
    
+
    saturate(multiplicateur)
    
 
 
    Paramètres
    
 
@@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/saturate()
 
 
    Exemples
    
 
-
    saturate(0);     /* Complètement sous-saturée */
+
    saturate(0);     /* Complètement sous-saturée */
 saturate(.4);    /* Sous-saturée à 40% */
 saturate(100%);  /* Aucun effet */
 saturate(200%);  /* Saturation doublée */
    
diff --git a/files/fr/web/css/filter-function/sepia()/index.html b/files/fr/web/css/filter-function/sepia()/index.html
index b6e0b21e8d..993dba725f 100644
--- a/files/fr/web/css/filter-function/sepia()/index.html
+++ b/files/fr/web/css/filter-function/sepia()/index.html
@@ -14,11 +14,9 @@ translation_of: Web/CSS/filter-function/sepia()
 
 
    {{EmbedInteractiveExample("pages/css/function-sepia.html")}}
    
 
-
-
 
    Syntaxe
    
 
-
    sepia(multiplicateur)
    
+
    sepia(multiplicateur)
    
 
 
    Paramètres
    
 
@@ -29,7 +27,7 @@ translation_of: Web/CSS/filter-function/sepia()
 
 
    Exemples
    
 
-
    sepia(0);     /* Aucun effet */
+
    sepia(0);     /* Aucun effet */
 sepia(.65);   /* 65% de sépia */
 sepia(100%);  /* Complètement sépia */
    
 
diff --git a/files/fr/web/css/filter/index.html b/files/fr/web/css/filter/index.html
index dddd7e82a6..ac1de9b8e8 100644
--- a/files/fr/web/css/filter/index.html
+++ b/files/fr/web/css/filter/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/filter
 
 
    {{EmbedInteractiveExample("pages/css/filter.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* URL vers un filtre SVG */
@@ -101,8 +99,7 @@ img {
 
    filter: blur(5px)
 
    
 
-
 
-
    <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+
    <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
   <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
   </filter>
 </svg>
    
 
-
    {{EmbedLiveSample('blur_example','100%','236px','')}}
    
+
    {{EmbedLiveSample('blur','100%','236px','')}}
    
 
-
    
-
    Note : Voir {{cssxref("filter-function/blur", "blur()")}} pour plus d'informations.
    
+
    
+
    Note : Voir {{cssxref("filter-function/blur()", "blur()")}} pour plus d'informations.
    
 
    
 
 
    brightness()
    
@@ -188,7 +184,7 @@ table.standard-table td {
 
 
    filter: brightness(0.5)
    
 
-
    <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+
    <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
     <feComponentTransfer>
         <feFuncR type="linear" slope="[amount]"/>
@@ -198,8 +194,7 @@ table.standard-table td {
   </filter>
 </svg>
    
 
-
 
-
    {{EmbedLiveSample('brightness_example','100%','231px','')}}
    
+
    {{EmbedLiveSample('brightness','100%','231px','')}}
    
 
-
    
-
    Note : Voir {{cssxref("filter-function/brightness", "brightness()")}} pour plus d'informations.
    
+
    
+
    Note : Voir {{cssxref("filter-function/brightness()", "brightness()")}} pour plus d'informations.
    
 
    
 
 
    contrast()
    
@@ -287,7 +281,7 @@ table.standard-table td {
 
    filter: contrast(200%)
 
    
 
-
    <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+
    <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
   <filter id="contrast">
     <feComponentTransfer>
       <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
@@ -297,8 +291,7 @@ table.standard-table td {
   </filter>
 </svg>
    
 
-
 
-
    {{EmbedLiveSample('contrast_example','100%','203px','')}}
    
+
    {{EmbedLiveSample('contrast','100%','203px','')}}
    
 
-
    
-
    Note : Voir {{cssxref("filter-function/contrast", "contrast()")}} pour plus d'informations.
    
+
    
+
    Note : Voir {{cssxref("filter-function/contrast()", "contrast()")}} pour plus d'informations.
    
 
    
 
 
    drop-shadow()
    
@@ -390,15 +382,14 @@ table.standard-table td {
  
    <blur-radius> (optionnel)
    
  
    Une troisième valeur de type {{cssxref("<length>")}}. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est 0, le bord de l'ombre sera droit.
    
  
    <spread-radius> (optionnel)
    
- 
    Un quatrième valeur de type {{cssxref("<length>")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est 0 (l'ombre aura la même taille que l'élément). 
    
- 
    Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.
    
+ 
    Un quatrième valeur de type {{cssxref("<length>")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est 0 (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.
    
  
    <color> (optionnel)
    
  
    Voir {{cssxref("<color>")}} pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété {{cssxref("color")}} est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).
    
 
 
 
    filter: drop-shadow(16px 16px 10px black)
    
 
-
    <svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+
    <svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="drop-shadow">
     <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
     <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
@@ -411,8 +402,7 @@ table.standard-table td {
   </filter>
 </svg>
    
 
-
 
-
    {{EmbedLiveSample('shadow_example','100%','300px','')}}
    
+
    {{EmbedLiveSample('drop-shadow','100%','300px','')}}
    
 
-
    
-
    Note : Voir {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} pour plus d'informations.
    
+
    
+
    Note : Voir {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} pour plus d'informations.
    
 
    
 
 
    grayscale()
    
@@ -533,8 +522,7 @@ table.standard-table td {
 
 
    filter: grayscale(100%)
    
 
-
 
-
    {{EmbedLiveSample('grayscale_example','100%','209px','')}}
    
+
    {{EmbedLiveSample('grayscale','100%','209px','')}}
    
 
-
    
-
    Note : Voir {{cssxref("filter-function/grayscale", "grayscale()")}} pour plus d'informations.
    
+
    
+
    Note : Voir {{cssxref("filter-function/grayscale()", "grayscale()")}} pour plus d'informations.
    
 
    
 
 
    hue-rotate()
    
@@ -621,8 +608,7 @@ table.standard-table td {
 
 
    filter: hue-rotate(90deg)
    
 
-
    
   
    
    Helvetica Neue
   
    
   
    
    League Mono Variable
   
    
      
 
    
 
 
      
  
    • 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 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.
      • 
+ 
    • League Mono Variable 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.
    
@@ -177,12 +177,12 @@ font-stretch: unset;
 
 
    HTML
    
 
-
    <p class="stretch">Le texte est plus étiré.</p>
+
    <p class="stretch">Le texte est plus étiré.</p>
 <p class="condensed">Le texte est plus resserré.</div>
    
 
 
    CSS
    
 
-
    .stretch {
+
    .stretch {
   font-stretch: extra-expanded;
 }
 
@@ -198,10 +198,9 @@ font-stretch: unset;
 
 
    Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <percentage>.
    
 
-
    
 
    HTML
    
 
-
    <div class="container">
+
    <div class="container">
   <p class="condensed">an elephantine lizard</p>
   <p class="normal">an elephantine lizard</p>
   <p class="expanded">an elephantine lizard</p>
@@ -210,7 +209,7 @@ font-stretch: unset;
 
 
    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 :
@@ -243,11 +242,10 @@ http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
 }
 
 
    
-
    
 
 
    Résultat
    
 
-
    {{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}
    
+
    {{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/font-style/index.html b/files/fr/web/css/font-style/index.html
index be9eccddf5..69952fea4f 100644
--- a/files/fr/web/css/font-style/index.html
+++ b/files/fr/web/css/font-style/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/font-style
 
 
    {{EmbedInteractiveExample("pages/css/font-style.html")}}
    
 
-
-
 
    La forme italique est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme oblique quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.
    
 
 
    Syntaxe
    
@@ -60,11 +58,10 @@ font-style: unset;
 
 
    Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe CSS Fonts Level 4 qui permet d'utiliser font-style: oblique suivi d'un angle.
    
 
-
    {{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
    
+
    {{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}}
    
 
 
    HTML
    
 
-
    
 
    <header>
     <input type="range" id="slant" name="slant" min="-90" max="90" />
     <label for="slant">Slant</label>
@@ -103,8 +100,7 @@ label {
 
 
    
 
-
 
 
    JavaScript
    
 
@@ -146,7 +141,6 @@ slantInput.addEventListener('input', update);
 
 update();
 
    
-
 
 
    Exemples
    
 
@@ -178,7 +172,7 @@ update();
 
    
 
    Note : Toutes les polices ne disposent pas nécessairement de formes pour oblique et italic, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :
    
 
-
    
+
    
 
    
 
 
    Accessibilité
    
@@ -186,7 +180,7 @@ update();
 
    L'utilisation de grandes portions de textes avec font-style: italic peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.
    
 
 
 
diff --git a/files/fr/web/css/font-synthesis/index.html b/files/fr/web/css/font-synthesis/index.html
index 1e9c8cc657..db3390cd3b 100644
--- a/files/fr/web/css/font-synthesis/index.html
+++ b/files/fr/web/css/font-synthesis/index.html
@@ -14,7 +14,7 @@ translation_of: Web/CSS/font-synthesis
 
 
    La propriété font-synthesis indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.
    
 
-
    font-synthesis: none;
+
    font-synthesis: none;
 font-synthesis: weight;
 font-synthesis: style;
 font-synthesis: weight style;
@@ -56,11 +56,11 @@ font-synthesis: unset;
 
 
    HTML
    
 
-
    <div class="syn">Ne me synthétisez pas !</div>
    
+
    <div class="syn">Ne me synthétisez pas !</div>
    
 
 
    CSS
    
 
-
    .syn {font-synthesis: none;}
+
    .syn {font-synthesis: none;}
 
    
 
 
    Résultat
    
diff --git a/files/fr/web/css/font-variant-alternates/index.html b/files/fr/web/css/font-variant-alternates/index.html
index a4c7d486a9..02f1d94305 100644
--- a/files/fr/web/css/font-variant-alternates/index.html
+++ b/files/fr/web/css/font-variant-alternates/index.html
@@ -48,19 +48,20 @@ font-variant-alternates: unset;
  
    Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.
    
  
    historical-forms
    
  
    Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType hist.
    
- 
    stylistic()
    
+ 
    stylistic()
    
  
    Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType salt, par exemple salt 2.
    
- 
    styleset()
    
+ 
    styleset()
    
  
    Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType ssXY (par exemple ss02).
    
- 
    character-variant()
    
+ 
    character-variant()
    
  
    Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à styleset() mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType cvXY (par exemple cv02).
    
- 
    swash()
    
+ 
    swash()
    
  
    Cette fonction active l'affichage des glypes pour les lettres ornées. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType swsh et cswh (par exemple swsh 2 ou cswh 2).
    
- 
    ornaments()
    
+ 
    ornaments()
    
  
    Cette fonction active l'affichage des ornements tels que les fleurons et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType ornm (par exemple ornm 2).
- 
    Note : afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce  (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.
    
+ 
    
+   
    Note : afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.
    
  
    
- 
    annotation()
    
+ 
    annotation()
    
  
    Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType nalt (par exemple nalt 2).
    
 
 
diff --git a/files/fr/web/css/font-variant-caps/index.html b/files/fr/web/css/font-variant-caps/index.html
index 78d7d1d750..f182b3f024 100644
--- a/files/fr/web/css/font-variant-caps/index.html
+++ b/files/fr/web/css/font-variant-caps/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/font-variant-caps
 
 
    {{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
    
 
-
-
 
    Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.
    
 
 
    Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.
    
@@ -32,7 +30,7 @@ translation_of: Web/CSS/font-variant-caps
 
 
    Syntaxe
    
 
-
    /* Valeurs avec un mot-clé */
+
    /* Valeurs avec un mot-clé */
 font-variant-caps: normal;
 font-variant-caps: small-caps;
 font-variant-caps: all-small-caps;
@@ -76,13 +74,13 @@ font-variant-caps: unset;
 
 
    CSS
    
 
-
    .exemple {
+
    .exemple {
   font-variant-caps: small-caps;
 }
    
 
 
    HTML
    
 
-
    <p>
+
    <p>
   La Reine devint pourpre de colère et
   après l’avoir considérée un moment avec
   des yeux flamboyants comme ceux d’une
diff --git a/files/fr/web/css/font-variant-ligatures/index.html b/files/fr/web/css/font-variant-ligatures/index.html
index bc4d432818..f22176a920 100644
--- a/files/fr/web/css/font-variant-ligatures/index.html
+++ b/files/fr/web/css/font-variant-ligatures/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant-ligatures
 
 
    {{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    font-variant-ligatures: normal;
diff --git a/files/fr/web/css/font-variant-numeric/index.html b/files/fr/web/css/font-variant-numeric/index.html
index 60625ed3f5..b76c7896db 100644
--- a/files/fr/web/css/font-variant-numeric/index.html
+++ b/files/fr/web/css/font-variant-numeric/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant-numeric
 
 
    {{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    font-variant-numeric: normal;
diff --git a/files/fr/web/css/font-variant/index.html b/files/fr/web/css/font-variant/index.html
index 7f8f70fe8a..86e59df336 100644
--- a/files/fr/web/css/font-variant/index.html
+++ b/files/fr/web/css/font-variant/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/font-variant
 
 
    {{EmbedInteractiveExample("pages/css/font-variant.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    font-variant: small-caps;
diff --git a/files/fr/web/css/font-variation-settings/index.html b/files/fr/web/css/font-variation-settings/index.html
index 412b22650e..b8ac748682 100644
--- a/files/fr/web/css/font-variation-settings/index.html
+++ b/files/fr/web/css/font-variation-settings/index.html
@@ -13,13 +13,14 @@ translation_of: Web/CSS/font-variation-settings
 
 
    {{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
    
 
-
-
 
    Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (tags) pour les caractéristiques des polices.
    
 
-
    Note : Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.
    
+
    
+  
    Note : Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.
    
 
-
    Note : Les caractéristiques définies avec font-variation-settings l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. font-weight), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration @font-face inclut un intervalle font-weight.
    
+
    
+  
    Note : Les caractéristiques définies avec font-variation-settings l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. font-weight), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration @font-face inclut un intervalle font-weight.
    
+
    
 
 
    Syntaxe
    
 
@@ -100,13 +101,13 @@ font-variation-settings: unset;
 
    Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.
    
 
 
    
-
    Note : Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.
    
+
    Note : Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.
    
 
    
 
 
    Exemples
    
 
 
    
-
    Attention ! Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.
    
+
    Attention : Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.
    
 
    
 
 
    Graisse (wght)
    
@@ -124,7 +125,7 @@ font-variation-settings: unset;
 
    Autres exemples
    
 
 
@@ -157,7 +158,7 @@ font-variation-settings: unset;
 
    Voir aussi
    
 
 
      
- 
    • Guide sur les polices variables
      • 
+ 
    • Guide sur les polices variables
      • 
  
    • OpenType Font Variations Overview
      • 
  
    • OpenType specification
      • 
  
    • OpenType Design-Variation Axis Tag Registry
      • 
diff --git a/files/fr/web/css/font-weight/index.html b/files/fr/web/css/font-weight/index.html
index 2bf9ca0d2a..f31a368277 100644
--- a/files/fr/web/css/font-weight/index.html
+++ b/files/fr/web/css/font-weight/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/font-weight
 
 
      {{EmbedInteractiveExample("pages/css/font-weight.html")}}
      
 
-
-
 
      Syntaxe
      
 
 
      /* Valeurs avec un mot-clé */
@@ -142,7 +140,7 @@ font-weight: unset;
  
 
 
-
      Correspondance entre les valeurs numériques et les noms communément utilisés
      
+
      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) :
      
 
@@ -205,11 +203,10 @@ font-weight: unset;
 
 
      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("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
      
+
      {{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}}
      
 
 
      HTML
      
 
-
      
 
      <header>
     <input type="range" id="weight" name="weight" min="1" max="1000" />
     <label for="weight">Weight</label>
@@ -249,8 +246,7 @@ label {
 }
 
      
 
-
 
 
      JavaScript
      
 
@@ -291,7 +286,6 @@ weightInput.addEventListener('input', update);
 
 update();
 
      
-
 
 
      Syntaxe formelle
      
 
@@ -339,10 +333,10 @@ span {
 
 
      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.
      
+
      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.
      
 
 
 
diff --git a/files/fr/web/css/font/index.html b/files/fr/web/css/font/index.html
index 39c30122ca..0b2d7f2356 100644
--- a/files/fr/web/css/font/index.html
+++ b/files/fr/web/css/font/index.html
@@ -19,8 +19,6 @@ translation_of: Web/CSS/font
 
 
      {{EmbedInteractiveExample("pages/css/font.html")}}
      
 
-
-
 
      Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec font, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.
      
 
 
      Syntaxe
      
@@ -94,7 +92,7 @@ font: unset;
  
      Voir la propriété {{cssxref("line-height")}}.
      
  
      <'font-family'>
      
  
      Voir la propriété {{cssxref("font-family")}}.
      
- 
      Polices système :caption icon menu message-box small-caption status-bar
      
+ 
      Polices système :caption icon menu message-box small-caption status-bar
      
  
      Un mot-clé peut être utilisé pour indiquer une police système spécifique :
  
diff --git a/files/fr/web/css/forced-color-adjust/index.html b/files/fr/web/css/forced-color-adjust/index.html
index 2520c4fba1..6ce5f780c3 100644
--- a/files/fr/web/css/forced-color-adjust/index.html
+++ b/files/fr/web/css/forced-color-adjust/index.html
@@ -82,8 +82,7 @@ forced-color-adjust: unset;
      {{EmbedLiveSample("preserving_colors", 640, 260)}}
      
 
-
      L'exemple présenté ci-dessus affiche la première boîte avec un arrière-plan noir et la seconde avec un arrière-plan gris définit en CSS.
-
      L'exemple ci-dessus restitué dans le mode de contrastes forts de Windows
      
+L'exemple présenté ci-dessus affiche la première boîte avec un arrière-plan noir et la seconde avec un arrière-plan gris définit en CSS.
      Spécifications
      
 
diff --git a/files/fr/web/css/frequency/index.html b/files/fr/web/css/frequency/index.html
index 9c698cf69a..f59efc67ae 100644
--- a/files/fr/web/css/frequency/index.html
+++ b/files/fr/web/css/frequency/index.html
@@ -61,7 +61,7 @@ translation_of: Web/CSS/frequency
  
      
   
 
 
 
 
 
      
 
-
      Ce type de donnés fut initialement introduit avec la spécification CSS Niveau 2 pour le groupe de média aural qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.
      
+
      Ce type de donnés fut initialement introduit avec la spécification CSS Niveau 2 pour le groupe de média aural qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.
      
 
 
      Compatibilité des navigateurs
      
 
diff --git a/files/fr/web/css/gap/index.html b/files/fr/web/css/gap/index.html
index ec7935f221..a4e27262ac 100644
--- a/files/fr/web/css/gap/index.html
+++ b/files/fr/web/css/gap/index.html
@@ -14,15 +14,13 @@ translation_of: Web/CSS/gap
 
 
      {{EmbedInteractiveExample("pages/css/gap.html")}}
      
 
-
-
 
      
 
      Note : La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification CSS Grid Layout. Cette version préfixée a été remplacée par gap. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.
      
 
      
 
 
      Syntaxe
      
 
-
      /* Une valeur de longueur */
+
      /* Une valeur de longueur */
 /* Type <length>          */
 gap: 20px;
 gap: 1em;
@@ -80,7 +78,7 @@ gap: unset;
 
 
      HTML
      
 
-
      <div id="flexbox">
+
      <div id="flexbox">
   <div></div>
   <div></div>
   <div></div>
@@ -92,7 +90,7 @@ gap: unset;
 
 
      CSS
      
 
-
      #flexbox {
+
      #flexbox {
   display: flex;
   flex-wrap: wrap;
   width: 300px;
@@ -117,7 +115,7 @@ gap: unset;
 
 
      HTML
      
 
-
      <div id="grid">
+
      <div id="grid">
   <div></div>
   <div></div>
   <div></div>
@@ -131,14 +129,12 @@ gap: unset;
 
 
      CSS
      
 
-
 
-
      #grid {
+
      #grid {
   display: grid;
   height: 200px;
   grid-template: repeat(3, 1fr) / repeat(3, 1fr);
@@ -159,7 +155,7 @@ gap: unset;
 
 
      HTML
      
 
-
      <p class="content-box">
+
      <p class="content-box">
   voici un texte en multi-colonne sur des colonnes avec
   une gouttière de 40 pixels créée grâce à la propriété
   CSS <code>gap</code>. Est-ce que c'est pas trop génial ?
@@ -168,7 +164,7 @@ gap: unset;
 
 
      CSS
      
 
-
      .content-box {
+
      .content-box {
   column-count: 3;
   gap: 40px;
 }
diff --git a/files/fr/web/css/general_sibling_combinator/index.html b/files/fr/web/css/general_sibling_combinator/index.html
index 96352aacb8..683722db57 100644
--- a/files/fr/web/css/general_sibling_combinator/index.html
+++ b/files/fr/web/css/general_sibling_combinator/index.html
@@ -13,7 +13,7 @@ original_slug: Web/CSS/Sélecteurs_de_voisins_généraux
 
 
      Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.
      
 
-
      /* Parmi tous les éléments <img>, cibler tous
+
      /* Parmi tous les éléments <img>, cibler tous
    éléments <p> qui les suivent. */
 img ~ p {
   color: red;
@@ -21,20 +21,20 @@ img ~ p {
 
 
      Syntaxe
      
 
-
      premier_element ~ second_element { propriétés de style }
+
      premier_element ~ second_element { propriétés de style }
 
      
 
 
      Exemples
      
 
 
      CSS
      
 
-
      p ~ span {
+
      p ~ span {
   color: red;
 }
      
 
 
      HTML
      
 
-
      <span>Ici, ce n'est pas rouge.</span>
+
      <span>Ici, ce n'est pas rouge.</span>
 <p>Voici un paragraphe.</p>
 <code>Un peu de code.</code>
 <span>Et un autre span.</span>
diff --git a/files/fr/web/css/gradient/index.html b/files/fr/web/css/gradient/index.html
index 76c1c773d0..99fc1e5279 100644
--- a/files/fr/web/css/gradient/index.html
+++ b/files/fr/web/css/gradient/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/gradient
 
 
      {{EmbedInteractiveExample("pages/css/type-gradient.html")}}
      
 
-
-
 
      Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé transparent dans d'anciens navigateurs).
      
 
 
      Les types de dégradés
      
@@ -69,24 +67,20 @@ translation_of: Web/CSS/gradient
 
 
      Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}.
      
 
-
      
-
 
 
      .conic-gradient {
   background: conic-gradient(lightpink, white, powderblue);
 }
 
      
 
-
      {{EmbedLiveSample('conic-gradient', 240, 80)}}
      
-
      
+
      {{EmbedLiveSample('dégradé_conique', 240, 80)}}
      
 
 
      Spécifications
      
 
diff --git a/files/fr/web/css/grid-area/index.html b/files/fr/web/css/grid-area/index.html
index bd0d2366b5..ba2cd9ed2e 100644
--- a/files/fr/web/css/grid-area/index.html
+++ b/files/fr/web/css/grid-area/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-area
 
 
      {{EmbedInteractiveExample("pages/css/grid-area.html")}}
      
 
-
-
 
      Si quatre valeurs <grid-line> sont fournies, la première sera appliquée à grid-row-start, la deuxième à grid-column-start, la troisième à grid-row-end et la quatrième à grid-column-end.
      
 
 
      Lorsqu'il n'y a pas de valeur pour grid-column-end, si grid-column-start est un identifiant de zone ({{cssxref("<custom-ident>")}}, grid-column-end sera défini avec cet identifiant, sinon il sera défini avec auto.
      
@@ -58,7 +56,7 @@ grid-area: unset;
      
  
      Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
      
  
      <custom-ident>
      
  
      S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
- 
      Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-area: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).
      
+ 
      Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-area: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).
      
 
  
      Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.
      
  
      
@@ -84,7 +82,7 @@ grid-area: unset;
      
 
 
      CSS
      
 
-
      #grid {
+
      #grid {
   display: grid;
   height: 100px;
   grid-template: repeat(4, 1fr) / 50px 100px;
@@ -149,6 +147,6 @@ grid-area: unset;
      
  
    • {{cssxref("grid-column")}}
      • 
  
    • {{cssxref("grid-column-start")}}
      • 
  
    • {{cssxref("grid-column-end")}}
      • 
- 
    • Guide : les zones des grilles CSS
      • 
- 
    • Tutoriel vidéo : les zones des grilles CSS (en anglais)
      • 
+ 
    • Guide : les zones des grilles CSS
      • 
+ 
    • Tutoriel vidéo : les zones des grilles CSS (en anglais)
      • 
 
    
diff --git a/files/fr/web/css/grid-auto-columns/index.html b/files/fr/web/css/grid-auto-columns/index.html
index 6921b52014..a993203277 100644
--- a/files/fr/web/css/grid-auto-columns/index.html
+++ b/files/fr/web/css/grid-auto-columns/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/grid-auto-columns
 
 
    {{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}
    
 
-
-
 
    Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.
    
 
 
    Syntaxe
    
@@ -84,9 +82,7 @@ grid-auto-columns: unset;
  
    fit-content(argument)
    
  
    Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée de façon semblable à auto, sauf qu'ici, la taille de la piste est écrétée à argument s'i elle est plus grande que le minimum auto.
    
  
    auto
    
- 
    Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
    
- 
    
- 
    Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
    
+ 
    Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. 
    Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
    
  
    
 
 
@@ -98,7 +94,7 @@ grid-auto-columns: unset;
 
 
    CSS
    
 
-
    #grid {
+
    #grid {
   width: 100px;
   display: grid;
   grid-template-areas: "a a";
@@ -153,6 +149,6 @@ grid-auto-columns: unset;
  
  • {{cssxref("grid-auto-rows")}}
    • 
  
  • {{cssxref("grid-auto-flow")}}
    • 
  
  • {{cssxref("grid")}}
    • 
- 
  • Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite
    • 
- 
  • Tutoriel vidéo : Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)
    • 
+ 
  • Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite
    • 
+ 
  • Tutoriel vidéo : Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-auto-flow/index.html b/files/fr/web/css/grid-auto-flow/index.html
index bc3fcad666..1eb36acdc2 100644
--- a/files/fr/web/css/grid-auto-flow/index.html
+++ b/files/fr/web/css/grid-auto-flow/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-auto-flow
 
 
    {{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs avec un mot-clé */
@@ -58,7 +56,7 @@ grid-auto-flow: unset;
 
 
    CSS
    
 
-
    #grid {
+
    #grid {
   height: 200px;
   width: 200px;
   display: grid;
diff --git a/files/fr/web/css/grid-auto-rows/index.html b/files/fr/web/css/grid-auto-rows/index.html
index 2dca2b456e..33e3e8721c 100644
--- a/files/fr/web/css/grid-auto-rows/index.html
+++ b/files/fr/web/css/grid-auto-rows/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-auto-rows
 
 
    {{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}
    
 
-
-
 
    Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-rows")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.
    
 
 
    Syntaxe
    
@@ -77,9 +75,7 @@ grid-auto-rows: unset;
  
    minmax(min, max)
    
  
    Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).
    
  
    auto
    
- 
    Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
    
- 
    
- 
    Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
    
+ 
    Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. 
    Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
    
  
    
 
 
@@ -91,7 +87,7 @@ grid-auto-rows: unset;
 
 
    CSS
    
 
-
    #grid {
+
    #grid {
   width: 200px;
   display: grid;
   grid-template-areas: "a a";
@@ -146,6 +142,6 @@ grid-auto-rows: unset;
  
  • {{cssxref("grid-auto-columns")}}
    • 
  
  • {{cssxref("grid-auto-flow")}}
    • 
  
  • {{cssxref("grid")}}
    • 
- 
  • Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite
    • 
- 
  • Tutoriel vidéo : Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)
    • 
+ 
  • Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite
    • 
+ 
  • Tutoriel vidéo : Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-column-end/index.html b/files/fr/web/css/grid-column-end/index.html
index 0faefe81c5..d001f397c9 100644
--- a/files/fr/web/css/grid-column-end/index.html
+++ b/files/fr/web/css/grid-column-end/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column-end
 
 
    {{EmbedInteractiveExample("pages/css/grid-column-end.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeur avec un mot-clé */
@@ -45,7 +43,7 @@ grid-column-end: unset;
  
    Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut 1 s'il n'y a pas d'autres contraintes.
    
  
    <custom-ident>
    
  
    S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante..
- 
    Note : Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, grid-column-end: foo; permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec foo-end).
    
+ 
    Note : Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, grid-column-end: foo; permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec foo-end).
    
 
  
    Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <custom-ident> (cf. définition suivante).
    
  
    
@@ -98,8 +96,7 @@ grid-column-end: unset;
 }
 
    
 
-
 
 
    {{EmbedLiveSample('Exemples', '230', '420')}}
    
 
@@ -159,6 +155,6 @@ grid-column-end: unset;
  
  • {{cssxref("grid-row-start")}}
    • 
  
  • {{cssxref("grid-row-end")}}
    • 
  
  • {{cssxref("grid-row")}}
    • 
- 
  • Guide : le placement sur les lignes d'une grille
    • 
- 
  • Tutoriel vidéo : le placement sur les lignes (en anglais)
    • 
+ 
  • Guide : le placement sur les lignes d'une grille
    • 
+ 
  • Tutoriel vidéo : le placement sur les lignes (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-column-start/index.html b/files/fr/web/css/grid-column-start/index.html
index 4687f88a42..a836b66012 100644
--- a/files/fr/web/css/grid-column-start/index.html
+++ b/files/fr/web/css/grid-column-start/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column-start
 
 
    {{EmbedInteractiveExample("pages/css/grid-column-start.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeur avec un mot-clé */
@@ -55,7 +53,7 @@ grid-column-start: unset;
  
    Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
    
  
    <custom-ident>
    
  
    S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
- 
    Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-column-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).
    
+ 
    Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-column-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).
    
 
  
    Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.
    
  
    
@@ -110,8 +108,7 @@ grid-column-start: unset;
 }
 
    
 
-
 
 
    {{EmbedLiveSample('Exemples', '230', '420')}}
    
 
@@ -171,6 +167,6 @@ grid-column-start: unset;
  
  • {{cssxref("grid-row-start")}}
    • 
  
  • {{cssxref("grid-row-end")}}
    • 
  
  • {{cssxref("grid-row")}}
    • 
- 
  • Guide : le placement sur les lignes d'une grille
    • 
- 
  • Tutoriel vidéo : le placement sur les lignes (en anglais)
    • 
+ 
  • Guide : le placement sur les lignes d'une grille
    • 
+ 
  • Tutoriel vidéo : le placement sur les lignes (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-column/index.html b/files/fr/web/css/grid-column/index.html
index ec99cb6e15..f66d2c735d 100644
--- a/files/fr/web/css/grid-column/index.html
+++ b/files/fr/web/css/grid-column/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-column
 
 
    {{EmbedInteractiveExample("pages/css/grid-column.html")}}
    
 
-
-
 
    Si deux valeurs <grid-line> sont utilisées pour la propriété, la valeur de grid-column-start sera définie avec la première valeur avant la barre oblique et la valeur de grid-column-end sera définie avec celle qui est située après la barre oblique.
    
 
 
    Syntaxe
    
@@ -64,7 +62,7 @@ grid-column: unset;
  
    Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
    
  
    <custom-ident>
    
  
    S'il existe une ligne nommée avec '<custom-ident>-start'/'<custom-ident>-end', la première colonne correspondante contribue au placement de l'élément sur la grille.
- 
    Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-column-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne foo-start/foo-end a été explicitement déclarée).
    
+ 
    Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-column-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne foo-start/foo-end a été explicitement déclarée).
    
 
  
    Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.
    
  
    
@@ -90,7 +88,7 @@ grid-column: unset;
 
 
    CSS
    
 
-
    #grid {
+
    #grid {
   display: grid;
   height: 100px;
   grid-template-columns: repeat(6, 1fr);
@@ -160,6 +158,6 @@ grid-column: unset;
  
  • {{cssxref("grid-row-end")}}
    • 
  
  • {{cssxref("grid-column-start")}}
    • 
  
  • {{cssxref("grid-column-end")}}
    • 
- 
  • Guide : le placement sur les lignes d'une grille CSS
    • 
- 
  • Tutoriel vidéo : le placement sur les lignes (en anglais)
    • 
+ 
  • Guide : le placement sur les lignes d'une grille CSS
    • 
+ 
  • Tutoriel vidéo : le placement sur les lignes (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-row-end/index.html b/files/fr/web/css/grid-row-end/index.html
index 18fafbffc8..5902383d70 100644
--- a/files/fr/web/css/grid-row-end/index.html
+++ b/files/fr/web/css/grid-row-end/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-row-end
 
 
    {{EmbedInteractiveExample("pages/css/grid-row-end.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs avec un mot-clé */
@@ -45,7 +43,7 @@ grid-row-end: unset;
  
    Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut 1 s'il n'y a pas d'autres contraintes.
    
  
    <custom-ident>
    
  
    S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante..
- 
    Note : Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, grid-row-end: foo; permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec foo-end).
    
+ 
    Note : Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, grid-row-end: foo; permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec foo-end).
    
 
  
    Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <custom-ident> (cf. définition suivante).
    
 
@@ -98,8 +96,7 @@ grid-row-end: unset;
 }
 
    
 
-
 
 
    {{EmbedLiveSample('Exemples', '230', '420')}}
    
 
@@ -159,6 +155,6 @@ grid-row-end: unset;
  
  • {{cssxref("grid-column-start")}}
    • 
  
  • {{cssxref("grid-column-end")}}
    • 
  
  • {{cssxref("grid-column")}}
    • 
- 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
- 
  • Tutoriel vidéo : le placement des éléments d'une grille sur les lignes (en anglais)
    • 
+ 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
+ 
  • Tutoriel vidéo : le placement des éléments d'une grille sur les lignes (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-row-start/index.html b/files/fr/web/css/grid-row-start/index.html
index 0e3cf54e05..f39fc139e1 100644
--- a/files/fr/web/css/grid-row-start/index.html
+++ b/files/fr/web/css/grid-row-start/index.html
@@ -11,9 +11,7 @@ translation_of: Web/CSS/grid-row-start
 
 
    La propriété grid-row-start définit le début de la position, sur une ligne, d'un élément placé sur la grille qui participe à une ligne, à un fragment de ligne ou rien (automatique). Par conséquent, cela définit également le début de la zone de la grille pour cet élément.
    
 
-
    {{EmbedInteractiveExample("pages/css/grid-row-start.html")}}
    
-
-
+
    {{EmbedInteractiveExample("pages/css/grid-row-start.html")}}
    Syntaxe
 
@@ -55,7 +53,7 @@ grid-row-start: unset;
  
    Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
    
  
    <custom-ident>
    
  
    S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
- 
    Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-row-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).
    
+ 
    Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-row-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).
    
 
  
    Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.
    
  
    
@@ -110,8 +108,7 @@ grid-row-start: unset;
 }
 
    
 
-
 
 
    {{ EmbedLiveSample('Exemples', '230', '420') }}
    
 
@@ -171,6 +167,6 @@ grid-row-start: unset;
  
  • {{cssxref("grid-column-start")}}
    • 
  
  • {{cssxref("grid-column-end")}}
    • 
  
  • {{cssxref("grid-column")}}
    • 
- 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
- 
  • Tutoriel vidéo : le placement des éléments d'une grille sur les lignes (en anglais)
    • 
+ 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
+ 
  • Tutoriel vidéo : le placement des éléments d'une grille sur les lignes (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-row/index.html b/files/fr/web/css/grid-row/index.html
index 09bdf58085..f4c5b0b205 100644
--- a/files/fr/web/css/grid-row/index.html
+++ b/files/fr/web/css/grid-row/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-row
 
 
    {{EmbedInteractiveExample("pages/css/grid-row.html")}}
    
 
-
-
 
    Si deux valeurs <grid-line> sont utilisées pour la propriété, la valeur de grid-row-start sera définie avec la première valeur avant la barre oblique et la valeur de grid-row-end sera définie avec celle qui est située après la barre oblique.
    
 
 
    Syntaxe
    
@@ -52,7 +50,7 @@ grid-row: unset;
  
    Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
    
  
    <custom-ident>
    
  
    S'il existe une ligne nommée avec '<custom-ident>-start'/'<custom-ident>-end', la première ligne correspondante contribue au placement de l'élément sur la grille.
- 
    Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-row-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start/foo-end a été explicitement déclarée).
    
+ 
    Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-row-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start/foo-end a été explicitement déclarée).
    
 
  
    Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.
    
  
    
@@ -78,7 +76,7 @@ grid-row: unset;
 
 
    CSS
    
 
-
    #grid {
+
    #grid {
   display: grid;
   height: 200px;
   grid-template-columns: 200px;
@@ -145,6 +143,6 @@ grid-row: unset;
  
  • {{cssxref("grid-column")}}
    • 
  
  • {{cssxref("grid-column-start")}}
    • 
  
  • {{cssxref("grid-column-end")}}
    • 
- 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
- 
  • Tutoriel vidéo : le placement des éléments d'une grille sur les lignes (en anglais)
    • 
+ 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
+ 
  • Tutoriel vidéo : le placement des éléments d'une grille sur les lignes (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-template-areas/index.html b/files/fr/web/css/grid-template-areas/index.html
index 458b89d1eb..f773ecdb67 100644
--- a/files/fr/web/css/grid-template-areas/index.html
+++ b/files/fr/web/css/grid-template-areas/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-areas
 
 
    {{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
    
 
-
-
 
    Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} et les méthodes de raccourci correspondantes {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.
    
 
 
    Syntaxe
    
@@ -60,7 +58,7 @@ grid-template-areas: unset;
 
 
    CSS
    
 
-
    #page {
+
    #page {
   display: grid;
   width: 100%;
   height: 250px;
diff --git a/files/fr/web/css/grid-template-columns/index.html b/files/fr/web/css/grid-template-columns/index.html
index 74a3f4baf9..6900f77183 100644
--- a/files/fr/web/css/grid-template-columns/index.html
+++ b/files/fr/web/css/grid-template-columns/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-columns
 
 
    {{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeur avec un mot-clé */
@@ -57,20 +55,18 @@ grid-template-columns: unset;
  
    Une dimension positive dont l'unité fr indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <flex> occupera une partie de l'espace restant en fonction de ce facteur.
  
    Lorsque cette valeur apparaît en dehors de la notation minmax(), la valeur minimale auto est implicite (la valeur signifie minmax(auto, <flex>)). Voir {{cssxref("<flex>")}}.
    
  
    
- 
    max-content
    
+ 
    max-content
    
  
    Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
    
  
    min-content
    
  
    Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.
    
- 
    {{cssxref("minmax","minmax(min, max)")}}
    
+ 
    {{cssxref("minmax()","minmax(min, max)")}}
    
  
    Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.
    
- 
    auto
    
- 
    Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
    
- 
    
- 
    Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
    
+ 
    auto
    
+ 
    Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. 
    Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
    
  
    
- 
    {{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
    
+ 
    {{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
    
  
    Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée comme pour auto (i.e. minmax(auto, max-content)) sauf que la taille de la piste est ramenée à argument si elle est plus grande que le minimum fourni par auto.
    
- 
    {{cssxref("repeat","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}
    
+ 
    {{cssxref("repeat()","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}
    
  
    Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.
    
 
 
@@ -138,6 +134,6 @@ grid-template-columns: unset;
  
  • {{cssxref("grid-template-rows")}}
    • 
  
  • {{cssxref("grid-template-areas")}}
    • 
  
  • {{cssxref("grid-template")}}
    • 
- 
  • Guide : les concepts de base pour les grilles CSS : les pistes
    • 
- 
  • Tutoriel vidéo : définir une grille (en anglais)
    • 
+ 
  • Guide : les concepts de base pour les grilles CSS : les pistes
    • 
+ 
  • Tutoriel vidéo : définir une grille (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-template-rows/index.html b/files/fr/web/css/grid-template-rows/index.html
index 6bbcfb190b..7fd43b2d89 100644
--- a/files/fr/web/css/grid-template-rows/index.html
+++ b/files/fr/web/css/grid-template-rows/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/grid-template-rows
 
 
    {{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeur avec un mot-clé */
@@ -65,16 +63,14 @@ grid-template-rows: unset;
  
    Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
    
  
    min-content
    
  
    Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.
    
- 
    {{cssxref("minmax", "minmax(min, max)")}}
    
+ 
    {{cssxref("minmax()", "minmax(min, max)")}}
    
  
    Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.
    
  
    auto
    
- 
    Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
    
- 
    
- 
    Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
    
+ 
    Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. 
    Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
    
  
    
  
    {{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
    
  
    Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée comme pour auto (i.e. minmax(auto, max-content)) sauf que la taille de la piste est ramenée à argument si elle est plus grande que le minimum fourni par auto.
    
- 
    {{cssxref("repeat","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}
    
+ 
    {{cssxref("repeat()","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}
    
  
    Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.
    
 
 
@@ -142,6 +138,6 @@ grid-template-rows: unset;
  
  • {{cssxref("grid-template-columns")}}
    • 
  
  • {{cssxref("grid-template-areas")}}
    • 
  
  • {{cssxref("grid-template")}}
    • 
- 
  • Guide : les concepts de base pour les grilles CSS : les pistes
    • 
- 
  • Tutoriel vidéo : définir une grille (en anglais)
    • 
+ 
  • Guide : les concepts de base pour les grilles CSS : les pistes
    • 
+ 
  • Tutoriel vidéo : définir une grille (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid-template/index.html b/files/fr/web/css/grid-template/index.html
index 35e1f80d53..55dceb4931 100644
--- a/files/fr/web/css/grid-template/index.html
+++ b/files/fr/web/css/grid-template/index.html
@@ -9,12 +9,10 @@ translation_of: Web/CSS/grid-template
 ---
 
    {{CSSRef}}
    
 
-
    La propriété grid-template est une propriété raccourcie permettant de définir les colonnes, grilles et zones d'une grille.
    
+
    La propriété grid-template est une propriété raccourcie permettant de définir les colonnes, grilles et zones d'une grille.
    
 
 
    {{EmbedInteractiveExample("pages/css/grid-template.html")}}
    
 
-
-
 
    Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.
    
 
 
    Syntaxe
    
@@ -52,11 +50,11 @@ grid-template: unset;
  
    Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur none.
    
  
    [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?
    
  
    {{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (auto sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou none sinon).
- 
    Note : La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).
    
+ 
    Note : La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).
    
  
    
 
 
-
    Note : La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser grid (plutôt que grid-template) pour empêcher les valeurs de suivre la cascade de façon séparée.
    
+
    Note : La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser grid (plutôt que grid-template) pour empêcher les valeurs de suivre la cascade de façon séparée.
    
 
 
    Syntaxe formelle
    
 
@@ -66,7 +64,7 @@ grid-template: unset;
 
 
    CSS
    
 
-
    #page {
+
    #page {
   display: grid;
   width: 100%;
   height: 200px;
@@ -140,7 +138,7 @@ footer {
  
  • {{cssxref("grid-template-rows")}}
    • 
  
  • {{cssxref("grid-template-areas")}}
    • 
  
  • {{cssxref("grid-template-columns")}}
    • 
- 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
- 
  • Guide : Les zones de grilles et les propriétés raccourcies
    • 
- 
  • Tutoriel vidéo : les propriétés raccourcies pour les zones de grille (en anglais)
    • 
+ 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
+ 
  • Guide : Les zones de grilles et les propriétés raccourcies
    • 
+ 
  • Tutoriel vidéo : les propriétés raccourcies pour les zones de grille (en anglais)
    • 
 
diff --git a/files/fr/web/css/grid/index.html b/files/fr/web/css/grid/index.html
index 0f46a23e6f..721ff66aa8 100644
--- a/files/fr/web/css/grid/index.html
+++ b/files/fr/web/css/grid/index.html
@@ -13,9 +13,9 @@ translation_of: Web/CSS/grid
 
 
    {{EmbedInteractiveExample("pages/css/grid.html")}}
    
 
-
-
-
    Note : Une seule déclaration grid permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.
    
+
    
+  
    Note : Une seule déclaration grid permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.
    
+
    
 
 
    Syntaxe
    
 
@@ -133,6 +133,6 @@ grid: unset;
    
  
  • {{cssxref("grid-auto-columns")}}
    • 
  
  • {{cssxref("grid-auto-rows")}}
    • 
  
  • {{cssxref("grid-auto-flow")}}
    • 
- 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
- 
  • Guide : Les zones de grilles et les propriétés raccourcies
    • 
+ 
  • Guide : Placer les éléments d'une grille sur les lignes
    • 
+ 
  • Guide : Les zones de grilles et les propriétés raccourcies
    • 
 
diff --git a/files/fr/web/css/height/index.html b/files/fr/web/css/height/index.html
index a2f98e01bf..e1e0f46885 100644
--- a/files/fr/web/css/height/index.html
+++ b/files/fr/web/css/height/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/height
 
 
    {{EmbedInteractiveExample("pages/css/height.html")}}
    
 
-
-
 
    Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété height.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/hyphens/index.html b/files/fr/web/css/hyphens/index.html
index ef07f6262a..3dbfafaf66 100644
--- a/files/fr/web/css/hyphens/index.html
+++ b/files/fr/web/css/hyphens/index.html
@@ -13,11 +13,11 @@ translation_of: Web/CSS/hyphens
 
 
    {{EmbedInteractiveExample("pages/css/hyphens.html")}}
    
 
-
+
    Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut lang et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut xml:lang.
    
 
-
    Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut lang et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut xml:lang.
    
-
-
    Note : Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.
    
+
    
+  
    Note : Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.
    
+
    
 
 
    Syntaxe
    
 
@@ -43,7 +43,9 @@ hyphens: unset;
  
    Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.
    
 
 
-
    Note : Le comportement défini par auto dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML lang pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.
    
+
    
+  
    Note : Le comportement défini par auto dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML lang pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.
    
+
    
 
 
    Syntaxe formelle
    
 
@@ -103,9 +105,7 @@ p.auto {
 
 
    Résultat
    
 
-
    
 
    {{EmbedLiveSample("Exemples", "100%", "490'")}}
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/image-orientation/index.html b/files/fr/web/css/image-orientation/index.html
index ae0c2f2f3d..1e5b7e4b90 100644
--- a/files/fr/web/css/image-orientation/index.html
+++ b/files/fr/web/css/image-orientation/index.html
@@ -13,7 +13,7 @@ translation_of: Web/CSS/image-orientation
 
    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.
    
 
 
    
-
    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).
    
+
    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).
    
 
    
 
 
    /* Valeurs d'angle */
@@ -72,10 +72,7 @@ image-orientation: unset;
 }
 
    
 
-
 
 
    Résultat
    
 
diff --git a/files/fr/web/css/image-rendering/index.html b/files/fr/web/css/image-rendering/index.html
index 2fc2cf426d..d0aef4a32e 100644
--- a/files/fr/web/css/image-rendering/index.html
+++ b/files/fr/web/css/image-rendering/index.html
@@ -41,7 +41,9 @@ image-rendering: unset;
  
    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.
    
 
 
-
    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.
    
+
    
+  
    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
    
 
@@ -91,7 +93,7 @@ image-rendering: unset;
 
 
    {{EmbedLiveSample("Exemples","100%","100%")}}
    
 
-
    
+
    
 
    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 via la manipulation manuelle des données de l'image ou avec imageSmoothingEnabled.
    
 
    
 
diff --git a/files/fr/web/css/image/index.html b/files/fr/web/css/image/index.html
index f588bebb67..ae7382c629 100644
--- a/files/fr/web/css/image/index.html
+++ b/files/fr/web/css/image/index.html
@@ -10,7 +10,7 @@ translation_of: Web/CSS/image
 ---
 
    {{CSSRef}}
    
 
-
    Le type de donnée CSS <image> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("<url>")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("<gradient>")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade")}}.
    
+
    Le type de donnée CSS <image> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("<url>")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("<gradient>")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element()")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade()")}}.
    
 
 
    Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} et {{cssxref("cursor")}}.
    
 
@@ -64,7 +64,7 @@ translation_of: Web/CSS/image
    ?
   
   
-   {{cssxref("symbols")}} pour @counter-style
+   {{cssxref("symbols()")}} pour @counter-style
    Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système.
   
   
@@ -84,7 +84,9 @@ translation_of: Web/CSS/image
 
 
    Les images peuvent être utilisées pour de nombreuses propriétés CSS comme {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} ou {{cssxref("cursor")}}.
    
 
-
    Note : tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section compatibilité des navigateurs pour une liste explicative.
    
+
    
+  
    Note : tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section compatibilité des navigateurs pour une liste explicative.
    
+
    
 
 
    Syntaxe
    
 
@@ -93,7 +95,7 @@ translation_of: Web/CSS/image
 
      
  
    • une image dénotée par le type de donnée CSS {{cssxref("<url>")}} et la fonction url() ;
      • 
  
    • une valeur CSS {{cssxref("<gradient>")}} (représentant un dégradé) ;
      • 
- 
    • une partie de la page, définie par la fonction {{cssxref("element")}} ;
      • 
+ 
    • une partie de la page, définie par la fonction {{cssxref("element()")}} ;
      • 
  
    • une image, un fragment d'image ou une couleur définie grâce à la fonction {{cssxref("image()")}} ;
      • 
  
    • une fusion de deux ou plusieurs images avec la fonction {{cssxref("cross-face")}}
      • 
  
    • une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction {{cssxref("image-set()")}}.
      • 
@@ -108,7 +110,7 @@ linear-gradient(blue, red) /* Un dégradé (<gradient>) */
 element(#colonne3)         /* Utilisation d'un élément de la page via la fonction element(),
                               si colonne3 est bien un identifiant CSS existant. */
 image(ltr 'arrow.png#xywh=0,0,16,16', red)
-                           /* Une section de 16x16 pixels de l'image arrow.png et qui démarre au coin
+                           /* Une section de 16x16 pixels de l'image arrow.png et qui démarre au coin
                               supérieur gauche de l'image et qui sera utilisée si arrow.png est à un
                               format pris en charge. Sinon, ce sera un fond rouge qui sera utilisé.
                               Si la langue est écrite de gauche à droite, l'image sera inversée
@@ -180,8 +182,8 @@ image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image doit avoir une résolut
    
    • {{cssxref("conic-gradient")}}
      • 
   
    
  
- 
  • {{cssxref("element")}}
    • 
+ 
  • {{cssxref("element()")}}
    • 
  
  • {{CSSxRef("imagefunction", "image()")}}
    • 
  
  • {{cssxref("image-set()")}}
    • 
- 
  • {{CSSxRef("cross-fade")}}
    • 
+ 
  • {{CSSxRef("cross-fade()")}}
    • 
 
diff --git a/files/fr/web/css/index.html b/files/fr/web/css/index.html
index fedb551fe9..17efcc84ae 100644
--- a/files/fr/web/css/index.html
+++ b/files/fr/web/css/index.html
@@ -12,38 +12,26 @@ translation_of: Web/CSS
 ---
 
    {{CSSRef}}
    
 
-
    
-
-
    
+
    CSS est l'un des langages principaux du Web ouvert et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits, est en voie de standardisation.
    
 
-
    CSS est l'un des langages principaux du Web ouvert et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits, est en voie de standardisation.
    
+
    Ressources principales
    
 
-
    
-
      
- 
    • Introduction à CSS
+
      
+ 
      Introduction à CSS
      
+ 
      Si vous débutez en développement web, n'hésitez pas à consulter l'article les bases de CSS pour découvrir CSS, ce que c'est et comment l'utiliser.
      
+ 
      Tutoriels CSS
      
+ 
      Notre section Apprendre le Web - CSS contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.
      
+ 
      La référence CSS
      
+ 
      Une référence exhaustive destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.
      
+
      
 
-  
      Si vous débutez en développement web, n'hésitez pas à consulter l'article les bases de CSS pour découvrir CSS, ce que c'est et comment l'utiliser.
      
- 
      • 
- 
    • Tutoriels CSS
-  
      Notre section Apprendre le Web - CSS contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.
      
- 
      • 
- 
    • La référence CSS
-  
      Une référence exhaustive destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.
      
- 
      • 
-
    
 
-
    
-
    
-
    Tutoriels
    
+
    Tutoriels
    
 
-
    La section Apprendre le Web fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.
    
+
    La section Apprendre le Web fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.
    
 
 
    
- 
    Introduction à CSS
    
+ 
    Introduction à CSS
    
  
    Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.
    
  
    Mettre en forme le texte
    
  
    Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.
    
@@ -52,10 +40,8 @@ translation_of: Web/CSS
  
    La disposition en CSS
    
  
    Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (viewport). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (flexbox).
    
 
    
-
    
 
-
    
-
    Références
    
+
    Références
    
 
 
    
  
    La référence CSS
    
@@ -63,42 +49,39 @@ translation_of: Web/CSS
  
    Les concepts majeurs de CSS
    
  
    Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment :
  
  
    
 
    
 
-
    Livre de recettes
    
+
    Livre de recettes
    
 
 
    Le livre de recettes de disposition CSS contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.
    
 
-
    Outils de développement pour CSS
    
+
    Outils de développement pour CSS
    
 
 
-
    
-
    
-
    
 
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/inline-size/index.html b/files/fr/web/css/inline-size/index.html
index 6aec033a54..074f18db37 100644
--- a/files/fr/web/css/inline-size/index.html
+++ b/files/fr/web/css/inline-size/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/inline-size
 
 
    {{EmbedInteractiveExample("pages/css/inline-size.html")}}
    
 
-
-
 
    Cette propriété est à rapprocher de {{cssxref("block-size")}} qui définit l'autre dimension de l'élément.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/inline_formatting_context/index.html b/files/fr/web/css/inline_formatting_context/index.html
index 80c8ddf694..d03ca3d9dc 100644
--- a/files/fr/web/css/inline_formatting_context/index.html
+++ b/files/fr/web/css/inline_formatting_context/index.html
@@ -34,8 +34,8 @@ original_slug: Web/CSS/Contexte_de_formatage_en_ligne
 
 
    {{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}
    
 
-
    
-
    Note : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir les propriétés et les valeurs logiques en CSS.
    
+
    
+
    Note : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir les propriétés et les valeurs logiques en CSS.
    
 
    
 
 
    Alignement sur la direction de bloc (block)
    
diff --git a/files/fr/web/css/integer/index.html b/files/fr/web/css/integer/index.html
index 5672a7aa12..c0fe723597 100644
--- a/files/fr/web/css/integer/index.html
+++ b/files/fr/web/css/integer/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/integer
 ---
 
    {{CSSRef}}
    
 
-
    Le type de donnée CSS <integer> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat")}}. Ce type est un sous-type de {{cssxref("number")}}.
    
+
    Le type de donnée CSS <integer> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat()")}}. Ce type est un sous-type de {{cssxref("number")}}.
    
 
 
    Syntaxe
    
 
@@ -17,11 +17,13 @@ translation_of: Web/CSS/integer
 
 
    Toutes les valeurs de type <integer> sont également des valeurs de type {{cssxref("<number>")}}, bien que l'inverse ne soit pas vrai.
    
 
-
    Note : Il n'y a pas de bornes à l'ensemble des valeurs de type <entier> valides. Opera supporte des valeurs jusqu'à 215-1, IE jusqu'à 220-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-227-1; 227-1] # mais d'autres valeurs comme 224-1 et 230-1 ont aussi été proposées # #. Le dernier brouillon ne fait plus apparaître de limite.
    
+
    
+  
    Note : Il n'y a pas de bornes à l'ensemble des valeurs de type <entier> valides. Opera supporte des valeurs jusqu'à 2^15-1, IE jusqu'à 2^20-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2^27-1; 2^27-1] # mais d'autres valeurs comme 2^24-1 et 2^30-1 ont aussi été proposées # #. Le dernier brouillon ne fait plus apparaître de limite.
    
+
    
 
 
    Interpolation
    
 
-
    Les valeurs du type <entier> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction partie entière. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation")}} associée à l'animation.
    
+
    Les valeurs du type <entier> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction partie entière. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation")}} associée à l'animation.
    
 
 
    Exemples
    
 
diff --git a/files/fr/web/css/isolation/index.html b/files/fr/web/css/isolation/index.html
index 7639e5e597..3805c54c08 100644
--- a/files/fr/web/css/isolation/index.html
+++ b/files/fr/web/css/isolation/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/isolation
 
 
    {{EmbedInteractiveExample("pages/css/isolation.html")}}
    
 
-
-
 
    Cette propriété s'avère particulièrement utile avec {{cssxref("mix-blend-mode")}} afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/justify-content/index.html b/files/fr/web/css/justify-content/index.html
index 64f81cec98..548aba3f62 100644
--- a/files/fr/web/css/justify-content/index.html
+++ b/files/fr/web/css/justify-content/index.html
@@ -16,13 +16,11 @@ translation_of: Web/CSS/justify-content
 
 
    {{EmbedInteractiveExample("pages/css/justify-content.html")}}
    
 
-
-
 
    L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de 0, justify-content n'aura aucun effet car il n'y aura plus d'espace disponible.
    
 
 
    Syntaxe
    
 
-
    /* Alignement « géométrique » */
+
    /* Alignement « géométrique » */
 justify-content: center;     /* Éléments groupés au centre */
 justify-content: start;      /* Éléments groupés au début */
 justify-content: end;        /* Éléments groupés à la fin */
@@ -108,7 +106,7 @@ justify-content: unset;
 
 
    CSS
    
 
-
    #container {
+
    #container {
   display: flex;
   /* Cette valeur peut être changée dans l'exemple */
   justify-content: space-between;
@@ -121,10 +119,7 @@ justify-content: unset;
 }
 
    
 
-
 
 
    Résultat
    
 
diff --git a/files/fr/web/css/justify-items/index.html b/files/fr/web/css/justify-items/index.html
index a5787ac362..419349d270 100644
--- a/files/fr/web/css/justify-items/index.html
+++ b/files/fr/web/css/justify-items/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/justify-items
 
 
    {{EmbedInteractiveExample("pages/css/justify-items.html")}}
    
 
-
-
 
    L'effet de cette propriété sera différent selon le type de disposition utilisé :
    
 
 
      
@@ -135,9 +133,7 @@ justify-items: unset;
 
 
      CSS
      
 
-
      
-
 
 
      .wrapper {
   display: grid;
@@ -196,7 +191,6 @@ justify-items: unset;
 
      Résultat
      
 
 
      {{EmbedLiveSample('Exemples', '500', '500')}}
      
-
      
 
 
      Spécifications
      
 
diff --git a/files/fr/web/css/justify-self/index.html b/files/fr/web/css/justify-self/index.html
index cba1779578..7537fad71c 100644
--- a/files/fr/web/css/justify-self/index.html
+++ b/files/fr/web/css/justify-self/index.html
@@ -11,9 +11,7 @@ translation_of: Web/CSS/justify-self
 
 
      La propriété CSS justify-self définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.
      
 
-
      {{EmbedInteractiveExample("pages/css/justify-self.html")}}
      
-
-
+
      {{EmbedInteractiveExample("pages/css/justify-self.html")}}
      L'effet de cette propriété varie selon le mode de disposition utilisé :
      
 
@@ -127,9 +125,7 @@ justify-self: unset;
 
 
      CSS
      
 
-
      
-
 
 
      .wrapper {
   display: grid;
@@ -177,7 +172,6 @@ justify-self: unset;
 
      Résultat
      
 
 
      {{EmbedLiveSample('Exemples', '300', '300')}}
      
-
      
 
 
      Spécifications
      
 
diff --git a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html
index 1be4399050..395d6d0e69 100644
--- a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html
+++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -9,9 +9,9 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb
 ---
 
      {{CSSRef}}
      
 
-
      La navigation avec un fil d'Ariane (breadcrumb) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.
      
+
      La navigation avec un fil d'Ariane (breadcrumb) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.
      
 
-
      Links displayed inline with separators
      
+
      Links displayed inline with separators
      
 
 
      Spécifications sommaires
      
 
@@ -39,7 +39,7 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb
 
 
      {{Compat("css.properties.flex")}}
      
 
-
      Voir aussi
      
+
      Voir aussi
      
 
 
        
  
      • Les boîtes flexibles CSS
        • 
diff --git a/files/fr/web/css/layout_cookbook/card/index.html b/files/fr/web/css/layout_cookbook/card/index.html
index a0a498245b..7e92b24421 100644
--- a/files/fr/web/css/layout_cookbook/card/index.html
+++ b/files/fr/web/css/layout_cookbook/card/index.html
@@ -11,9 +11,9 @@ original_slug: Web/CSS/Layout_cookbook/Carte
 ---
 
        {{CSSRef}}
        
 
-
        Dans ce guide, nous verrons comment créer des cartes (cards en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.
        
+
        Dans ce guide, nous verrons comment créer des cartes (cards en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.
        
 
-
        Three card components in a row
        
+
        Three card components in a row
        
 
 
        Spécifications sommaires
        
 
@@ -45,16 +45,16 @@ original_slug: Web/CSS/Layout_cookbook/Carte
 
        Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.
        
 
 
        
-
        Note : Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (subgrid), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.
        
+
        Note : Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (subgrid), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.
        
 
        
 
 
        Méthodes alternatives
        
 
 
        On pourrait également utiliser les boîtes flexibles pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.
        
 
-
        Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser une disposition multi-colonnes où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).
        
+
        Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser une disposition multi-colonnes où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).
        
 
-
        Voir la recette sur les colonnes pour observer ces méthodes en action.
        
+
        Voir la recette sur les colonnes pour observer ces méthodes en action.
        
 
 
        Accessibilité
        
 
@@ -72,9 +72,9 @@ original_slug: Web/CSS/Layout_cookbook/Carte
 
 
        {{Compat("css.properties.grid-template-rows")}}
        
 
-
        Voir aussi
        
+
        Voir aussi
        
 
 
          
- 
        • {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}
          • 
+ 
        • {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}}
          • 
  
        • Inclusive Components: Card (en anglais)
          • 
 
        
diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.html b/files/fr/web/css/layout_cookbook/center_an_element/index.html
index 22e0f3458c..713d277510 100644
--- a/files/fr/web/css/layout_cookbook/center_an_element/index.html
+++ b/files/fr/web/css/layout_cookbook/center_an_element/index.html
@@ -13,9 +13,9 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element
 ---
 
        {{CSSRef}}
        
 
-
        Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.
        
+
        Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.
        
 
-
        an element centered inside a larger box
        
+
        an element centered inside a larger box
        
 
 
        Spécifications sommaires
        
 
@@ -26,7 +26,7 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element
 
        {{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
        
 
 
        
-
        Note : Télécharger cet exemple
        
+
        Note : Télécharger cet exemple
        
 
        
 
 
        Choix effectués
        
@@ -53,6 +53,6 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element
 
        Voir aussi
        
 
 
diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.html b/files/fr/web/css/layout_cookbook/column_layouts/index.html
index d0490947ff..8dfa422ffd 100644
--- a/files/fr/web/css/layout_cookbook/column_layouts/index.html
+++ b/files/fr/web/css/layout_cookbook/column_layouts/index.html
@@ -12,9 +12,9 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 ---
 
        {{CSSRef}}
        
 
-
        Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.
        
+
        Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.
        
 
-
        three different styles of layouts which have two columns in the container.
        
+
        three different styles of layouts which have two columns in the container.
        
 
 
        Prérequis
        
 
@@ -39,7 +39,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 
        {{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}
        
 
 
        
-
        Note : Télécharger cet exemple
        
+
        Note : Télécharger cet exemple
        
 
        
 
 
        On utilisera une disposition multi-colonnes lorsque :
        
@@ -59,7 +59,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 
        {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}
        
 
 
        
-
        Note : Télécharger cet exemple
        
+
        Note : Télécharger cet exemple
        
 
        
 
 
        Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur wrap sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.
        
@@ -67,7 +67,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 
        {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}
        
 
 
        
-
        Note : Télécharger cet exemple
        
+
        Note : Télécharger cet exemple
        
 
        
 
 
        On utilisera les boîtes flexibles pour :
        
@@ -85,7 +85,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 
        {{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}
        
 
 
        
-
        Note : Télécharger cet exemple
        
+
        Note : Télécharger cet exemple
        
 
        
 
 
        On utiliser les grilles CSS lorsque :
        
@@ -122,7 +122,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 
        Voir aussi
        
 
 
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
index 846b912106..ac5e39c3e9 100644
--- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
+++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
@@ -9,10 +9,12 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa
 ---
 
        {{CSSRef}}
        
 
-
        Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.
        
-Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.
        
+
        
+  
        Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.
        
+  
        Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.
+
        
 
-
        Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.
        
+
        Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.
        
 
 
        Spécifications sommaires
        
 
@@ -27,7 +29,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa
 
        Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.
        
 
 
        
-
        Note : Télécharger cet exemple.
        
+
        Note : Télécharger cet exemple.
        
 
        
 
 
        Choix effectués
        
@@ -52,7 +54,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa
 
 
        {{Compat("css.properties.align-items")}}
        
 
-
        Voir aussi
        
+
        Voir aussi
        
 
 
          
  
        • Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}
          • 
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html
index 03a3396acc..e5a16b419a 100644
--- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html
+++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html
@@ -11,14 +11,14 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
 ---
 
          {{CSSRef}}
          
 
-
          Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.
          
+
          Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.
          
 
 
          Qu'est-ce qu'une « bonne » recette ?
          
 
 
          Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web. Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.
          
 
 
          
-
          Note quant à la traduction et aux recettes en anglais : Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.
          
+
          Note : Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.
          
 
          
 
 
          Les étapes pour la publication
          
@@ -63,7 +63,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
 
 
          Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  playable-css.
          
 
-
          Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter center.html qui est utilisé sur la page Comment centrer un élément.
          
+
          Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter center.html qui est utilisé sur la page Comment centrer un élément.
          
 
 
          Si vous avez créé un fork du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.
          
 
@@ -85,12 +85,12 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
 
 
          5. Créer la page sur MDN
          
 
-
          Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et des permissions pour la création de page. Vous pourrez alors créer une page comme sous-page de la section. Cette page modèle pourra vous servir de point de départ pour votre contenu.
          
+
          Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et des permissions pour la création de page. Vous pourrez alors créer une page comme sous-page de la section. Cette page modèle pourra vous servir de point de départ pour votre contenu.
          
 
 
          Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.
          
 
 
          
-
          Note de traduction : Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter la page modèle en français.
          
+
          Note : Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter la page modèle en français.
          
 
          
 
 
          Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.
          
diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
index f28922b563..249e8fa898 100644
--- a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
+++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
 ---
 
          {{CSSRef}}
          
 
-
          Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.
          
+
          Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.
          
 
 
          Spécifications sommaires
          
 
@@ -20,14 +20,14 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
 
          {{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}
          
 
 
          
-
          Note : Télécharger cet exemple.
          
+
          Note : Télécharger cet exemple.
          
 
          
 
 
          Choix effectués
          
 
-
          Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.
          
+
          Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.
          
 
-
          Les deux colonnes extérieures ont une taille maximale de 1fr, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.
          
+
          Les deux colonnes extérieures ont une taille maximale de 1fr, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.
          
 
 
          Méthodes de recours ou alternatives
          
 
@@ -69,13 +69,11 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
 
 
          {{Compat("css.properties.grid-template-columns")}}
          
 
-
          Voir aussi
          
+
          Voir aussi
          
 
 
-
-
           
          
+
        
\ No newline at end of file
diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html
index dc96a66da3..f3debbc018 100644
--- a/files/fr/web/css/layout_cookbook/index.html
+++ b/files/fr/web/css/layout_cookbook/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/Layout_cookbook
 ---
 
        {{CSSRef}}
        
 
-
        Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.
        
+
        Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.
        
 
 
        
 
        Note : Si vous débutez en CSS, nous vous conseillons de consulter notre module sur l'apprentissage de la disposition en CSS. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.
        
diff --git a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html
index 6b76635ff1..98a8a06891 100644
--- a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html
+++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html
@@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
 ---
 
        {{CSSRef}}
        
 
-
        Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (badge).
        
+
        Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (badge).
        
 
-
        A list of items with a badge indicating a count displayed to the right of the text.
        
+
        A list of items with a badge indicating a count displayed to the right of the text.
        
 
 
        Spécifications sommaires
        
 
@@ -22,7 +22,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
 
 
        {{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}
        
 
-
        Note : Télécharger l'exemple.
        
+
        
+  
        Note : Télécharger l'exemple.
        
+
        
 
 
        Choix effectués
        
 
@@ -44,9 +46,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
 
 
        {{Compat("css.properties.align-items")}}
        
 
-
        Voir aussi
        
+
        Voir aussi
        
 
 
diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html
index 418850ee25..8c2ca3ae1e 100644
--- a/files/fr/web/css/layout_cookbook/media_objects/index.html
+++ b/files/fr/web/css/layout_cookbook/media_objects/index.html
@@ -9,9 +9,9 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects
 ---
 
        {{CSSRef}}
        
 
-
        Le motif Media Object (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. Intitulé ainsi par Nicole Sullivan, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).
        
+
        Le motif Media Object (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. Intitulé ainsi par Nicole Sullivan, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).
        
 
-
        
+
        
 
 
        Spécifications sommaires
        
 
@@ -27,10 +27,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects
 
 
        Recette
        
 
-
        {{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}
        
+
        {{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}
        
 
 
        
-
        Note : Télécharger cet exemple.
        
+
        Note : Télécharger cet exemple.
        
 
        
 
 
        Choix effectués
        
@@ -49,10 +49,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects
 
 
        Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.
        
 
-
        {{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}
        
+
        {{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}
        
 
 
        
-
        Note : Télécharger cet exemple.
        
+
        Note : Télécharger cet exemple.
        
 
        
 
 
        Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.
        
@@ -78,8 +78,8 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects
 
 
diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html
index 506e521b49..eacc793faa 100644
--- a/files/fr/web/css/layout_cookbook/pagination/index.html
+++ b/files/fr/web/css/layout_cookbook/pagination/index.html
@@ -10,9 +10,9 @@ translation_of: Web/CSS/Layout_cookbook/Pagination
 ---
 
        {{CSSRef}}
        
 
-
        Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).
        
+
        Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).
        
 
-
        Links to sets of pages in a paged listing
        
+
        Links to sets of pages in a paged listing
        
 
 
        Spécifications sommaires
        
 
@@ -25,7 +25,7 @@ translation_of: Web/CSS/Layout_cookbook/Pagination
 
        {{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}
        
 
 
        
-
        Note : Télécharger cet exemple.
        
+
        Note : Télécharger cet exemple.
        
 
        
 
 
        Choix effectués
        
@@ -67,7 +67,7 @@ translation_of: Web/CSS/Layout_cookbook/Pagination
 
 
        {{Compat("css.properties.column-gap.flex_context")}}
        
 
-
        Voir aussi
        
+
        Voir aussi
        
 
 
diff --git a/files/fr/web/css/layout_cookbook/split_navigation/index.html b/files/fr/web/css/layout_cookbook/split_navigation/index.html
index dda4a698fd..aec75bcde2 100644
--- a/files/fr/web/css/layout_cookbook/split_navigation/index.html
+++ b/files/fr/web/css/layout_cookbook/split_navigation/index.html
@@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée
 ---
 
        {{CSSRef}}
        
 
-
        Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.
        
+
        Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.
        
 
-
        Items separated into two groups.
        
+
        Items separated into two groups.
        
 
 
        Spécifications sommaires
        
 
@@ -40,7 +40,7 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée
 
 
        {{Compat("css.properties.flex")}}
        
 
-
        Voir aussi
        
+
        Voir aussi
        
 
 
          
  
        • Le module de spécification CSS Flexible Box Layout
          • 
diff --git a/files/fr/web/css/layout_cookbook/sticky_footers/index.html b/files/fr/web/css/layout_cookbook/sticky_footers/index.html
index 683a1039a7..096d514add 100644
--- a/files/fr/web/css/layout_cookbook/sticky_footers/index.html
+++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.html
@@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
 ---
 
          {{CSSRef}}
          
 
-
          Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.
          
+
          Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.
          
 
-
          A sticky footer pushed to the bottom of a box
          
+
          A sticky footer pushed to the bottom of a box
          
 
 
          Spécifications sommaires
          
 
@@ -70,5 +70,5 @@ original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
 
          Voir aussi
          
 
 
diff --git a/files/fr/web/css/left/index.html b/files/fr/web/css/left/index.html
index 51bffd0e2e..f7a4ed2eb0 100644
--- a/files/fr/web/css/left/index.html
+++ b/files/fr/web/css/left/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/left
 
 
          {{EmbedInteractiveExample("pages/css/left.html")}}
          
 
-
-
 
          Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("position")}}: absolute ou position: fixed), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).
          
 
 
          Pour les éléments positionnés grâce à {{cssxref("position")}}: relative, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).
          
diff --git a/files/fr/web/css/length-percentage/index.html b/files/fr/web/css/length-percentage/index.html
index 6e0d8a9824..149f8bd787 100644
--- a/files/fr/web/css/length-percentage/index.html
+++ b/files/fr/web/css/length-percentage/index.html
@@ -17,9 +17,9 @@ translation_of: Web/CSS/length-percentage
 
 
          Utilisation avec calc()
          
 
-
          Lorsqu'une valeur de type <length-percentage> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :
          
+
          Lorsqu'une valeur de type <length-percentage> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc()", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :
          
 
-
          width: 200px;
+
          width: 200px;
 width: 20%;
 width: calc(100% - 200px);
 
          
diff --git a/files/fr/web/css/length/index.html b/files/fr/web/css/length/index.html
index 1927712da9..8cf016dcb5 100644
--- a/files/fr/web/css/length/index.html
+++ b/files/fr/web/css/length/index.html
@@ -39,28 +39,28 @@ translation_of: Web/CSS/length
 
          
  
          cap
          
  
          Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.
          
- 
          ch
          
+ 
          ch
          
  
          Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.
          
- 
          em
          
+ 
          em
          
  
          
  
          Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police héritée de l'élément.
          
 
  
          
- 
          Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le rythme vertical de la page, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en em.
          
+ 
          Note : Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le rythme vertical de la page, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en em.
          
  
          
  
          
- 
          ex
          
+ 
          ex
          
  
          Cette unité représente la hauteur d'x de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. 1ex ≈ 0.5em dans de nombreuses polices.
          
  
          ic
          
  
          Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.
          
  
          lh
          
  
          Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.
          
- 
          rem
          
+ 
          rem
          
  
          
  
          Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.
          
 
  
          
- 
          Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité em, mais la réalisation est un petit peu plus complexe.
          
+ 
          Note : Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité em, mais la réalisation est un petit peu plus complexe.
          
  
          
  
          
  
          rlh
          
@@ -76,15 +76,15 @@ translation_of: Web/CSS/length
 
          
  
          vb
          
  
          1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.
          
- 
          vh
          
+ 
          vh
          
  
          1/100e de la hauteur du viewport.
          
  
          vi
          
  
          1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.
          
- 
          vw
          
+ 
          vw
          
  
          1/100e de la largeur du viewport.
          
- 
          vmin
          
+ 
          vmin
          
  
          1/100e du côté le plus petit du viewport.
          
- 
          vmax
          
+ 
          vmax
          
  
          1/100e du côté le plus grand du viewport.
          
 
          
 
@@ -101,27 +101,29 @@ translation_of: Web/CSS/length
 
        
 
 
        
- 
        px
        
+ 
        px
        
  
        Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.
        
- 
        mm
        
+ 
        mm
        
  
        Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
        
  
        Q{{experimental_inline}}
        
  
        Un quart de millimètre (1/40e de centimètre).
        
- 
        cm
        
+ 
        cm
        
  
        Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
        
- 
        in
        
+ 
        in
        
  
        Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
        
- 
        pt
        
+ 
        pt
        
  
        Un point pica (soit 1/72e de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
        
- 
        pc
        
+ 
        pc
        
  
        Un pica (soit 12 points, soit 1/6e de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
        
- 
        mozmm {{non-standard_inline}}, retiré avec Firefox 59
        
+ 
        mozmm {{non-standard_inline}}, retiré avec Firefox 59
        
  
        Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.
        
 
        
 
 
        Unités CSS et points par pouce
        
 
-
        L’unité in ne représente pas un pouce physique de l’écran, mais 96px. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à 96dpi. Sur les périphériques dotés d’une plus grande densité de pixel, 1in fera moins d’1 pouce physique. De la même manière, mm, cm, et pt ne sont pas des longueurs absolues.
        
+
        
+  
        Note : L’unité in ne représente pas un pouce physique de l’écran, mais 96px. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à 96dpi. Sur les périphériques dotés d’une plus grande densité de pixel, 1in fera moins d’1 pouce physique. De la même manière, mm, cm, et pt ne sont pas des longueurs absolues.
        
+
        
 
 
        Quelques exemples particuliers :
        
 
@@ -133,7 +135,7 @@ translation_of: Web/CSS/length
 
 
        Interpolation
        
 
-
        Les valeurs du type <length> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.
        
+
        Les valeurs du type <length> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation","",1)}} associée à l'animation.
        
 
 
        Spécifications
        
 
@@ -174,7 +176,7 @@ translation_of: Web/CSS/length
 
        Voir aussi
        
 
 
diff --git a/files/fr/web/css/letter-spacing/index.html b/files/fr/web/css/letter-spacing/index.html
index 7dadd4852a..dfd70ca730 100644
--- a/files/fr/web/css/letter-spacing/index.html
+++ b/files/fr/web/css/letter-spacing/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/letter-spacing
 
 
        {{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
        
 
-
-
 
        Syntaxe
        
 
 
        /* Valeurs de longueur */
diff --git a/files/fr/web/css/line-height-step/index.html b/files/fr/web/css/line-height-step/index.html
index 2266a177ca..c13c19867d 100644
--- a/files/fr/web/css/line-height-step/index.html
+++ b/files/fr/web/css/line-height-step/index.html
@@ -23,7 +23,7 @@ line-height-step: 18pt;
 
        Valeurs
        
 
 
        
- 
        <length>
        
+ 
        <length>
        
  
        La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir {{cssxref("<length>")}} pour plus d'informations sur ce type de valeur.
        
 
        
 
@@ -33,7 +33,7 @@ line-height-step: 18pt;
 
 
        Exemples
        
 
-
        Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <h1> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).
        
+
        Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <h1> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).
        
 
 
        :root {
   font-size: 12pt;
@@ -47,7 +47,7 @@ h1 {
 
 
        Voici le résultat obtenu avec une capture d'écran :
        
 
-
        How the line-height-step property affects the appearance of text.
        
+
        How the line-height-step property affects the appearance of text.
        
 
 
        Spécifications
        
 
diff --git a/files/fr/web/css/line-height/index.html b/files/fr/web/css/line-height/index.html
index d9ba456e10..3c6f8fcb2d 100644
--- a/files/fr/web/css/line-height/index.html
+++ b/files/fr/web/css/line-height/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/line-height
 
 
        {{EmbedInteractiveExample("pages/css/line-height.html")}}
        
 
-
-
 
        Syntaxe
        
 
 
        /* Valeur avec un mot-clé */
@@ -55,13 +53,13 @@ line-height: unset;
 
        Valeurs
        
 
 
        
- 
        normal
        
+ 
        normal
        
  
        Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2  selon la valeur de font-family.
        
- 
        <number>
        
+ 
        <number>
        
  
        La valeur utilisée est sans unité (type {{cssxref("<number>")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec <number>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir line-height et éviter les effets de l'héritage.
        
- 
        <length>
        
+ 
        <length>
        
  
        La valeur de longueur (type {{cssxref("<length>")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("<length>")}}. Les valeurs exprimées en em peuvent produire des résultats inattendus.
        
- 
        <percentage>
        
+ 
        <percentage>
        
  
        La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("<percentage>")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en em.
        
  
        -moz-block-height {{non-standard_inline}}
        
  
        La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.
        
diff --git a/files/fr/web/css/list-style-position/index.html b/files/fr/web/css/list-style-position/index.html
index ba14939fd8..7b25c5bcc1 100644
--- a/files/fr/web/css/list-style-position/index.html
+++ b/files/fr/web/css/list-style-position/index.html
@@ -13,17 +13,16 @@ translation_of: Web/CSS/list-style-position
 
 
        {{EmbedInteractiveExample("pages/css/list-style-position.html")}}
        
 
-
-
 
        Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}.
        
 
 
        
-
        Notes :
        
+
        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")}}).
          • 
  
        • Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec list-style-position: inside. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations.
          • 
 
        
+
        
 
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/list-style-type/index.html b/files/fr/web/css/list-style-type/index.html
index 98d23f3195..0e684cba37 100644
--- a/files/fr/web/css/list-style-type/index.html
+++ b/files/fr/web/css/list-style-type/index.html
@@ -11,9 +11,7 @@ translation_of: Web/CSS/list-style-type
 
 
        La propriété list-style-type permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).
        
 
-
        {{EmbedInteractiveExample("pages/css/list-style-type.html")}}
        
-
-
+
        {{EmbedInteractiveExample("pages/css/list-style-type.html")}}
        La couleur de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.
        
 
@@ -59,442 +57,118 @@ list-style-type: unset;
 
        Valeurs
        
 
 
        
- 
        {{cssxref("symbols()")}}
        
+ 
        {{cssxref("custom-ident", "<custom-ident>")}}
        
+ 
        Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :
        
+ 
        {{cssxref("symbols()")}}
        
  
        Définit un style de puce utilisé.
        
- 
        none
        
+ 
        none
        
  
        Aucun marqueur n'est affiché.
        
- 
        {{cssxref("<string>")}}
        
+ 
        {{cssxref("<string>")}}
        
  
        La chaîne de caractères indiquée sera utilisée comme puce
        
- 
        {{cssxref("custom-ident", "<custom-ident>")}}
        
- 
        Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :
        
-
        
-
-
        
  
        disc
        
- 
        
- 
          
-  
        • Un disque plein (la valeur par défaut)
          • 
- 
        
- 
        
+ 
        Un disque plein (la valeur par défaut)
        
  
        circle
        
- 
        
- 
          
-  
        • Un cercle vide
          • 
- 
        
- 
        
+ 
        Un cercle vide
        
  
        square
        
- 
        
- 
          
-  
        • Un carré plein
          • 
- 
        
- 
        
+ 
        Un carré plein
        
  
        decimal
        
- 
        
- 
          
-  
        • Des nombres en base 10
          • 
-  
        • Commençant par 1
          • 
- 
        
- 
        
+ 
        Des nombres décimaux, commençant par 1.
        
  
        cjk-decimal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Nombres décimaux Han
          • 
-  
        • E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇
          • 
- 
        
- 
        
+ 
        Des nombres décimaux Han.
        
  
        decimal-leading-zero
        
- 
        
- 
          
-  
        • Nombres en base 10
          • 
-  
        • Avec des 0 devant
          • 
-  
        • E.g. 01, 02, 03, … 98, 99
          • 
- 
        
- 
        
+ 
        Des nombres décimaux complétés par des 0.
        
  
        lower-roman
        
- 
        
- 
          
-  
        • Nombres romains minuscules
          • 
-  
        • Par exemple i, ii, iii, iv, v…
          • 
- 
        
- 
        
+ 
        Des chiffres romains en minuscules.
        
  
        upper-roman
        
- 
        
- 
          
-  
        • Nombres romains en majuscules
          • 
-  
        • Par exemple I, II, III, IV, V…
          • 
- 
        
- 
        
+ 
        Des chiffres romains en majuscules.
        
  
        lower-greek
        
- 
        
- 
          
-  
        • Lettres grecques minuscules
          • 
-  
        • alpha, beta, gamma…
          • 
-  
        • Par exemple α, β, γ…
          • 
- 
        
- 
        
- 
        lower-alpha
        
- 
        lower-latin
        
- 
        
- 
          
-  
        • Lettres ASCII en minuscules
          • 
-  
        • Par exemple a, b, c, … z
          • 
-  
        • lower-latin n'est pas pris en charge par les versions avant IE7
          • 
-  
        • Voir le tableau de compatibilité
          • 
- 
        
- 
        
- 
        upper-alpha
        
- 
        upper-latin
        
- 
        
- 
          
-  
        • Lettres ASCII en majuscules
          • 
-  
        • Par exemple A, B, C, … Z
          • 
-  
        • upper-latin n'est pas pris en charge par les versions avant IE7
          • 
- 
        
- 
        
- 
        arabic-indic
        
- 
        -moz-arabic-indic
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        Des lettres grecques en minuscules.
        
+ 
        lower-alpha, lower-latin
        
+ 
        Des lettres ASCII en minuscules.
        
+ 
        upper-alpha, upper-latin
        
+ 
        Des lettres ASCII en majuscules.
        
+ 
        arabic-indic, -moz-arabic-indic
        
+ 
        Des nombres arabo-indiens.
        
  
        armenian
        
- 
        
- 
          
-  
        • Système de numérotation arménien
          • 
-  
        • (ayb/ayp, ben/pen, gim/keem…
          • 
- 
        
- 
        
- 
        bengali
        
- 
        -moz-bengali
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        cambodian {{experimental_inline}}*
        
- 
        
- 
          
-  
        • Exemple
          • 
-  
        • est un synonyme pour khmer
          • 
- 
        
- 
        
- 
        cjk-earthly-branch
        
- 
        -moz-cjk-earthly-branch
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        cjk-heavenly-stem
        
- 
        -moz-cjk-heavenly-stem
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation arménienne traditionnelle.
        
+ 
        bengali, -moz-bengali
        
+ 
        La numérotation bengali.
        
+ 
        cambodian/khmer
        
+ 
        La numérotation cambodgienne/khmer.
        
+ 
        cjk-earthly-branch, -moz-cjk-earthly-branch
        
+ 
        Des nombres ordinaux Han de la « branche terrestre ».
        
+ 
        cjk-heavenly-stem, -moz-cjk-heavenly-stem
        
+ 
        Des nombres ordinaux Han de la « souche céleste ».
        
  
        cjk-ideographic{{experimental_inline}}
        
- 
        
- 
          
-  
        • Identique à trad-chinese-informal
          • 
-  
        • E.g. 一萬一千一百一十一
          • 
- 
        
- 
        
- 
        devanagari
        
- 
        -moz-devanagari
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        Identique à trad-chinese-informal.
        
+ 
        devanagari, -moz-devanagari
        
+ 
        La numérotation devanagari.
        
  
        ethiopic-numeric {{experimental_inline}}
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation éthiopienne.
        
  
        georgian
        
- 
        
- 
          
-  
        • Système de numérotation géorgien
          • 
-  
        • Par exemple an, ban, gan, … he, tan, in…
          • 
- 
        
- 
        
- 
        gujarati
        
- 
        -moz-gujarati
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        gurmukhi
        
- 
        -moz-gurmukhi
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation géorgienne traditionnelle.
        
+ 
        gujarati, -moz-gujarati
        
+ 
        La numérotation gujarati.
        
+ 
        gurmukhi, -moz-gurmukhi
        
+ 
        La numérotation gurmukhi.
        
  
        hebrew {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation hébreux
          • 
- 
        
- 
        
+ 
        La numérotation hébraïque traditionnelle
        
  
        hiragana {{experimental_inline}}
        
- 
        
- 
          
-  
        • あ, い, う, え, お, か, き , …
          • 
-  
        • (Japonais)
          • 
- 
        
- 
        
+ 
        Le lettrage lexicographique hiragana.
        
  
        hiragana-iroha {{experimental_inline}}
        
- 
        
- 
          
-  
        • い, ろ, は, に, ほ, へ, と  …
          • 
-  
        • {{interwiki('wikipedia', 'Iroha')}} est l'ancien ordre japonais pour les syllabes.
          • 
- 
        
- 
        
+ 
        Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} hiragana.
        
  
        japanese-formal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.
          • 
-  
        • E.g., 壱萬壱阡壱百壱拾壱
          • 
-  
        • Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres
          • 
- 
        
- 
        
+ 
        La numérotation japonaise formelle utilisée pour les documents financiers ou légaux. Les kanjis sont conçus afin de ne pas pouvoir être modifié pour ressembler à un autre.
        
  
        japanese-informal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation japonais informel
          • 
- 
        
- 
        
- 
        kannada
        
- 
        -moz-kannada
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        katakana {{experimental_inline}}
        
- 
        
- 
          
-  
        • ア, イ, ウ, エ, オ, カ, キ, …
          • 
-  
        • (Japonais)
          • 
- 
        
- 
        
+ 
        La numérotation japonaise informelle.
        
+ 
        kannada, -moz-kannada
        
+ 
        La numérotation kannada.
        
+ 
        katakana {{experimental_inline}}
        
+ 
        Le lettrage lexicographique katakana.
        
  
        katakana-iroha {{experimental_inline}}
        
- 
        
- 
          
-  
        • イ, ロ, ハ, ニ, ホ, ヘ, ト, …
          • 
-  
        • {{interwiki('wikipedia', 'Iroha')}} correspond à l'ancien ordre japonais pour les syllabes.
          • 
- 
        
- 
        
- 
        khmer
        
- 
        -moz-khmer
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} katakana.
        
  
        korean-hangul-formal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation coréen hangul .
          • 
-  
        • E.g., 일만 일천일백일십일
          • 
- 
        
- 
        
+ 
        La numérotation coréenne hangul.
        
  
        korean-hanja-formal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation formel coréen Han.
          • 
-  
        • E.g. 壹萬 壹仟壹百壹拾壹
          • 
- 
        
- 
        
+ 
        La numérotation formelle coréenne Han.
        
  
        korean-hanja-informal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation coréen hanja numbering.
          • 
-  
        • E.g., 萬 一千百十一
          • 
- 
        
- 
        
- 
        lao
        
- 
        -moz-lao
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation coréenne hanja.
        
+ 
        lao, -moz-lao
        
+ 
        La numérotation laotienne.
        
  
        lower-armenian {{experimental_inline}}*
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        malayalam
        
- 
        -moz-malayalam
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation arménienne en minuscules.
        
+ 
        malayalam, -moz-malayalam
        
+ 
        La numérotation Malayalam.
        
  
        mongolian {{experimental_inline}}
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        myanmar
        
- 
        -moz-myanmar
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        oriya
        
- 
        -moz-oriya
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        persian {{experimental_inline}}
        
- 
        -moz-persian
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation mongolienne.
        
+ 
        myanmar, -moz-myanmar
        
+ 
        La numérotation birmane.
        
+ 
        oriya, -moz-oriya
        
+ 
        La numérotation Oriya.
        
+ 
        persian {{experimental_inline}}, -moz-persian
        
+ 
        La numérotation perse.
        
  
        simp-chinese-formal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation formel chinois simplifié.
          • 
-  
        • E.g. 壹万壹仟壹佰壹拾壹
          • 
- 
        
- 
        
+ 
        La numérotation formelle en chinois simplifié.
        
  
        simp-chinese-informal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation informel chinois simplifié.
          • 
-  
        • E.g. 一万一千一百一十一
          • 
- 
        
- 
        
- 
        tamil {{experimental_inline}}
        
- 
        -moz-tamil
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        telugu
        
- 
        -moz-telugu
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        thai
        
- 
        -moz-thai
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation informelle en chinois simplifié.
        
+ 
        tamil {{experimental_inline}}, -moz-tamil
        
+ 
        La numérotation tamoule.
        
+ 
        telugu, -moz-telugu
        
+ 
        La numérotation Telugu.
        
+ 
        thai, -moz-thai
        
+ 
        La numérotation thaïlandaise.
        
  
        tibetan {{experimental_inline}}*
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation tibétaine.
        
  
        trad-chinese-formal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation formel chinois traditionnel.
          • 
-  
        • E.g. 壹萬壹仟壹佰壹拾壹
          • 
- 
        
- 
        
+ 
        La numérotation formelle en chinois traditionnel.
        
  
        trad-chinese-informal {{experimental_inline}}
        
- 
        
- 
          
-  
        • Système de numérotation informel chinois traditionnel.
          • 
-  
        • E.g. 一萬一千一百一十一
          • 
- 
        
- 
        
+ 
        La numérotation informelle en chinois traditionnel.
        
  
        upper-armenian {{experimental_inline}}*
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        La numérotation arménienne traditionnelle en majuscules.
        
  
        disclosure-open {{experimental_inline}}
        
- 
        
- 
          
-  
        • Symbole indiquant qu'un widget (comme {{HTMLElement("details")}}) est ouvert.
          • 
- 
        
- 
        
+ 
        Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est déplié/révélé.
        
  
        disclosure-closed {{experimental_inline}}
        
- 
        
- 
          
-  
        • Symbole indiquant qu'un widget (comme {{HTMLElement("details")}}) est fermé.
          • 
- 
        
- 
        
-
        
-
-
        Extensions non-standards
        
-
-
        D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.
        
-
-
        
- 
        -moz-ethiopic-halehame
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        -moz-ethiopic-halehame-am
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        ethiopic-halehame-ti-er
        
- 
        -moz-ethiopic-halehame-ti-er
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        ethiopic-halehame-ti-et
        
- 
        -moz-ethiopic-halehame-ti-et
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
- 
        hangul
        
- 
        -moz-hangul
        
- 
        
- 
          
-  
        • Exemple
          • 
-  
        • Exemple
          • 
-  
        • Exemple
          • 
- 
        
- 
        
- 
        hangul-consonant
        
- 
        -moz-hangul-consonant
        
- 
        
- 
          
-  
        • Exemple
          • 
-  
        • Exemple
          • 
-  
        • Exemple
          • 
- 
        
- 
        
- 
        urdu
        
- 
        -moz-urdu
        
- 
        
- 
          
-  
        • Exemple
          • 
- 
        
- 
        
+ 
        Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est replié/masqué.
        
 
        
 
 
        Syntaxe formelle
        
diff --git a/files/fr/web/css/list-style/index.html b/files/fr/web/css/list-style/index.html
index 1bec8385a9..8022402371 100644
--- a/files/fr/web/css/list-style/index.html
+++ b/files/fr/web/css/list-style/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/list-style
 
 
        {{EmbedInteractiveExample("pages/css/list-style.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")}}).
        
 
        
diff --git a/files/fr/web/css/list_of_proprietary_css_features/index.html b/files/fr/web/css/list_of_proprietary_css_features/index.html
index ecc4f646e7..68f7371faa 100644
--- a/files/fr/web/css/list_of_proprietary_css_features/index.html
+++ b/files/fr/web/css/list_of_proprietary_css_features/index.html
@@ -11,25 +11,20 @@ original_slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires
 
        {{CSSRef}}{{Draft}}
        
 
 
        
-
        Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.
        
+
        Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.
        
 
        
 
 
        
-
        Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :
        
+
        Attention : Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :
        
 
 
 
        
 
-
        BROUILLON
-
-
        Cette page est incomplète.
        
-
        
-
-
        Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir Implémentation des fonctionnalités CSS à l'état de brouillon pour une liste de ces dernières).
        
+
        Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir Implémentation des fonctionnalités CSS à l'état de brouillon pour une liste de ces dernières).
        
 
 
        Gecko
        
 
@@ -38,11 +33,11 @@ original_slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires
 
          
  
        • {{ Cssxref("-moz-force-broken-image-icon") }}
          • 
  
        • {{ Cssxref("-moz-image-region") }}
          • 
- 
        • {{ Cssxref("-moz-margin-end") }}
          • 
- 
        • {{ Cssxref("-moz-margin-start") }}
          • 
+ 
        • {{ Cssxref("margin-inline-end") }}
          • 
+ 
        • {{ Cssxref("margin-inline-start") }}
          • 
  
        • {{ Cssxref("-moz-orient") }}
          • 
- 
        • {{ Cssxref("-moz-padding-end") }}
          • 
- 
        • {{ Cssxref("-moz-padding-start") }}
          • 
+ 
        • {{ Cssxref("padding-inline-end") }}
          • 
+ 
        • {{ Cssxref("padding-inline-start") }}
          • 
  
        • {{ Cssxref("-moz-stack-sizing") }}
          • 
  
        • {{ Cssxref("-moz-window-shadow") }}
          • 
 
        
diff --git a/files/fr/web/css/margin-block-end/index.html b/files/fr/web/css/margin-block-end/index.html
index f73899d6f9..92547fd248 100644
--- a/files/fr/web/css/margin-block-end/index.html
+++ b/files/fr/web/css/margin-block-end/index.html
@@ -12,9 +12,7 @@ translation_of: Web/CSS/margin-block-end
 
 
        La propriété margin-block-end définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.
        
 
-
        {{EmbedInteractiveExample("pages/css/margin-block-end.html")}}
        
-
-
+
        {{EmbedInteractiveExample("pages/css/margin-block-end.html")}}
        Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.
        
 
diff --git a/files/fr/web/css/margin-block-start/index.html b/files/fr/web/css/margin-block-start/index.html
index 571538de48..a78bcd1869 100644
--- a/files/fr/web/css/margin-block-start/index.html
+++ b/files/fr/web/css/margin-block-start/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-block-start
 
 
        {{EmbedInteractiveExample("pages/css/margin-block-start.html")}}
        
 
-
-
 
        Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/margin-bottom/index.html b/files/fr/web/css/margin-bottom/index.html
index 2602f07e18..a984e60431 100644
--- a/files/fr/web/css/margin-bottom/index.html
+++ b/files/fr/web/css/margin-bottom/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/margin-bottom
 
 
        {{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
        
 
-
-
 
        Cette propriété n'a aucun effet sur les éléments en ligne (inline) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/margin-inline-end/index.html b/files/fr/web/css/margin-inline-end/index.html
index 6b51b1c17e..d5f5efa20b 100644
--- a/files/fr/web/css/margin-inline-end/index.html
+++ b/files/fr/web/css/margin-inline-end/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-inline-end
 
 
        {{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}
        
 
-
-
 
        Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/margin-inline-start/index.html b/files/fr/web/css/margin-inline-start/index.html
index 0a5e71337a..4a72562316 100644
--- a/files/fr/web/css/margin-inline-start/index.html
+++ b/files/fr/web/css/margin-inline-start/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/margin-inline-start
 
 
        {{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}
        
 
-
-
 
        Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/margin-left/index.html b/files/fr/web/css/margin-left/index.html
index ace267defb..b0791c0906 100644
--- a/files/fr/web/css/margin-left/index.html
+++ b/files/fr/web/css/margin-left/index.html
@@ -13,9 +13,7 @@ translation_of: Web/CSS/margin-left
 
 
        {{EmbedInteractiveExample("pages/css/margin-left.html")}}
        
 
-
-
-
        Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.
        
+
        Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.
        
 
 
        Dans certains cas où les dimensions sont sur-contraintes (autrement dit quand width, margin-left, border, padding, la taille de la zone de contenu et margin-right sont toutes définies), margin-left est ignorée. La valeur calculée sera la même que si auto avait été utilisée.
        
 
diff --git a/files/fr/web/css/margin-right/index.html b/files/fr/web/css/margin-right/index.html
index b3ca53336d..cf82405f56 100644
--- a/files/fr/web/css/margin-right/index.html
+++ b/files/fr/web/css/margin-right/index.html
@@ -13,9 +13,7 @@ translation_of: Web/CSS/margin-right
 
 
        {{EmbedInteractiveExample("pages/css/margin-right.html")}}
        
 
-
-
-
        Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.
        
+
        Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.
        
 
 
        Syntaxe
        
 
diff --git a/files/fr/web/css/margin-top/index.html b/files/fr/web/css/margin-top/index.html
index ba16eebe07..c122bc0e39 100644
--- a/files/fr/web/css/margin-top/index.html
+++ b/files/fr/web/css/margin-top/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/margin-top
 
 
        {{EmbedInteractiveExample("pages/css/margin-top.html")}}
        
 
-
-
 
        Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (inline) tels que {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/margin/index.html b/files/fr/web/css/margin/index.html
index 628251e76f..16beec5c1d 100644
--- a/files/fr/web/css/margin/index.html
+++ b/files/fr/web/css/margin/index.html
@@ -16,12 +16,10 @@ translation_of_original: Web/CSS/margin-new
 
 
        {{EmbedInteractiveExample("pages/css/margin.html")}}
        
 
-
-
 
        Les marges haute et basse n'ont aucun effet sur les élements en ligne (inline) qui ne sont pas remplacés (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).
        
 
 
        
-
        Note : Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le « remplissage » ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.
        
+
        Note : Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le « remplissage » ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.
        
 
        
 
 
        Syntaxe
        
@@ -58,11 +56,11 @@ margin: unset;
 
        Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :
        
 
 
        
- 
        <length>
        
+ 
        <length>
        
  
        La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("<length>")}}.
        
- 
        <percentage>
        
+ 
        <percentage>
        
  
        Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la largeur du bloc englobant. On peut utiliser des valeurs négatives.
        
- 
        auto
        
+ 
        auto
        
  
        auto est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, div { width:50%;  margin:0 auto; } permet de centrer un conteneur div horizontalement).
        
 
        
 
@@ -135,7 +133,7 @@ margin: auto;              /* boîte centrée horizontalement */
 
 
        Fusion des marges
        
 
-
        Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire l'article sur la fusion des marges.
        
+
        Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire l'article sur la fusion des marges.
        
 
 
        Spécifications
        
 
@@ -180,7 +178,7 @@ margin: auto;              /* boîte centrée horizontalement */
 
        Voir aussi
        
 
 
diff --git a/files/fr/web/css/mask-border-outset/index.html b/files/fr/web/css/mask-border-outset/index.html
index 2f4946c56e..3174b76051 100644
--- a/files/fr/web/css/mask-border-outset/index.html
+++ b/files/fr/web/css/mask-border-outset/index.html
@@ -59,7 +59,7 @@ mask-border-outset: unset;
 
 {{csssyntax}}
 
-
        Spécifications
        
+
        Spécifications
        
 
 
diff --git a/files/fr/web/css/mask-border-repeat/index.html b/files/fr/web/css/mask-border-repeat/index.html
index eb7c528638..dce62d1c3e 100644
--- a/files/fr/web/css/mask-border-repeat/index.html
+++ b/files/fr/web/css/mask-border-repeat/index.html
@@ -53,7 +53,7 @@ mask-border-repeat: unset;
 
 {{csssyntax}}
 
-
        Spécifications
        
+
        Spécifications
        
  
 
 
        
diff --git a/files/fr/web/css/mask-border-slice/index.html b/files/fr/web/css/mask-border-slice/index.html
index 2a76433cc7..c0b1482f6d 100644
--- a/files/fr/web/css/mask-border-slice/index.html
+++ b/files/fr/web/css/mask-border-slice/index.html
@@ -14,14 +14,14 @@ translation_of: Web/CSS/mask-border-slice
 
 
        Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.
        
 
-
        The nine regions defined by the border-image or border-image-slice properties
        
+
        The nine regions defined by the border-image or border-image-slice properties
        Le diagramme ci-avant illustre l'emplacement de chaque région.
          
- 
        • Les zones de 1 à 4 sont les zones aux coins. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.
          • 
- 
        • Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être répétées, redimensionnées, ou modifiées afin que le masque de bordule final aient les mêmes dimensions que l'élément.
          • 
- 
        • La zone 9 est  la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé fill est utilisé.
          • 
+ 
        • Les zones de 1 à 4 sont les zones aux coins. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.
          • 
+ 
        • Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être répétées, redimensionnées, ou modifiées afin que le masque de bordule final aient les mêmes dimensions que l'élément.
          • 
+ 
        • La zone 9 est la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé fill est utilisé.
          • 
 
        Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et  {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final.
        
@@ -103,5 +103,5 @@ mask-border-slice: unset;
 
        Voir aussi
        
diff --git a/files/fr/web/css/mask-border-source/index.html b/files/fr/web/css/mask-border-source/index.html
index f03f82be19..68cd550c2b 100644
--- a/files/fr/web/css/mask-border-source/index.html
+++ b/files/fr/web/css/mask-border-source/index.html
@@ -46,7 +46,7 @@ mask-border-source: unset;
 
 
        Voir la page {{cssxref("mask-border")}}.
        
 
-
        Spécifications
        
+
        Spécifications
        
  
 
 
 
 
 
 
 
 
 
 
        
diff --git a/files/fr/web/css/mask-border-width/index.html b/files/fr/web/css/mask-border-width/index.html
index ddeb57ee97..9cd78bde87 100644
--- a/files/fr/web/css/mask-border-width/index.html
+++ b/files/fr/web/css/mask-border-width/index.html
@@ -68,7 +68,7 @@ mask-border-width: unset;
 
 {{csssyntax}}
 
-
        Spécifications
        
+
        Spécifications
        
  
 
 
        
diff --git a/files/fr/web/css/mask-border/index.html b/files/fr/web/css/mask-border/index.html
index 062f768532..f2faaaf334 100644
--- a/files/fr/web/css/mask-border/index.html
+++ b/files/fr/web/css/mask-border/index.html
@@ -1,19 +1,14 @@
 ---
 title: mask-border
 slug: Web/CSS/mask-border
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Propriété raccourcie
-  - Reference
 translation_of: Web/CSS/mask-border
+browser-compat: css.properties.mask-border
 ---
 
        {{cssref}}{{SeeCompatTable}}
        La propriété CSS mask-border permet de créer un masque le long de la bordure d'un élément.
        
 
-
        Cette propriété est une propriété raccourcie 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.
        
+
        Cette propriété est une propriété raccourcie 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.
        Syntaxe
        
 
@@ -57,7 +52,7 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
 
 
        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
        
 
@@ -88,27 +83,10 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
 
 
        {{EmbedLiveSample("Image_matricielle_(bitmap)")}}
        
 
-
        Spécifications
        
-
-
        
  
 
 
 
 
 
 
        
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
        SpécificationÉtatCommentairezs
        {{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}{{Spec2("CSS Masks")}}Définition initiale.
        
-
-
        {{cssinfo}}
        
-
-
        Compatibilité des navigateursEdit
        
-
-
        TBD
        
+
        Spécifications
        
+
+
        {{Specifications}}
        
+
+
        Compatibilité des navigateurs
        
+
+
        {{Compat}}
        
\ No newline at end of file
diff --git a/files/fr/web/css/mask-clip/index.html b/files/fr/web/css/mask-clip/index.html
index 0b10fad9fb..9dad26fc80 100644
--- a/files/fr/web/css/mask-clip/index.html
+++ b/files/fr/web/css/mask-clip/index.html
@@ -77,7 +77,7 @@ mask-clip: unset;
 
 
        CSS
        
 
-
        #masked {
+
        #masked {
   width: 100px;
   height: 100px;
   background-color: #8cffa0;
diff --git a/files/fr/web/css/mask-composite/index.html b/files/fr/web/css/mask-composite/index.html
index 19bb9fcd47..33b5bc3f26 100644
--- a/files/fr/web/css/mask-composite/index.html
+++ b/files/fr/web/css/mask-composite/index.html
@@ -51,7 +51,7 @@ mask-composite: unset;
 
 
        CSS
        
 
-
        #masked {
+
        #masked {
   width: 100px;
   height: 100px;
   background-color: #8cffa0;
@@ -65,10 +65,7 @@ mask-composite: unset;
 }
 
        
 
-
 
 
        {{EmbedLiveSample("Exemples", "200px", "200px")}}
        
 
diff --git a/files/fr/web/css/mask-mode/index.html b/files/fr/web/css/mask-mode/index.html
index dad074e561..f189643576 100644
--- a/files/fr/web/css/mask-mode/index.html
+++ b/files/fr/web/css/mask-mode/index.html
@@ -55,7 +55,7 @@ mask-mode: unset;
 
 
        CSS
        
 
-
        #masked {
+
        #masked {
   width: 100px;
   height: 100px;
   background: blue linear-gradient(red, blue);
@@ -81,7 +81,7 @@ mask-mode: unset;
 
 
        CSS
        
 
-
        #masked {
+
        #masked {
   width: 100px;
   height: 100px;
   background-color: #8cffa0;
diff --git a/files/fr/web/css/mask-origin/index.html b/files/fr/web/css/mask-origin/index.html
index be91e88ee3..85bf81428e 100644
--- a/files/fr/web/css/mask-origin/index.html
+++ b/files/fr/web/css/mask-origin/index.html
@@ -75,7 +75,7 @@ mask-origin: unset;
 
 
        CSS
        
 
-
        #masked {
+
        #masked {
   width: 100px;
   height: 100px;
   margin: 10px;
diff --git a/files/fr/web/css/mask-position/index.html b/files/fr/web/css/mask-position/index.html
index afbcb38828..43d8db0a4a 100644
--- a/files/fr/web/css/mask-position/index.html
+++ b/files/fr/web/css/mask-position/index.html
@@ -55,7 +55,7 @@ mask-position: unset;
 
 
        CSS
        
 
-
        #wrapper {
+
        #wrapper {
   border: 1px solid black;
   width: 250px;
   height: 250px;
@@ -72,10 +72,7 @@ mask-position: unset;
 }
 
        
 
-
 
 
        Résultat
        
 
diff --git a/files/fr/web/css/mask-repeat/index.html b/files/fr/web/css/mask-repeat/index.html
index 54e6e8e75a..76dd23f6a1 100644
--- a/files/fr/web/css/mask-repeat/index.html
+++ b/files/fr/web/css/mask-repeat/index.html
@@ -44,8 +44,7 @@ mask-repeat: unset;
 
 
        
  
        <repeat-style>
        
- 
        La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :
        
- 
        
+ 
        La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :
  
@@ -78,8 +77,7 @@ mask-repeat: unset;
    
        
   
    
        
           
  
        
- Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :
        
- 
        
+ Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :
  
diff --git a/files/fr/web/css/mask-size/index.html b/files/fr/web/css/mask-size/index.html
index 5af74bf8ab..bad865b3cb 100644
--- a/files/fr/web/css/mask-size/index.html
+++ b/files/fr/web/css/mask-size/index.html
@@ -45,7 +45,9 @@ mask-size: initial;
 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 {{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.
        
+
        Syntaxe
        
 
@@ -75,9 +77,9 @@ mask-size: unset;
  
        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.
        auto
        Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.
        
- 
        contain
        
+ 
        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.
        
- 
        cover
        
+ 
        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).
        
 
diff --git a/files/fr/web/css/mask-type/index.html b/files/fr/web/css/mask-type/index.html
index db81ba603e..d589c35f37 100644
--- a/files/fr/web/css/mask-type/index.html
+++ b/files/fr/web/css/mask-type/index.html
@@ -41,111 +41,65 @@ mask-type: unset;
 
 
        Exemples
        
 
-
        Prenons comme masque le rectangle suivant :
        
+
        Définir un masque alpha
        
 
-
        <rect x="10" y="10" width="80" height="80"
-    fill="red" fill-opacity="0.7" />
        
-
-
-
-
        Le voici : {{EmbedLiveSample('mask', '100%', '100')}}
        
-
-
        Appliquons le à cette boîte :
        
-
-
-
-
        {{EmbedLiveSample('box', '100%', '120')}}
        
-
-
        Voici le résultat, si votre navigateur prend en charge cette propriété, avec les deux valeurs de mask-type appliquée à l'élément {{SVGElement("mask")}}, on aura deux carrés différents :
        
-
-
        
   
    
        
 
 
  
  
  
  
 
        
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
        mask-type: alpha;mask-type: luminance;
        
-    
-
-    
        {{EmbedLiveSample('maskalpha', '100%', '102')}}
        
-           		
-    
+}
 
-    
        {{EmbedLiveSample('maskluminance', '100%', '102')}}
        
-   
        
+
        Result
        
+
+
        {{EmbedLiveSample('setting_a_luminance_mask', '100%', '102')}}
        
 
 
        Spécifications
        
 
diff --git a/files/fr/web/css/mask/index.html b/files/fr/web/css/mask/index.html
index 0eae965f70..39988a8dc4 100644
--- a/files/fr/web/css/mask/index.html
+++ b/files/fr/web/css/mask/index.html
@@ -18,7 +18,7 @@ translation_of: Web/CSS/mask
 
 
        Syntaxe
        
 
-
        /* Valeurs avec un mot-clé */
+
        /* Valeurs avec un mot-clé */
 mask: none;
 
 /* Valeurs d'image */
@@ -59,12 +59,10 @@ mask: unset;
  
        Cette valeur définit la zone qui est impactée par l'image du masque. Voir {{cssxref("mask-clip")}}.
        
  
        <compositing-operator>
        
  
        Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir {{cssxref("mask-composite")}}.
        
- 
        
- 
        Syntaxe formelle
        
- 
        
 
        
 
-{{csssyntax}}
+
        Syntaxe formelle
        
+
        {{csssyntax}}
        
 
 
        Exemples
        
 
diff --git a/files/fr/web/css/max()/index.html b/files/fr/web/css/max()/index.html
index 3ca7ea988c..a660acc748 100644
--- a/files/fr/web/css/max()/index.html
+++ b/files/fr/web/css/max()/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/max()
 
 
        La fonction CSS max() permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction max() peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée.
        
 
-
        /* property: max(expression [, expression]) */
+
        /* property: max(expression [, expression]) */
 width: max(10vw, 4em, 80px);
 
        
 
@@ -44,14 +44,14 @@ width: max(10vw, 4em, 80px);
 
 
        CSS
        
 
-
        .logo {
+
        .logo {
   width: max(50vw, 300px);
 }
 
        
 
 
        HTML
        
 
-
        <img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
        
+
        <img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
        
 
 
        Résultat
        
 
@@ -65,7 +65,7 @@ width: max(10vw, 4em, 80px);
 
 
        CSS
        
 
-
        h1 {
+
        h1 {
   font-size: 2rem;
 }
 h1.responsive {
@@ -77,7 +77,7 @@ h1.responsive {
 
 
        HTML
        
 
-
        <h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1>
+
        <h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1>
 <h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1>
 
        
 
diff --git a/files/fr/web/css/max-block-size/index.html b/files/fr/web/css/max-block-size/index.html
index 7ef2682502..099822388a 100644
--- a/files/fr/web/css/max-block-size/index.html
+++ b/files/fr/web/css/max-block-size/index.html
@@ -18,8 +18,6 @@ translation_of: Web/CSS/max-block-size
 
 
        {{EmbedInteractiveExample("pages/css/max-block-size.html")}}
        
 
-
-
 
        Syntaxe
        
 
 
        /* Valeurs de longueur */
diff --git a/files/fr/web/css/max-height/index.html b/files/fr/web/css/max-height/index.html
index 0aae0a9399..1cbdfaca41 100644
--- a/files/fr/web/css/max-height/index.html
+++ b/files/fr/web/css/max-height/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/max-height
 
 
        {{EmbedInteractiveExample("pages/css/max-height.html")}}
        
 
-
-
 
        La valeur de max-height surcharge la valeur de {{cssxref("height")}} mais elle est surchargée par {{cssxref("min-height")}}.
        
 
 
        Syntaxe
        
diff --git a/files/fr/web/css/max-inline-size/index.html b/files/fr/web/css/max-inline-size/index.html
index a1d6952c1b..9d99076ece 100644
--- a/files/fr/web/css/max-inline-size/index.html
+++ b/files/fr/web/css/max-inline-size/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/max-inline-size
 
 
        {{EmbedInteractiveExample("pages/css/max-inline-size.html")}}
        
 
-
-
 
        Syntaxe
        
 
 
        /* Valeurs de longueur */
diff --git a/files/fr/web/css/max-width/index.html b/files/fr/web/css/max-width/index.html
index cf06efaae9..b8ca12a219 100644
--- a/files/fr/web/css/max-width/index.html
+++ b/files/fr/web/css/max-width/index.html
@@ -11,9 +11,7 @@ translation_of: Web/CSS/max-width
 
 
        La propriété max-width est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par max-width (autrement dit, max-width est une borne supérieur pour width).
        
 
-
        {{EmbedInteractiveExample("pages/css/max-width.html")}}
        
-
-
+
        {{EmbedInteractiveExample("pages/css/max-width.html")}}
        La valeur de max-width surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.
        
 
diff --git a/files/fr/web/css/media_queries/index.html b/files/fr/web/css/media_queries/index.html
index ad2a10fb01..1acb40d913 100644
--- a/files/fr/web/css/media_queries/index.html
+++ b/files/fr/web/css/media_queries/index.html
@@ -23,12 +23,10 @@ original_slug: Web/CSS/Requêtes_média
 
 
        Règles @
        
 
-
        
 
          
  
        • {{cssxref("@import")}}
          • 
  
        • {{cssxref("@media")}}
          • 
 
        
-
        
 
 
        Guides
        
 
diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html
index 21228d0eaf..b87d5cba87 100644
--- a/files/fr/web/css/media_queries/using_media_queries/index.html
+++ b/files/fr/web/css/media_queries/using_media_queries/index.html
@@ -35,17 +35,19 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 
        Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.
        
 
 
        
- 
        all
        
+ 
        all
        
  
        Correspond pour tous les appareils.
        
- 
        print
        
+ 
        print
        
  
        Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les médias paginés.
        
- 
        screen
        
+ 
        screen
        
  
        Correspond aux appareils dotés d'un écran.
        
- 
        speech
        
+ 
        speech
        
  
        Correspond aux outils de synthèse vocale.
        
 
        
 
-
        Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.
        
+
        
+  
        Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.
        
+
        
 
 
        Caractéristiques média (media features)
        
 
@@ -247,7 +249,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 
 
        @media screen, print { ... }
        
 
-
        Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.
        
+
        Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.
        
 
 
        Cibler des caractéristiques média
        
 
@@ -260,7 +262,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 
        @media (max-width: 1250px) { ... }
        
 
 
        
-
        Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.
        
+
        Note : Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.
        
 
        
 
 
        Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou none pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :
        
diff --git a/files/fr/web/css/microsoft_extensions/index.html b/files/fr/web/css/microsoft_extensions/index.html
index b9982e6bc0..e48424afce 100644
--- a/files/fr/web/css/microsoft_extensions/index.html
+++ b/files/fr/web/css/microsoft_extensions/index.html
@@ -18,7 +18,6 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft
 
        Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.
        
 
    
 
-
    
 
      
  
    • {{CSSxRef("-ms-accelerator")}}
      • 
  
    • {{CSSxRef("-ms-block-progression")}}
      • 
@@ -66,11 +65,9 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft
  
    • {{CSSxRef("-ms-wrap-through")}}
      • 
  
    • {{CSSxRef("zoom")}}
      • 
 
    
-
    
 
 
    Pseudo-éléments
    
 
-
    
 
      
  
    • {{CSSxRef("::-ms-browse")}}
      • 
  
    • {{CSSxRef("::-ms-check")}}
      • 
@@ -87,19 +84,15 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft
  
    • {{CSSxRef("::-ms-track")}}
      • 
  
    • {{CSSxRef("::-ms-value")}}
      • 
 
    
-
    
 
 
    Caractéristiques média
    
 
-
    
 
      
  
    • {{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}
      • 
 
    
-
    
 
 
    API DOM relatives à CSS
    
 
-
    
 
      
  
    • {{DOMxRef("msContentZoomFactor")}}
      • 
  
    • {{DOMxRef("msGetPropertyEnabled")}}
      • 
@@ -107,7 +100,6 @@ original_slug: Web/CSS/Extensions_CSS_Microsoft
  
    • {{DOMxRef("MSRangeCollection")}}
      • 
  
    • {{DOMxRef("msRegionOverflow")}}
      • 
 
    
-
    
 
 
    Voir aussi
    
 
diff --git a/files/fr/web/css/min()/index.html b/files/fr/web/css/min()/index.html
index f7a8c561c9..ddcab65cd2 100644
--- a/files/fr/web/css/min()/index.html
+++ b/files/fr/web/css/min()/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/min()
 
 
    La fonction CSS min() permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction min() peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée.
    
 
-
    /* property: min(expression [, expression]) */
+
    /* property: min(expression [, expression]) */
 width: min(10vw, 4em, 80px);
 
    
 
@@ -44,14 +44,14 @@ width: min(10vw, 4em, 80px);
 
 
    CSS
    
 
-
    .logo {
+
    .logo {
   width: min(50vw, 300px);
 }
 
    
 
 
    HTML
    
 
-
    <img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
    
+
    <img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
    
 
 
    Résultat
    
 
@@ -63,7 +63,7 @@ width: min(10vw, 4em, 80px);
 
 
    CSS
    
 
-
    input, label {
+
    input, label {
   padding: 2px;
   box-sizing: border-box;
   display: inline-block;
@@ -82,7 +82,7 @@ form {
 
 
    HTML
    
 
-
    <form>
+
    <form>
   <label>Saisir quelque chose :</label>
   <input type="text">
 </form>
@@ -94,7 +94,7 @@ form {
 
 
    Lorsqu'on utilise min() afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à min() dans max() utilisant une unité de longueur relative en deuxième argument afin de garantir une lisibilité minimale :
    
 
-
    small {
+
    small {
   font-size: max(min(0.5vw, 0.5em), 1rem);
 }
    
 
diff --git a/files/fr/web/css/min-block-size/index.html b/files/fr/web/css/min-block-size/index.html
index d251282f2f..81260b6760 100644
--- a/files/fr/web/css/min-block-size/index.html
+++ b/files/fr/web/css/min-block-size/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/min-block-size
 
 
    {{EmbedInteractiveExample("pages/css/min-block-size.html")}}
    
 
-
-
 
    Si le mode d'écriture est orienté verticalement, min-block-size fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/min-height/index.html b/files/fr/web/css/min-height/index.html
index d7aa9e1dbf..8e1229db64 100644
--- a/files/fr/web/css/min-height/index.html
+++ b/files/fr/web/css/min-height/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/min-height
 
 
    {{EmbedInteractiveExample("pages/css/min-height.html")}}
    
 
-
-
 
    La valeur de la propriété min-height surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque min-height est supérieure.
    
 
 
    Syntaxe
    
@@ -132,7 +130,7 @@ min-height: unset;
  
  • {{cssxref("width")}}
    • 
  
  • {{cssxref("height")}}
    • 
  
  • {{cssxref("max-height")}}
    • 
- 
  • Le modèle de boîtes
    • 
+ 
  • Le modèle de boîtes
    • 
  
  • {{cssxref("min-width")}}
    • 
  
  • {{cssxref("box-sizing")}}
    • 
  
  • {{cssxref("height")}}
    • 
diff --git a/files/fr/web/css/min-inline-size/index.html b/files/fr/web/css/min-inline-size/index.html
index c4e5c5d6f7..45112c237f 100644
--- a/files/fr/web/css/min-inline-size/index.html
+++ b/files/fr/web/css/min-inline-size/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/min-inline-size
 
 
    {{EmbedInteractiveExample("pages/css/min-inline-size.html")}}
    
 
-
-
 
    Si le mode d'écriture est orienté verticalement, min-inline-size fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/min-width/index.html b/files/fr/web/css/min-width/index.html
index 3eee767ee7..8421821e5e 100644
--- a/files/fr/web/css/min-width/index.html
+++ b/files/fr/web/css/min-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/min-width
 
 
    {{EmbedInteractiveExample("pages/css/min-width.html")}}
    
 
-
-
 
    La valeur de min-width surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/minmax()/index.html b/files/fr/web/css/minmax()/index.html
index 90a84ac5d6..5ca7fb623d 100644
--- a/files/fr/web/css/minmax()/index.html
+++ b/files/fr/web/css/minmax()/index.html
@@ -17,8 +17,6 @@ translation_of: Web/CSS/minmax()
 
 
    {{EmbedInteractiveExample("pages/css/function-minmax.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs de type <inflexible-breadth>, <track-breadth>*/
@@ -89,7 +87,7 @@ minmax(auto, 300px)
 
 
    CSS
    
 
-
    #container {
+
    #container {
   display: grid;
   grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
   grid-gap: 5px;
diff --git a/files/fr/web/css/mix-blend-mode/index.html b/files/fr/web/css/mix-blend-mode/index.html
index 792a30d1eb..33029b3111 100644
--- a/files/fr/web/css/mix-blend-mode/index.html
+++ b/files/fr/web/css/mix-blend-mode/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/mix-blend-mode
 
 
    {{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs de type <blend-mode> */
@@ -52,12 +50,11 @@ mix-blend-mode: unset;
 
 {{csssyntax}}
 
-
    Exemples
    
+
    Exemples
    
 
-
 
-
    {{EmbedLiveSample("mix-blend-mode", "100%", 500, "", "", "example-outcome-frame")}}
    
+
    {{EmbedLiveSample("exemples", "100%", 1600, "", "", "example-outcome-frame")}}
    
 
 
    Exemple avec SVG
    
 
diff --git a/files/fr/web/css/mozilla_extensions/index.html b/files/fr/web/css/mozilla_extensions/index.html
index 355b715a7d..e4552cad87 100644
--- a/files/fr/web/css/mozilla_extensions/index.html
+++ b/files/fr/web/css/mozilla_extensions/index.html
@@ -19,7 +19,6 @@ original_slug: Web/CSS/Extensions_Mozilla
 
    Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments XUL.
    
 
    
 
-
    
 
    B
    
 
 
      
@@ -28,12 +27,12 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • {{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}
      • 
  
    • {{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}
      • 
  
    • {{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}
      • 
- 
    • {{CSSxRef("-moz-box-align")}}
      • 
- 
    • {{CSSxRef("-moz-box-direction")}}
      • 
- 
    • {{CSSxRef("-moz-box-flex")}}
      • 
+ 
    • {{CSSxRef("box-align")}}
      • 
+ 
    • {{CSSxRef("box-direction")}}
      • 
+ 
    • {{CSSxRef("box-flex")}}
      • 
  
    • {{CSSxRef("-moz-box-ordinal-group")}}
      • 
- 
    • {{CSSxRef("-moz-box-orient")}}
      • 
- 
    • {{CSSxRef("-moz-box-pack")}}
      • 
+ 
    • {{CSSxRef("box-orient")}}
      • 
+ 
    • {{CSSxRef("box-pack")}}
      • 
 
    
 
 
    C – I
    
@@ -64,22 +63,21 @@ original_slug: Web/CSS/Extensions_Mozilla
 
 
      
  
    • {{CSSxRef("-moz-stack-sizing")}}
      • 
- 
    • {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
      • 
- 
    • {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}
      • 
- 
    • {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
      • 
- 
    • {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
      • 
- 
    • {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
      • 
+ 
    • {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}
      • 
+ 
    • {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}
      • 
+ 
    • {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}
      • 
+ 
    • {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}
      • 
+ 
    • {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}
      • 
  
    • {{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}
      • 
- 
    • {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
      • 
- 
    • {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}
      • 
+ 
    • {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}
      • 
+ 
    • {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}
      • 
  
    • {{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}
      • 
  
    • {{CSSxRef("-moz-user-focus")}}
      • 
  
    • {{CSSxRef("-moz-user-input")}}
      • 
- 
    • {{CSSxRef("-moz-user-modify")}}
      • 
+ 
    • {{CSSxRef("user-modify")}}
      • 
  
    • {{CSSxRef("-moz-window-dragging")}}
      • 
  
    • {{CSSxRef("-moz-window-shadow")}}
      • 
 
    
-
    
 
 
    Anciennes propriétés spécifiques, désormais standardisées
    
 
@@ -87,7 +85,6 @@ original_slug: Web/CSS/Extensions_Mozilla
 
    Note : Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.
    
 
 
-
    
 
      
  
    • 
   
      A
      
@@ -108,7 +105,7 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • {{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
      • 
  
    • {{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}
      • 
  
    • {{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}
      • 
- 
    • {{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]
      • 
+ 
    • {{CSSxRef("box-decoration-break")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]
      • 
  
    • {{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}
      • 
  
    • {{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]
      • 
  
    • {{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]
      • 
@@ -179,21 +176,17 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • {{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
      • 
  
    • {{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}
      • 
 
    
-
    
 
 
    Valeurs
    
 
 
    Valeurs globales
    
 
-
    
 
      
  
    • {{cssxref("initial","-moz-initial")}}
      • 
 
    
-
    
 
-
    {{Cssxref("-moz-appearance")}}
    
+
    {{Cssxref("appearance")}}
    
 
-
    
 
      
  
    • button
      • 
  
    • button-arrow-down
      • 
@@ -280,14 +273,12 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • treeview
      • 
  
    • window
      • 
 
    
-
    
 
 
    {{cssxref("background-image")}}
    
 
-
    
 
      
  
    • 
-  
      Dégradés {{Gecko_minversion_inline("1.9.2")}}
      
+  
      Dégradés 
      
 
   
        
    
      • {{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}
        • 
@@ -295,43 +286,37 @@ original_slug: Web/CSS/Extensions_Mozilla
   
      
  
      • 
  
    • 
-  
      Éléments {{gecko_minversion_inline("2.0")}}
      
+  
      Éléments 
      
 
   
        
    
      • {{cssxref("-moz-element")}}
        • 
   
      
  
      • 
  
    • 
-  
      Sub-images {{gecko_minversion_inline("2.0")}}
      
+  
      Sub-images 
      
 
   
        
    
      • {{cssxref("-moz-image-rect")}}
        • 
   
      
  
      • 
 
    
-
    
 
 
    {{Cssxref("border-color")}}
    
 
-
    
 
      
- 
    • -moz-use-text-color {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; currentcolor doit être utilisée à la place.
      • 
+ 
    • -moz-use-text-color {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; currentcolor doit être utilisée à la place.
      • 
 
    
-
    
 
 
    {{Cssxref("border-style")}} et {{Cssxref("outline-style")}}
    
 
-
    
 
      
  
    • -moz-bg-inset{{Obsolete_Inline(1.9)}}
      • 
  
    • -moz-bg-outset{{Obsolete_Inline(1.9)}}
      • 
  
    • -moz-bg-solid{{Obsolete_Inline(1.9)}}
      • 
 
    
-
    
 
 
    Mots-clés pour {{cssxref("<color>")}}
    
 
-
    
 
      
  
    • -moz-activehyperlinktext
      • 
  
    • -moz-hyperlinktext
      • 
@@ -339,8 +324,8 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • -moz-buttondefault
      • 
  
    • -moz-buttonhoverface
      • 
  
    • -moz-buttonhovertext
      • 
- 
    • -moz-default-background-color{{Gecko_minversion_inline("5.0")}}
      • 
- 
    • -moz-default-color{{Gecko_minversion_inline("5.0")}}
      • 
+ 
    • -moz-default-background-color
      • 
+ 
    • -moz-default-color
      • 
  
    • -moz-cellhighlight
      • 
  
    • -moz-cellhighlighttext
      • 
  
    • -moz-field
      • 
@@ -355,8 +340,8 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • -moz-mac-accentlightshadow
      • 
  
    • -moz-mac-accentregularhighlight
      • 
  
    • -moz-mac-accentregularshadow
      • 
- 
    • -moz-mac-chrome-active{{Gecko_minversion_inline("1.9.1")}}
      • 
- 
    • -moz-mac-chrome-inactive{{Gecko_minversion_inline("1.9.1")}}
      • 
+ 
    • -moz-mac-chrome-active
      • 
+ 
    • -moz-mac-chrome-inactive
      • 
  
    • -moz-mac-focusring
      • 
  
    • -moz-mac-menuselect
      • 
  
    • -moz-mac-menushadow
      • 
@@ -364,14 +349,12 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • -moz-menuhover
      • 
  
    • -moz-menuhovertext
      • 
  
    • -moz-win-communicationstext
      • 
- 
    • -moz-win-mediatext{{gecko_minversion_inline(1.9)}}
      • 
- 
    • -moz-nativehyperlinktext{{Gecko_minversion_inline("1.9.1")}}
      • 
+ 
    • -moz-win-mediatext
      • 
+ 
    • -moz-nativehyperlinktext
      • 
 
    
-
    
 
 
    {{Cssxref("display")}}
    
 
-
    
 
      
  
    • -moz-box {{Deprecated_Inline}}
      • 
  
    • -moz-inline-block {{Obsolete_Inline}}
      • 
@@ -388,19 +371,15 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • -moz-stack{{Obsolete_Inline(62)}}
      • 
  
    • -moz-marker{{Obsolete_Inline(62)}}
      • 
 
    
-
    
 
 
    {{cssxref("empty-cells")}}
    
 
-
    
 
      
  
    • -moz-show-background (valeur par défaut en quirks mode)
      • 
 
    
-
    
 
 
    {{Cssxref("font")}}
    
 
-
    
 
      
  
    • -moz-button
      • 
  
    • -moz-info
      • 
@@ -413,35 +392,27 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • -moz-pull-down-menu
      • 
  
    • -moz-field (également une couleur)
      • 
 
    
-
    
 
 
    {{Cssxref("font-family")}}
    
 
-
    
 
      
  
    • -moz-fixed
      • 
 
    
-
    
 
 
    {{Cssxref("image-rendering")}}
    
 
-
    
 
      
- 
    • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
      • 
+ 
    • {{Cssxref("image-rendering","-moz-crisp-edges")}} 
      • 
 
    
-
    
 
 
    {{cssxref("<length>")}}
    
 
-
    
 
      
- 
    • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
      • 
+ 
    • {{cssxref("-moz-calc")}} 
      • 
 
    
-
    
 
 
    {{Cssxref("list-style-type")}}
    
 
-
    
 
      
  
    • -moz-arabic-indic
      • 
  
    • -moz-bengali
      • 
@@ -475,69 +446,57 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • -moz-trad-chinese-informal
      • 
  
    • -moz-urdu
      • 
 
    
-
    
 
 
    {{Cssxref("overflow")}}
    
 
-
    
 
      
  
    • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
      • 
  
    • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
      • 
  
    • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
      • 
  
    • {{Cssxref("-moz-hidden-unscrollable")}}
      • 
 
    
-
    
 
 
    {{Cssxref("text-align")}}
    
 
-
    
 
      
  
    • -moz-center
      • 
  
    • -moz-left
      • 
  
    • -moz-right
      • 
 
    
-
    
 
 
    {{Cssxref("text-decoration")}}
    
 
-
    
 
      
  
    • -moz-anchor-decoration
      • 
 
    
-
    
 
 
    {{Cssxref("-moz-user-select")}}
    
 
-
    
 
      
  
    • -moz-all
      • 
  
    • -moz-none
      • 
 
    
-
    
 
 
    {{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}
    
 
-
    
 
      
  
    • -moz-min-content
      • 
  
    • -moz-fit-content
      • 
  
    • -moz-max-content
      • 
  
    • -moz-available
      • 
 
    
-
    
 
 
    Pseudo-éléments et pseudo-classes
    
 
-
    
 
      
  
    • 
   
      A – D
      
  
      • 
- 
    • {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
      • 
+ 
    • {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
      • 
  
    • {{CSSxRef("::-moz-anonymous-positioned-block")}}
      • 
- 
    • {{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}
      • 
+ 
    • {{CSSxRef(":-moz-any")}}
      • 
  
    • {{CSSxRef(":-moz-any-link")}} [Matches :link and :visited]
      • 
- 
    • {{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}
      • 
+ 
    • {{CSSxRef(":-moz-broken")}}
      • 
  
    • {{CSSxRef("::-moz-canvas")}}
      • 
  
    • {{CSSxRef("::-moz-color-swatch")}}
      • 
  
    • {{CSSxRef("::-moz-cell-content")}}
      • 
@@ -548,12 +507,12 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • {{CSSxRef(":-moz-first-node")}}
      • 
  
    • {{CSSxRef("::-moz-focus-inner")}}
      • 
  
    • {{CSSxRef("::-moz-focus-outer")}}
      • 
- 
    • {{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}
      • 
- 
    • {{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}
      • 
- 
    • {{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}
      • 
- 
    • {{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}
      • 
- 
    • {{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}
      • 
- 
    • {{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}
      • 
+ 
    • {{CSSxRef(":-moz-focusring")}}
      • 
+ 
    • {{CSSxRef(":-moz-full-screen")}}
      • 
+ 
    • {{CSSxRef(":-moz-full-screen-ancestor")}}
      • 
+ 
    • {{CSSxRef(":-moz-handler-blocked")}}
      • 
+ 
    • {{CSSxRef(":-moz-handler-crashed")}}
      • 
+ 
    • {{CSSxRef(":-moz-handler-disabled")}}
      • 
  
    • {{CSSxRef("::-moz-inline-table")}}
      • 
  
    • 
   
      L
      
@@ -561,23 +520,23 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • {{CSSxRef(":-moz-last-node")}}
      • 
  
    • {{CSSxRef(":-moz-list-bullet")}}
      • 
  
    • {{CSSxRef(":-moz-list-number")}}
      • 
- 
    • {{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}
      • 
- 
    • {{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}
      • 
+ 
    • {{CSSxRef(":-moz-loading")}}
      • 
+ 
    • {{CSSxRef(":-moz-locale-dir(ltr)")}}
      • 
+ 
    • {{CSSxRef(":-moz-locale-dir(rtl)")}}
      • 
+ 
    • {{CSSxRef(":-moz-lwtheme")}}
      • 
+ 
    • {{CSSxRef(":-moz-lwtheme-brighttext")}}
      • 
+ 
    • {{CSSxRef(":-moz-lwtheme-darktext")}}
      • 
  
    • 
   
      N – R
      
  
      • 
- 
    • {{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}
      • 
+ 
    • {{CSSxRef(":-moz-native-anonymous")}}
      • 
  
    • {{CSSxRef(":-moz-only-whitespace")}}
      • 
  
    • {{CSSxRef("::-moz-page")}}
      • 
  
    • {{CSSxRef("::-moz-page-sequence")}}
      • 
  
    • {{CSSxRef("::-moz-pagebreak")}}
      • 
  
    • {{CSSxRef("::-moz-pagecontent")}}
      • 
- 
    • {{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}
      • 
- 
    • {{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}
      • 
+ 
    • {{CSSxRef(":placeholder-shown")}}{{Obsolete_Inline("51")}}
      • 
+ 
    • {{CSSxRef("::placeholder")}}{{Deprecated_Inline("51")}}
      • 
  
    • {{CSSxRef("::-moz-progress-bar")}}
      • 
  
    • {{CSSxRef("::-moz-range-progress")}}
      • 
  
    • {{CSSxRef("::-moz-range-thumb")}}
      • 
@@ -591,8 +550,8 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • {{CSSxRef("::-moz-scrolled-content")}}
      • 
  
    • {{CSSxRef("::-moz-scrolled-page-sequence")}}
      • 
  
    • {{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}
      • 
- 
    • {{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}
      • 
- 
    • {{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}
      • 
+ 
    • {{CSSxRef(":-moz-submit-invalid")}}
      • 
+ 
    • {{CSSxRef(":-moz-suppressed")}}
      • 
  
    • {{CSSxRef("::-moz-svg-foreign-content")}}
      • 
  
    • 
   
      T
      
@@ -606,7 +565,7 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • {{CSSxRef("::-moz-table-row-group")}}
      • 
  
    • {{CSSxRef(":-moz-tree-cell")}}
      • 
  
    • {{CSSxRef(":-moz-tree-cell-text")}}
      • 
- 
    • {{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}
      • 
+ 
    • {{CSSxRef(":-moz-tree-cell-text(hover)")}}
      • 
  
    • {{CSSxRef(":-moz-tree-checkbox")}}
      • 
  
    • {{CSSxRef(":-moz-tree-column")}}
      • 
  
    • {{CSSxRef(":-moz-tree-drop-feedback")}}
      • 
@@ -615,65 +574,58 @@ original_slug: Web/CSS/Extensions_Mozilla
  
    • {{CSSxRef(":-moz-tree-line")}}
      • 
  
    • {{CSSxRef(":-moz-tree-progressmeter")}}
      • 
  
    • {{CSSxRef(":-moz-tree-row")}}
      • 
- 
    • {{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}
      • 
+ 
    • {{CSSxRef(":-moz-tree-row(hover)")}}
      • 
  
    • {{CSSxRef(":-moz-tree-separator")}}
      • 
  
    • {{CSSxRef(":-moz-tree-twisty")}}
      • 
  
    • 
   
      U – X
      
  
      • 
- 
    • {{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
      • 
- 
    • {{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
      • 
- 
    • {{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}
      • 
+ 
    • {{CSSxRef(":user-invalid")}}
      • 
+ 
    • {{CSSxRef(":-moz-ui-valid")}}
      • 
+ 
    • {{CSSxRef(":-moz-user-disabled")}}
      • 
  
    • {{CSSxRef("::-moz-viewport")}}
      • 
  
    • {{CSSxRef("::-moz-viewport-scroll")}}
      • 
- 
    • {{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}
      • 
+ 
    • {{CSSxRef(":-moz-window-inactive")}}
      • 
  
    • {{CSSxRef("::-moz-xul-anonymous-block")}}
      • 
 
    
-
    
 
 
    Règles @
    
 
-
    
 
      
  
    • {{Cssxref("@-moz-document")}}
      • 
 
    
-
    
 
 
    Caractéristiques
    
 
-
    
 
      
- 
    • {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}
      • 
  
    • {{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}
      • 
- 
    • {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}
      • 
  
    • {{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}
      • 
- 
    • {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}
      • 
- 
    • {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}
      • 
  
    • {{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}
      • 
- 
    • {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}
      • 
+ 
    • {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}
      • 
 
    
-
    
 
 
    Autres
    
 
-
    
 
      
  
    • {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
      • 
 
    
-
    
 
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/number/index.html b/files/fr/web/css/number/index.html
index c69bd7c8f5..0c055f3739 100644
--- a/files/fr/web/css/number/index.html
+++ b/files/fr/web/css/number/index.html
@@ -17,13 +17,13 @@ translation_of: Web/CSS/number
 
 
    Interpolation
    
 
-
    Les valeurs de type <number> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce à la fonction de temporisation associée à l'animation.
    
+
    Les valeurs de type <number> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce à la fonction de temporisation associée à l'animation.
    
 
 
    Exemples
    
 
 
    Voici des exemples de valeurs <number> valides :
    
 
-
    12          Un entier (<integer>) est également un <number>
+
    12          Un entier (<integer>) est également un <number>
 4.01        Un nombre (décimal) positif
 -456.8      Un nombre décimal négatif
 0.0         Zéro
@@ -36,7 +36,7 @@ translation_of: Web/CSS/number
 
 
    Voici des exemples de valeurs invalides :
    
 
-
    12.         Le point doit être suivi par des chiffres
+
    12.         Le point doit être suivi par des chiffres
 +-12.2      Seul un +/- est autorisé.
 12.1.1      Seul un point est autorisé.
 
    
diff --git a/files/fr/web/css/object-fit/index.html b/files/fr/web/css/object-fit/index.html
index 55089a4cbc..4345f75418 100644
--- a/files/fr/web/css/object-fit/index.html
+++ b/files/fr/web/css/object-fit/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/object-fit
 
 
    {{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.
    
 
 
    
diff --git a/files/fr/web/css/object-position/index.html b/files/fr/web/css/object-position/index.html
index 698403990c..8ef2e87a95 100644
--- a/files/fr/web/css/object-position/index.html
+++ b/files/fr/web/css/object-position/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/object-position
 
 
    {{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é {{cssxref("object-fit")}}.
    
 
    
diff --git a/files/fr/web/css/offset-anchor/index.html b/files/fr/web/css/offset-anchor/index.html
index 799506efed..8d0243dfcc 100644
--- a/files/fr/web/css/offset-anchor/index.html
+++ b/files/fr/web/css/offset-anchor/index.html
@@ -63,14 +63,14 @@ offset-anchor: unset;
    
 
 
    HTML
    
 
-
    <section>
-  <div class="offset-anchor1"></div>
+
    <section>
+  <div class="offset-anchor1"></div>
 </section>
 <section>
-  <div class="offset-anchor2"></div>
+  <div class="offset-anchor2"></div>
 </section>
 <section>
-  <div class="offset-anchor3"></div>
+  <div class="offset-anchor3"></div>
 </section>
 
    
 
@@ -146,5 +146,5 @@ section {
  
  • {{cssxref("offset")}}
    • 
  
  • {{cssxref("offset-distance")}}
    • 
  
  • {{cssxref("offset-rotation")}}
    • 
- 
  • L'élément SVG <path>
    • 
+ 
  • L'élément SVG <path>
    • 
 
diff --git a/files/fr/web/css/offset-distance/index.html b/files/fr/web/css/offset-distance/index.html
index b4e23dcb22..5189bfdf52 100644
--- a/files/fr/web/css/offset-distance/index.html
+++ b/files/fr/web/css/offset-distance/index.html
@@ -26,8 +26,7 @@ offset-distance: 40px;
    
 
 
    
  
    {{cssxref('<length-percentage>')}}
    
- 
    Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}).
    
- 
    La valeur 100% représente la longueur totale du chemin (lorsque offset-path est défini par une forme simple ou grâce à la fonction path()).
    
+ 
    Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}). La valeur 100% représente la longueur totale du chemin (lorsque offset-path est défini par une forme simple ou grâce à la fonction path()).
    
 
    
 
 
    Syntaxe formelle
    
@@ -89,7 +88,7 @@ offset-distance: 40px;
    
 
 
    {{CSSInfo}}
    
 
-
    
+
    
 
    Note : Dans les versions antérieures de la spécification, cette propriété était intitulée motion-offset.
    
 
    
 
diff --git a/files/fr/web/css/offset-path/index.html b/files/fr/web/css/offset-path/index.html
index d23be3eb8b..3a3b342f15 100644
--- a/files/fr/web/css/offset-path/index.html
+++ b/files/fr/web/css/offset-path/index.html
@@ -13,13 +13,11 @@ translation_of: Web/CSS/offset-path
 
 
    {{EmbedInteractiveExample("pages/css/offset-path.html")}}
    
 
-
-
 
    Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.
    
 
 
    La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée 0 de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.
    
 
-
    
+
    
 
    Note : Dans des versions antérieures des spécifications, cette propriété était intitulée motion-path. Le nom a été modifié en offset-path afin de décrire un chemin statique plutôt qu'un chemin en mouvement.
    
 
    
 
@@ -52,7 +50,9 @@ offset-path: unset;
 
 
    Valeurs
    
 
-
    Attention ! À l'heure actuelle, seule la notation path() est prise en charge par les navigateurs.
    
+
    
+  
    Attention : À l'heure actuelle, seule la notation path() est prise en charge par les navigateurs.
    
+
    
 
 
    
  
    ray()
    
@@ -60,8 +60,7 @@ offset-path: unset;
  
    url()
    
  
    Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : circle, ellipse, line, path, polygon, polyline ou rect et d'utiliser la géométrie de la forme visée pour construire le chemin.
    
  
    <basic-shape>
    
- 
    Cette valeur indique une forme CSS en utilisant les notations fonctionnelles circle(), ellipse(), inset(), polygon() ou path().
    
- 
    
+ 
    Cette valeur indique une forme CSS en utilisant les notations fonctionnelles circle(), ellipse(), inset(), polygon() ou path().
  
    
   
    path()
    
   
    Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.
    
@@ -77,7 +76,7 @@ offset-path: unset;
 
 
    Exemples
    
 
-
    L'exemple qui suit est tiré de cette démo présente sur CodePen. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés offset-path utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe :path() est utilisée avec offset-path et que le document SVG contient <path>. Si on compare ces deux données, on verra qu'elles sont identiques.
    
+
    L'exemple qui suit est tiré de cette démo présente sur CodePen. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés offset-path utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe :path() est utilisée avec offset-path et que le document SVG contient <path>. Si on compare ces deux données, on verra qu'elles sont identiques.
    
 
 
    CSS
    
 
diff --git a/files/fr/web/css/offset-position/index.html b/files/fr/web/css/offset-position/index.html
index 3aa89b7ab7..a73e9d4b41 100644
--- a/files/fr/web/css/offset-position/index.html
+++ b/files/fr/web/css/offset-position/index.html
@@ -7,9 +7,9 @@ translation_of: Web/CSS/offset-position
 
 
    La propriété CSS offset-position définit la position initiale de {{cssxref("offset-path")}}.
    
 
-
    Syntax
    
+
    Syntax
    
 
-
    /* Valeurs de mots clefs */
+
    /* Valeurs de mots clefs */
 offset-position: auto;
 offset-position: top;
 offset-position: bottom;
@@ -37,12 +37,12 @@ offset-position: initial;
 offset-position: unset;
 
    
 
-
    Values
    
+
    Values
    
 
 
    
  
    auto
    
  
    La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}.
    
- 
    <position>
    
+ 
    <position>
    
  
    Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme center. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}.
    
 
    
 
@@ -58,10 +58,10 @@ offset-position: unset;
 
 
    Définir la valeur initiale de offset-position
    
 
-
    <div id="motion-demo"></div>
+
    <div id="motion-demo"></div>
 
    
 
-
    #motion-demo {
+
    #motion-demo {
   offset-path: path('M20,20 C20,100 200,0 200,100');
   offset-position: left top;
   animation: move 3000ms infinite alternate ease-in-out;
diff --git a/files/fr/web/css/opacity/index.html b/files/fr/web/css/opacity/index.html
index 7051c95abd..4f33f117e4 100644
--- a/files/fr/web/css/opacity/index.html
+++ b/files/fr/web/css/opacity/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/opacity
 
 
    {{EmbedInteractiveExample("pages/css/opacity.html")}}
    
 
-
-
 
    La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser opacity, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : background: rgba(0, 0, 0, 0.4);).
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/order/index.html b/files/fr/web/css/order/index.html
index ed0854e8b5..e41e565c0f 100644
--- a/files/fr/web/css/order/index.html
+++ b/files/fr/web/css/order/index.html
@@ -13,10 +13,8 @@ translation_of: Web/CSS/order
 
 
    {{EmbedInteractiveExample("pages/css/order.html")}}
    
 
-
-
 
    
-
    Note : order est uniquement conçue pour affecter l'ordre visuel. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. order ne doit pas être utilisée avec les média non visuels comme les informations vocales.
    
+
    Note : order est uniquement conçue pour affecter l'ordre visuel. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. order ne doit pas être utilisée avec les média non visuels comme les informations vocales.
    
 
    
 
 
    Syntaxe
    
@@ -89,7 +87,7 @@ order: unset;
 
 
@@ -122,7 +120,7 @@ order: unset;
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/css/outline-color/index.html b/files/fr/web/css/outline-color/index.html
index 243233ec9e..daf0293821 100644
--- a/files/fr/web/css/outline-color/index.html
+++ b/files/fr/web/css/outline-color/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-color
 
 
    {{EmbedInteractiveExample("pages/css/outline-color.html")}}
    
 
-
-
 
    À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété outline-color est également synthétisée avec la propriété raccourcie {{cssxref("outline")}}.
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/outline-offset/index.html b/files/fr/web/css/outline-offset/index.html
index f83b472e4a..98bcb9014e 100644
--- a/files/fr/web/css/outline-offset/index.html
+++ b/files/fr/web/css/outline-offset/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-offset
 
 
    {{EmbedInteractiveExample("pages/css/outline-offset.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs de longueur */
diff --git a/files/fr/web/css/outline-style/index.html b/files/fr/web/css/outline-style/index.html
index 41758c4d5e..5a98aa4cf7 100644
--- a/files/fr/web/css/outline-style/index.html
+++ b/files/fr/web/css/outline-style/index.html
@@ -9,17 +9,15 @@ translation_of: Web/CSS/outline-style
 ---
 
    {{CSSRef}}
    
 
-
    La propriété outline-style permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de la boîte de bordure et peut être utilisée afin de faire ressortir l'élément.
    
+
    La propriété outline-style permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de la boîte de bordure et peut être utilisée afin de faire ressortir l'élément.
    
 
 
    {{EmbedInteractiveExample("pages/css/outline-style.html")}}
    
 
-
-
 
    Cette propriété est synthétisée grâce à la propriété {{cssxref("outline")}} qui regroupe outline-style, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.
    
 
 
    Syntaxe
    
 
-
    /* Valeurs avec un mot-clé */
+
    /* Valeurs avec un mot-clé */
 outline-style: auto;
 outline-style: none;
 outline-style: dotted;
@@ -72,7 +70,7 @@ outline-style: unset;
 
 
    CSS
    
 
-
    .exemple-groove {
+
    .exemple-groove {
   outline-style: groove;
   outline-color: red;
   outline-width: 2px;
@@ -86,7 +84,7 @@ outline-style: unset;
 
 
    HTML
    
 
-
    <p class="exemple-groove">Ça c'est le groove</p>
+
    <p class="exemple-groove">Ça c'est le groove</p>
 <p class="exemple-outset">Et ça c'est outset</p>
 
    
 
@@ -94,13 +92,13 @@ outline-style: unset;
 
 
    {{EmbedLiveSample("Exemple_simple","100%","100%")}}
    
 
-
    Utilisation de la valeur auto
    
+
    Utilisation de la valeur auto
    
 
 
    La valeur auto indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.
    
 
 
    CSS
    
 
-
    .auto {
+
    .auto {
   outline-style: auto; /* same result as "outline: auto" */
 }
 
@@ -109,7 +107,7 @@ outline-style: unset;
 
 
    HTML
    
 
-
    <div>
+
    <div>
   <p class="auto">Outline Demo</p>
 </div> 
    
 
diff --git a/files/fr/web/css/outline-width/index.html b/files/fr/web/css/outline-width/index.html
index 0a46eda6aa..b0a97a057c 100644
--- a/files/fr/web/css/outline-width/index.html
+++ b/files/fr/web/css/outline-width/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/outline-width
 
 
    {{EmbedInteractiveExample("pages/css/outline-width.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs avec un mot clé */
diff --git a/files/fr/web/css/outline/index.html b/files/fr/web/css/outline/index.html
index 235e8239cd..7b505019a2 100644
--- a/files/fr/web/css/outline/index.html
+++ b/files/fr/web/css/outline/index.html
@@ -11,9 +11,7 @@ translation_of: Web/CSS/outline
 
 
    La propriété outline est une propriété raccourcie qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.
    
 
-
    {{EmbedInteractiveExample("pages/css/outline.html")}}
    
-
-
+
    {{EmbedInteractiveExample("pages/css/outline.html")}}
    À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec leur valeur initiale.
    
 
@@ -46,7 +44,7 @@ outline: initial;
 outline: unset;
 
    
 
-
    La propriété outline peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.
    
+
    La propriété outline peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.
    
 
 
    
 
    Note : Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut none).
    
diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
index eacd32baed..cecf8f743f 100644
--- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
+++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
@@ -45,8 +45,8 @@ original_slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement
   overflow-anchor: none;
 } 
    
 
-
    
-
    Note : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) overflow-anchor: auto à un autre endroit du document.
    
+
    
+
    Note : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) overflow-anchor: auto à un autre endroit du document.
    
 
    
 
 
    Supression triggers
    
diff --git a/files/fr/web/css/overflow-block/index.html b/files/fr/web/css/overflow-block/index.html
index 9a8d35a650..ee9da652bc 100644
--- a/files/fr/web/css/overflow-block/index.html
+++ b/files/fr/web/css/overflow-block/index.html
@@ -100,9 +100,7 @@ overflow-block: unset;
 
 
    Résultat
    
 
-
    
 
    {{EmbedLiveSample("Exemples", "100%", "780")}}
    
-
    
 
 
    Spécifications
    
 
@@ -129,7 +127,7 @@ overflow-block: unset;
 
 
    {{Compat("css.properties.overflow-block")}}
    
 
-
    Voir aussi
    
+
    Voir aussi
    
 
 
      
  
    • Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}
      • 
diff --git a/files/fr/web/css/overflow-inline/index.html b/files/fr/web/css/overflow-inline/index.html
index c3a616fa8f..845fe83f15 100644
--- a/files/fr/web/css/overflow-inline/index.html
+++ b/files/fr/web/css/overflow-inline/index.html
@@ -100,9 +100,7 @@ overflow-inline: unset;
 
 
      Résultat
      
 
-
      
 
      {{EmbedLiveSample("Exemples", "100%", "270")}}
      
-
      
 
 
      Spécifications
      
 
@@ -129,7 +127,7 @@ overflow-inline: unset;
 
 
      {{Compat("css.properties.overflow-inline")}}
      
 
-
      Voir aussi
      
+
      Voir aussi
      
 
 
        
  
      • Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}
        • 
diff --git a/files/fr/web/css/overflow-wrap/index.html b/files/fr/web/css/overflow-wrap/index.html
index 0cc851c2f4..af17d340b6 100644
--- a/files/fr/web/css/overflow-wrap/index.html
+++ b/files/fr/web/css/overflow-wrap/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/overflow-wrap
 
 
        {{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
        
 
-
-
 
        
 
        Note : À la différence de {{cssxref("word-break")}}, overflow-wrap créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.
        
 
        
@@ -45,13 +43,12 @@ overflow-wrap: unset;
  
        Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles min-content intrinsèques.
        
  
        break-word
        
  
        Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure ne sont pas prises en compte lors du calcul des tailles min-content intrinsèques.
        
- 
        
- 
        Syntaxe formelle
        
-
- {{csssyntax}}
- 
        
 
    
 
+
    Syntaxe formelle
    
+
+
    {{csssyntax}}
    
+
 
    Exemples
    
 
 
    CSS
    
diff --git a/files/fr/web/css/overflow-x/index.html b/files/fr/web/css/overflow-x/index.html
index 598b2b8916..daef74255a 100644
--- a/files/fr/web/css/overflow-x/index.html
+++ b/files/fr/web/css/overflow-x/index.html
@@ -17,8 +17,6 @@ translation_of: Web/CSS/overflow-x
 
 
    {{EmbedInteractiveExample("pages/css/overflow-x.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs avec un mot-clé */
@@ -110,9 +108,7 @@ overflow-x: unset;
 
 
    Résultat
    
 
-
    
 
    {{EmbedLiveSample("Exemples", "100%", "270")}}
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/overflow-y/index.html b/files/fr/web/css/overflow-y/index.html
index 0ed664de32..c91f18849d 100644
--- a/files/fr/web/css/overflow-y/index.html
+++ b/files/fr/web/css/overflow-y/index.html
@@ -17,8 +17,6 @@ translation_of: Web/CSS/overflow-y
 
 
    {{EmbedInteractiveExample("pages/css/overflow-y.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs avec un mot-clé */
@@ -115,9 +113,7 @@ overflow-y: unset;
 
 
    Résultat
    
 
-
    
 
    {{EmbedLiveSample("Exemples", "100%", "780")}}
    
-
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/overflow/index.html b/files/fr/web/css/overflow/index.html
index 54a4d86f53..58dcae523b 100644
--- a/files/fr/web/css/overflow/index.html
+++ b/files/fr/web/css/overflow/index.html
@@ -14,9 +14,7 @@ translation_of: Web/CSS/overflow
 
 
    {{EmbedInteractiveExample("pages/css/overflow.html")}}
    
 
-
-
-
    Lorsqu'on utilise la propriété overflow avec une autre valeur que visible (la valeur par défaut), cela entraîne la création d'un nouveau contexte de formatage de bloc. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée
    
+
    Lorsqu'on utilise la propriété overflow avec une autre valeur que visible (la valeur par défaut), cela entraîne la création d'un nouveau contexte de formatage de bloc. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée
    
 
 
    Afin que la propriété overflow puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir white-space avec la valeur nowrap.
    
 
@@ -25,7 +23,7 @@ translation_of: Web/CSS/overflow
 
    
 
 
    
-
    Note : Lorsqu'on définit, via un script, la propriété scrollTop sur les éléments HTML pertinents, même lorsque overflow vaut hidden, il faut parfois faire défiler l'élément.
    
+
    Note : Lorsqu'on définit, via un script, la propriété scrollTop sur les éléments HTML pertinents, même lorsque overflow vaut hidden, il faut parfois faire défiler l'élément.
    
 
    
 
 
    Syntaxe
    
@@ -68,16 +66,13 @@ overflow: unset;
 
 
    
  
    -moz-scrollbars-none {{obsolete_inline}}
    
- 
    overflow:hidden doit être utilisé à la place.
- 
    Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
    
+ 
    overflow:hidden doit être utilisé à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
  
    
  
    -moz-scrollbars-horizontal {{Deprecated_inline}}
    
- 
    Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place.
- 
    Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
    
+ 
    Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
  
    
  
    -moz-scrollbars-vertical {{Deprecated_inline}}
    
- 
    Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place.
- 
    Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
    
+ 
    Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
  
    
  
    -moz-hidden-unscrollable {{non-standard_inline}}
    
  
    Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <html>,  <body> (avec les flèches du clavier et la roue de la souris).
    
@@ -89,45 +84,79 @@ overflow: unset;
 
 
    Exemples
    
 
-
    p {
-  width: 12em;
-  height: 6em;
+
    Définir différentes valeurs d'overflow pour le texte
    
+
+
    HTML
    
+
+
    +  <div>
+    <code>visible</code>
+    <p class="visible">
+     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+    </p>
+  </div>
+
+  <div>
+    <code>hidden</code>
+    <p class="hidden">
+     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+    </p>
+  </div>
+
+  <div>
+    <code>scroll</code>
+    <p class="scroll">
+     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+    </p>
+  </div>
+
+  <div>
+    <code>auto</code>
+    <p class="auto">
+     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+    </p>
+  </div>
+
    
+
+
    CSS
    
+
+
    +body {
+  display: flex;
+  justify-content: space-around;
+}
+
+div {
+  margin: 1em;
+  font-size: 1.2em;
+}
+
+p {
+  width: 8em;
+  height: 5em;
   border: dotted;
+}
 
-  /* le contenu n'est pas rogné */
+p.visible {
   overflow: visible;
 }
-
    
 
-
    visible (default)
    
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    
-
-
    p {
-  /* pas d'ascenseur fourni */
+p.hidden {
   overflow: hidden;
 }
-
    
 
-
    overflow: hidden
    
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    
-
-
    p {
-  /* les ascenseurs sont toujours affichés */
+p.scroll {
   overflow: scroll;
 }
-
    
 
-
    overflow: scroll
    
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    
-
-
    p {
-  /* les ascenseurs sont affichés si nécessaires */
+p.auto {
   overflow: auto;
 }
 
    
 
-
    overflow: auto
    
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    
+
    Résultat
    
+
+
    {{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}}
    
 
 
    Spécifications
    
 
diff --git a/files/fr/web/css/overscroll-behavior-x/index.html b/files/fr/web/css/overscroll-behavior-x/index.html
index 7369eb8152..6863618b75 100644
--- a/files/fr/web/css/overscroll-behavior-x/index.html
+++ b/files/fr/web/css/overscroll-behavior-x/index.html
@@ -13,7 +13,7 @@ translation_of: Web/CSS/overscroll-behavior-x
 
    La propriété CSS overscroll-behavior-x définit le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe horizontal.
    
 
 
    
-
    Note : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.
    
+
    Note : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.
    
 
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/overscroll-behavior-y/index.html b/files/fr/web/css/overscroll-behavior-y/index.html
index 75c5d85354..2b9e86b5ad 100644
--- a/files/fr/web/css/overscroll-behavior-y/index.html
+++ b/files/fr/web/css/overscroll-behavior-y/index.html
@@ -13,7 +13,7 @@ translation_of: Web/CSS/overscroll-behavior-y
 
    La propriété CSS overscroll-behavior-y permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.
    
 
 
    
-
    Note : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.
    
+
    Note : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.
    
 
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/overscroll-behavior/index.html b/files/fr/web/css/overscroll-behavior/index.html
index 12689d8d21..7145aa1b6e 100644
--- a/files/fr/web/css/overscroll-behavior/index.html
+++ b/files/fr/web/css/overscroll-behavior/index.html
@@ -55,7 +55,7 @@ overflow: unset;
 
 
    Dans notre exemple sur overscroll-behavior (cf. le code source associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion. 
    
 
-
    
+
    
 
 
    Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc overscroll-behavior-y (overscroll-behavior fonctionnerait également) sur la fenêtre de discussion :
    
 
diff --git a/files/fr/web/css/padding-block-end/index.html b/files/fr/web/css/padding-block-end/index.html
index 77365bdb63..91344ee297 100644
--- a/files/fr/web/css/padding-block-end/index.html
+++ b/files/fr/web/css/padding-block-end/index.html
@@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-block-end
 
 
    {{EmbedInteractiveExample("pages/css/padding-block-end.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs de longueur */
diff --git a/files/fr/web/css/padding-block-start/index.html b/files/fr/web/css/padding-block-start/index.html
index b75dee980f..8a70d9e330 100644
--- a/files/fr/web/css/padding-block-start/index.html
+++ b/files/fr/web/css/padding-block-start/index.html
@@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-block-start
 
 
    {{EmbedInteractiveExample("pages/css/padding-block-start.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs de longueur */
diff --git a/files/fr/web/css/padding-bottom/index.html b/files/fr/web/css/padding-bottom/index.html
index 1b84a4d296..4e2f06874c 100644
--- a/files/fr/web/css/padding-bottom/index.html
+++ b/files/fr/web/css/padding-bottom/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-bottom
 
 
    {{EmbedInteractiveExample("pages/css/padding-bottom.html")}}
    
 
-
-
 
    La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-bottom donc).
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/padding-inline-end/index.html b/files/fr/web/css/padding-inline-end/index.html
index eae949899b..5ba370f4da 100644
--- a/files/fr/web/css/padding-inline-end/index.html
+++ b/files/fr/web/css/padding-inline-end/index.html
@@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-inline-end
 
 
    {{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs de longueur */
diff --git a/files/fr/web/css/padding-inline-start/index.html b/files/fr/web/css/padding-inline-start/index.html
index cffa148b81..0c58a3d67e 100644
--- a/files/fr/web/css/padding-inline-start/index.html
+++ b/files/fr/web/css/padding-inline-start/index.html
@@ -16,8 +16,6 @@ translation_of: Web/CSS/padding-inline-start
 
 
    {{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}
    
 
-
-
 
    Syntaxe
    
 
 
    /* Valeurs de longueur */
diff --git a/files/fr/web/css/padding-inline/index.html b/files/fr/web/css/padding-inline/index.html
index 7af32a6705..b4fd3ffbf3 100644
--- a/files/fr/web/css/padding-inline/index.html
+++ b/files/fr/web/css/padding-inline/index.html
@@ -13,7 +13,7 @@ translation_of: Web/CSS/padding-inline
 
 
    La propriété padding-inline définit l'espace de remplissage (padding) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
    
 
-
    /* Valeurs de longueur */
+
    /* Valeurs de longueur */
 /* Type <length> */
 padding-inline: 10px 20px;  /* Des longueurs absolues */
 padding-inline: 1em 2em;    /* Des longueurs relatives à la taille du texte */
@@ -45,7 +45,7 @@ padding-inline: unset;
 
 
    CSS
    
 
-
    div {
+
    div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -59,7 +59,7 @@ padding-inline: unset;
 
 
    HTML
    
 
-
    <div>
+
    <div>
   <p class="texteExemple">Texte d'exemple</p>
 </div>
 
    
diff --git a/files/fr/web/css/padding-left/index.html b/files/fr/web/css/padding-left/index.html
index cbcb040f4d..616f871991 100644
--- a/files/fr/web/css/padding-left/index.html
+++ b/files/fr/web/css/padding-left/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-left
 
 
    {{EmbedInteractiveExample("pages/css/padding-left.html")}}
    
 
-
-
 
    La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-left donc).
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/padding-right/index.html b/files/fr/web/css/padding-right/index.html
index 3571c821c7..245c6797fd 100644
--- a/files/fr/web/css/padding-right/index.html
+++ b/files/fr/web/css/padding-right/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/padding-right
 
 
    {{EmbedInteractiveExample("pages/css/padding-right.html")}}
    
 
-
-
 
    
 
    Note : La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-right donc).
    
 
    
diff --git a/files/fr/web/css/padding-top/index.html b/files/fr/web/css/padding-top/index.html
index 6dd515752c..97b9a7760d 100644
--- a/files/fr/web/css/padding-top/index.html
+++ b/files/fr/web/css/padding-top/index.html
@@ -15,8 +15,6 @@ translation_of: Web/CSS/padding-top
 
 
    {{EmbedInteractiveExample("pages/css/padding-top.html")}}
    
 
-
-
 
    La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-top donc).
    
 
 
    Syntaxe
    
diff --git a/files/fr/web/css/padding/index.html b/files/fr/web/css/padding/index.html
index 35002900d1..3b643b258d 100644
--- a/files/fr/web/css/padding/index.html
+++ b/files/fr/web/css/padding/index.html
@@ -10,13 +10,11 @@ translation_of: Web/CSS/padding
 ---
 
    {{CSSRef}}
    
 
-
    La propriété padding est une propriété raccourcie qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. les boîtes CSS). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.
    
+
    La propriété padding est une propriété raccourcie qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. les boîtes CSS). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.
    
 
 
    {{EmbedInteractiveExample("pages/css/padding.html")}}
    
 
-
-
-
    La zone de remplissage correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.
    
+
    La zone de remplissage correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.
    
 
 
    
 
    Note : Le padding permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.
    
@@ -134,7 +132,7 @@ h3 {
 
    Voir aussi
    
 
 
      
- 
    • CSS : Le modèle de boîtes
      • 
+ 
    • CSS : Le modèle de boîtes
      • 
  
    • Les quatres propriétés détaillées synthétisées par padding :
   
        
    
      • {{cssxref("padding-top")}}
        • 
diff --git a/files/fr/web/css/page-break-after/index.html b/files/fr/web/css/page-break-after/index.html
index b01e767e9c..6c40401c7f 100644
--- a/files/fr/web/css/page-break-after/index.html
+++ b/files/fr/web/css/page-break-after/index.html
@@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-after
 ---
 
        {{CSSRef}}
        
 
-
        
-
        Attention ! Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.
        
+
        
+
        Attention : Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.
        
 
        
 
 
        La propriété CSS page-break-after permet d'ajuster les sauts de page placés après l'élément courant.
        
diff --git a/files/fr/web/css/page-break-before/index.html b/files/fr/web/css/page-break-before/index.html
index 67fdbe48f5..ebbbfaa167 100644
--- a/files/fr/web/css/page-break-before/index.html
+++ b/files/fr/web/css/page-break-before/index.html
@@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-before
 ---
 
        {{CSSRef}}
        
 
-
        
-
        Attention ! Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.
        
+
        
+
        Attention : Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.
        
 
        
 
 
        La propriété CSS page-break-before permet d'ajuster les sauts de page placés avant l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.
        
diff --git a/files/fr/web/css/page-break-inside/index.html b/files/fr/web/css/page-break-inside/index.html
index 5fa07bd2f5..3dc045c5ee 100644
--- a/files/fr/web/css/page-break-inside/index.html
+++ b/files/fr/web/css/page-break-inside/index.html
@@ -9,8 +9,8 @@ translation_of: Web/CSS/page-break-inside
 ---
 
        {{CSSRef}}
        
 
-
        
-
        Attention ! Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.
        
+
        
+
        Attention : Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.
        
 
        
 
 
        La propriété page-break-inside ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.
        
diff --git a/files/fr/web/css/paint-order/index.html b/files/fr/web/css/paint-order/index.html
index 77c5356938..ffbc99c063 100644
--- a/files/fr/web/css/paint-order/index.html
+++ b/files/fr/web/css/paint-order/index.html
@@ -41,7 +41,7 @@ paint-order: markers stroke fill;
 
        Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.
        
 
 
        
-
        Note : Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés marker-* (e.g. marker-start) ou l'élément <marker>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre stroke et fill importe.
        
+
        Note : Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés marker-* (e.g. marker-start) ou l'élément <marker>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre stroke et fill importe.
        
 
        
 
 
        Valeurs
        
diff --git a/files/fr/web/css/path()/index.html b/files/fr/web/css/path()/index.html
index 2f6d56f241..7be4d1a072 100644
--- a/files/fr/web/css/path()/index.html
+++ b/files/fr/web/css/path()/index.html
@@ -57,5 +57,5 @@ path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
   
      • {{cssxref("<shape-outside>")}}
        • 
   
      • Formes CSS
        • 
   
      • Vue d'ensemble des formes CSS
        • 
-  
      • SVG Path Syntax Illustrated Guide (en anglais)
        • 
+  
      • SVG Path Syntax Illustrated Guide (en anglais)
        • 
 
      
diff --git a/files/fr/web/css/perspective-origin/index.html b/files/fr/web/css/perspective-origin/index.html
index 86f51bfa86..8a8768ebf1 100644
--- a/files/fr/web/css/perspective-origin/index.html
+++ b/files/fr/web/css/perspective-origin/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/perspective-origin
 
 
      {{EmbedInteractiveExample("pages/css/perspective-origin.html")}}
      
 
-
-
 
      Les propriétés perspective-origin et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction perspective() s'applique à même l'élément qu'on veut placer en 3D.
      
 
 
      Syntaxe
      
diff --git a/files/fr/web/css/perspective/index.html b/files/fr/web/css/perspective/index.html
index 306bcb7936..e29b24aa7a 100644
--- a/files/fr/web/css/perspective/index.html
+++ b/files/fr/web/css/perspective/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/perspective
 
 
      {{EmbedInteractiveExample("pages/css/perspective.html")}}
      
 
-
-
 
      Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété perspective) ne sont pas dessiné.
      
 
 
      Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}.
      
diff --git a/files/fr/web/css/place-content/index.html b/files/fr/web/css/place-content/index.html
index 4dc5d23259..58064fcb1f 100644
--- a/files/fr/web/css/place-content/index.html
+++ b/files/fr/web/css/place-content/index.html
@@ -12,9 +12,7 @@ translation_of: Web/CSS/place-content
 
 
      La propriété raccourcie place-content permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.
      
 
-
      {{EmbedInteractiveExample("pages/css/place-content.html")}}
      
-
-
+
      {{EmbedInteractiveExample("pages/css/place-content.html")}}
      Syntaxe
 
@@ -46,7 +44,7 @@ place-content: unset;
    
 
    La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour justify-content.
    
 
 
    
-
    Attention ! Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.
    
+
    Attention : Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.
    
 
    
 
 
    Valeurs
    
@@ -89,7 +87,7 @@ place-content: unset;
    
 
 
    CSS
    
 
-
    #container {
+
    #container {
   display: flex;
   height:240px;
   width: 240px;
@@ -171,10 +169,7 @@ div > div {
 </select><code>;</code>
 
    
 
-
 
 
    Résultat
    
 
@@ -235,10 +229,10 @@ direction.addEventListener("change", function (evt) {
 
    Voir aussi
    
 
 
      
- 
    • Utiliser les boîtes flexibles en CSS
      • 
- 
    • Guide sur les grilles : Aligner des objets dans une grille
      • 
- 
    • Guide sur les boîtes flexibles : Les concepts de bases
      • 
- 
    • Guide sur les boîtes flexibles : Aligner des objets dans un conteneur flexible
      • 
+ 
    • Utiliser les boîtes flexibles en CSS
      • 
+ 
    • Guide sur les grilles : Aligner des objets dans une grille
      • 
+ 
    • Guide sur les boîtes flexibles : Les concepts de bases
      • 
+ 
    • Guide sur les boîtes flexibles : Aligner des objets dans un conteneur flexible
      • 
  
    • Le module de spécification CSS Box Alignment
      • 
  
    • La propriété {{cssxref("align-content")}}
      • 
  
    • La propriété {{cssxref("justify-content")}}
      • 
diff --git a/files/fr/web/css/place-items/index.html b/files/fr/web/css/place-items/index.html
index edcda65124..c5b670ba70 100644
--- a/files/fr/web/css/place-items/index.html
+++ b/files/fr/web/css/place-items/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/place-items
 
 
      {{EmbedInteractiveExample("pages/css/place-items.html")}}
      
 
-
-
 
      Syntaxe
      
 
 
      /* Valeurs avec un mot-clé */
@@ -97,7 +95,7 @@ place-items: unset;
 
 
      CSS
      
 
-
      #container {
+
      #container {
   height:200px;
   width: 240px;
   place-items: center; /* Cette valeur peut être modifiée dans l'exemple */
@@ -115,8 +113,7 @@ place-items: unset;
 }
 
      
 
-
 
 
      Résultat
      
 
diff --git a/files/fr/web/css/place-self/index.html b/files/fr/web/css/place-self/index.html
index 15cec4eb4f..e996026df7 100644
--- a/files/fr/web/css/place-self/index.html
+++ b/files/fr/web/css/place-self/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/place-self
 
 
      {{EmbedInteractiveExample("pages/css/place-self.html")}}
      
 
-
-
 
      Syntaxe
      
 
 
      /* Valeurs avec un mot-clé */
diff --git a/files/fr/web/css/pointer-events/index.html b/files/fr/web/css/pointer-events/index.html
index 69583602c8..84f450cbbe 100644
--- a/files/fr/web/css/pointer-events/index.html
+++ b/files/fr/web/css/pointer-events/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/pointer-events
 
 
      {{EmbedInteractiveExample("pages/css/pointer-events.html")}}
      
 
-
-
 
      Lorsque cette propriété n'est pas définie,  pour le contenu SVG, on aura le même effet qu'avec la valeur visiblePainted. Lorsqu'on utilise la valeur none, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.
      
 
 
      Syntaxe
      
@@ -125,7 +123,7 @@ pointer-events: unset;
  
 
 
-
      L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification CSS Basic User Interface Module Level 3, a été remise à la spécification de  niveau 4.
      
+
      L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification CSS Basic User Interface Module Level 3, a été remise à la spécification de  niveau 4.
      
 
 
      {{cssinfo}}
      
 
@@ -139,6 +137,6 @@ pointer-events: unset;
  
    • L'attribut SVG {{SVGAttr("pointer-events")}}
      • 
  
    • L'attribut SVG {{SVGAttr("visibility")}}
      • 
  
    • La propriété {{cssxref("user-select")}} qui contrôle lorsque l'utilisateur peut sélectionner du texte
      • 
- 
    • « Spécification » WebKit pour étendre la propriété pointer-events au contenu (X)HTML
      • 
+ 
    • « Spécification » WebKit pour étendre la propriété pointer-events au contenu (X)HTML
      • 
  
    • Un défilement à 60fps en utilisant pointer-events: none (en anglais)
      • 
 
    
diff --git a/files/fr/web/css/position/index.html b/files/fr/web/css/position/index.html
index 848e6053cb..cb8cffc082 100644
--- a/files/fr/web/css/position/index.html
+++ b/files/fr/web/css/position/index.html
@@ -13,12 +13,10 @@ translation_of: Web/CSS/position
 
 
    {{EmbedInteractiveExample("pages/css/position.html")}}
    
 
-
-
 
    Types de positionnement
    
 
 
      
- 
    • Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, fixed ou sticky.
      • 
+ 
    • Un élément positionné est un élément dont la propriété de position calculée 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.
      • 
@@ -56,17 +54,13 @@ position: unset;
  
      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.
      
  
      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 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 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 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 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) ; 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. 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 (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) ; 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. 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 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. 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).
      
+ 
      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 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. 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).
      
 
    
 
 
    Syntaxe formelle
    
@@ -303,7 +297,7 @@ dd + dd {
 
    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.
    
 
 
 
diff --git a/files/fr/web/css/position_value/index.html b/files/fr/web/css/position_value/index.html
index 8cd69cf9ff..5b6dd45473 100644
--- a/files/fr/web/css/position_value/index.html
+++ b/files/fr/web/css/position_value/index.html
@@ -14,7 +14,7 @@ original_slug: Web/CSS/Type_position
 
 
    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 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).
    
 
 
    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).
    
 
@@ -51,7 +51,7 @@ original_slug: Web/CSS/Type_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("<timing-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 la même fonction de temporisation ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne.
    
 
 
    Exemples
    
 
@@ -120,8 +120,8 @@ original_slug: Web/CSS/Type_position
 
    Voir aussi
    
 
 
      
- 
    • Valeurs et unités en CSS
      • 
- 
    • Tutoriel - Introduction aux valeurs et unités CSS
      • 
+ 
    • Valeurs et unités en CSS
      • 
+ 
    • Tutoriel - Introduction aux valeurs et unités CSS
      • 
  
    • {{cssxref("background-position")}}
      • 
  
    • {{cssxref("radial-gradient","radial-gradient()")}}
      • 
  
    • {{cssxref("conic-gradient","conic-gradient()")}}
      • 
diff --git a/files/fr/web/css/pseudo-classes/index.html b/files/fr/web/css/pseudo-classes/index.html
index 8c7425003c..22ba65100c 100644
--- a/files/fr/web/css/pseudo-classes/index.html
+++ b/files/fr/web/css/pseudo-classes/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/Pseudo-classes
 ---
 
      {{CSSRef}}
      
 
-
      Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).
      
+
      Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).
      
 
 
      div:hover {
   background-color: #F89B4D;
@@ -19,8 +19,8 @@ translation_of: Web/CSS/Pseudo-classes
 
 
      Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).
      
 
-
      
-
      Note: À la différence des pseudo-classes, les pseudo-éléments peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.
      
+
      
+
      Note : À la différence des pseudo-classes, les pseudo-éléments peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.
      
 
      
 
 
      Syntaxe
      
@@ -34,7 +34,6 @@ translation_of: Web/CSS/Pseudo-classes
 
 
      Liste des pseudo-classes standards
      
 
-
      
 
        
  
      • {{CSSxRef(":active")}}
        • 
  
      • {{CSSxRef(":any-link")}} {{Experimental_Inline}}
        • 
@@ -97,7 +96,6 @@ translation_of: Web/CSS/Pseudo-classes
  
      • {{CSSxRef(":visited")}}
        • 
  
      • {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}
        • 
 
      
-
      
 
 
      Exemples
      
 
diff --git a/files/fr/web/css/pseudo-elements/index.html b/files/fr/web/css/pseudo-elements/index.html
index eec809e01b..e25886b602 100644
--- a/files/fr/web/css/pseudo-elements/index.html
+++ b/files/fr/web/css/pseudo-elements/index.html
@@ -22,8 +22,8 @@ p::first-line {
 
 
 
-
      
-
      Note: À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.
      
+
      
+
      Note : À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.
      
 
      
 
 
      Syntaxe
      
@@ -38,7 +38,6 @@ p::first-line {
 
 
      Liste des pseudo-éléments
      
 
-
      
 
        
  
      • {{CSSxRef("::after", "::after (:after)")}}
        • 
  
      • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
        • 
@@ -54,7 +53,6 @@ p::first-line {
  
      • {{CSSxRef("::slotted", "::slotted()")}}
        • 
  
      • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
        • 
 
      
-
      
 
 
      Exemples
      
 
diff --git a/files/fr/web/css/quotes/index.html b/files/fr/web/css/quotes/index.html
index 968b934472..ca406df88d 100644
--- a/files/fr/web/css/quotes/index.html
+++ b/files/fr/web/css/quotes/index.html
@@ -12,9 +12,7 @@ translation_of: Web/CSS/quotes
 
 
      La propriété quotes indique la façon dont les marques de citation sont affichées.
      
 
-
      {{EmbedInteractiveExample("pages/css/quotes.html")}}
      
-
-
+
      {{EmbedInteractiveExample("pages/css/quotes.html")}}
      Syntaxe
 
diff --git a/files/fr/web/css/ratio/index.html b/files/fr/web/css/ratio/index.html
index 361f14cb36..cd2fc22936 100644
--- a/files/fr/web/css/ratio/index.html
+++ b/files/fr/web/css/ratio/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/ratio
 ---
 
      {{CSSRef}}
      
 
-
      Le type de donnée CSS <ratio> permet de décrire les proportions dans les media queries (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.
      
+
      Le type de donnée CSS <ratio> permet de décrire les proportions dans les media queries (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.
      
 
 
      Syntaxe
      
 
@@ -33,23 +33,23 @@ translation_of: Web/CSS/ratio
  
  
   
-   Ratio4_3.png
+   
    4/3
    Format traditionnel utilisé par les télévisions au XXe siècle.
   
   
-   Ratio16_9.png
+   
    16/9
    Format « moderne » des télévisions.
   
   
-   Ratio1_1.85.png
+   
    185/100 = 91/50
      
     (les numérateurs et dénominateurs décimaux ne sont pas autorisés)
    Le format le plus utilisé pour la projection de films depuis les années 1960.
   
   
-   Ratio1_2.39.png
+   
    239/100
      
     (les numérateurs et dénominateurs décimaux ne sont pas autorisés)
    Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).
@@ -103,6 +103,6 @@ translation_of: Web/CSS/ratio
 
      Voir aussi
      
 
 
diff --git a/files/fr/web/css/reference/index.html b/files/fr/web/css/reference/index.html
index 8aa4af3b7a..8b41901dc5 100644
--- a/files/fr/web/css/reference/index.html
+++ b/files/fr/web/css/reference/index.html
@@ -4,7 +4,7 @@ slug: Web/CSS/Reference
 tags:
   - CSS
   - CSS Data Types
-  - 'I10n:priority'
+  - I10n:priority
   - Overview
   - Reference
   - Types CSS
@@ -12,7 +12,7 @@ translation_of: Web/CSS/Reference
 ---
 
      {{CSSRef}}
      
 
-
      Cette référence CSS fournit un index alphabétique de toutes les propriétés CSS standards, des pseudo-classes, des pseudo-éléments, des types de données et des règles @. Vous pouvez également trouver une liste alphabétique de tous les sélecteurs CSS par type et une liste des concepts clés de CSS. Enfin est inclus un bref sommaire de référence sur DOM-CSS / CSSOM.
      
+
      Cette référence CSS fournit un index alphabétique de toutes les propriétés CSS standards, des pseudo-classes, des pseudo-éléments, des types de données et des règles @. Vous pouvez également trouver une liste alphabétique de tous les sélecteurs CSS par type et une liste des concepts clés de CSS. Enfin est inclus un bref sommaire de référence sur DOM-CSS / CSSOM.
      
 
 
      Syntaxe de règle basique
      
 
@@ -34,7 +34,7 @@ translation_of: Web/CSS/Reference
     [propriété : valeur] [; liste-de-propriétés]
 
      
 
-
      Voir aussi les sélecteurs, pseudo-classes, et pseudo-éléments listés ci-dessous. La syntaxe des valeurs dépend du type de données attendu pour chaque propriété indiquée.
      
+
      Voir aussi les sélecteurs, pseudo-classes, et pseudo-éléments listés ci-dessous. La syntaxe des valeurs dépend du type de données attendu pour chaque propriété indiquée.
      
 
 
      Exemples de règle de style
      
 
@@ -51,11 +51,11 @@ div.menu-bar li:hover > ul {
 
 
      Syntaxe des règles @
      
 
-
      Comme la structure des règles @ varie grandement, veuillez consulter règle @ pour trouver la syntaxe que vous souhaitez.
      
+
      Comme la structure des règles @ varie grandement, veuillez consulter règle @ pour trouver la syntaxe que vous souhaitez.
      
 
 
      Index des mots-clés
      
 
-
      
+
      
 
      Note : Les noms de propriétés de cet index n’incluent pas les noms de l’API DOM JavaScript lorsqu’ils sont différents des noms standards CSS.
      
 
      
 
@@ -63,18 +63,18 @@ div.menu-bar li:hover > ul {
 
 
      Sélecteurs
      
 
-
      Sont indiqués dans ce qui suit les divers sélecteurs, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.
      
+
      Sont indiqués dans ce qui suit les divers sélecteurs, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.
      
 
-
      Sélecteurs simples
      
+
      Sélecteurs simples
      
 
 
      Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.
      
 
 
 
 
      Sélecteur de groupe
      
@@ -84,41 +84,34 @@ div.menu-bar li:hover > ul {
  
      Indique que les éléments des sélecteurs A et B doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.
      
 
 
-
      Combinateurs
      
+
      Combinateurs
      
 
 
      Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".
      
 
 
      
- 
      Combinateur de voisin direct A + B
      
+ 
      Combinateur de voisin direct A + B
      
  
      Indique que les éléments sélectionnés par A et par B ont le même parent et que celui sélectionné par B suit immédiatement celui sélectionné par A.
      
- 
      Combinateur de voisin général A ~ B
      
+ 
      Combinateur de voisin général A ~ B
      
  
      Indique que les éléments sélectionnés par A et par B ont le même parent et que celui sélectionné par B suit celui sélectionné par A, mais pas nécessairement immédiatement après lui.
      
- 
      Combinateur d’enfant A > B
      
+ 
      Combinateur d’enfant A > B
      
  
      Indique que l’élément sélectionné par B est un enfant direct de l’élément sélectionné par A.
      
- 
      Combinateur de descendant A B
      
+ 
      Combinateur de descendant A B
      
  
      Indique que l’élément sélectionné par B est un descendant de l’élément sélectionné par A, mais n’en est pas nécessairement un enfant direct.
      
  
      Combinateur de colonne A || B {{Experimental_Inline}}
      
  
      Indique que l’élément sélectionné par B est situé dans la colonne de table indiquée par A. Les éléments qui s’étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.
      
 
      
 
-
      Pseudo-classes
      
+
      Pseudo
      
 
-
      
-
        
- 
-
      
-
      
-
-
      Pseudo-éléments
      
-
-
      
-
        
- 
-
      
-
      
+
      
+ 
      Pseudo-classes :
      
+ 
      Définit un état spécial pour le ou les éléments ciblés.
      
+ 
      Pseudo-éléments ::
      
+ 
      Représente des entités qui ne sont pas incluses en HTML.
      
+
      
 
-
      
-
      Note : Une liste complète des sélecteurs existe dans le module de spécification Selectors de niveau 4.
      
+
      
+
      See also Selectors in the Selectors Level 4 specification.
      
 
      
 
 
      Concepts
      
@@ -126,40 +119,40 @@ div.menu-bar li:hover > ul {
 
      Syntaxe et sémantique
      
 
 
 
 
      Valeurs
      
 
 
 
 
      Disposition
      
 
 
 
 
      DOM-CSS / CSSOM
      
@@ -167,7 +160,7 @@ div.menu-bar li:hover > ul {
 
      Principaux types d'objets
      
 
 
        
- 
      • {{DOMxRef("DocumentOrShadowRoot.styleSheets")}}
        • 
+ 
      • {{DOMxRef("Document.styleSheets")}}
        • 
  
      • {{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}
        • 
  
      • cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}} (sélecteur et style)
        • 
  
      • cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}
        • 
@@ -187,7 +180,7 @@ div.menu-bar li:hover > ul {
 
        Voir aussi
        
 
 
diff --git a/files/fr/web/css/repeat()/index.html b/files/fr/web/css/repeat()/index.html
index cea02f4230..e5657510f3 100644
--- a/files/fr/web/css/repeat()/index.html
+++ b/files/fr/web/css/repeat()/index.html
@@ -15,7 +15,7 @@ translation_of: Web/CSS/repeat()
 
 
        Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles.
        
 
-
        /* Valeurs de type <track-repeat> */
+
        /* Valeurs de type <track-repeat> */
 repeat(4, 1fr)
 repeat(4, [col-start] 250px [col-end])
 repeat(4, [col-start] 60% [col-end])
@@ -82,7 +82,7 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
 
 
        CSS
        
 
-
        #container {
+
        #container {
   display: grid;
   grid-template-columns: repeat(2, 50px 1fr) 100px;
   grid-gap: 5px;
@@ -101,7 +101,7 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
 
 
        HTML
        
 
-
        <div id="container">
+
        <div id="container">
   <div>
     Un élément qui mesure 50 pixels de large.
   </div>
diff --git a/files/fr/web/css/resize/index.html b/files/fr/web/css/resize/index.html
index e0054df978..e2cde42faa 100644
--- a/files/fr/web/css/resize/index.html
+++ b/files/fr/web/css/resize/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/resize
 
 
        {{EmbedInteractiveExample("pages/css/resize.html")}}
        
 
-
-
 
        Syntaxe
        
 
 
        /* Valeurs avec un mot-clé */
@@ -50,7 +48,9 @@ resize: unset;
  
        Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.
        
 
 
-
        Note : resize ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut visible.
        
+
        
+  
        Note : resize ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut visible.
        
+
        
 
 
        Syntaxe formelle
        
 
diff --git a/files/fr/web/css/resolution/index.html b/files/fr/web/css/resolution/index.html
index 404a790051..46e7ea706a 100644
--- a/files/fr/web/css/resolution/index.html
+++ b/files/fr/web/css/resolution/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/resolution
 ---
 
        {{CSSRef}}
        
 
-
        Le type de donnée CSS <resolution>, utilisé dans les media queries, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.
        
+
        Le type de donnée CSS <resolution>, utilisé dans les media queries, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.
        
 
 
        Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.
        
 
@@ -22,13 +22,13 @@ translation_of: Web/CSS/resolution
 
        Unités
        
 
 
        
- 
        dpi
        
+ 
        dpi
        
  
        Cette unité représente le nombre de points par pouce. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, 1 dpi ≈ 0,39 dpcm.
        
- 
        dpcm
        
+ 
        dpcm
        
  
        Cette unité représente le nombre de points par centimètre. Puisque 1 pouce équivaut à 2.54 cm, 1dpcm ≈ 2,54 dpi.
        
- 
        dppx
        
- 
        Cette unité représente le nombre de points par unité CSS px. Puisque le ratio entre les unités CSS in et CSS px vaut 1:96, 1 dppx est équivalent à 96 dpi, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.
        
- 
        x
        
+ 
        dppx
        
+ 
        Cette unité représente le nombre de points par unité CSS px. Puisque le ratio entre les unités CSS in et CSS px vaut 1:96, 1 dppx est équivalent à 96 dpi, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.
        
+ 
        x
        
  
        Un alias pour dppx.
        
 
        
 
@@ -43,7 +43,7 @@ translation_of: Web/CSS/resolution
 
        Voici quelques exemples d'utilisation correcte de données de type <resolution> :
        
 
 
        96dpi                                              Usage correct : un {{cssxref("<number>")}} (ici un {{cssxref("<integer>")}}) suivi d'une unité.
-@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une media query.
+@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une media query.
 
        
 
 
        Usages incorrects
        
@@ -120,6 +120,6 @@ ten dpi   Incorrect : seules des expressions numériques sont acceptées.
 
        Voir aussi
        
 
 
diff --git a/files/fr/web/css/revert/index.html b/files/fr/web/css/revert/index.html
index 7794fbac93..def309ccef 100644
--- a/files/fr/web/css/revert/index.html
+++ b/files/fr/web/css/revert/index.html
@@ -26,11 +26,11 @@ translation_of: Web/CSS/revert
 
 
        revert n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).
        
 
-
        
+
        
 
        Note : revert est une simple valeur, il est toujours possible de la surcharger par une autre avec une règle d'une spécificité supérieure.
        
 
        
 
-
        
+
        
 
        Note : Le mot-clé revert est différent de {{cssxref("initial")}} et ne doit pas être confondu avec ce dernier. {{cssxref("initial")}} utilise la valeur initiale, définie pour chaque propriété par les spécifications CSS. En revanche, les feuilles de style des agents utilisateurs définissent des valeurs par défaut selon les sélecteurs CSS. Par exemple, la valeur initiale de {{cssxref("display")}} est inline mais un agent utilisateur pourra définir les valeurs par défaut suivante dans sa feuille de style : block pour {{HTMLElement("div")}}, table pour {{HTMLElement("table")}} etc.
        
 
        
 
diff --git a/files/fr/web/css/right/index.html b/files/fr/web/css/right/index.html
index 8ac85f97e1..2d1f94619b 100644
--- a/files/fr/web/css/right/index.html
+++ b/files/fr/web/css/right/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/right
 
 
        {{EmbedInteractiveExample("pages/css/right.html")}}
        
 
-
-
 
        L'effet de la propriété right dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :
        
 
 
          
diff --git a/files/fr/web/css/rotate/index.html b/files/fr/web/css/rotate/index.html
index 0ad8b2277d..591a0fd5a3 100644
--- a/files/fr/web/css/rotate/index.html
+++ b/files/fr/web/css/rotate/index.html
@@ -38,7 +38,7 @@ rotate: 1 1 1 90deg;
        
  
        Le nom de l'axe par rapport auquel on souhaite effectuer la rotation ("x", "y" ou "z"), puis une valeur {{cssxref("<angle>")}} qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions rotateX()/rotateY()/rotateZ().
        
  
        Un vecteur et l'angle associé
        
  
        Trois nombres (valeurs {{cssxref("<number>")}}) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur {{cssxref("<angle>")}} qui indique l'angle de rotation. Cela est équivalent à la fonction rotate3d().
        
- 
        none
        
+ 
        none
        
  
        Cette valeur indique qu'aucune rotation ne devrait être appliquée.
        
 
 
diff --git a/files/fr/web/css/row-gap/index.html b/files/fr/web/css/row-gap/index.html
index dc90a53689..7133eec821 100644
--- a/files/fr/web/css/row-gap/index.html
+++ b/files/fr/web/css/row-gap/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/row-gap
 
 
        {{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}
        
 
-
-
 
        
 
        Note : La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification CSS Grid Layout. Cette propriété préfixée a ensuite été remplacée par row-gap dans le module CSS Alignment afin d'être généralisée à d'autres modes de disposition. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.
        
 
        
@@ -57,7 +55,7 @@ row-gap: unset;
 
 
        CSS
        
 
-
        #flexbox {
+
        #flexbox {
   display: flex;
   flex-wrap: wrap;
   width: 300px;
@@ -91,14 +89,12 @@ row-gap: unset;
 
 
        CSS
        
 
-
 
-
        #grid {
+
        #grid {
   display: grid;
   height: 200px;
   grid-template-columns: 200px;
diff --git a/files/fr/web/css/ruby-align/index.html b/files/fr/web/css/ruby-align/index.html
index ac0f175cb5..51d72cbbe4 100644
--- a/files/fr/web/css/ruby-align/index.html
+++ b/files/fr/web/css/ruby-align/index.html
@@ -55,7 +55,7 @@ ruby-align: unset;
 
 
        Alignement par rapport au début du texte de base
        
 
-