From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/--_star_/index.html | 91 - files/fr/web/css/--_star_/index.md | 91 + .../fr/web/css/-moz-context-properties/index.html | 81 - files/fr/web/css/-moz-context-properties/index.md | 81 + files/fr/web/css/-moz-float-edge/index.html | 82 - files/fr/web/css/-moz-float-edge/index.md | 82 + .../css/-moz-force-broken-image-icon/index.html | 70 - .../web/css/-moz-force-broken-image-icon/index.md | 70 + files/fr/web/css/-moz-image-rect/index.html | 124 - files/fr/web/css/-moz-image-rect/index.md | 124 + files/fr/web/css/-moz-image-region/index.html | 73 - files/fr/web/css/-moz-image-region/index.md | 73 + files/fr/web/css/-moz-orient/index.html | 78 - files/fr/web/css/-moz-orient/index.md | 78 + .../css/-moz-outline-radius-bottomleft/index.html | 49 - .../css/-moz-outline-radius-bottomleft/index.md | 49 + .../css/-moz-outline-radius-bottomright/index.html | 49 - .../css/-moz-outline-radius-bottomright/index.md | 49 + .../web/css/-moz-outline-radius-topleft/index.html | 49 - .../web/css/-moz-outline-radius-topleft/index.md | 49 + .../css/-moz-outline-radius-topright/index.html | 49 - .../web/css/-moz-outline-radius-topright/index.md | 49 + files/fr/web/css/-moz-outline-radius/index.html | 117 - files/fr/web/css/-moz-outline-radius/index.md | 117 + files/fr/web/css/-moz-user-focus/index.html | 75 - files/fr/web/css/-moz-user-focus/index.md | 75 + files/fr/web/css/-moz-user-input/index.html | 70 - files/fr/web/css/-moz-user-input/index.md | 70 + files/fr/web/css/-webkit-border-before/index.html | 106 - files/fr/web/css/-webkit-border-before/index.md | 106 + files/fr/web/css/-webkit-box-reflect/index.html | 70 - files/fr/web/css/-webkit-box-reflect/index.md | 70 + files/fr/web/css/-webkit-line-clamp/index.html | 99 - files/fr/web/css/-webkit-line-clamp/index.md | 99 + .../fr/web/css/-webkit-mask-attachment/index.html | 73 - files/fr/web/css/-webkit-mask-attachment/index.md | 73 + files/fr/web/css/-webkit-mask-box-image/index.html | 92 - files/fr/web/css/-webkit-mask-box-image/index.md | 92 + files/fr/web/css/-webkit-mask-composite/index.html | 93 - files/fr/web/css/-webkit-mask-composite/index.md | 93 + .../fr/web/css/-webkit-mask-position-x/index.html | 88 - files/fr/web/css/-webkit-mask-position-x/index.md | 88 + .../fr/web/css/-webkit-mask-position-y/index.html | 90 - files/fr/web/css/-webkit-mask-position-y/index.md | 90 + files/fr/web/css/-webkit-mask-repeat-x/index.html | 85 - files/fr/web/css/-webkit-mask-repeat-x/index.md | 85 + files/fr/web/css/-webkit-mask-repeat-y/index.html | 85 - files/fr/web/css/-webkit-mask-repeat-y/index.md | 85 + .../web/css/-webkit-overflow-scrolling/index.html | 84 - .../fr/web/css/-webkit-overflow-scrolling/index.md | 84 + .../web/css/-webkit-print-color-adjust/index.html | 61 - .../fr/web/css/-webkit-print-color-adjust/index.md | 61 + .../web/css/-webkit-tap-highlight-color/index.html | 40 - .../web/css/-webkit-tap-highlight-color/index.md | 40 + .../fr/web/css/-webkit-text-fill-color/index.html | 98 - files/fr/web/css/-webkit-text-fill-color/index.md | 98 + files/fr/web/css/-webkit-text-security/index.html | 54 - files/fr/web/css/-webkit-text-security/index.md | 54 + .../web/css/-webkit-text-stroke-color/index.html | 105 - .../fr/web/css/-webkit-text-stroke-color/index.md | 105 + .../web/css/-webkit-text-stroke-width/index.html | 118 - .../fr/web/css/-webkit-text-stroke-width/index.md | 118 + files/fr/web/css/-webkit-text-stroke/index.html | 95 - files/fr/web/css/-webkit-text-stroke/index.md | 95 + files/fr/web/css/-webkit-touch-callout/index.html | 54 - files/fr/web/css/-webkit-touch-callout/index.md | 54 + files/fr/web/css/@charset/index.html | 79 - files/fr/web/css/@charset/index.md | 79 + .../css/@counter-style/additive-symbols/index.html | 85 - .../css/@counter-style/additive-symbols/index.md | 85 + .../fr/web/css/@counter-style/fallback/index.html | 88 - files/fr/web/css/@counter-style/fallback/index.md | 88 + files/fr/web/css/@counter-style/index.html | 168 - files/fr/web/css/@counter-style/index.md | 168 + .../fr/web/css/@counter-style/negative/index.html | 95 - files/fr/web/css/@counter-style/negative/index.md | 95 + files/fr/web/css/@counter-style/pad/index.html | 96 - files/fr/web/css/@counter-style/pad/index.md | 96 + files/fr/web/css/@counter-style/prefix/index.html | 93 - files/fr/web/css/@counter-style/prefix/index.md | 93 + files/fr/web/css/@counter-style/range/index.html | 119 - files/fr/web/css/@counter-style/range/index.md | 119 + .../fr/web/css/@counter-style/speak-as/index.html | 127 - files/fr/web/css/@counter-style/speak-as/index.md | 127 + files/fr/web/css/@counter-style/suffix/index.html | 91 - files/fr/web/css/@counter-style/suffix/index.md | 91 + files/fr/web/css/@counter-style/symbols/index.html | 106 - files/fr/web/css/@counter-style/symbols/index.md | 106 + files/fr/web/css/@counter-style/system/index.html | 328 -- files/fr/web/css/@counter-style/system/index.md | 328 ++ files/fr/web/css/@document/index.html | 84 - files/fr/web/css/@document/index.md | 84 + .../web/css/@font-face/ascent-override/index.html | 74 - .../fr/web/css/@font-face/ascent-override/index.md | 74 + .../web/css/@font-face/descent-override/index.html | 74 - .../web/css/@font-face/descent-override/index.md | 74 + .../fr/web/css/@font-face/font-display/index.html | 90 - files/fr/web/css/@font-face/font-display/index.md | 90 + files/fr/web/css/@font-face/font-family/index.html | 67 - files/fr/web/css/@font-face/font-family/index.md | 67 + .../fr/web/css/@font-face/font-stretch/index.html | 180 -- files/fr/web/css/@font-face/font-stretch/index.md | 180 ++ files/fr/web/css/@font-face/font-style/index.html | 97 - files/fr/web/css/@font-face/font-style/index.md | 97 + .../@font-face/font-variation-settings/index.html | 69 - .../@font-face/font-variation-settings/index.md | 69 + files/fr/web/css/@font-face/font-weight/index.html | 170 -- files/fr/web/css/@font-face/font-weight/index.md | 170 ++ files/fr/web/css/@font-face/index.html | 188 -- files/fr/web/css/@font-face/index.md | 188 ++ .../css/@font-face/line-gap-override/index.html | 74 - .../web/css/@font-face/line-gap-override/index.md | 74 + files/fr/web/css/@font-face/size-adjust/index.html | 72 - files/fr/web/css/@font-face/size-adjust/index.md | 72 + files/fr/web/css/@font-face/src/index.html | 83 - files/fr/web/css/@font-face/src/index.md | 83 + .../fr/web/css/@font-face/unicode-range/index.html | 107 - files/fr/web/css/@font-face/unicode-range/index.md | 107 + files/fr/web/css/@font-feature-values/index.html | 89 - files/fr/web/css/@font-feature-values/index.md | 89 + files/fr/web/css/@import/index.html | 79 - files/fr/web/css/@import/index.md | 79 + files/fr/web/css/@keyframes/index.html | 169 - files/fr/web/css/@keyframes/index.md | 169 + .../css/@media/-moz-device-pixel-ratio/index.html | 46 - .../css/@media/-moz-device-pixel-ratio/index.md | 46 + .../fr/web/css/@media/-ms-high-contrast/index.html | 72 - files/fr/web/css/@media/-ms-high-contrast/index.md | 72 + .../fr/web/css/@media/-webkit-animation/index.html | 36 - files/fr/web/css/@media/-webkit-animation/index.md | 36 + .../@media/-webkit-device-pixel-ratio/index.html | 116 - .../css/@media/-webkit-device-pixel-ratio/index.md | 116 + .../web/css/@media/-webkit-transform-2d/index.html | 34 - .../web/css/@media/-webkit-transform-2d/index.md | 34 + .../web/css/@media/-webkit-transform-3d/index.html | 68 - .../web/css/@media/-webkit-transform-3d/index.md | 68 + .../web/css/@media/-webkit-transition/index.html | 49 - .../fr/web/css/@media/-webkit-transition/index.md | 49 + files/fr/web/css/@media/any-hover/index.html | 70 - files/fr/web/css/@media/any-hover/index.md | 70 + files/fr/web/css/@media/any-pointer/index.html | 103 - files/fr/web/css/@media/any-pointer/index.md | 103 + files/fr/web/css/@media/aspect-ratio/index.html | 66 - files/fr/web/css/@media/aspect-ratio/index.md | 66 + files/fr/web/css/@media/aural/index.html | 42 - files/fr/web/css/@media/aural/index.md | 42 + files/fr/web/css/@media/color-gamut/index.html | 66 - files/fr/web/css/@media/color-gamut/index.md | 66 + files/fr/web/css/@media/color-index/index.html | 82 - files/fr/web/css/@media/color-index/index.md | 82 + files/fr/web/css/@media/color/index.html | 92 - files/fr/web/css/@media/color/index.md | 92 + .../web/css/@media/device-aspect-ratio/index.html | 57 - .../fr/web/css/@media/device-aspect-ratio/index.md | 57 + files/fr/web/css/@media/device-height/index.html | 51 - files/fr/web/css/@media/device-height/index.md | 51 + files/fr/web/css/@media/device-width/index.html | 51 - files/fr/web/css/@media/device-width/index.md | 51 + files/fr/web/css/@media/display-mode/index.html | 82 - files/fr/web/css/@media/display-mode/index.md | 82 + files/fr/web/css/@media/forced-colors/index.html | 84 - files/fr/web/css/@media/forced-colors/index.md | 84 + files/fr/web/css/@media/grid/index.html | 81 - files/fr/web/css/@media/grid/index.md | 81 + files/fr/web/css/@media/height/index.html | 81 - files/fr/web/css/@media/height/index.md | 81 + files/fr/web/css/@media/hover/index.html | 70 - files/fr/web/css/@media/hover/index.md | 70 + files/fr/web/css/@media/index.html | 112 - files/fr/web/css/@media/index.md | 112 + files/fr/web/css/@media/inverted-colors/index.html | 90 - files/fr/web/css/@media/inverted-colors/index.md | 90 + files/fr/web/css/@media/monochrome/index.html | 83 - files/fr/web/css/@media/monochrome/index.md | 83 + files/fr/web/css/@media/orientation/index.html | 86 - files/fr/web/css/@media/orientation/index.md | 86 + files/fr/web/css/@media/overflow-block/index.html | 69 - files/fr/web/css/@media/overflow-block/index.md | 69 + files/fr/web/css/@media/overflow-inline/index.html | 76 - files/fr/web/css/@media/overflow-inline/index.md | 76 + files/fr/web/css/@media/pointer/index.html | 99 - files/fr/web/css/@media/pointer/index.md | 99 + .../web/css/@media/prefers-color-scheme/index.html | 101 - .../web/css/@media/prefers-color-scheme/index.md | 101 + .../fr/web/css/@media/prefers-contrast/index.html | 84 - files/fr/web/css/@media/prefers-contrast/index.md | 84 + .../css/@media/prefers-reduced-motion/index.html | 140 - .../web/css/@media/prefers-reduced-motion/index.md | 140 + files/fr/web/css/@media/resolution/index.html | 73 - files/fr/web/css/@media/resolution/index.md | 73 + files/fr/web/css/@media/scripting/index.html | 85 - files/fr/web/css/@media/scripting/index.md | 85 + files/fr/web/css/@media/shape/index.html | 95 - files/fr/web/css/@media/shape/index.md | 95 + .../fr/web/css/@media/update-frequency/index.html | 80 - files/fr/web/css/@media/update-frequency/index.md | 80 + files/fr/web/css/@media/width/index.html | 88 - files/fr/web/css/@media/width/index.md | 88 + files/fr/web/css/@namespace/index.html | 76 - files/fr/web/css/@namespace/index.md | 76 + files/fr/web/css/@page/index.html | 105 - files/fr/web/css/@page/index.md | 105 + files/fr/web/css/@page/size/index.html | 125 - files/fr/web/css/@page/size/index.md | 125 + files/fr/web/css/@property/index.html | 80 - files/fr/web/css/@property/index.md | 80 + files/fr/web/css/@supports/index.html | 207 -- files/fr/web/css/@supports/index.md | 207 ++ files/fr/web/css/@viewport/index.html | 118 - files/fr/web/css/@viewport/index.md | 118 + files/fr/web/css/_colon_-moz-broken/index.html | 43 - files/fr/web/css/_colon_-moz-broken/index.md | 43 + files/fr/web/css/_colon_-moz-drag-over/index.html | 44 - files/fr/web/css/_colon_-moz-drag-over/index.md | 44 + files/fr/web/css/_colon_-moz-first-node/index.html | 58 - files/fr/web/css/_colon_-moz-first-node/index.md | 58 + files/fr/web/css/_colon_-moz-focusring/index.html | 59 - files/fr/web/css/_colon_-moz-focusring/index.md | 59 + .../web/css/_colon_-moz-handler-blocked/index.html | 26 - .../web/css/_colon_-moz-handler-blocked/index.md | 26 + .../web/css/_colon_-moz-handler-crashed/index.html | 26 - .../web/css/_colon_-moz-handler-crashed/index.md | 26 + .../css/_colon_-moz-handler-disabled/index.html | 26 - .../web/css/_colon_-moz-handler-disabled/index.md | 26 + files/fr/web/css/_colon_-moz-last-node/index.html | 58 - files/fr/web/css/_colon_-moz-last-node/index.md | 58 + .../fr/web/css/_colon_-moz-list-bullet/index.html | 56 - files/fr/web/css/_colon_-moz-list-bullet/index.md | 56 + .../fr/web/css/_colon_-moz-list-number/index.html | 53 - files/fr/web/css/_colon_-moz-list-number/index.md | 53 + files/fr/web/css/_colon_-moz-loading/index.html | 36 - files/fr/web/css/_colon_-moz-loading/index.md | 36 + .../web/css/_colon_-moz-locale-dir(ltr)/index.html | 47 - .../web/css/_colon_-moz-locale-dir(ltr)/index.md | 47 + .../web/css/_colon_-moz-locale-dir(rtl)/index.html | 47 - .../web/css/_colon_-moz-locale-dir(rtl)/index.md | 47 + .../web/css/_colon_-moz-only-whitespace/index.html | 73 - .../web/css/_colon_-moz-only-whitespace/index.md | 73 + .../web/css/_colon_-moz-submit-invalid/index.html | 37 - .../fr/web/css/_colon_-moz-submit-invalid/index.md | 37 + files/fr/web/css/_colon_-moz-suppressed/index.html | 38 - files/fr/web/css/_colon_-moz-suppressed/index.md | 38 + .../web/css/_colon_-moz-user-disabled/index.html | 38 - .../fr/web/css/_colon_-moz-user-disabled/index.md | 38 + .../web/css/_colon_-moz-window-inactive/index.html | 53 - .../web/css/_colon_-moz-window-inactive/index.md | 53 + files/fr/web/css/_colon_active/index.html | 129 - files/fr/web/css/_colon_active/index.md | 129 + files/fr/web/css/_colon_any-link/index.html | 73 - files/fr/web/css/_colon_any-link/index.md | 73 + files/fr/web/css/_colon_autofill/index.html | 34 - files/fr/web/css/_colon_autofill/index.md | 34 + files/fr/web/css/_colon_blank/index.html | 51 - files/fr/web/css/_colon_blank/index.md | 51 + files/fr/web/css/_colon_checked/index.html | 132 - files/fr/web/css/_colon_checked/index.md | 132 + files/fr/web/css/_colon_current/index.html | 66 - files/fr/web/css/_colon_current/index.md | 66 + files/fr/web/css/_colon_default/index.html | 111 - files/fr/web/css/_colon_default/index.md | 111 + files/fr/web/css/_colon_defined/index.html | 98 - files/fr/web/css/_colon_defined/index.md | 98 + files/fr/web/css/_colon_dir/index.html | 107 - files/fr/web/css/_colon_dir/index.md | 107 + files/fr/web/css/_colon_disabled/index.html | 115 - files/fr/web/css/_colon_disabled/index.md | 115 + files/fr/web/css/_colon_empty/index.html | 105 - files/fr/web/css/_colon_empty/index.md | 105 + files/fr/web/css/_colon_enabled/index.html | 102 - files/fr/web/css/_colon_enabled/index.md | 102 + files/fr/web/css/_colon_first-child/index.html | 126 - files/fr/web/css/_colon_first-child/index.md | 126 + files/fr/web/css/_colon_first-of-type/index.html | 93 - files/fr/web/css/_colon_first-of-type/index.md | 93 + files/fr/web/css/_colon_first/index.html | 98 - files/fr/web/css/_colon_first/index.md | 98 + files/fr/web/css/_colon_focus-visible/index.html | 135 - files/fr/web/css/_colon_focus-visible/index.md | 135 + files/fr/web/css/_colon_focus-within/index.html | 94 - files/fr/web/css/_colon_focus-within/index.md | 94 + files/fr/web/css/_colon_focus/index.html | 108 - files/fr/web/css/_colon_focus/index.md | 108 + files/fr/web/css/_colon_fullscreen/index.html | 91 - files/fr/web/css/_colon_fullscreen/index.md | 91 + files/fr/web/css/_colon_future/index.html | 66 - files/fr/web/css/_colon_future/index.md | 66 + files/fr/web/css/_colon_has/index.html | 67 - files/fr/web/css/_colon_has/index.md | 67 + files/fr/web/css/_colon_host()/index.html | 87 - files/fr/web/css/_colon_host()/index.md | 87 + files/fr/web/css/_colon_host-context()/index.html | 94 - files/fr/web/css/_colon_host-context()/index.md | 94 + files/fr/web/css/_colon_host/index.html | 84 - files/fr/web/css/_colon_host/index.md | 84 + files/fr/web/css/_colon_hover/index.html | 97 - files/fr/web/css/_colon_hover/index.md | 97 + files/fr/web/css/_colon_in-range/index.html | 104 - files/fr/web/css/_colon_in-range/index.md | 104 + files/fr/web/css/_colon_indeterminate/index.html | 125 - files/fr/web/css/_colon_indeterminate/index.md | 125 + files/fr/web/css/_colon_invalid/index.html | 161 - files/fr/web/css/_colon_invalid/index.md | 161 + files/fr/web/css/_colon_is/index.html | 281 -- files/fr/web/css/_colon_is/index.md | 281 ++ files/fr/web/css/_colon_lang/index.html | 131 - files/fr/web/css/_colon_lang/index.md | 131 + files/fr/web/css/_colon_last-child/index.html | 85 - files/fr/web/css/_colon_last-child/index.md | 85 + files/fr/web/css/_colon_last-of-type/index.html | 100 - files/fr/web/css/_colon_last-of-type/index.md | 100 + files/fr/web/css/_colon_left/index.html | 72 - files/fr/web/css/_colon_left/index.md | 72 + files/fr/web/css/_colon_link/index.html | 110 - files/fr/web/css/_colon_link/index.md | 110 + files/fr/web/css/_colon_local-link/index.html | 52 - files/fr/web/css/_colon_local-link/index.md | 52 + files/fr/web/css/_colon_not/index.html | 110 - files/fr/web/css/_colon_not/index.md | 110 + files/fr/web/css/_colon_nth-child/index.html | 206 -- files/fr/web/css/_colon_nth-child/index.md | 206 ++ files/fr/web/css/_colon_nth-col/index.html | 76 - files/fr/web/css/_colon_nth-col/index.md | 76 + files/fr/web/css/_colon_nth-last-child/index.html | 195 -- files/fr/web/css/_colon_nth-last-child/index.md | 195 ++ files/fr/web/css/_colon_nth-last-col/index.html | 76 - files/fr/web/css/_colon_nth-last-col/index.md | 76 + .../fr/web/css/_colon_nth-last-of-type/index.html | 91 - files/fr/web/css/_colon_nth-last-of-type/index.md | 91 + files/fr/web/css/_colon_nth-of-type/index.html | 106 - files/fr/web/css/_colon_nth-of-type/index.md | 106 + files/fr/web/css/_colon_only-child/index.html | 141 - files/fr/web/css/_colon_only-child/index.md | 141 + files/fr/web/css/_colon_only-of-type/index.html | 112 - files/fr/web/css/_colon_only-of-type/index.md | 112 + files/fr/web/css/_colon_optional/index.html | 114 - files/fr/web/css/_colon_optional/index.md | 114 + files/fr/web/css/_colon_out-of-range/index.html | 107 - files/fr/web/css/_colon_out-of-range/index.md | 107 + files/fr/web/css/_colon_past/index.html | 66 - files/fr/web/css/_colon_past/index.md | 66 + .../fr/web/css/_colon_placeholder-shown/index.html | 190 -- files/fr/web/css/_colon_placeholder-shown/index.md | 190 ++ files/fr/web/css/_colon_read-only/index.html | 100 - files/fr/web/css/_colon_read-only/index.md | 100 + files/fr/web/css/_colon_read-write/index.html | 94 - files/fr/web/css/_colon_read-write/index.md | 94 + files/fr/web/css/_colon_required/index.html | 118 - files/fr/web/css/_colon_required/index.md | 118 + files/fr/web/css/_colon_right/index.html | 71 - files/fr/web/css/_colon_right/index.md | 71 + files/fr/web/css/_colon_root/index.html | 60 - files/fr/web/css/_colon_root/index.md | 60 + files/fr/web/css/_colon_scope/index.html | 82 - files/fr/web/css/_colon_scope/index.md | 82 + files/fr/web/css/_colon_target-within/index.html | 77 - files/fr/web/css/_colon_target-within/index.md | 77 + files/fr/web/css/_colon_target/index.html | 240 -- files/fr/web/css/_colon_target/index.md | 240 ++ files/fr/web/css/_colon_user-invalid/index.html | 49 - files/fr/web/css/_colon_user-invalid/index.md | 49 + files/fr/web/css/_colon_valid/index.html | 118 - files/fr/web/css/_colon_valid/index.md | 118 + files/fr/web/css/_colon_visited/index.html | 111 - files/fr/web/css/_colon_visited/index.md | 111 + files/fr/web/css/_colon_where/index.html | 50 - files/fr/web/css/_colon_where/index.md | 50 + .../css/_doublecolon_-moz-color-swatch/index.html | 58 - .../css/_doublecolon_-moz-color-swatch/index.md | 58 + .../css/_doublecolon_-moz-page-sequence/index.html | 32 - .../css/_doublecolon_-moz-page-sequence/index.md | 32 + files/fr/web/css/_doublecolon_-moz-page/index.html | 32 - files/fr/web/css/_doublecolon_-moz-page/index.md | 32 + .../css/_doublecolon_-moz-progress-bar/index.html | 47 - .../css/_doublecolon_-moz-progress-bar/index.md | 47 + .../_doublecolon_-moz-range-progress/index.html | 67 - .../css/_doublecolon_-moz-range-progress/index.md | 67 + .../css/_doublecolon_-moz-range-thumb/index.html | 71 - .../web/css/_doublecolon_-moz-range-thumb/index.md | 71 + .../css/_doublecolon_-moz-range-track/index.html | 70 - .../web/css/_doublecolon_-moz-range-track/index.md | 70 + .../index.html | 32 - .../index.md | 32 + .../index.html | 46 - .../index.md | 46 + .../css/_doublecolon_-webkit-meter-bar/index.html | 66 - .../css/_doublecolon_-webkit-meter-bar/index.md | 66 + .../index.html | 54 - .../index.md | 54 + .../index.html | 61 - .../index.md | 61 + .../index.html | 54 - .../index.md | 54 + .../index.html | 54 - .../index.md | 54 + .../index.html | 46 - .../index.md | 46 + .../_doublecolon_-webkit-progress-bar/index.html | 64 - .../css/_doublecolon_-webkit-progress-bar/index.md | 64 + .../index.html | 64 - .../index.md | 64 + .../_doublecolon_-webkit-progress-value/index.html | 63 - .../_doublecolon_-webkit-progress-value/index.md | 63 + .../css/_doublecolon_-webkit-scrollbar/index.html | 120 - .../css/_doublecolon_-webkit-scrollbar/index.md | 120 + .../index.html | 32 - .../index.md | 32 + .../index.html | 31 - .../index.md | 31 + .../index.html | 33 - .../index.md | 33 + .../_doublecolon_-webkit-slider-thumb/index.html | 34 - .../css/_doublecolon_-webkit-slider-thumb/index.md | 34 + files/fr/web/css/_doublecolon_after/index.html | 179 -- files/fr/web/css/_doublecolon_after/index.md | 179 ++ files/fr/web/css/_doublecolon_backdrop/index.html | 78 - files/fr/web/css/_doublecolon_backdrop/index.md | 78 + files/fr/web/css/_doublecolon_before/index.html | 187 -- files/fr/web/css/_doublecolon_before/index.md | 187 ++ .../fr/web/css/_doublecolon_cue-region/index.html | 82 - files/fr/web/css/_doublecolon_cue-region/index.md | 82 + files/fr/web/css/_doublecolon_cue/index.html | 79 - files/fr/web/css/_doublecolon_cue/index.md | 79 + .../_doublecolon_file-selector-button/index.html | 53 - .../css/_doublecolon_file-selector-button/index.md | 53 + .../web/css/_doublecolon_first-letter/index.html | 141 - .../fr/web/css/_doublecolon_first-letter/index.md | 141 + .../fr/web/css/_doublecolon_first-line/index.html | 159 - files/fr/web/css/_doublecolon_first-line/index.md | 159 + .../web/css/_doublecolon_grammar-error/index.html | 82 - .../fr/web/css/_doublecolon_grammar-error/index.md | 82 + files/fr/web/css/_doublecolon_marker/index.html | 97 - files/fr/web/css/_doublecolon_marker/index.md | 97 + files/fr/web/css/_doublecolon_part/index.html | 111 - files/fr/web/css/_doublecolon_part/index.md | 111 + .../fr/web/css/_doublecolon_placeholder/index.html | 154 - files/fr/web/css/_doublecolon_placeholder/index.md | 154 + files/fr/web/css/_doublecolon_selection/index.html | 131 - files/fr/web/css/_doublecolon_selection/index.md | 131 + files/fr/web/css/_doublecolon_slotted/index.html | 109 - files/fr/web/css/_doublecolon_slotted/index.md | 109 + .../web/css/_doublecolon_spelling-error/index.html | 82 - .../web/css/_doublecolon_spelling-error/index.md | 82 + .../fr/web/css/_doublecolon_target-text/index.html | 43 - files/fr/web/css/_doublecolon_target-text/index.md | 43 + files/fr/web/css/accent-color/index.html | 88 - files/fr/web/css/accent-color/index.md | 88 + files/fr/web/css/actual_value/index.html | 53 - files/fr/web/css/actual_value/index.md | 53 + .../web/css/adjacent_sibling_combinator/index.html | 83 - .../web/css/adjacent_sibling_combinator/index.md | 83 + files/fr/web/css/align-content/index.html | 284 -- files/fr/web/css/align-content/index.md | 284 ++ files/fr/web/css/align-items/index.html | 278 -- files/fr/web/css/align-items/index.md | 278 ++ files/fr/web/css/align-self/index.html | 183 -- files/fr/web/css/align-self/index.md | 183 ++ files/fr/web/css/all/index.html | 162 - files/fr/web/css/all/index.md | 162 + files/fr/web/css/alpha-value/index.html | 62 - files/fr/web/css/alpha-value/index.md | 62 + .../fr/web/css/alternative_style_sheets/index.html | 78 - files/fr/web/css/alternative_style_sheets/index.md | 78 + files/fr/web/css/angle-percentage/index.html | 48 - files/fr/web/css/angle-percentage/index.md | 48 + files/fr/web/css/angle/index.html | 94 - files/fr/web/css/angle/index.md | 94 + files/fr/web/css/animation-delay/index.html | 107 - files/fr/web/css/animation-delay/index.md | 107 + files/fr/web/css/animation-direction/index.html | 133 - files/fr/web/css/animation-direction/index.md | 133 + files/fr/web/css/animation-duration/index.html | 110 - files/fr/web/css/animation-duration/index.md | 110 + files/fr/web/css/animation-fill-mode/index.html | 185 -- files/fr/web/css/animation-fill-mode/index.md | 185 ++ .../web/css/animation-iteration-count/index.html | 131 - .../fr/web/css/animation-iteration-count/index.md | 131 + files/fr/web/css/animation-name/index.html | 115 - files/fr/web/css/animation-name/index.md | 115 + files/fr/web/css/animation-play-state/index.html | 128 - files/fr/web/css/animation-play-state/index.md | 128 + .../web/css/animation-timing-function/index.html | 264 -- .../fr/web/css/animation-timing-function/index.md | 264 ++ files/fr/web/css/animation/index.html | 362 --- files/fr/web/css/animation/index.md | 362 +++ files/fr/web/css/appearance/index.html | 584 ---- files/fr/web/css/appearance/index.md | 584 ++++ files/fr/web/css/aspect-ratio/index.html | 70 - files/fr/web/css/aspect-ratio/index.md | 70 + files/fr/web/css/at-rule/index.html | 83 - files/fr/web/css/at-rule/index.md | 83 + files/fr/web/css/attr()/index.html | 250 -- files/fr/web/css/attr()/index.md | 250 ++ files/fr/web/css/attribute_selectors/index.html | 242 -- files/fr/web/css/attribute_selectors/index.md | 242 ++ files/fr/web/css/backdrop-filter/index.html | 136 - files/fr/web/css/backdrop-filter/index.md | 136 + files/fr/web/css/backface-visibility/index.html | 213 -- files/fr/web/css/backface-visibility/index.md | 213 ++ files/fr/web/css/background-attachment/index.html | 144 - files/fr/web/css/background-attachment/index.md | 144 + files/fr/web/css/background-blend-mode/index.html | 116 - files/fr/web/css/background-blend-mode/index.md | 116 + files/fr/web/css/background-clip/index.html | 147 - files/fr/web/css/background-clip/index.md | 147 + files/fr/web/css/background-color/index.html | 157 - files/fr/web/css/background-color/index.md | 157 + files/fr/web/css/background-image/index.html | 170 -- files/fr/web/css/background-image/index.md | 170 ++ files/fr/web/css/background-origin/index.html | 107 - files/fr/web/css/background-origin/index.md | 107 + files/fr/web/css/background-position-x/index.html | 106 - files/fr/web/css/background-position-x/index.md | 106 + files/fr/web/css/background-position-y/index.html | 105 - files/fr/web/css/background-position-y/index.md | 105 + files/fr/web/css/background-position/index.html | 192 -- files/fr/web/css/background-position/index.md | 192 ++ files/fr/web/css/background-repeat/index.html | 227 -- files/fr/web/css/background-repeat/index.md | 227 ++ files/fr/web/css/background-size/index.html | 256 -- files/fr/web/css/background-size/index.md | 256 ++ files/fr/web/css/background/index.html | 156 - files/fr/web/css/background/index.md | 156 + files/fr/web/css/basic-shape/index.html | 188 -- files/fr/web/css/basic-shape/index.md | 188 ++ files/fr/web/css/blend-mode/index.html | 355 --- files/fr/web/css/blend-mode/index.md | 355 +++ files/fr/web/css/block-size/index.html | 105 - files/fr/web/css/block-size/index.md | 105 + files/fr/web/css/border-block-color/index.html | 100 - files/fr/web/css/border-block-color/index.md | 100 + files/fr/web/css/border-block-end-color/index.html | 113 - files/fr/web/css/border-block-end-color/index.md | 113 + files/fr/web/css/border-block-end-style/index.html | 106 - files/fr/web/css/border-block-end-style/index.md | 106 + files/fr/web/css/border-block-end-width/index.html | 102 - files/fr/web/css/border-block-end-width/index.md | 102 + files/fr/web/css/border-block-end/index.html | 114 - files/fr/web/css/border-block-end/index.md | 114 + .../fr/web/css/border-block-start-color/index.html | 112 - files/fr/web/css/border-block-start-color/index.md | 112 + .../fr/web/css/border-block-start-style/index.html | 107 - files/fr/web/css/border-block-start-style/index.md | 107 + .../fr/web/css/border-block-start-width/index.html | 103 - files/fr/web/css/border-block-start-width/index.md | 103 + files/fr/web/css/border-block-start/index.html | 114 - files/fr/web/css/border-block-start/index.md | 114 + files/fr/web/css/border-block-style/index.html | 101 - files/fr/web/css/border-block-style/index.md | 101 + files/fr/web/css/border-block-width/index.html | 94 - files/fr/web/css/border-block-width/index.md | 94 + files/fr/web/css/border-block/index.html | 109 - files/fr/web/css/border-block/index.md | 109 + files/fr/web/css/border-bottom-color/index.html | 124 - files/fr/web/css/border-bottom-color/index.md | 124 + .../web/css/border-bottom-left-radius/index.html | 141 - .../fr/web/css/border-bottom-left-radius/index.md | 141 + .../web/css/border-bottom-right-radius/index.html | 141 - .../fr/web/css/border-bottom-right-radius/index.md | 141 + files/fr/web/css/border-bottom-style/index.html | 196 -- files/fr/web/css/border-bottom-style/index.md | 196 ++ files/fr/web/css/border-bottom-width/index.html | 139 - files/fr/web/css/border-bottom-width/index.md | 139 + files/fr/web/css/border-bottom/index.html | 122 - files/fr/web/css/border-bottom/index.md | 122 + files/fr/web/css/border-collapse/index.html | 148 - files/fr/web/css/border-collapse/index.md | 148 + files/fr/web/css/border-color/index.html | 194 -- files/fr/web/css/border-color/index.md | 194 ++ files/fr/web/css/border-end-end-radius/index.html | 105 - files/fr/web/css/border-end-end-radius/index.md | 105 + .../fr/web/css/border-end-start-radius/index.html | 105 - files/fr/web/css/border-end-start-radius/index.md | 105 + files/fr/web/css/border-image-outset/index.html | 110 - files/fr/web/css/border-image-outset/index.md | 110 + files/fr/web/css/border-image-repeat/index.html | 104 - files/fr/web/css/border-image-repeat/index.md | 104 + files/fr/web/css/border-image-slice/index.html | 128 - files/fr/web/css/border-image-slice/index.md | 128 + files/fr/web/css/border-image-source/index.html | 85 - files/fr/web/css/border-image-source/index.md | 85 + files/fr/web/css/border-image-width/index.html | 123 - files/fr/web/css/border-image-width/index.md | 123 + files/fr/web/css/border-image/index.html | 162 - files/fr/web/css/border-image/index.md | 162 + files/fr/web/css/border-inline-color/index.html | 100 - files/fr/web/css/border-inline-color/index.md | 100 + .../fr/web/css/border-inline-end-color/index.html | 111 - files/fr/web/css/border-inline-end-color/index.md | 111 + .../fr/web/css/border-inline-end-style/index.html | 106 - files/fr/web/css/border-inline-end-style/index.md | 106 + .../fr/web/css/border-inline-end-width/index.html | 102 - files/fr/web/css/border-inline-end-width/index.md | 102 + files/fr/web/css/border-inline-end/index.html | 114 - files/fr/web/css/border-inline-end/index.md | 114 + .../web/css/border-inline-start-color/index.html | 108 - .../fr/web/css/border-inline-start-color/index.md | 108 + .../web/css/border-inline-start-style/index.html | 108 - .../fr/web/css/border-inline-start-style/index.md | 108 + .../web/css/border-inline-start-width/index.html | 103 - .../fr/web/css/border-inline-start-width/index.md | 103 + files/fr/web/css/border-inline-start/index.html | 115 - files/fr/web/css/border-inline-start/index.md | 115 + files/fr/web/css/border-inline-style/index.html | 101 - files/fr/web/css/border-inline-style/index.md | 101 + files/fr/web/css/border-inline-width/index.html | 94 - files/fr/web/css/border-inline-width/index.md | 94 + files/fr/web/css/border-inline/index.html | 111 - files/fr/web/css/border-inline/index.md | 111 + files/fr/web/css/border-left-color/index.html | 124 - files/fr/web/css/border-left-color/index.md | 124 + files/fr/web/css/border-left-style/index.html | 196 -- files/fr/web/css/border-left-style/index.md | 196 ++ files/fr/web/css/border-left-width/index.html | 145 - files/fr/web/css/border-left-width/index.md | 145 + files/fr/web/css/border-left/index.html | 122 - files/fr/web/css/border-left/index.md | 122 + files/fr/web/css/border-radius/index.html | 254 -- files/fr/web/css/border-radius/index.md | 254 ++ files/fr/web/css/border-right-color/index.html | 122 - files/fr/web/css/border-right-color/index.md | 122 + files/fr/web/css/border-right-style/index.html | 198 -- files/fr/web/css/border-right-style/index.md | 198 ++ files/fr/web/css/border-right-width/index.html | 138 - files/fr/web/css/border-right-width/index.md | 138 + files/fr/web/css/border-right/index.html | 122 - files/fr/web/css/border-right/index.md | 122 + files/fr/web/css/border-spacing/index.html | 133 - files/fr/web/css/border-spacing/index.md | 133 + .../fr/web/css/border-start-end-radius/index.html | 105 - files/fr/web/css/border-start-end-radius/index.md | 105 + .../web/css/border-start-start-radius/index.html | 105 - .../fr/web/css/border-start-start-radius/index.md | 105 + files/fr/web/css/border-style/index.html | 218 -- files/fr/web/css/border-style/index.md | 218 ++ files/fr/web/css/border-top-color/index.html | 124 - files/fr/web/css/border-top-color/index.md | 124 + files/fr/web/css/border-top-left-radius/index.html | 136 - files/fr/web/css/border-top-left-radius/index.md | 136 + .../fr/web/css/border-top-right-radius/index.html | 138 - files/fr/web/css/border-top-right-radius/index.md | 138 + files/fr/web/css/border-top-style/index.html | 198 -- files/fr/web/css/border-top-style/index.md | 198 ++ files/fr/web/css/border-top-width/index.html | 134 - files/fr/web/css/border-top-width/index.md | 134 + files/fr/web/css/border-top/index.html | 122 - files/fr/web/css/border-top/index.md | 122 + files/fr/web/css/border-width/index.html | 192 -- files/fr/web/css/border-width/index.md | 192 ++ files/fr/web/css/border/index.html | 144 - files/fr/web/css/border/index.md | 144 + files/fr/web/css/bottom/index.html | 162 - files/fr/web/css/bottom/index.md | 162 + files/fr/web/css/box-align/index.html | 132 - files/fr/web/css/box-align/index.md | 132 + files/fr/web/css/box-decoration-break/index.html | 151 - files/fr/web/css/box-decoration-break/index.md | 151 + files/fr/web/css/box-direction/index.html | 78 - files/fr/web/css/box-direction/index.md | 78 + files/fr/web/css/box-flex-group/index.html | 63 - files/fr/web/css/box-flex-group/index.md | 63 + files/fr/web/css/box-flex/index.html | 110 - files/fr/web/css/box-flex/index.md | 110 + files/fr/web/css/box-lines/index.html | 77 - files/fr/web/css/box-lines/index.md | 77 + files/fr/web/css/box-ordinal-group/index.html | 61 - files/fr/web/css/box-ordinal-group/index.md | 61 + files/fr/web/css/box-orient/index.html | 109 - files/fr/web/css/box-orient/index.md | 109 + files/fr/web/css/box-pack/index.html | 147 - files/fr/web/css/box-pack/index.md | 147 + files/fr/web/css/box-shadow/index.html | 152 - files/fr/web/css/box-shadow/index.md | 152 + files/fr/web/css/box-sizing/index.html | 138 - files/fr/web/css/box-sizing/index.md | 138 + files/fr/web/css/break-after/index.html | 209 -- files/fr/web/css/break-after/index.md | 209 ++ files/fr/web/css/break-before/index.html | 227 -- files/fr/web/css/break-before/index.md | 227 ++ files/fr/web/css/break-inside/index.html | 161 - files/fr/web/css/break-inside/index.md | 161 + files/fr/web/css/calc()/index.html | 161 - files/fr/web/css/calc()/index.md | 161 + files/fr/web/css/caption-side/index.html | 112 - files/fr/web/css/caption-side/index.md | 112 + files/fr/web/css/caret-color/index.html | 100 - files/fr/web/css/caret-color/index.md | 100 + files/fr/web/css/child_combinator/index.html | 93 - files/fr/web/css/child_combinator/index.md | 93 + files/fr/web/css/clamp()/index.html | 118 - files/fr/web/css/clamp()/index.md | 118 + files/fr/web/css/class_selectors/index.html | 100 - files/fr/web/css/class_selectors/index.md | 100 + files/fr/web/css/clear/index.html | 232 -- files/fr/web/css/clear/index.md | 232 ++ files/fr/web/css/clip-path/index.html | 604 ---- files/fr/web/css/clip-path/index.md | 604 ++++ files/fr/web/css/clip/index.html | 141 - files/fr/web/css/clip/index.md | 141 + files/fr/web/css/color-adjust/index.html | 114 - files/fr/web/css/color-adjust/index.md | 114 + files/fr/web/css/color-scheme/index.html | 72 - files/fr/web/css/color-scheme/index.md | 72 + files/fr/web/css/color/index.html | 175 -- files/fr/web/css/color/index.md | 175 ++ files/fr/web/css/color_value/index.html | 1368 --------- files/fr/web/css/color_value/index.md | 1368 +++++++++ files/fr/web/css/column-count/index.html | 102 - files/fr/web/css/column-count/index.md | 102 + files/fr/web/css/column-fill/index.html | 98 - files/fr/web/css/column-fill/index.md | 98 + files/fr/web/css/column-gap/index.html | 200 -- files/fr/web/css/column-gap/index.md | 200 ++ files/fr/web/css/column-rule-color/index.html | 105 - files/fr/web/css/column-rule-color/index.md | 105 + files/fr/web/css/column-rule-style/index.html | 104 - files/fr/web/css/column-rule-style/index.md | 104 + files/fr/web/css/column-rule-width/index.html | 101 - files/fr/web/css/column-rule-width/index.md | 101 + files/fr/web/css/column-rule/index.html | 102 - files/fr/web/css/column-rule/index.md | 102 + files/fr/web/css/column-span/index.html | 97 - files/fr/web/css/column-span/index.md | 97 + files/fr/web/css/column-width/index.html | 109 - files/fr/web/css/column-width/index.md | 109 + files/fr/web/css/column_combinator/index.html | 96 - files/fr/web/css/column_combinator/index.md | 96 + files/fr/web/css/columns/index.html | 108 - files/fr/web/css/columns/index.md | 108 + files/fr/web/css/comments/index.html | 54 - files/fr/web/css/comments/index.md | 54 + .../fr/web/css/compositing_and_blending/index.html | 63 - files/fr/web/css/compositing_and_blending/index.md | 63 + files/fr/web/css/computed_value/index.html | 68 - files/fr/web/css/computed_value/index.md | 68 + files/fr/web/css/contain/index.html | 96 - files/fr/web/css/contain/index.md | 96 + files/fr/web/css/containing_block/index.html | 254 -- files/fr/web/css/containing_block/index.md | 254 ++ files/fr/web/css/content-visibility/index.html | 99 - files/fr/web/css/content-visibility/index.md | 99 + files/fr/web/css/content/index.html | 263 -- files/fr/web/css/content/index.md | 263 ++ files/fr/web/css/counter()/index.html | 140 - files/fr/web/css/counter()/index.md | 140 + files/fr/web/css/counter-increment/index.html | 129 - files/fr/web/css/counter-increment/index.md | 129 + files/fr/web/css/counter-reset/index.html | 137 - files/fr/web/css/counter-reset/index.md | 137 + files/fr/web/css/counter-set/index.html | 105 - files/fr/web/css/counter-set/index.md | 105 + files/fr/web/css/counters()/index.html | 187 -- files/fr/web/css/counters()/index.md | 187 ++ files/fr/web/css/cross-fade()/index.html | 159 - files/fr/web/css/cross-fade()/index.md | 159 + .../fr/web/css/css_animated_properties/index.html | 18 - files/fr/web/css/css_animated_properties/index.md | 18 + .../detecting_css_animation_support/index.html | 100 - .../detecting_css_animation_support/index.md | 100 + files/fr/web/css/css_animations/index.html | 76 - files/fr/web/css/css_animations/index.md | 76 + files/fr/web/css/css_animations/tips/index.html | 164 - files/fr/web/css/css_animations/tips/index.md | 164 + .../css_animations/using_css_animations/index.html | 366 --- .../css_animations/using_css_animations/index.md | 366 +++ .../border-image_generator/index.html | 2617 ---------------- .../border-image_generator/index.md | 2617 ++++++++++++++++ .../border-radius_generator/index.html | 1593 ---------- .../border-radius_generator/index.md | 1593 ++++++++++ .../box-shadow_generator/index.html | 2878 ----------------- .../box-shadow_generator/index.md | 2878 +++++++++++++++++ .../web/css/css_backgrounds_and_borders/index.html | 115 - .../web/css/css_backgrounds_and_borders/index.md | 115 + .../resizing_background_images/index.html | 116 - .../resizing_background_images/index.md | 116 + .../using_multiple_backgrounds/index.html | 56 - .../using_multiple_backgrounds/index.md | 56 + .../fr/web/css/css_basic_user_interface/index.html | 73 - files/fr/web/css/css_basic_user_interface/index.md | 73 + .../index.html | 105 - .../index.md | 105 + .../index.html | 78 - .../box_alignment_in_block_abspos_tables/index.md | 78 + .../box_alignment_in_flexbox/index.html | 116 - .../box_alignment_in_flexbox/index.md | 116 + .../box_alignment_in_grid_layout/index.html | 116 - .../box_alignment_in_grid_layout/index.md | 116 + .../index.html | 48 - .../box_alignment_in_multi-column_layout/index.md | 48 + files/fr/web/css/css_box_alignment/index.html | 245 -- files/fr/web/css/css_box_alignment/index.md | 245 ++ files/fr/web/css/css_box_model/index.html | 106 - files/fr/web/css/css_box_model/index.md | 106 + .../mastering_margin_collapsing/index.html | 93 - .../mastering_margin_collapsing/index.md | 93 + files/fr/web/css/css_charsets/index.html | 47 - files/fr/web/css/css_charsets/index.md | 47 + files/fr/web/css/css_color/index.html | 111 - files/fr/web/css/css_color/index.md | 111 + .../css/css_colors/color_picker_tool/index.html | 3226 -------------------- .../web/css/css_colors/color_picker_tool/index.md | 3226 ++++++++++++++++++++ .../basic_concepts_of_multicol/index.html | 93 - .../basic_concepts_of_multicol/index.md | 93 + .../handling_content_breaks_in_multicol/index.html | 73 - .../handling_content_breaks_in_multicol/index.md | 73 + .../handling_overflow_in_multicol/index.html | 50 - .../handling_overflow_in_multicol/index.md | 50 + files/fr/web/css/css_columns/index.html | 93 - files/fr/web/css/css_columns/index.md | 93 + .../css/css_columns/spanning_columns/index.html | 64 - .../web/css/css_columns/spanning_columns/index.md | 64 + .../web/css/css_columns/styling_columns/index.html | 49 - .../web/css/css_columns/styling_columns/index.md | 49 + .../using_multi-column_layouts/index.html | 187 -- .../using_multi-column_layouts/index.md | 187 ++ files/fr/web/css/css_conditional_rules/index.html | 61 - files/fr/web/css/css_conditional_rules/index.md | 61 + .../using_feature_queries/index.html | 113 - .../using_feature_queries/index.md | 113 + files/fr/web/css/css_containment/index.html | 124 - files/fr/web/css/css_containment/index.md | 124 + files/fr/web/css/css_counter_styles/index.html | 80 - files/fr/web/css/css_counter_styles/index.md | 80 + files/fr/web/css/css_device_adaptation/index.html | 44 - files/fr/web/css/css_device_adaptation/index.md | 44 + files/fr/web/css/css_display/index.html | 109 - files/fr/web/css/css_display/index.md | 109 + .../aligning_items_in_a_flex_container/index.html | 219 -- .../aligning_items_in_a_flex_container/index.md | 219 ++ .../backwards_compatibility_of_flexbox/index.html | 342 --- .../backwards_compatibility_of_flexbox/index.md | 342 +++ .../basic_concepts_of_flexbox/index.html | 236 -- .../basic_concepts_of_flexbox/index.md | 236 ++ .../index.html | 202 -- .../index.md | 202 ++ .../fr/web/css/css_flexible_box_layout/index.html | 108 - files/fr/web/css/css_flexible_box_layout/index.md | 108 + .../mastering_wrapping_of_flex_items/index.html | 102 - .../mastering_wrapping_of_flex_items/index.md | 102 + .../ordering_flex_items/index.html | 140 - .../ordering_flex_items/index.md | 140 + .../index.html | 127 - .../index.md | 127 + .../typical_use_cases_of_flexbox/index.html | 141 - .../typical_use_cases_of_flexbox/index.md | 141 + .../index.html | 129 - .../index.md | 129 + .../flow_layout_and_overflow/index.html | 71 - .../flow_layout_and_overflow/index.md | 71 + .../flow_layout_and_writing_modes/index.html | 91 - .../flow_layout_and_writing_modes/index.md | 91 + .../in_flow_and_out_of_flow/index.html | 69 - .../in_flow_and_out_of_flow/index.md | 69 + files/fr/web/css/css_flow_layout/index.html | 42 - files/fr/web/css/css_flow_layout/index.md | 42 + .../intro_to_formatting_contexts/index.html | 90 - .../intro_to_formatting_contexts/index.md | 90 + files/fr/web/css/css_fonts/index.html | 126 - files/fr/web/css/css_fonts/index.md | 126 + .../css/css_fonts/opentype_fonts_guide/index.html | 230 -- .../css/css_fonts/opentype_fonts_guide/index.md | 230 ++ .../css/css_fonts/variable_fonts_guide/index.html | 262 -- .../css/css_fonts/variable_fonts_guide/index.md | 262 ++ files/fr/web/css/css_fragmentation/index.html | 46 - files/fr/web/css/css_fragmentation/index.md | 46 + files/fr/web/css/css_generated_content/index.html | 46 - files/fr/web/css/css_generated_content/index.md | 46 + .../auto-placement_in_css_grid_layout/index.html | 542 ---- .../auto-placement_in_css_grid_layout/index.md | 542 ++++ .../basic_concepts_of_grid_layout/index.html | 600 ---- .../basic_concepts_of_grid_layout/index.md | 600 ++++ .../box_alignment_in_css_grid_layout/index.html | 636 ---- .../box_alignment_in_css_grid_layout/index.md | 636 ++++ .../index.html | 412 --- .../css_grid_and_progressive_enhancement/index.md | 412 +++ .../css_grid_layout_and_accessibility/index.html | 121 - .../css_grid_layout_and_accessibility/index.md | 121 + .../index.html | 436 --- .../index.md | 436 +++ .../css_grid_layout/grid_template_areas/index.html | 467 --- .../css_grid_layout/grid_template_areas/index.md | 467 +++ files/fr/web/css/css_grid_layout/index.html | 183 -- files/fr/web/css/css_grid_layout/index.md | 183 ++ .../layout_using_named_grid_lines/index.html | 416 --- .../layout_using_named_grid_lines/index.md | 416 +++ .../line-based_placement_with_css_grid/index.html | 583 ---- .../line-based_placement_with_css_grid/index.md | 583 ++++ .../index.html | 543 ---- .../index.md | 543 ++++ .../relationship_of_grid_layout/index.html | 556 ---- .../relationship_of_grid_layout/index.md | 556 ++++ .../fr/web/css/css_grid_layout/subgrid/index.html | 118 - files/fr/web/css/css_grid_layout/subgrid/index.md | 118 + .../implementing_image_sprites_in_css/index.html | 52 - .../implementing_image_sprites_in_css/index.md | 52 + files/fr/web/css/css_images/index.html | 100 - files/fr/web/css/css_images/index.md | 100 + .../css/css_images/using_css_gradients/index.html | 712 ----- .../css/css_images/using_css_gradients/index.md | 712 +++++ .../consistent_list_indentation/index.html | 106 - .../consistent_list_indentation/index.md | 106 + files/fr/web/css/css_lists_and_counters/index.html | 56 - files/fr/web/css/css_lists_and_counters/index.md | 56 + .../using_css_counters/index.html | 149 - .../using_css_counters/index.md | 149 + .../basic_concepts/index.html | 76 - .../css_logical_properties/basic_concepts/index.md | 76 + .../floating_and_positioning/index.html | 144 - .../floating_and_positioning/index.md | 144 + files/fr/web/css/css_logical_properties/index.html | 164 - files/fr/web/css/css_logical_properties/index.md | 164 + .../margins_borders_padding/index.html | 298 -- .../margins_borders_padding/index.md | 298 ++ .../css/css_logical_properties/sizing/index.html | 90 - .../web/css/css_logical_properties/sizing/index.md | 90 + files/fr/web/css/css_masking/index.html | 65 - files/fr/web/css/css_masking/index.md | 65 + files/fr/web/css/css_miscellaneous/index.html | 29 - files/fr/web/css/css_miscellaneous/index.md | 29 + files/fr/web/css/css_motion_path/index.html | 51 - files/fr/web/css/css_motion_path/index.md | 51 + files/fr/web/css/css_namespaces/index.html | 46 - files/fr/web/css/css_namespaces/index.md | 46 + files/fr/web/css/css_overflow/index.html | 76 - files/fr/web/css/css_overflow/index.md | 76 + files/fr/web/css/css_pages/index.html | 67 - files/fr/web/css/css_pages/index.md | 67 + files/fr/web/css/css_positioning/index.html | 59 - files/fr/web/css/css_positioning/index.md | 59 + .../adding_z-index/index.html | 150 - .../understanding_z_index/adding_z-index/index.md | 150 + .../understanding_z_index/index.html | 37 - .../css_positioning/understanding_z_index/index.md | 37 + .../stacking_and_float/index.html | 136 - .../stacking_and_float/index.md | 136 + .../stacking_context_example_1/index.html | 121 - .../stacking_context_example_1/index.md | 121 + .../stacking_context_example_2/index.html | 128 - .../stacking_context_example_2/index.md | 128 + .../stacking_context_example_3/index.html | 161 - .../stacking_context_example_3/index.md | 161 + .../stacking_without_z-index/index.html | 119 - .../stacking_without_z-index/index.md | 119 + .../the_stacking_context/index.html | 217 -- .../the_stacking_context/index.md | 217 ++ .../fr/web/css/css_properties_reference/index.html | 317 -- files/fr/web/css/css_properties_reference/index.md | 317 ++ files/fr/web/css/css_ruby/index.html | 42 - files/fr/web/css/css_ruby/index.md | 42 + .../css/css_scroll_snap/basic_concepts/index.html | 71 - .../css/css_scroll_snap/basic_concepts/index.md | 71 + .../css/css_scroll_snap/browser_compat/index.html | 47 - .../css/css_scroll_snap/browser_compat/index.md | 47 + files/fr/web/css/css_scroll_snap/index.html | 84 - files/fr/web/css/css_scroll_snap/index.md | 84 + files/fr/web/css/css_scroll_snap_points/index.html | 49 - files/fr/web/css/css_scroll_snap_points/index.md | 49 + files/fr/web/css/css_scrollbars/index.html | 87 - files/fr/web/css/css_scrollbars/index.md | 87 + files/fr/web/css/css_selectors/index.html | 115 - files/fr/web/css/css_selectors/index.md | 115 + .../index.html | 62 - .../index.md | 62 + .../fr/web/css/css_shapes/basic_shapes/index.html | 150 - files/fr/web/css/css_shapes/basic_shapes/index.md | 150 + .../web/css/css_shapes/from_box_values/index.html | 76 - .../fr/web/css/css_shapes/from_box_values/index.md | 76 + files/fr/web/css/css_shapes/index.html | 76 - files/fr/web/css/css_shapes/index.md | 76 + .../css_shapes/overview_of_css_shapes/index.html | 126 - .../css/css_shapes/overview_of_css_shapes/index.md | 126 + .../css/css_shapes/shapes_from_images/index.html | 65 - .../web/css/css_shapes/shapes_from_images/index.md | 65 + files/fr/web/css/css_table/index.html | 44 - files/fr/web/css/css_table/index.md | 44 + files/fr/web/css/css_text/index.html | 69 - files/fr/web/css/css_text/index.md | 69 + files/fr/web/css/css_text_decoration/index.html | 64 - files/fr/web/css/css_text_decoration/index.md | 64 + files/fr/web/css/css_transforms/index.html | 60 - files/fr/web/css/css_transforms/index.md | 60 + .../css_transforms/using_css_transforms/index.html | 84 - .../css_transforms/using_css_transforms/index.md | 84 + files/fr/web/css/css_transitions/index.html | 57 - files/fr/web/css/css_transitions/index.md | 57 + .../using_css_transitions/index.html | 328 -- .../css_transitions/using_css_transitions/index.md | 328 ++ files/fr/web/css/css_types/index.html | 101 - files/fr/web/css/css_types/index.md | 101 + files/fr/web/css/css_values_and_units/index.html | 495 --- files/fr/web/css/css_values_and_units/index.md | 495 +++ files/fr/web/css/css_variables/index.html | 40 - files/fr/web/css/css_variables/index.md | 40 + files/fr/web/css/css_writing_modes/index.html | 55 - files/fr/web/css/css_writing_modes/index.md | 55 + .../css/cssom_view/coordinate_systems/index.html | 181 -- .../web/css/cssom_view/coordinate_systems/index.md | 181 ++ files/fr/web/css/cssom_view/index.html | 52 - files/fr/web/css/cssom_view/index.md | 52 + files/fr/web/css/cursor/index.html | 336 -- files/fr/web/css/cursor/index.md | 336 ++ files/fr/web/css/custom-ident/index.html | 128 - files/fr/web/css/custom-ident/index.md | 128 + files/fr/web/css/descendant_combinator/index.html | 108 - files/fr/web/css/descendant_combinator/index.md | 108 + files/fr/web/css/dimension/index.html | 74 - files/fr/web/css/dimension/index.md | 74 + files/fr/web/css/direction/index.html | 104 - files/fr/web/css/direction/index.md | 104 + files/fr/web/css/display-box/index.html | 106 - files/fr/web/css/display-box/index.md | 106 + files/fr/web/css/display-inside/index.html | 118 - files/fr/web/css/display-inside/index.md | 118 + files/fr/web/css/display-internal/index.html | 71 - files/fr/web/css/display-internal/index.md | 71 + files/fr/web/css/display-legacy/index.html | 101 - files/fr/web/css/display-legacy/index.md | 101 + files/fr/web/css/display-listitem/index.html | 62 - files/fr/web/css/display-listitem/index.md | 62 + files/fr/web/css/display-outside/index.html | 85 - files/fr/web/css/display-outside/index.md | 85 + files/fr/web/css/display/index.html | 235 -- files/fr/web/css/display/index.md | 235 ++ files/fr/web/css/easing-function/index.html | 337 -- files/fr/web/css/easing-function/index.md | 337 ++ files/fr/web/css/element()/index.html | 147 - files/fr/web/css/element()/index.md | 147 + files/fr/web/css/empty-cells/index.html | 113 - files/fr/web/css/empty-cells/index.md | 113 + files/fr/web/css/env()/index.html | 148 - files/fr/web/css/env()/index.md | 148 + files/fr/web/css/filter-function/blur()/index.html | 38 - files/fr/web/css/filter-function/blur()/index.md | 38 + .../css/filter-function/brightness()/index.html | 39 - .../web/css/filter-function/brightness()/index.md | 39 + .../web/css/filter-function/contrast()/index.html | 39 - .../fr/web/css/filter-function/contrast()/index.md | 39 + .../css/filter-function/drop-shadow()/index.html | 60 - .../web/css/filter-function/drop-shadow()/index.md | 60 + .../web/css/filter-function/grayscale()/index.html | 38 - .../web/css/filter-function/grayscale()/index.md | 38 + .../css/filter-function/hue-rotate()/index.html | 41 - .../web/css/filter-function/hue-rotate()/index.md | 41 + files/fr/web/css/filter-function/index.html | 69 - files/fr/web/css/filter-function/index.md | 69 + .../fr/web/css/filter-function/invert()/index.html | 38 - files/fr/web/css/filter-function/invert()/index.md | 38 + .../web/css/filter-function/opacity()/index.html | 43 - .../fr/web/css/filter-function/opacity()/index.md | 43 + .../web/css/filter-function/saturate()/index.html | 39 - .../fr/web/css/filter-function/saturate()/index.md | 39 + .../fr/web/css/filter-function/sepia()/index.html | 38 - files/fr/web/css/filter-function/sepia()/index.md | 38 + files/fr/web/css/filter/index.html | 1139 ------- files/fr/web/css/filter/index.md | 1139 +++++++ files/fr/web/css/filter_effects/index.html | 57 - files/fr/web/css/filter_effects/index.md | 57 + files/fr/web/css/fit-content/index.html | 107 - files/fr/web/css/fit-content/index.md | 107 + files/fr/web/css/flex-basis/index.html | 203 -- files/fr/web/css/flex-basis/index.md | 203 ++ files/fr/web/css/flex-direction/index.html | 146 - files/fr/web/css/flex-direction/index.md | 146 + files/fr/web/css/flex-flow/index.html | 94 - files/fr/web/css/flex-flow/index.md | 94 + files/fr/web/css/flex-grow/index.html | 119 - files/fr/web/css/flex-grow/index.md | 119 + files/fr/web/css/flex-shrink/index.html | 115 - files/fr/web/css/flex-shrink/index.md | 115 + files/fr/web/css/flex-wrap/index.html | 151 - files/fr/web/css/flex-wrap/index.md | 151 + files/fr/web/css/flex/index.html | 290 -- files/fr/web/css/flex/index.md | 290 ++ files/fr/web/css/flex_value/index.html | 53 - files/fr/web/css/flex_value/index.md | 53 + files/fr/web/css/float/index.html | 222 -- files/fr/web/css/float/index.md | 222 ++ files/fr/web/css/font-family/index.html | 229 -- files/fr/web/css/font-family/index.md | 229 ++ files/fr/web/css/font-feature-settings/index.html | 117 - files/fr/web/css/font-feature-settings/index.md | 117 + files/fr/web/css/font-kerning/index.html | 114 - files/fr/web/css/font-kerning/index.md | 114 + files/fr/web/css/font-language-override/index.html | 109 - files/fr/web/css/font-language-override/index.md | 109 + files/fr/web/css/font-optical-sizing/index.html | 100 - files/fr/web/css/font-optical-sizing/index.md | 100 + files/fr/web/css/font-size-adjust/index.html | 138 - files/fr/web/css/font-size-adjust/index.md | 138 + files/fr/web/css/font-size/index.html | 238 -- files/fr/web/css/font-size/index.md | 238 ++ files/fr/web/css/font-smooth/index.html | 71 - files/fr/web/css/font-smooth/index.md | 71 + files/fr/web/css/font-stretch/index.html | 282 -- files/fr/web/css/font-stretch/index.md | 282 ++ files/fr/web/css/font-style/index.html | 227 -- files/fr/web/css/font-style/index.md | 227 ++ files/fr/web/css/font-synthesis/index.html | 93 - files/fr/web/css/font-synthesis/index.md | 93 + .../fr/web/css/font-variant-alternates/index.html | 124 - files/fr/web/css/font-variant-alternates/index.md | 124 + files/fr/web/css/font-variant-caps/index.html | 128 - files/fr/web/css/font-variant-caps/index.md | 128 + .../fr/web/css/font-variant-east-asian/index.html | 137 - files/fr/web/css/font-variant-east-asian/index.md | 137 + files/fr/web/css/font-variant-ligatures/index.html | 208 -- files/fr/web/css/font-variant-ligatures/index.md | 208 ++ files/fr/web/css/font-variant-numeric/index.html | 132 - files/fr/web/css/font-variant-numeric/index.md | 132 + files/fr/web/css/font-variant-position/index.html | 93 - files/fr/web/css/font-variant-position/index.md | 93 + files/fr/web/css/font-variant/index.html | 113 - files/fr/web/css/font-variant/index.md | 113 + .../fr/web/css/font-variation-settings/index.html | 165 - files/fr/web/css/font-variation-settings/index.md | 165 + files/fr/web/css/font-weight/index.html | 386 --- files/fr/web/css/font-weight/index.md | 386 +++ files/fr/web/css/font/index.html | 232 -- files/fr/web/css/font/index.md | 232 ++ files/fr/web/css/forced-color-adjust/index.html | 101 - files/fr/web/css/forced-color-adjust/index.md | 101 + files/fr/web/css/frequency-percentage/index.html | 48 - files/fr/web/css/frequency-percentage/index.md | 48 + files/fr/web/css/frequency/index.html | 68 - files/fr/web/css/frequency/index.md | 68 + files/fr/web/css/gap/index.html | 222 -- files/fr/web/css/gap/index.md | 222 ++ .../web/css/general_sibling_combinator/index.html | 80 - .../fr/web/css/general_sibling_combinator/index.md | 80 + files/fr/web/css/gradient/index.html | 126 - files/fr/web/css/gradient/index.md | 126 + files/fr/web/css/grid-area/index.html | 152 - files/fr/web/css/grid-area/index.md | 152 + files/fr/web/css/grid-auto-columns/index.html | 154 - files/fr/web/css/grid-auto-columns/index.md | 154 + files/fr/web/css/grid-auto-flow/index.html | 159 - files/fr/web/css/grid-auto-flow/index.md | 159 + files/fr/web/css/grid-auto-rows/index.html | 147 - files/fr/web/css/grid-auto-rows/index.md | 147 + files/fr/web/css/grid-column-end/index.html | 160 - files/fr/web/css/grid-column-end/index.md | 160 + files/fr/web/css/grid-column-start/index.html | 172 -- files/fr/web/css/grid-column-start/index.md | 172 ++ files/fr/web/css/grid-column/index.html | 163 - files/fr/web/css/grid-column/index.md | 163 + files/fr/web/css/grid-row-end/index.html | 160 - files/fr/web/css/grid-row-end/index.md | 160 + files/fr/web/css/grid-row-start/index.html | 172 -- files/fr/web/css/grid-row-start/index.md | 172 ++ files/fr/web/css/grid-row/index.html | 148 - files/fr/web/css/grid-row/index.md | 148 + files/fr/web/css/grid-template-areas/index.html | 130 - files/fr/web/css/grid-template-areas/index.md | 130 + files/fr/web/css/grid-template-columns/index.html | 139 - files/fr/web/css/grid-template-columns/index.md | 139 + files/fr/web/css/grid-template-rows/index.html | 143 - files/fr/web/css/grid-template-rows/index.md | 143 + files/fr/web/css/grid-template/index.html | 144 - files/fr/web/css/grid-template/index.md | 144 + files/fr/web/css/grid/index.html | 138 - files/fr/web/css/grid/index.md | 138 + files/fr/web/css/hanging-punctuation/index.html | 127 - files/fr/web/css/hanging-punctuation/index.md | 127 + files/fr/web/css/height/index.html | 175 -- files/fr/web/css/height/index.md | 175 ++ files/fr/web/css/hyphens/index.html | 139 - files/fr/web/css/hyphens/index.md | 139 + files/fr/web/css/id_selectors/index.html | 86 - files/fr/web/css/id_selectors/index.md | 86 + files/fr/web/css/image-orientation/index.html | 134 - files/fr/web/css/image-orientation/index.md | 134 + files/fr/web/css/image-rendering/index.html | 127 - files/fr/web/css/image-rendering/index.md | 127 + files/fr/web/css/image/index.html | 189 -- files/fr/web/css/image/index.md | 189 ++ files/fr/web/css/ime-mode/index.html | 98 - files/fr/web/css/ime-mode/index.md | 98 + files/fr/web/css/index.html | 87 - files/fr/web/css/index.md | 87 + files/fr/web/css/inherit/index.html | 87 - files/fr/web/css/inherit/index.md | 87 + files/fr/web/css/inheritance/index.html | 77 - files/fr/web/css/inheritance/index.md | 77 + files/fr/web/css/initial-letter-align/index.html | 102 - files/fr/web/css/initial-letter-align/index.md | 102 + files/fr/web/css/initial-letter/index.html | 95 - files/fr/web/css/initial-letter/index.md | 95 + files/fr/web/css/initial/index.html | 88 - files/fr/web/css/initial/index.md | 88 + files/fr/web/css/initial_value/index.html | 54 - files/fr/web/css/initial_value/index.md | 54 + files/fr/web/css/inline-size/index.html | 108 - files/fr/web/css/inline-size/index.md | 108 + .../web/css/inline_formatting_context/index.html | 64 - .../fr/web/css/inline_formatting_context/index.md | 64 + files/fr/web/css/inset-block-end/index.html | 125 - files/fr/web/css/inset-block-end/index.md | 125 + files/fr/web/css/inset-block-start/index.html | 123 - files/fr/web/css/inset-block-start/index.md | 123 + files/fr/web/css/inset-block/index.html | 106 - files/fr/web/css/inset-block/index.md | 106 + files/fr/web/css/inset-inline-end/index.html | 125 - files/fr/web/css/inset-inline-end/index.md | 125 + files/fr/web/css/inset-inline-start/index.html | 119 - files/fr/web/css/inset-inline-start/index.md | 119 + files/fr/web/css/inset-inline/index.html | 106 - files/fr/web/css/inset-inline/index.md | 106 + files/fr/web/css/inset/index.html | 113 - files/fr/web/css/inset/index.md | 113 + files/fr/web/css/integer/index.html | 93 - files/fr/web/css/integer/index.md | 93 + files/fr/web/css/isolation/index.html | 118 - files/fr/web/css/isolation/index.md | 118 + files/fr/web/css/justify-content/index.html | 198 -- files/fr/web/css/justify-content/index.md | 198 ++ files/fr/web/css/justify-items/index.html | 234 -- files/fr/web/css/justify-items/index.md | 234 ++ files/fr/web/css/justify-self/index.html | 213 -- files/fr/web/css/justify-self/index.md | 213 ++ .../breadcrumb_navigation/index.html | 48 - .../layout_cookbook/breadcrumb_navigation/index.md | 48 + files/fr/web/css/layout_cookbook/card/index.html | 80 - files/fr/web/css/layout_cookbook/card/index.md | 80 + .../layout_cookbook/center_an_element/index.html | 58 - .../css/layout_cookbook/center_an_element/index.md | 58 + .../css/layout_cookbook/column_layouts/index.html | 128 - .../css/layout_cookbook/column_layouts/index.md | 128 + .../cookbook_template/index.html | 63 - .../contribute_a_recipe/cookbook_template/index.md | 63 + .../layout_cookbook/contribute_a_recipe/index.html | 105 - .../layout_cookbook/contribute_a_recipe/index.md | 105 + .../css/layout_cookbook/grid_wrapper/index.html | 79 - .../web/css/layout_cookbook/grid_wrapper/index.md | 79 + files/fr/web/css/layout_cookbook/index.html | 84 - files/fr/web/css/layout_cookbook/index.md | 84 + .../list_group_with_badges/index.html | 54 - .../list_group_with_badges/index.md | 54 + .../css/layout_cookbook/media_objects/index.html | 87 - .../web/css/layout_cookbook/media_objects/index.md | 87 + .../web/css/layout_cookbook/pagination/index.html | 79 - .../fr/web/css/layout_cookbook/pagination/index.md | 79 + .../layout_cookbook/split_navigation/index.html | 47 - .../css/layout_cookbook/split_navigation/index.md | 47 + .../css/layout_cookbook/sticky_footers/index.html | 74 - .../css/layout_cookbook/sticky_footers/index.md | 74 + files/fr/web/css/layout_mode/index.html | 26 - files/fr/web/css/layout_mode/index.md | 26 + files/fr/web/css/left/index.html | 214 -- files/fr/web/css/left/index.md | 214 ++ files/fr/web/css/length-percentage/index.html | 53 - files/fr/web/css/length-percentage/index.md | 53 + files/fr/web/css/length/index.html | 182 -- files/fr/web/css/length/index.md | 182 ++ files/fr/web/css/letter-spacing/index.html | 127 - files/fr/web/css/letter-spacing/index.md | 127 + files/fr/web/css/line-break/index.html | 68 - files/fr/web/css/line-break/index.md | 68 + files/fr/web/css/line-height-step/index.html | 83 - files/fr/web/css/line-height-step/index.md | 83 + files/fr/web/css/line-height/index.html | 183 -- files/fr/web/css/line-height/index.md | 183 ++ files/fr/web/css/list-style-image/index.html | 106 - files/fr/web/css/list-style-image/index.md | 106 + files/fr/web/css/list-style-position/index.html | 135 - files/fr/web/css/list-style-position/index.md | 135 + files/fr/web/css/list-style-type/index.html | 286 -- files/fr/web/css/list-style-type/index.md | 286 ++ files/fr/web/css/list-style/index.html | 151 - files/fr/web/css/list-style/index.md | 151 + .../list_of_proprietary_css_features/index.html | 169 - .../css/list_of_proprietary_css_features/index.md | 169 + files/fr/web/css/margin-block-end/index.html | 109 - files/fr/web/css/margin-block-end/index.md | 109 + files/fr/web/css/margin-block-start/index.html | 109 - files/fr/web/css/margin-block-start/index.md | 109 + files/fr/web/css/margin-block/index.html | 101 - files/fr/web/css/margin-block/index.md | 101 + files/fr/web/css/margin-bottom/index.html | 137 - files/fr/web/css/margin-bottom/index.md | 137 + files/fr/web/css/margin-inline-end/index.html | 110 - files/fr/web/css/margin-inline-end/index.md | 110 + files/fr/web/css/margin-inline-start/index.html | 110 - files/fr/web/css/margin-inline-start/index.md | 110 + files/fr/web/css/margin-inline/index.html | 101 - files/fr/web/css/margin-inline/index.md | 101 + files/fr/web/css/margin-left/index.html | 184 -- files/fr/web/css/margin-left/index.md | 184 ++ files/fr/web/css/margin-right/index.html | 182 -- files/fr/web/css/margin-right/index.md | 182 ++ files/fr/web/css/margin-top/index.html | 121 - files/fr/web/css/margin-top/index.md | 121 + files/fr/web/css/margin-trim/index.html | 64 - files/fr/web/css/margin-trim/index.md | 64 + files/fr/web/css/margin/index.html | 184 -- files/fr/web/css/margin/index.md | 184 ++ files/fr/web/css/mask-border-mode/index.html | 63 - files/fr/web/css/mask-border-mode/index.md | 63 + files/fr/web/css/mask-border-outset/index.html | 85 - files/fr/web/css/mask-border-outset/index.md | 85 + files/fr/web/css/mask-border-repeat/index.html | 79 - files/fr/web/css/mask-border-repeat/index.md | 79 + files/fr/web/css/mask-border-slice/index.html | 107 - files/fr/web/css/mask-border-slice/index.md | 107 + files/fr/web/css/mask-border-source/index.html | 72 - files/fr/web/css/mask-border-source/index.md | 72 + files/fr/web/css/mask-border-width/index.html | 94 - files/fr/web/css/mask-border-width/index.md | 94 + files/fr/web/css/mask-border/index.html | 92 - files/fr/web/css/mask-border/index.md | 92 + files/fr/web/css/mask-clip/index.html | 128 - files/fr/web/css/mask-clip/index.md | 128 + files/fr/web/css/mask-composite/index.html | 109 - files/fr/web/css/mask-composite/index.md | 109 + files/fr/web/css/mask-image/index.html | 94 - files/fr/web/css/mask-image/index.md | 94 + files/fr/web/css/mask-mode/index.html | 129 - files/fr/web/css/mask-mode/index.md | 129 + files/fr/web/css/mask-origin/index.html | 142 - files/fr/web/css/mask-origin/index.md | 142 + files/fr/web/css/mask-position/index.html | 124 - files/fr/web/css/mask-position/index.md | 124 + files/fr/web/css/mask-repeat/index.html | 161 - files/fr/web/css/mask-repeat/index.md | 161 + files/fr/web/css/mask-size/index.html | 153 - files/fr/web/css/mask-size/index.md | 153 + files/fr/web/css/mask-type/index.html | 134 - files/fr/web/css/mask-type/index.md | 134 + files/fr/web/css/mask/index.html | 124 - files/fr/web/css/mask/index.md | 124 + files/fr/web/css/math-style/index.html | 56 - files/fr/web/css/math-style/index.md | 56 + files/fr/web/css/max()/index.html | 118 - files/fr/web/css/max()/index.md | 118 + files/fr/web/css/max-block-size/index.html | 136 - files/fr/web/css/max-block-size/index.md | 136 + files/fr/web/css/max-height/index.html | 142 - files/fr/web/css/max-height/index.md | 142 + files/fr/web/css/max-inline-size/index.html | 99 - files/fr/web/css/max-inline-size/index.md | 99 + files/fr/web/css/max-width/index.html | 146 - files/fr/web/css/max-width/index.md | 146 + files/fr/web/css/media_queries/index.html | 85 - files/fr/web/css/media_queries/index.md | 85 + .../media_queries/testing_media_queries/index.html | 78 - .../media_queries/testing_media_queries/index.md | 78 + .../media_queries/using_media_queries/index.html | 379 --- .../css/media_queries/using_media_queries/index.md | 379 +++ .../index.html | 97 - .../using_media_queries_for_accessibility/index.md | 97 + files/fr/web/css/microsoft_extensions/index.html | 111 - files/fr/web/css/microsoft_extensions/index.md | 111 + files/fr/web/css/min()/index.html | 138 - files/fr/web/css/min()/index.md | 138 + files/fr/web/css/min-block-size/index.html | 106 - files/fr/web/css/min-block-size/index.md | 106 + files/fr/web/css/min-height/index.html | 138 - files/fr/web/css/min-height/index.md | 138 + files/fr/web/css/min-inline-size/index.html | 107 - files/fr/web/css/min-inline-size/index.md | 107 + files/fr/web/css/min-width/index.html | 138 - files/fr/web/css/min-width/index.md | 138 + files/fr/web/css/minmax()/index.html | 155 - files/fr/web/css/minmax()/index.md | 155 + files/fr/web/css/mix-blend-mode/index.html | 655 ---- files/fr/web/css/mix-blend-mode/index.md | 655 ++++ files/fr/web/css/mozilla_extensions/index.html | 631 ---- files/fr/web/css/mozilla_extensions/index.md | 631 ++++ files/fr/web/css/number/index.html | 86 - files/fr/web/css/number/index.md | 86 + files/fr/web/css/object-fit/index.html | 185 -- files/fr/web/css/object-fit/index.md | 185 ++ files/fr/web/css/object-position/index.html | 112 - files/fr/web/css/object-position/index.md | 112 + files/fr/web/css/offset-anchor/index.html | 150 - files/fr/web/css/offset-anchor/index.md | 150 + files/fr/web/css/offset-distance/index.html | 97 - files/fr/web/css/offset-distance/index.md | 97 + files/fr/web/css/offset-path/index.html | 175 -- files/fr/web/css/offset-path/index.md | 175 ++ files/fr/web/css/offset-position/index.html | 103 - files/fr/web/css/offset-position/index.md | 103 + files/fr/web/css/offset-rotate/index.html | 121 - files/fr/web/css/offset-rotate/index.md | 121 + files/fr/web/css/offset/index.html | 102 - files/fr/web/css/offset/index.md | 102 + files/fr/web/css/opacity/index.html | 180 -- files/fr/web/css/opacity/index.md | 180 ++ files/fr/web/css/order/index.html | 126 - files/fr/web/css/order/index.md | 126 + files/fr/web/css/orphans/index.html | 112 - files/fr/web/css/orphans/index.md | 112 + files/fr/web/css/outline-color/index.html | 129 - files/fr/web/css/outline-color/index.md | 129 + files/fr/web/css/outline-offset/index.html | 90 - files/fr/web/css/outline-offset/index.md | 90 + files/fr/web/css/outline-style/index.html | 146 - files/fr/web/css/outline-style/index.md | 146 + files/fr/web/css/outline-width/index.html | 131 - files/fr/web/css/outline-width/index.md | 131 + files/fr/web/css/outline/index.html | 155 - files/fr/web/css/outline/index.md | 155 + .../guide_to_scroll_anchoring/index.html | 78 - .../guide_to_scroll_anchoring/index.md | 78 + files/fr/web/css/overflow-anchor/index.html | 78 - files/fr/web/css/overflow-anchor/index.md | 78 + files/fr/web/css/overflow-block/index.html | 136 - files/fr/web/css/overflow-block/index.md | 136 + files/fr/web/css/overflow-inline/index.html | 136 - files/fr/web/css/overflow-inline/index.md | 136 + files/fr/web/css/overflow-wrap/index.html | 148 - files/fr/web/css/overflow-wrap/index.md | 148 + files/fr/web/css/overflow-x/index.html | 147 - files/fr/web/css/overflow-x/index.md | 147 + files/fr/web/css/overflow-y/index.html | 152 - files/fr/web/css/overflow-y/index.md | 152 + files/fr/web/css/overflow/index.html | 202 -- files/fr/web/css/overflow/index.md | 202 ++ files/fr/web/css/overscroll-behavior-x/index.html | 94 - files/fr/web/css/overscroll-behavior-x/index.md | 94 + files/fr/web/css/overscroll-behavior-y/index.html | 88 - files/fr/web/css/overscroll-behavior-y/index.md | 88 + files/fr/web/css/overscroll-behavior/index.html | 107 - files/fr/web/css/overscroll-behavior/index.md | 107 + files/fr/web/css/padding-block-end/index.html | 110 - files/fr/web/css/padding-block-end/index.md | 110 + files/fr/web/css/padding-block-start/index.html | 110 - files/fr/web/css/padding-block-start/index.md | 110 + files/fr/web/css/padding-block/index.html | 114 - files/fr/web/css/padding-block/index.md | 114 + files/fr/web/css/padding-bottom/index.html | 116 - files/fr/web/css/padding-bottom/index.md | 116 + files/fr/web/css/padding-inline-end/index.html | 110 - files/fr/web/css/padding-inline-end/index.md | 110 + files/fr/web/css/padding-inline-start/index.html | 110 - files/fr/web/css/padding-inline-start/index.md | 110 + files/fr/web/css/padding-inline/index.html | 114 - files/fr/web/css/padding-inline/index.md | 114 + files/fr/web/css/padding-left/index.html | 116 - files/fr/web/css/padding-left/index.md | 116 + files/fr/web/css/padding-right/index.html | 118 - files/fr/web/css/padding-right/index.md | 118 + files/fr/web/css/padding-top/index.html | 118 - files/fr/web/css/padding-top/index.md | 118 + files/fr/web/css/padding/index.html | 144 - files/fr/web/css/padding/index.md | 144 + files/fr/web/css/page-break-after/index.html | 151 - files/fr/web/css/page-break-after/index.md | 151 + files/fr/web/css/page-break-before/index.html | 149 - files/fr/web/css/page-break-before/index.md | 149 + files/fr/web/css/page-break-inside/index.html | 162 - files/fr/web/css/page-break-inside/index.md | 162 + files/fr/web/css/paged_media/index.html | 21 - files/fr/web/css/paged_media/index.md | 21 + files/fr/web/css/paint-order/index.html | 114 - files/fr/web/css/paint-order/index.md | 114 + files/fr/web/css/path()/index.html | 61 - files/fr/web/css/path()/index.md | 61 + files/fr/web/css/percentage/index.html | 95 - files/fr/web/css/percentage/index.md | 95 + files/fr/web/css/perspective-origin/index.html | 385 --- files/fr/web/css/perspective-origin/index.md | 385 +++ files/fr/web/css/perspective/index.html | 245 -- files/fr/web/css/perspective/index.md | 245 ++ files/fr/web/css/place-content/index.html | 239 -- files/fr/web/css/place-content/index.md | 239 ++ files/fr/web/css/place-items/index.html | 271 -- files/fr/web/css/place-items/index.md | 271 ++ files/fr/web/css/place-self/index.html | 128 - files/fr/web/css/place-self/index.md | 128 + files/fr/web/css/pointer-events/index.html | 142 - files/fr/web/css/pointer-events/index.md | 142 + files/fr/web/css/position/index.html | 336 -- files/fr/web/css/position/index.md | 336 ++ files/fr/web/css/position_value/index.html | 128 - files/fr/web/css/position_value/index.md | 128 + .../index.html | 74 - .../index.md | 74 + files/fr/web/css/pseudo-classes/index.html | 203 -- files/fr/web/css/pseudo-classes/index.md | 203 ++ files/fr/web/css/pseudo-elements/index.html | 131 - files/fr/web/css/pseudo-elements/index.md | 131 + files/fr/web/css/quotes/index.html | 105 - files/fr/web/css/quotes/index.md | 105 + files/fr/web/css/ratio/index.html | 108 - files/fr/web/css/ratio/index.md | 108 + files/fr/web/css/reference/index.html | 186 -- files/fr/web/css/reference/index.md | 186 ++ files/fr/web/css/repeat()/index.html | 147 - files/fr/web/css/repeat()/index.md | 147 + files/fr/web/css/replaced_element/index.html | 63 - files/fr/web/css/replaced_element/index.md | 63 + files/fr/web/css/resize/index.html | 151 - files/fr/web/css/resize/index.md | 151 + files/fr/web/css/resolution/index.html | 125 - files/fr/web/css/resolution/index.md | 125 + files/fr/web/css/resolved_value/index.html | 41 - files/fr/web/css/resolved_value/index.md | 41 + files/fr/web/css/revert/index.html | 198 -- files/fr/web/css/revert/index.md | 198 ++ files/fr/web/css/right/index.html | 148 - files/fr/web/css/right/index.md | 148 + files/fr/web/css/rotate/index.html | 124 - files/fr/web/css/rotate/index.md | 124 + files/fr/web/css/row-gap/index.html | 163 - files/fr/web/css/row-gap/index.md | 163 + files/fr/web/css/ruby-align/index.html | 144 - files/fr/web/css/ruby-align/index.md | 144 + files/fr/web/css/ruby-position/index.html | 115 - files/fr/web/css/ruby-position/index.md | 115 + files/fr/web/css/scale/index.html | 124 - files/fr/web/css/scale/index.md | 124 + .../web/css/scaling_of_svg_backgrounds/index.html | 333 -- .../fr/web/css/scaling_of_svg_backgrounds/index.md | 333 ++ files/fr/web/css/scroll-behavior/index.html | 139 - files/fr/web/css/scroll-behavior/index.md | 139 + .../fr/web/css/scroll-margin-block-end/index.html | 64 - files/fr/web/css/scroll-margin-block-end/index.md | 64 + .../web/css/scroll-margin-block-start/index.html | 64 - .../fr/web/css/scroll-margin-block-start/index.md | 64 + files/fr/web/css/scroll-margin-block/index.html | 67 - files/fr/web/css/scroll-margin-block/index.md | 67 + files/fr/web/css/scroll-margin-bottom/index.html | 63 - files/fr/web/css/scroll-margin-bottom/index.md | 63 + .../fr/web/css/scroll-margin-inline-end/index.html | 64 - files/fr/web/css/scroll-margin-inline-end/index.md | 64 + .../web/css/scroll-margin-inline-start/index.html | 64 - .../fr/web/css/scroll-margin-inline-start/index.md | 64 + files/fr/web/css/scroll-margin-inline/index.html | 65 - files/fr/web/css/scroll-margin-inline/index.md | 65 + files/fr/web/css/scroll-margin-left/index.html | 63 - files/fr/web/css/scroll-margin-left/index.md | 63 + files/fr/web/css/scroll-margin-right/index.html | 63 - files/fr/web/css/scroll-margin-right/index.md | 63 + files/fr/web/css/scroll-margin-top/index.html | 63 - files/fr/web/css/scroll-margin-top/index.md | 63 + files/fr/web/css/scroll-margin/index.html | 65 - files/fr/web/css/scroll-margin/index.md | 65 + .../fr/web/css/scroll-padding-block-end/index.html | 72 - files/fr/web/css/scroll-padding-block-end/index.md | 72 + .../web/css/scroll-padding-block-start/index.html | 72 - .../fr/web/css/scroll-padding-block-start/index.md | 72 + files/fr/web/css/scroll-padding-block/index.html | 72 - files/fr/web/css/scroll-padding-block/index.md | 72 + files/fr/web/css/scroll-padding-bottom/index.html | 71 - files/fr/web/css/scroll-padding-bottom/index.md | 71 + .../web/css/scroll-padding-inline-end/index.html | 72 - .../fr/web/css/scroll-padding-inline-end/index.md | 72 + .../web/css/scroll-padding-inline-start/index.html | 72 - .../web/css/scroll-padding-inline-start/index.md | 72 + files/fr/web/css/scroll-padding-inline/index.html | 73 - files/fr/web/css/scroll-padding-inline/index.md | 73 + files/fr/web/css/scroll-padding-left/index.html | 71 - files/fr/web/css/scroll-padding-left/index.md | 71 + files/fr/web/css/scroll-padding-right/index.html | 71 - files/fr/web/css/scroll-padding-right/index.md | 71 + files/fr/web/css/scroll-padding-top/index.html | 71 - files/fr/web/css/scroll-padding-top/index.md | 71 + files/fr/web/css/scroll-padding/index.html | 72 - files/fr/web/css/scroll-padding/index.md | 72 + files/fr/web/css/scroll-snap-align/index.html | 71 - files/fr/web/css/scroll-snap-align/index.md | 71 + files/fr/web/css/scroll-snap-coordinate/index.html | 155 - files/fr/web/css/scroll-snap-coordinate/index.md | 155 + .../fr/web/css/scroll-snap-destination/index.html | 147 - files/fr/web/css/scroll-snap-destination/index.md | 147 + files/fr/web/css/scroll-snap-points-x/index.html | 92 - files/fr/web/css/scroll-snap-points-x/index.md | 92 + files/fr/web/css/scroll-snap-points-y/index.html | 94 - files/fr/web/css/scroll-snap-points-y/index.md | 94 + files/fr/web/css/scroll-snap-stop/index.html | 222 -- files/fr/web/css/scroll-snap-stop/index.md | 222 ++ files/fr/web/css/scroll-snap-type-x/index.html | 53 - files/fr/web/css/scroll-snap-type-x/index.md | 53 + files/fr/web/css/scroll-snap-type-y/index.html | 53 - files/fr/web/css/scroll-snap-type-y/index.md | 53 + files/fr/web/css/scroll-snap-type/index.html | 247 -- files/fr/web/css/scroll-snap-type/index.md | 247 ++ files/fr/web/css/scrollbar-color/index.html | 123 - files/fr/web/css/scrollbar-color/index.md | 123 + files/fr/web/css/scrollbar-width/index.html | 114 - files/fr/web/css/scrollbar-width/index.md | 114 + files/fr/web/css/selector_list/index.html | 97 - files/fr/web/css/selector_list/index.md | 97 + files/fr/web/css/shape-image-threshold/index.html | 113 - files/fr/web/css/shape-image-threshold/index.md | 113 + files/fr/web/css/shape-margin/index.html | 114 - files/fr/web/css/shape-margin/index.md | 114 + files/fr/web/css/shape-outside/index.html | 162 - files/fr/web/css/shape-outside/index.md | 162 + files/fr/web/css/shape/index.html | 92 - files/fr/web/css/shape/index.md | 92 + files/fr/web/css/shorthand_properties/index.html | 156 - files/fr/web/css/shorthand_properties/index.md | 156 + files/fr/web/css/specified_value/index.html | 86 - files/fr/web/css/specified_value/index.md | 86 + files/fr/web/css/string/index.html | 85 - files/fr/web/css/string/index.md | 85 + files/fr/web/css/symbols()/index.html | 74 - files/fr/web/css/symbols()/index.md | 74 + files/fr/web/css/tab-size/index.html | 96 - files/fr/web/css/tab-size/index.md | 96 + files/fr/web/css/table-layout/index.html | 107 - files/fr/web/css/table-layout/index.md | 107 + files/fr/web/css/text-align-last/index.html | 110 - files/fr/web/css/text-align-last/index.md | 110 + files/fr/web/css/text-align/index.html | 223 -- files/fr/web/css/text-align/index.md | 223 ++ files/fr/web/css/text-combine-upright/index.html | 120 - files/fr/web/css/text-combine-upright/index.md | 120 + files/fr/web/css/text-decoration-color/index.html | 111 - files/fr/web/css/text-decoration-color/index.md | 111 + files/fr/web/css/text-decoration-line/index.html | 104 - files/fr/web/css/text-decoration-line/index.md | 104 + .../fr/web/css/text-decoration-skip-ink/index.html | 83 - files/fr/web/css/text-decoration-skip-ink/index.md | 83 + files/fr/web/css/text-decoration-skip/index.html | 104 - files/fr/web/css/text-decoration-skip/index.md | 104 + files/fr/web/css/text-decoration-style/index.html | 113 - files/fr/web/css/text-decoration-style/index.md | 113 + .../web/css/text-decoration-thickness/index.html | 109 - .../fr/web/css/text-decoration-thickness/index.md | 109 + files/fr/web/css/text-decoration/index.html | 144 - files/fr/web/css/text-decoration/index.md | 144 + files/fr/web/css/text-emphasis-color/index.html | 94 - files/fr/web/css/text-emphasis-color/index.md | 94 + files/fr/web/css/text-emphasis-position/index.html | 164 - files/fr/web/css/text-emphasis-position/index.md | 164 + files/fr/web/css/text-emphasis-style/index.html | 112 - files/fr/web/css/text-emphasis-style/index.md | 112 + files/fr/web/css/text-emphasis/index.html | 130 - files/fr/web/css/text-emphasis/index.md | 130 + files/fr/web/css/text-indent/index.html | 140 - files/fr/web/css/text-indent/index.md | 140 + files/fr/web/css/text-justify/index.html | 114 - files/fr/web/css/text-justify/index.md | 114 + files/fr/web/css/text-orientation/index.html | 103 - files/fr/web/css/text-orientation/index.md | 103 + files/fr/web/css/text-overflow/index.html | 254 -- files/fr/web/css/text-overflow/index.md | 254 ++ files/fr/web/css/text-rendering/index.html | 130 - files/fr/web/css/text-rendering/index.md | 130 + files/fr/web/css/text-shadow/index.html | 135 - files/fr/web/css/text-shadow/index.md | 135 + files/fr/web/css/text-size-adjust/index.html | 86 - files/fr/web/css/text-size-adjust/index.md | 86 + files/fr/web/css/text-transform/index.html | 187 -- files/fr/web/css/text-transform/index.md | 187 ++ files/fr/web/css/text-underline-offset/index.html | 108 - files/fr/web/css/text-underline-offset/index.md | 108 + .../fr/web/css/text-underline-position/index.html | 126 - files/fr/web/css/text-underline-position/index.md | 126 + files/fr/web/css/time-percentage/index.html | 48 - files/fr/web/css/time-percentage/index.md | 48 + files/fr/web/css/time/index.html | 81 - files/fr/web/css/time/index.md | 81 + .../css/tools/linear-gradient_generator/index.html | 14 - .../css/tools/linear-gradient_generator/index.md | 14 + files/fr/web/css/top/index.html | 174 -- files/fr/web/css/top/index.md | 174 ++ files/fr/web/css/touch-action/index.html | 158 - files/fr/web/css/touch-action/index.md | 158 + files/fr/web/css/transform-box/index.html | 106 - files/fr/web/css/transform-box/index.md | 106 + files/fr/web/css/transform-function/index.html | 148 - files/fr/web/css/transform-function/index.md | 148 + .../web/css/transform-function/matrix()/index.html | 112 - .../web/css/transform-function/matrix()/index.md | 112 + .../css/transform-function/matrix3d()/index.html | 184 -- .../web/css/transform-function/matrix3d()/index.md | 184 ++ .../transform-function/perspective()/index.html | 157 - .../css/transform-function/perspective()/index.md | 157 + .../web/css/transform-function/rotate()/index.html | 153 - .../web/css/transform-function/rotate()/index.md | 153 + .../css/transform-function/rotate3d()/index.html | 145 - .../web/css/transform-function/rotate3d()/index.md | 145 + .../css/transform-function/rotatex()/index.html | 108 - .../web/css/transform-function/rotatex()/index.md | 108 + .../css/transform-function/rotatey()/index.html | 108 - .../web/css/transform-function/rotatey()/index.md | 108 + .../css/transform-function/rotatez()/index.html | 108 - .../web/css/transform-function/rotatez()/index.md | 108 + .../web/css/transform-function/scale()/index.html | 302 -- .../fr/web/css/transform-function/scale()/index.md | 302 ++ .../css/transform-function/scale3d()/index.html | 139 - .../web/css/transform-function/scale3d()/index.md | 139 + .../web/css/transform-function/scalex()/index.html | 139 - .../web/css/transform-function/scalex()/index.md | 139 + .../web/css/transform-function/scaley()/index.html | 111 - .../web/css/transform-function/scaley()/index.md | 111 + .../web/css/transform-function/scalez()/index.html | 115 - .../web/css/transform-function/scalez()/index.md | 115 + .../web/css/transform-function/skew()/index.html | 137 - .../fr/web/css/transform-function/skew()/index.md | 137 + .../web/css/transform-function/skewx()/index.html | 108 - .../fr/web/css/transform-function/skewx()/index.md | 108 + .../web/css/transform-function/skewy()/index.html | 106 - .../fr/web/css/transform-function/skewy()/index.md | 106 + .../css/transform-function/translate()/index.html | 141 - .../css/transform-function/translate()/index.md | 141 + .../transform-function/translate3d()/index.html | 138 - .../css/transform-function/translate3d()/index.md | 138 + .../css/transform-function/translatey()/index.html | 109 - .../css/transform-function/translatey()/index.md | 109 + .../css/transform-function/translatez()/index.html | 111 - .../css/transform-function/translatez()/index.md | 111 + files/fr/web/css/transform-origin/index.html | 369 --- files/fr/web/css/transform-origin/index.md | 369 +++ files/fr/web/css/transform-style/index.html | 76 - files/fr/web/css/transform-style/index.md | 76 + files/fr/web/css/transform/index.html | 156 - files/fr/web/css/transform/index.md | 156 + files/fr/web/css/transition-delay/index.html | 153 - files/fr/web/css/transition-delay/index.md | 153 + files/fr/web/css/transition-duration/index.html | 146 - files/fr/web/css/transition-duration/index.md | 146 + files/fr/web/css/transition-property/index.html | 95 - files/fr/web/css/transition-property/index.md | 95 + .../web/css/transition-timing-function/index.html | 278 -- .../fr/web/css/transition-timing-function/index.md | 278 ++ files/fr/web/css/transition/index.html | 102 - files/fr/web/css/transition/index.md | 102 + files/fr/web/css/translate/index.html | 125 - files/fr/web/css/translate/index.md | 125 + files/fr/web/css/translation-value/index.html | 41 - files/fr/web/css/translation-value/index.md | 41 + files/fr/web/css/tutorials/index.html | 57 - files/fr/web/css/tutorials/index.md | 57 + files/fr/web/css/type_selectors/index.html | 81 - files/fr/web/css/type_selectors/index.md | 81 + files/fr/web/css/unicode-bidi/index.html | 100 - files/fr/web/css/unicode-bidi/index.md | 100 + files/fr/web/css/universal_selectors/index.html | 102 - files/fr/web/css/universal_selectors/index.md | 102 + files/fr/web/css/unset/index.html | 113 - files/fr/web/css/unset/index.md | 113 + files/fr/web/css/url()/index.html | 177 -- files/fr/web/css/url()/index.md | 177 ++ files/fr/web/css/used_value/index.html | 145 - files/fr/web/css/used_value/index.md | 145 + files/fr/web/css/user-modify/index.html | 88 - files/fr/web/css/user-modify/index.md | 88 + files/fr/web/css/user-select/index.html | 135 - files/fr/web/css/user-select/index.md | 135 + .../web/css/using_css_custom_properties/index.html | 300 -- .../web/css/using_css_custom_properties/index.md | 300 ++ .../fr/web/css/value_definition_syntax/index.html | 426 --- files/fr/web/css/value_definition_syntax/index.md | 426 +++ files/fr/web/css/var()/index.html | 91 - files/fr/web/css/var()/index.md | 91 + files/fr/web/css/vertical-align/index.html | 187 -- files/fr/web/css/vertical-align/index.md | 187 ++ files/fr/web/css/viewport_concepts/index.html | 159 - files/fr/web/css/viewport_concepts/index.md | 159 + files/fr/web/css/visibility/index.html | 187 -- files/fr/web/css/visibility/index.md | 187 ++ .../fr/web/css/visual_formatting_model/index.html | 180 -- files/fr/web/css/visual_formatting_model/index.md | 180 ++ files/fr/web/css/webkit_extensions/index.html | 508 --- files/fr/web/css/webkit_extensions/index.md | 508 +++ files/fr/web/css/white-space/index.html | 204 -- files/fr/web/css/white-space/index.md | 204 ++ files/fr/web/css/widows/index.html | 114 - files/fr/web/css/widows/index.md | 114 + files/fr/web/css/width/index.html | 211 -- files/fr/web/css/width/index.md | 211 ++ files/fr/web/css/will-change/index.html | 131 - files/fr/web/css/will-change/index.md | 131 + files/fr/web/css/word-break/index.html | 126 - files/fr/web/css/word-break/index.md | 126 + files/fr/web/css/word-spacing/index.html | 124 - files/fr/web/css/word-spacing/index.md | 124 + files/fr/web/css/writing-mode/index.html | 206 -- files/fr/web/css/writing-mode/index.md | 206 ++ files/fr/web/css/z-index/index.html | 140 - files/fr/web/css/z-index/index.md | 140 + files/fr/web/css/zoom/index.html | 99 - files/fr/web/css/zoom/index.md | 99 + 1776 files changed, 123152 insertions(+), 123152 deletions(-) delete mode 100644 files/fr/web/css/--_star_/index.html create mode 100644 files/fr/web/css/--_star_/index.md delete mode 100644 files/fr/web/css/-moz-context-properties/index.html create mode 100644 files/fr/web/css/-moz-context-properties/index.md delete mode 100644 files/fr/web/css/-moz-float-edge/index.html create mode 100644 files/fr/web/css/-moz-float-edge/index.md delete mode 100644 files/fr/web/css/-moz-force-broken-image-icon/index.html create mode 100644 files/fr/web/css/-moz-force-broken-image-icon/index.md delete mode 100644 files/fr/web/css/-moz-image-rect/index.html create mode 100644 files/fr/web/css/-moz-image-rect/index.md delete mode 100644 files/fr/web/css/-moz-image-region/index.html create mode 100644 files/fr/web/css/-moz-image-region/index.md delete mode 100644 files/fr/web/css/-moz-orient/index.html create mode 100644 files/fr/web/css/-moz-orient/index.md delete mode 100644 files/fr/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/fr/web/css/-moz-outline-radius-bottomleft/index.md delete mode 100644 files/fr/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/fr/web/css/-moz-outline-radius-bottomright/index.md delete mode 100644 files/fr/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/fr/web/css/-moz-outline-radius-topleft/index.md delete mode 100644 files/fr/web/css/-moz-outline-radius-topright/index.html create mode 100644 files/fr/web/css/-moz-outline-radius-topright/index.md delete mode 100644 files/fr/web/css/-moz-outline-radius/index.html create mode 100644 files/fr/web/css/-moz-outline-radius/index.md delete mode 100644 files/fr/web/css/-moz-user-focus/index.html create mode 100644 files/fr/web/css/-moz-user-focus/index.md delete mode 100644 files/fr/web/css/-moz-user-input/index.html create mode 100644 files/fr/web/css/-moz-user-input/index.md delete mode 100644 files/fr/web/css/-webkit-border-before/index.html create mode 100644 files/fr/web/css/-webkit-border-before/index.md delete mode 100644 files/fr/web/css/-webkit-box-reflect/index.html create mode 100644 files/fr/web/css/-webkit-box-reflect/index.md delete mode 100644 files/fr/web/css/-webkit-line-clamp/index.html create mode 100644 files/fr/web/css/-webkit-line-clamp/index.md delete mode 100644 files/fr/web/css/-webkit-mask-attachment/index.html create mode 100644 files/fr/web/css/-webkit-mask-attachment/index.md delete mode 100644 files/fr/web/css/-webkit-mask-box-image/index.html create mode 100644 files/fr/web/css/-webkit-mask-box-image/index.md delete mode 100644 files/fr/web/css/-webkit-mask-composite/index.html create mode 100644 files/fr/web/css/-webkit-mask-composite/index.md delete mode 100644 files/fr/web/css/-webkit-mask-position-x/index.html create mode 100644 files/fr/web/css/-webkit-mask-position-x/index.md delete mode 100644 files/fr/web/css/-webkit-mask-position-y/index.html create mode 100644 files/fr/web/css/-webkit-mask-position-y/index.md delete mode 100644 files/fr/web/css/-webkit-mask-repeat-x/index.html create mode 100644 files/fr/web/css/-webkit-mask-repeat-x/index.md delete mode 100644 files/fr/web/css/-webkit-mask-repeat-y/index.html create mode 100644 files/fr/web/css/-webkit-mask-repeat-y/index.md delete mode 100644 files/fr/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/fr/web/css/-webkit-overflow-scrolling/index.md delete mode 100644 files/fr/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/fr/web/css/-webkit-print-color-adjust/index.md delete mode 100644 files/fr/web/css/-webkit-tap-highlight-color/index.html create mode 100644 files/fr/web/css/-webkit-tap-highlight-color/index.md delete mode 100644 files/fr/web/css/-webkit-text-fill-color/index.html create mode 100644 files/fr/web/css/-webkit-text-fill-color/index.md delete mode 100644 files/fr/web/css/-webkit-text-security/index.html create mode 100644 files/fr/web/css/-webkit-text-security/index.md delete mode 100644 files/fr/web/css/-webkit-text-stroke-color/index.html create mode 100644 files/fr/web/css/-webkit-text-stroke-color/index.md delete mode 100644 files/fr/web/css/-webkit-text-stroke-width/index.html create mode 100644 files/fr/web/css/-webkit-text-stroke-width/index.md delete mode 100644 files/fr/web/css/-webkit-text-stroke/index.html create mode 100644 files/fr/web/css/-webkit-text-stroke/index.md delete mode 100644 files/fr/web/css/-webkit-touch-callout/index.html create mode 100644 files/fr/web/css/-webkit-touch-callout/index.md delete mode 100644 files/fr/web/css/@charset/index.html create mode 100644 files/fr/web/css/@charset/index.md delete mode 100644 files/fr/web/css/@counter-style/additive-symbols/index.html create mode 100644 files/fr/web/css/@counter-style/additive-symbols/index.md delete mode 100644 files/fr/web/css/@counter-style/fallback/index.html create mode 100644 files/fr/web/css/@counter-style/fallback/index.md delete mode 100644 files/fr/web/css/@counter-style/index.html create mode 100644 files/fr/web/css/@counter-style/index.md delete mode 100644 files/fr/web/css/@counter-style/negative/index.html create mode 100644 files/fr/web/css/@counter-style/negative/index.md delete mode 100644 files/fr/web/css/@counter-style/pad/index.html create mode 100644 files/fr/web/css/@counter-style/pad/index.md delete mode 100644 files/fr/web/css/@counter-style/prefix/index.html create mode 100644 files/fr/web/css/@counter-style/prefix/index.md delete mode 100644 files/fr/web/css/@counter-style/range/index.html create mode 100644 files/fr/web/css/@counter-style/range/index.md delete mode 100644 files/fr/web/css/@counter-style/speak-as/index.html create mode 100644 files/fr/web/css/@counter-style/speak-as/index.md delete mode 100644 files/fr/web/css/@counter-style/suffix/index.html create mode 100644 files/fr/web/css/@counter-style/suffix/index.md delete mode 100644 files/fr/web/css/@counter-style/symbols/index.html create mode 100644 files/fr/web/css/@counter-style/symbols/index.md delete mode 100644 files/fr/web/css/@counter-style/system/index.html create mode 100644 files/fr/web/css/@counter-style/system/index.md delete mode 100644 files/fr/web/css/@document/index.html create mode 100644 files/fr/web/css/@document/index.md delete mode 100644 files/fr/web/css/@font-face/ascent-override/index.html create mode 100644 files/fr/web/css/@font-face/ascent-override/index.md delete mode 100644 files/fr/web/css/@font-face/descent-override/index.html create mode 100644 files/fr/web/css/@font-face/descent-override/index.md delete mode 100644 files/fr/web/css/@font-face/font-display/index.html create mode 100644 files/fr/web/css/@font-face/font-display/index.md delete mode 100644 files/fr/web/css/@font-face/font-family/index.html create mode 100644 files/fr/web/css/@font-face/font-family/index.md delete mode 100644 files/fr/web/css/@font-face/font-stretch/index.html create mode 100644 files/fr/web/css/@font-face/font-stretch/index.md delete mode 100644 files/fr/web/css/@font-face/font-style/index.html create mode 100644 files/fr/web/css/@font-face/font-style/index.md delete mode 100644 files/fr/web/css/@font-face/font-variation-settings/index.html create mode 100644 files/fr/web/css/@font-face/font-variation-settings/index.md delete mode 100644 files/fr/web/css/@font-face/font-weight/index.html create mode 100644 files/fr/web/css/@font-face/font-weight/index.md delete mode 100644 files/fr/web/css/@font-face/index.html create mode 100644 files/fr/web/css/@font-face/index.md delete mode 100644 files/fr/web/css/@font-face/line-gap-override/index.html create mode 100644 files/fr/web/css/@font-face/line-gap-override/index.md delete mode 100644 files/fr/web/css/@font-face/size-adjust/index.html create mode 100644 files/fr/web/css/@font-face/size-adjust/index.md delete mode 100644 files/fr/web/css/@font-face/src/index.html create mode 100644 files/fr/web/css/@font-face/src/index.md delete mode 100644 files/fr/web/css/@font-face/unicode-range/index.html create mode 100644 files/fr/web/css/@font-face/unicode-range/index.md delete mode 100644 files/fr/web/css/@font-feature-values/index.html create mode 100644 files/fr/web/css/@font-feature-values/index.md delete mode 100644 files/fr/web/css/@import/index.html create mode 100644 files/fr/web/css/@import/index.md delete mode 100644 files/fr/web/css/@keyframes/index.html create mode 100644 files/fr/web/css/@keyframes/index.md delete mode 100644 files/fr/web/css/@media/-moz-device-pixel-ratio/index.html create mode 100644 files/fr/web/css/@media/-moz-device-pixel-ratio/index.md delete mode 100644 files/fr/web/css/@media/-ms-high-contrast/index.html create mode 100644 files/fr/web/css/@media/-ms-high-contrast/index.md delete mode 100644 files/fr/web/css/@media/-webkit-animation/index.html create mode 100644 files/fr/web/css/@media/-webkit-animation/index.md delete mode 100644 files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html create mode 100644 files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md delete mode 100644 files/fr/web/css/@media/-webkit-transform-2d/index.html create mode 100644 files/fr/web/css/@media/-webkit-transform-2d/index.md delete mode 100644 files/fr/web/css/@media/-webkit-transform-3d/index.html create mode 100644 files/fr/web/css/@media/-webkit-transform-3d/index.md delete mode 100644 files/fr/web/css/@media/-webkit-transition/index.html create mode 100644 files/fr/web/css/@media/-webkit-transition/index.md delete mode 100644 files/fr/web/css/@media/any-hover/index.html create mode 100644 files/fr/web/css/@media/any-hover/index.md delete mode 100644 files/fr/web/css/@media/any-pointer/index.html create mode 100644 files/fr/web/css/@media/any-pointer/index.md delete mode 100644 files/fr/web/css/@media/aspect-ratio/index.html create mode 100644 files/fr/web/css/@media/aspect-ratio/index.md delete mode 100644 files/fr/web/css/@media/aural/index.html create mode 100644 files/fr/web/css/@media/aural/index.md delete mode 100644 files/fr/web/css/@media/color-gamut/index.html create mode 100644 files/fr/web/css/@media/color-gamut/index.md delete mode 100644 files/fr/web/css/@media/color-index/index.html create mode 100644 files/fr/web/css/@media/color-index/index.md delete mode 100644 files/fr/web/css/@media/color/index.html create mode 100644 files/fr/web/css/@media/color/index.md delete mode 100644 files/fr/web/css/@media/device-aspect-ratio/index.html create mode 100644 files/fr/web/css/@media/device-aspect-ratio/index.md delete mode 100644 files/fr/web/css/@media/device-height/index.html create mode 100644 files/fr/web/css/@media/device-height/index.md delete mode 100644 files/fr/web/css/@media/device-width/index.html create mode 100644 files/fr/web/css/@media/device-width/index.md delete mode 100644 files/fr/web/css/@media/display-mode/index.html create mode 100644 files/fr/web/css/@media/display-mode/index.md delete mode 100644 files/fr/web/css/@media/forced-colors/index.html create mode 100644 files/fr/web/css/@media/forced-colors/index.md delete mode 100644 files/fr/web/css/@media/grid/index.html create mode 100644 files/fr/web/css/@media/grid/index.md delete mode 100644 files/fr/web/css/@media/height/index.html create mode 100644 files/fr/web/css/@media/height/index.md delete mode 100644 files/fr/web/css/@media/hover/index.html create mode 100644 files/fr/web/css/@media/hover/index.md delete mode 100644 files/fr/web/css/@media/index.html create mode 100644 files/fr/web/css/@media/index.md delete mode 100644 files/fr/web/css/@media/inverted-colors/index.html create mode 100644 files/fr/web/css/@media/inverted-colors/index.md delete mode 100644 files/fr/web/css/@media/monochrome/index.html create mode 100644 files/fr/web/css/@media/monochrome/index.md delete mode 100644 files/fr/web/css/@media/orientation/index.html create mode 100644 files/fr/web/css/@media/orientation/index.md delete mode 100644 files/fr/web/css/@media/overflow-block/index.html create mode 100644 files/fr/web/css/@media/overflow-block/index.md delete mode 100644 files/fr/web/css/@media/overflow-inline/index.html create mode 100644 files/fr/web/css/@media/overflow-inline/index.md delete mode 100644 files/fr/web/css/@media/pointer/index.html create mode 100644 files/fr/web/css/@media/pointer/index.md delete mode 100644 files/fr/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/fr/web/css/@media/prefers-color-scheme/index.md delete mode 100644 files/fr/web/css/@media/prefers-contrast/index.html create mode 100644 files/fr/web/css/@media/prefers-contrast/index.md delete mode 100644 files/fr/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/fr/web/css/@media/prefers-reduced-motion/index.md delete mode 100644 files/fr/web/css/@media/resolution/index.html create mode 100644 files/fr/web/css/@media/resolution/index.md delete mode 100644 files/fr/web/css/@media/scripting/index.html create mode 100644 files/fr/web/css/@media/scripting/index.md delete mode 100644 files/fr/web/css/@media/shape/index.html create mode 100644 files/fr/web/css/@media/shape/index.md delete mode 100644 files/fr/web/css/@media/update-frequency/index.html create mode 100644 files/fr/web/css/@media/update-frequency/index.md delete mode 100644 files/fr/web/css/@media/width/index.html create mode 100644 files/fr/web/css/@media/width/index.md delete mode 100644 files/fr/web/css/@namespace/index.html create mode 100644 files/fr/web/css/@namespace/index.md delete mode 100644 files/fr/web/css/@page/index.html create mode 100644 files/fr/web/css/@page/index.md delete mode 100644 files/fr/web/css/@page/size/index.html create mode 100644 files/fr/web/css/@page/size/index.md delete mode 100644 files/fr/web/css/@property/index.html create mode 100644 files/fr/web/css/@property/index.md delete mode 100644 files/fr/web/css/@supports/index.html create mode 100644 files/fr/web/css/@supports/index.md delete mode 100644 files/fr/web/css/@viewport/index.html create mode 100644 files/fr/web/css/@viewport/index.md delete mode 100644 files/fr/web/css/_colon_-moz-broken/index.html create mode 100644 files/fr/web/css/_colon_-moz-broken/index.md delete mode 100644 files/fr/web/css/_colon_-moz-drag-over/index.html create mode 100644 files/fr/web/css/_colon_-moz-drag-over/index.md delete mode 100644 files/fr/web/css/_colon_-moz-first-node/index.html create mode 100644 files/fr/web/css/_colon_-moz-first-node/index.md delete mode 100644 files/fr/web/css/_colon_-moz-focusring/index.html create mode 100644 files/fr/web/css/_colon_-moz-focusring/index.md delete mode 100644 files/fr/web/css/_colon_-moz-handler-blocked/index.html create mode 100644 files/fr/web/css/_colon_-moz-handler-blocked/index.md delete mode 100644 files/fr/web/css/_colon_-moz-handler-crashed/index.html create mode 100644 files/fr/web/css/_colon_-moz-handler-crashed/index.md delete mode 100644 files/fr/web/css/_colon_-moz-handler-disabled/index.html create mode 100644 files/fr/web/css/_colon_-moz-handler-disabled/index.md delete mode 100644 files/fr/web/css/_colon_-moz-last-node/index.html create mode 100644 files/fr/web/css/_colon_-moz-last-node/index.md delete mode 100644 files/fr/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/fr/web/css/_colon_-moz-list-bullet/index.md delete mode 100644 files/fr/web/css/_colon_-moz-list-number/index.html create mode 100644 files/fr/web/css/_colon_-moz-list-number/index.md delete mode 100644 files/fr/web/css/_colon_-moz-loading/index.html create mode 100644 files/fr/web/css/_colon_-moz-loading/index.md delete mode 100644 files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html create mode 100644 files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md delete mode 100644 files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html create mode 100644 files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md delete mode 100644 files/fr/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/fr/web/css/_colon_-moz-only-whitespace/index.md delete mode 100644 files/fr/web/css/_colon_-moz-submit-invalid/index.html create mode 100644 files/fr/web/css/_colon_-moz-submit-invalid/index.md delete mode 100644 files/fr/web/css/_colon_-moz-suppressed/index.html create mode 100644 files/fr/web/css/_colon_-moz-suppressed/index.md delete mode 100644 files/fr/web/css/_colon_-moz-user-disabled/index.html create mode 100644 files/fr/web/css/_colon_-moz-user-disabled/index.md delete mode 100644 files/fr/web/css/_colon_-moz-window-inactive/index.html create mode 100644 files/fr/web/css/_colon_-moz-window-inactive/index.md delete mode 100644 files/fr/web/css/_colon_active/index.html create mode 100644 files/fr/web/css/_colon_active/index.md delete mode 100644 files/fr/web/css/_colon_any-link/index.html create mode 100644 files/fr/web/css/_colon_any-link/index.md delete mode 100644 files/fr/web/css/_colon_autofill/index.html create mode 100644 files/fr/web/css/_colon_autofill/index.md delete mode 100644 files/fr/web/css/_colon_blank/index.html create mode 100644 files/fr/web/css/_colon_blank/index.md delete mode 100644 files/fr/web/css/_colon_checked/index.html create mode 100644 files/fr/web/css/_colon_checked/index.md delete mode 100644 files/fr/web/css/_colon_current/index.html create mode 100644 files/fr/web/css/_colon_current/index.md delete mode 100644 files/fr/web/css/_colon_default/index.html create mode 100644 files/fr/web/css/_colon_default/index.md delete mode 100644 files/fr/web/css/_colon_defined/index.html create mode 100644 files/fr/web/css/_colon_defined/index.md delete mode 100644 files/fr/web/css/_colon_dir/index.html create mode 100644 files/fr/web/css/_colon_dir/index.md delete mode 100644 files/fr/web/css/_colon_disabled/index.html create mode 100644 files/fr/web/css/_colon_disabled/index.md delete mode 100644 files/fr/web/css/_colon_empty/index.html create mode 100644 files/fr/web/css/_colon_empty/index.md delete mode 100644 files/fr/web/css/_colon_enabled/index.html create mode 100644 files/fr/web/css/_colon_enabled/index.md delete mode 100644 files/fr/web/css/_colon_first-child/index.html create mode 100644 files/fr/web/css/_colon_first-child/index.md delete mode 100644 files/fr/web/css/_colon_first-of-type/index.html create mode 100644 files/fr/web/css/_colon_first-of-type/index.md delete mode 100644 files/fr/web/css/_colon_first/index.html create mode 100644 files/fr/web/css/_colon_first/index.md delete mode 100644 files/fr/web/css/_colon_focus-visible/index.html create mode 100644 files/fr/web/css/_colon_focus-visible/index.md delete mode 100644 files/fr/web/css/_colon_focus-within/index.html create mode 100644 files/fr/web/css/_colon_focus-within/index.md delete mode 100644 files/fr/web/css/_colon_focus/index.html create mode 100644 files/fr/web/css/_colon_focus/index.md delete mode 100644 files/fr/web/css/_colon_fullscreen/index.html create mode 100644 files/fr/web/css/_colon_fullscreen/index.md delete mode 100644 files/fr/web/css/_colon_future/index.html create mode 100644 files/fr/web/css/_colon_future/index.md delete mode 100644 files/fr/web/css/_colon_has/index.html create mode 100644 files/fr/web/css/_colon_has/index.md delete mode 100644 files/fr/web/css/_colon_host()/index.html create mode 100644 files/fr/web/css/_colon_host()/index.md delete mode 100644 files/fr/web/css/_colon_host-context()/index.html create mode 100644 files/fr/web/css/_colon_host-context()/index.md delete mode 100644 files/fr/web/css/_colon_host/index.html create mode 100644 files/fr/web/css/_colon_host/index.md delete mode 100644 files/fr/web/css/_colon_hover/index.html create mode 100644 files/fr/web/css/_colon_hover/index.md delete mode 100644 files/fr/web/css/_colon_in-range/index.html create mode 100644 files/fr/web/css/_colon_in-range/index.md delete mode 100644 files/fr/web/css/_colon_indeterminate/index.html create mode 100644 files/fr/web/css/_colon_indeterminate/index.md delete mode 100644 files/fr/web/css/_colon_invalid/index.html create mode 100644 files/fr/web/css/_colon_invalid/index.md delete mode 100644 files/fr/web/css/_colon_is/index.html create mode 100644 files/fr/web/css/_colon_is/index.md delete mode 100644 files/fr/web/css/_colon_lang/index.html create mode 100644 files/fr/web/css/_colon_lang/index.md delete mode 100644 files/fr/web/css/_colon_last-child/index.html create mode 100644 files/fr/web/css/_colon_last-child/index.md delete mode 100644 files/fr/web/css/_colon_last-of-type/index.html create mode 100644 files/fr/web/css/_colon_last-of-type/index.md delete mode 100644 files/fr/web/css/_colon_left/index.html create mode 100644 files/fr/web/css/_colon_left/index.md delete mode 100644 files/fr/web/css/_colon_link/index.html create mode 100644 files/fr/web/css/_colon_link/index.md delete mode 100644 files/fr/web/css/_colon_local-link/index.html create mode 100644 files/fr/web/css/_colon_local-link/index.md delete mode 100644 files/fr/web/css/_colon_not/index.html create mode 100644 files/fr/web/css/_colon_not/index.md delete mode 100644 files/fr/web/css/_colon_nth-child/index.html create mode 100644 files/fr/web/css/_colon_nth-child/index.md delete mode 100644 files/fr/web/css/_colon_nth-col/index.html create mode 100644 files/fr/web/css/_colon_nth-col/index.md delete mode 100644 files/fr/web/css/_colon_nth-last-child/index.html create mode 100644 files/fr/web/css/_colon_nth-last-child/index.md delete mode 100644 files/fr/web/css/_colon_nth-last-col/index.html create mode 100644 files/fr/web/css/_colon_nth-last-col/index.md delete mode 100644 files/fr/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/fr/web/css/_colon_nth-last-of-type/index.md delete mode 100644 files/fr/web/css/_colon_nth-of-type/index.html create mode 100644 files/fr/web/css/_colon_nth-of-type/index.md delete mode 100644 files/fr/web/css/_colon_only-child/index.html create mode 100644 files/fr/web/css/_colon_only-child/index.md delete mode 100644 files/fr/web/css/_colon_only-of-type/index.html create mode 100644 files/fr/web/css/_colon_only-of-type/index.md delete mode 100644 files/fr/web/css/_colon_optional/index.html create mode 100644 files/fr/web/css/_colon_optional/index.md delete mode 100644 files/fr/web/css/_colon_out-of-range/index.html create mode 100644 files/fr/web/css/_colon_out-of-range/index.md delete mode 100644 files/fr/web/css/_colon_past/index.html create mode 100644 files/fr/web/css/_colon_past/index.md delete mode 100644 files/fr/web/css/_colon_placeholder-shown/index.html create mode 100644 files/fr/web/css/_colon_placeholder-shown/index.md delete mode 100644 files/fr/web/css/_colon_read-only/index.html create mode 100644 files/fr/web/css/_colon_read-only/index.md delete mode 100644 files/fr/web/css/_colon_read-write/index.html create mode 100644 files/fr/web/css/_colon_read-write/index.md delete mode 100644 files/fr/web/css/_colon_required/index.html create mode 100644 files/fr/web/css/_colon_required/index.md delete mode 100644 files/fr/web/css/_colon_right/index.html create mode 100644 files/fr/web/css/_colon_right/index.md delete mode 100644 files/fr/web/css/_colon_root/index.html create mode 100644 files/fr/web/css/_colon_root/index.md delete mode 100644 files/fr/web/css/_colon_scope/index.html create mode 100644 files/fr/web/css/_colon_scope/index.md delete mode 100644 files/fr/web/css/_colon_target-within/index.html create mode 100644 files/fr/web/css/_colon_target-within/index.md delete mode 100644 files/fr/web/css/_colon_target/index.html create mode 100644 files/fr/web/css/_colon_target/index.md delete mode 100644 files/fr/web/css/_colon_user-invalid/index.html create mode 100644 files/fr/web/css/_colon_user-invalid/index.md delete mode 100644 files/fr/web/css/_colon_valid/index.html create mode 100644 files/fr/web/css/_colon_valid/index.md delete mode 100644 files/fr/web/css/_colon_visited/index.html create mode 100644 files/fr/web/css/_colon_visited/index.md delete mode 100644 files/fr/web/css/_colon_where/index.html create mode 100644 files/fr/web/css/_colon_where/index.md delete mode 100644 files/fr/web/css/_doublecolon_-moz-color-swatch/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-color-swatch/index.md delete mode 100644 files/fr/web/css/_doublecolon_-moz-page-sequence/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-page-sequence/index.md delete mode 100644 files/fr/web/css/_doublecolon_-moz-page/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-page/index.md delete mode 100644 files/fr/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-progress-bar/index.md delete mode 100644 files/fr/web/css/_doublecolon_-moz-range-progress/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-range-progress/index.md delete mode 100644 files/fr/web/css/_doublecolon_-moz-range-thumb/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-range-thumb/index.md delete mode 100644 files/fr/web/css/_doublecolon_-moz-range-track/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-range-track/index.md delete mode 100644 files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-value/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-scrollbar/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-search-results-button/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.md delete mode 100644 files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.md delete mode 100644 files/fr/web/css/_doublecolon_after/index.html create mode 100644 files/fr/web/css/_doublecolon_after/index.md delete mode 100644 files/fr/web/css/_doublecolon_backdrop/index.html create mode 100644 files/fr/web/css/_doublecolon_backdrop/index.md delete mode 100644 files/fr/web/css/_doublecolon_before/index.html create mode 100644 files/fr/web/css/_doublecolon_before/index.md delete mode 100644 files/fr/web/css/_doublecolon_cue-region/index.html create mode 100644 files/fr/web/css/_doublecolon_cue-region/index.md delete mode 100644 files/fr/web/css/_doublecolon_cue/index.html create mode 100644 files/fr/web/css/_doublecolon_cue/index.md delete mode 100644 files/fr/web/css/_doublecolon_file-selector-button/index.html create mode 100644 files/fr/web/css/_doublecolon_file-selector-button/index.md delete mode 100644 files/fr/web/css/_doublecolon_first-letter/index.html create mode 100644 files/fr/web/css/_doublecolon_first-letter/index.md delete mode 100644 files/fr/web/css/_doublecolon_first-line/index.html create mode 100644 files/fr/web/css/_doublecolon_first-line/index.md delete mode 100644 files/fr/web/css/_doublecolon_grammar-error/index.html create mode 100644 files/fr/web/css/_doublecolon_grammar-error/index.md delete mode 100644 files/fr/web/css/_doublecolon_marker/index.html create mode 100644 files/fr/web/css/_doublecolon_marker/index.md delete mode 100644 files/fr/web/css/_doublecolon_part/index.html create mode 100644 files/fr/web/css/_doublecolon_part/index.md delete mode 100644 files/fr/web/css/_doublecolon_placeholder/index.html create mode 100644 files/fr/web/css/_doublecolon_placeholder/index.md delete mode 100644 files/fr/web/css/_doublecolon_selection/index.html create mode 100644 files/fr/web/css/_doublecolon_selection/index.md delete mode 100644 files/fr/web/css/_doublecolon_slotted/index.html create mode 100644 files/fr/web/css/_doublecolon_slotted/index.md delete mode 100644 files/fr/web/css/_doublecolon_spelling-error/index.html create mode 100644 files/fr/web/css/_doublecolon_spelling-error/index.md delete mode 100644 files/fr/web/css/_doublecolon_target-text/index.html create mode 100644 files/fr/web/css/_doublecolon_target-text/index.md delete mode 100644 files/fr/web/css/accent-color/index.html create mode 100644 files/fr/web/css/accent-color/index.md delete mode 100644 files/fr/web/css/actual_value/index.html create mode 100644 files/fr/web/css/actual_value/index.md delete mode 100644 files/fr/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/fr/web/css/adjacent_sibling_combinator/index.md delete mode 100644 files/fr/web/css/align-content/index.html create mode 100644 files/fr/web/css/align-content/index.md delete mode 100644 files/fr/web/css/align-items/index.html create mode 100644 files/fr/web/css/align-items/index.md delete mode 100644 files/fr/web/css/align-self/index.html create mode 100644 files/fr/web/css/align-self/index.md delete mode 100644 files/fr/web/css/all/index.html create mode 100644 files/fr/web/css/all/index.md delete mode 100644 files/fr/web/css/alpha-value/index.html create mode 100644 files/fr/web/css/alpha-value/index.md delete mode 100644 files/fr/web/css/alternative_style_sheets/index.html create mode 100644 files/fr/web/css/alternative_style_sheets/index.md delete mode 100644 files/fr/web/css/angle-percentage/index.html create mode 100644 files/fr/web/css/angle-percentage/index.md delete mode 100644 files/fr/web/css/angle/index.html create mode 100644 files/fr/web/css/angle/index.md delete mode 100644 files/fr/web/css/animation-delay/index.html create mode 100644 files/fr/web/css/animation-delay/index.md delete mode 100644 files/fr/web/css/animation-direction/index.html create mode 100644 files/fr/web/css/animation-direction/index.md delete mode 100644 files/fr/web/css/animation-duration/index.html create mode 100644 files/fr/web/css/animation-duration/index.md delete mode 100644 files/fr/web/css/animation-fill-mode/index.html create mode 100644 files/fr/web/css/animation-fill-mode/index.md delete mode 100644 files/fr/web/css/animation-iteration-count/index.html create mode 100644 files/fr/web/css/animation-iteration-count/index.md delete mode 100644 files/fr/web/css/animation-name/index.html create mode 100644 files/fr/web/css/animation-name/index.md delete mode 100644 files/fr/web/css/animation-play-state/index.html create mode 100644 files/fr/web/css/animation-play-state/index.md delete mode 100644 files/fr/web/css/animation-timing-function/index.html create mode 100644 files/fr/web/css/animation-timing-function/index.md delete mode 100644 files/fr/web/css/animation/index.html create mode 100644 files/fr/web/css/animation/index.md delete mode 100644 files/fr/web/css/appearance/index.html create mode 100644 files/fr/web/css/appearance/index.md delete mode 100644 files/fr/web/css/aspect-ratio/index.html create mode 100644 files/fr/web/css/aspect-ratio/index.md delete mode 100644 files/fr/web/css/at-rule/index.html create mode 100644 files/fr/web/css/at-rule/index.md delete mode 100644 files/fr/web/css/attr()/index.html create mode 100644 files/fr/web/css/attr()/index.md delete mode 100644 files/fr/web/css/attribute_selectors/index.html create mode 100644 files/fr/web/css/attribute_selectors/index.md delete mode 100644 files/fr/web/css/backdrop-filter/index.html create mode 100644 files/fr/web/css/backdrop-filter/index.md delete mode 100644 files/fr/web/css/backface-visibility/index.html create mode 100644 files/fr/web/css/backface-visibility/index.md delete mode 100644 files/fr/web/css/background-attachment/index.html create mode 100644 files/fr/web/css/background-attachment/index.md delete mode 100644 files/fr/web/css/background-blend-mode/index.html create mode 100644 files/fr/web/css/background-blend-mode/index.md delete mode 100644 files/fr/web/css/background-clip/index.html create mode 100644 files/fr/web/css/background-clip/index.md delete mode 100644 files/fr/web/css/background-color/index.html create mode 100644 files/fr/web/css/background-color/index.md delete mode 100644 files/fr/web/css/background-image/index.html create mode 100644 files/fr/web/css/background-image/index.md delete mode 100644 files/fr/web/css/background-origin/index.html create mode 100644 files/fr/web/css/background-origin/index.md delete mode 100644 files/fr/web/css/background-position-x/index.html create mode 100644 files/fr/web/css/background-position-x/index.md delete mode 100644 files/fr/web/css/background-position-y/index.html create mode 100644 files/fr/web/css/background-position-y/index.md delete mode 100644 files/fr/web/css/background-position/index.html create mode 100644 files/fr/web/css/background-position/index.md delete mode 100644 files/fr/web/css/background-repeat/index.html create mode 100644 files/fr/web/css/background-repeat/index.md delete mode 100644 files/fr/web/css/background-size/index.html create mode 100644 files/fr/web/css/background-size/index.md delete mode 100644 files/fr/web/css/background/index.html create mode 100644 files/fr/web/css/background/index.md delete mode 100644 files/fr/web/css/basic-shape/index.html create mode 100644 files/fr/web/css/basic-shape/index.md delete mode 100644 files/fr/web/css/blend-mode/index.html create mode 100644 files/fr/web/css/blend-mode/index.md delete mode 100644 files/fr/web/css/block-size/index.html create mode 100644 files/fr/web/css/block-size/index.md delete mode 100644 files/fr/web/css/border-block-color/index.html create mode 100644 files/fr/web/css/border-block-color/index.md delete mode 100644 files/fr/web/css/border-block-end-color/index.html create mode 100644 files/fr/web/css/border-block-end-color/index.md delete mode 100644 files/fr/web/css/border-block-end-style/index.html create mode 100644 files/fr/web/css/border-block-end-style/index.md delete mode 100644 files/fr/web/css/border-block-end-width/index.html create mode 100644 files/fr/web/css/border-block-end-width/index.md delete mode 100644 files/fr/web/css/border-block-end/index.html create mode 100644 files/fr/web/css/border-block-end/index.md delete mode 100644 files/fr/web/css/border-block-start-color/index.html create mode 100644 files/fr/web/css/border-block-start-color/index.md delete mode 100644 files/fr/web/css/border-block-start-style/index.html create mode 100644 files/fr/web/css/border-block-start-style/index.md delete mode 100644 files/fr/web/css/border-block-start-width/index.html create mode 100644 files/fr/web/css/border-block-start-width/index.md delete mode 100644 files/fr/web/css/border-block-start/index.html create mode 100644 files/fr/web/css/border-block-start/index.md delete mode 100644 files/fr/web/css/border-block-style/index.html create mode 100644 files/fr/web/css/border-block-style/index.md delete mode 100644 files/fr/web/css/border-block-width/index.html create mode 100644 files/fr/web/css/border-block-width/index.md delete mode 100644 files/fr/web/css/border-block/index.html create mode 100644 files/fr/web/css/border-block/index.md delete mode 100644 files/fr/web/css/border-bottom-color/index.html create mode 100644 files/fr/web/css/border-bottom-color/index.md delete mode 100644 files/fr/web/css/border-bottom-left-radius/index.html create mode 100644 files/fr/web/css/border-bottom-left-radius/index.md delete mode 100644 files/fr/web/css/border-bottom-right-radius/index.html create mode 100644 files/fr/web/css/border-bottom-right-radius/index.md delete mode 100644 files/fr/web/css/border-bottom-style/index.html create mode 100644 files/fr/web/css/border-bottom-style/index.md delete mode 100644 files/fr/web/css/border-bottom-width/index.html create mode 100644 files/fr/web/css/border-bottom-width/index.md delete mode 100644 files/fr/web/css/border-bottom/index.html create mode 100644 files/fr/web/css/border-bottom/index.md delete mode 100644 files/fr/web/css/border-collapse/index.html create mode 100644 files/fr/web/css/border-collapse/index.md delete mode 100644 files/fr/web/css/border-color/index.html create mode 100644 files/fr/web/css/border-color/index.md delete mode 100644 files/fr/web/css/border-end-end-radius/index.html create mode 100644 files/fr/web/css/border-end-end-radius/index.md delete mode 100644 files/fr/web/css/border-end-start-radius/index.html create mode 100644 files/fr/web/css/border-end-start-radius/index.md delete mode 100644 files/fr/web/css/border-image-outset/index.html create mode 100644 files/fr/web/css/border-image-outset/index.md delete mode 100644 files/fr/web/css/border-image-repeat/index.html create mode 100644 files/fr/web/css/border-image-repeat/index.md delete mode 100644 files/fr/web/css/border-image-slice/index.html create mode 100644 files/fr/web/css/border-image-slice/index.md delete mode 100644 files/fr/web/css/border-image-source/index.html create mode 100644 files/fr/web/css/border-image-source/index.md delete mode 100644 files/fr/web/css/border-image-width/index.html create mode 100644 files/fr/web/css/border-image-width/index.md delete mode 100644 files/fr/web/css/border-image/index.html create mode 100644 files/fr/web/css/border-image/index.md delete mode 100644 files/fr/web/css/border-inline-color/index.html create mode 100644 files/fr/web/css/border-inline-color/index.md delete mode 100644 files/fr/web/css/border-inline-end-color/index.html create mode 100644 files/fr/web/css/border-inline-end-color/index.md delete mode 100644 files/fr/web/css/border-inline-end-style/index.html create mode 100644 files/fr/web/css/border-inline-end-style/index.md delete mode 100644 files/fr/web/css/border-inline-end-width/index.html create mode 100644 files/fr/web/css/border-inline-end-width/index.md delete mode 100644 files/fr/web/css/border-inline-end/index.html create mode 100644 files/fr/web/css/border-inline-end/index.md delete mode 100644 files/fr/web/css/border-inline-start-color/index.html create mode 100644 files/fr/web/css/border-inline-start-color/index.md delete mode 100644 files/fr/web/css/border-inline-start-style/index.html create mode 100644 files/fr/web/css/border-inline-start-style/index.md delete mode 100644 files/fr/web/css/border-inline-start-width/index.html create mode 100644 files/fr/web/css/border-inline-start-width/index.md delete mode 100644 files/fr/web/css/border-inline-start/index.html create mode 100644 files/fr/web/css/border-inline-start/index.md delete mode 100644 files/fr/web/css/border-inline-style/index.html create mode 100644 files/fr/web/css/border-inline-style/index.md delete mode 100644 files/fr/web/css/border-inline-width/index.html create mode 100644 files/fr/web/css/border-inline-width/index.md delete mode 100644 files/fr/web/css/border-inline/index.html create mode 100644 files/fr/web/css/border-inline/index.md delete mode 100644 files/fr/web/css/border-left-color/index.html create mode 100644 files/fr/web/css/border-left-color/index.md delete mode 100644 files/fr/web/css/border-left-style/index.html create mode 100644 files/fr/web/css/border-left-style/index.md delete mode 100644 files/fr/web/css/border-left-width/index.html create mode 100644 files/fr/web/css/border-left-width/index.md delete mode 100644 files/fr/web/css/border-left/index.html create mode 100644 files/fr/web/css/border-left/index.md delete mode 100644 files/fr/web/css/border-radius/index.html create mode 100644 files/fr/web/css/border-radius/index.md delete mode 100644 files/fr/web/css/border-right-color/index.html create mode 100644 files/fr/web/css/border-right-color/index.md delete mode 100644 files/fr/web/css/border-right-style/index.html create mode 100644 files/fr/web/css/border-right-style/index.md delete mode 100644 files/fr/web/css/border-right-width/index.html create mode 100644 files/fr/web/css/border-right-width/index.md delete mode 100644 files/fr/web/css/border-right/index.html create mode 100644 files/fr/web/css/border-right/index.md delete mode 100644 files/fr/web/css/border-spacing/index.html create mode 100644 files/fr/web/css/border-spacing/index.md delete mode 100644 files/fr/web/css/border-start-end-radius/index.html create mode 100644 files/fr/web/css/border-start-end-radius/index.md delete mode 100644 files/fr/web/css/border-start-start-radius/index.html create mode 100644 files/fr/web/css/border-start-start-radius/index.md delete mode 100644 files/fr/web/css/border-style/index.html create mode 100644 files/fr/web/css/border-style/index.md delete mode 100644 files/fr/web/css/border-top-color/index.html create mode 100644 files/fr/web/css/border-top-color/index.md delete mode 100644 files/fr/web/css/border-top-left-radius/index.html create mode 100644 files/fr/web/css/border-top-left-radius/index.md delete mode 100644 files/fr/web/css/border-top-right-radius/index.html create mode 100644 files/fr/web/css/border-top-right-radius/index.md delete mode 100644 files/fr/web/css/border-top-style/index.html create mode 100644 files/fr/web/css/border-top-style/index.md delete mode 100644 files/fr/web/css/border-top-width/index.html create mode 100644 files/fr/web/css/border-top-width/index.md delete mode 100644 files/fr/web/css/border-top/index.html create mode 100644 files/fr/web/css/border-top/index.md delete mode 100644 files/fr/web/css/border-width/index.html create mode 100644 files/fr/web/css/border-width/index.md delete mode 100644 files/fr/web/css/border/index.html create mode 100644 files/fr/web/css/border/index.md delete mode 100644 files/fr/web/css/bottom/index.html create mode 100644 files/fr/web/css/bottom/index.md delete mode 100644 files/fr/web/css/box-align/index.html create mode 100644 files/fr/web/css/box-align/index.md delete mode 100644 files/fr/web/css/box-decoration-break/index.html create mode 100644 files/fr/web/css/box-decoration-break/index.md delete mode 100644 files/fr/web/css/box-direction/index.html create mode 100644 files/fr/web/css/box-direction/index.md delete mode 100644 files/fr/web/css/box-flex-group/index.html create mode 100644 files/fr/web/css/box-flex-group/index.md delete mode 100644 files/fr/web/css/box-flex/index.html create mode 100644 files/fr/web/css/box-flex/index.md delete mode 100644 files/fr/web/css/box-lines/index.html create mode 100644 files/fr/web/css/box-lines/index.md delete mode 100644 files/fr/web/css/box-ordinal-group/index.html create mode 100644 files/fr/web/css/box-ordinal-group/index.md delete mode 100644 files/fr/web/css/box-orient/index.html create mode 100644 files/fr/web/css/box-orient/index.md delete mode 100644 files/fr/web/css/box-pack/index.html create mode 100644 files/fr/web/css/box-pack/index.md delete mode 100644 files/fr/web/css/box-shadow/index.html create mode 100644 files/fr/web/css/box-shadow/index.md delete mode 100644 files/fr/web/css/box-sizing/index.html create mode 100644 files/fr/web/css/box-sizing/index.md delete mode 100644 files/fr/web/css/break-after/index.html create mode 100644 files/fr/web/css/break-after/index.md delete mode 100644 files/fr/web/css/break-before/index.html create mode 100644 files/fr/web/css/break-before/index.md delete mode 100644 files/fr/web/css/break-inside/index.html create mode 100644 files/fr/web/css/break-inside/index.md delete mode 100644 files/fr/web/css/calc()/index.html create mode 100644 files/fr/web/css/calc()/index.md delete mode 100644 files/fr/web/css/caption-side/index.html create mode 100644 files/fr/web/css/caption-side/index.md delete mode 100644 files/fr/web/css/caret-color/index.html create mode 100644 files/fr/web/css/caret-color/index.md delete mode 100644 files/fr/web/css/child_combinator/index.html create mode 100644 files/fr/web/css/child_combinator/index.md delete mode 100644 files/fr/web/css/clamp()/index.html create mode 100644 files/fr/web/css/clamp()/index.md delete mode 100644 files/fr/web/css/class_selectors/index.html create mode 100644 files/fr/web/css/class_selectors/index.md delete mode 100644 files/fr/web/css/clear/index.html create mode 100644 files/fr/web/css/clear/index.md delete mode 100644 files/fr/web/css/clip-path/index.html create mode 100644 files/fr/web/css/clip-path/index.md delete mode 100644 files/fr/web/css/clip/index.html create mode 100644 files/fr/web/css/clip/index.md delete mode 100644 files/fr/web/css/color-adjust/index.html create mode 100644 files/fr/web/css/color-adjust/index.md delete mode 100644 files/fr/web/css/color-scheme/index.html create mode 100644 files/fr/web/css/color-scheme/index.md delete mode 100644 files/fr/web/css/color/index.html create mode 100644 files/fr/web/css/color/index.md delete mode 100644 files/fr/web/css/color_value/index.html create mode 100644 files/fr/web/css/color_value/index.md delete mode 100644 files/fr/web/css/column-count/index.html create mode 100644 files/fr/web/css/column-count/index.md delete mode 100644 files/fr/web/css/column-fill/index.html create mode 100644 files/fr/web/css/column-fill/index.md delete mode 100644 files/fr/web/css/column-gap/index.html create mode 100644 files/fr/web/css/column-gap/index.md delete mode 100644 files/fr/web/css/column-rule-color/index.html create mode 100644 files/fr/web/css/column-rule-color/index.md delete mode 100644 files/fr/web/css/column-rule-style/index.html create mode 100644 files/fr/web/css/column-rule-style/index.md delete mode 100644 files/fr/web/css/column-rule-width/index.html create mode 100644 files/fr/web/css/column-rule-width/index.md delete mode 100644 files/fr/web/css/column-rule/index.html create mode 100644 files/fr/web/css/column-rule/index.md delete mode 100644 files/fr/web/css/column-span/index.html create mode 100644 files/fr/web/css/column-span/index.md delete mode 100644 files/fr/web/css/column-width/index.html create mode 100644 files/fr/web/css/column-width/index.md delete mode 100644 files/fr/web/css/column_combinator/index.html create mode 100644 files/fr/web/css/column_combinator/index.md delete mode 100644 files/fr/web/css/columns/index.html create mode 100644 files/fr/web/css/columns/index.md delete mode 100644 files/fr/web/css/comments/index.html create mode 100644 files/fr/web/css/comments/index.md delete mode 100644 files/fr/web/css/compositing_and_blending/index.html create mode 100644 files/fr/web/css/compositing_and_blending/index.md delete mode 100644 files/fr/web/css/computed_value/index.html create mode 100644 files/fr/web/css/computed_value/index.md delete mode 100644 files/fr/web/css/contain/index.html create mode 100644 files/fr/web/css/contain/index.md delete mode 100644 files/fr/web/css/containing_block/index.html create mode 100644 files/fr/web/css/containing_block/index.md delete mode 100644 files/fr/web/css/content-visibility/index.html create mode 100644 files/fr/web/css/content-visibility/index.md delete mode 100644 files/fr/web/css/content/index.html create mode 100644 files/fr/web/css/content/index.md delete mode 100644 files/fr/web/css/counter()/index.html create mode 100644 files/fr/web/css/counter()/index.md delete mode 100644 files/fr/web/css/counter-increment/index.html create mode 100644 files/fr/web/css/counter-increment/index.md delete mode 100644 files/fr/web/css/counter-reset/index.html create mode 100644 files/fr/web/css/counter-reset/index.md delete mode 100644 files/fr/web/css/counter-set/index.html create mode 100644 files/fr/web/css/counter-set/index.md delete mode 100644 files/fr/web/css/counters()/index.html create mode 100644 files/fr/web/css/counters()/index.md delete mode 100644 files/fr/web/css/cross-fade()/index.html create mode 100644 files/fr/web/css/cross-fade()/index.md delete mode 100644 files/fr/web/css/css_animated_properties/index.html create mode 100644 files/fr/web/css/css_animated_properties/index.md delete mode 100644 files/fr/web/css/css_animations/detecting_css_animation_support/index.html create mode 100644 files/fr/web/css/css_animations/detecting_css_animation_support/index.md delete mode 100644 files/fr/web/css/css_animations/index.html create mode 100644 files/fr/web/css/css_animations/index.md delete mode 100644 files/fr/web/css/css_animations/tips/index.html create mode 100644 files/fr/web/css/css_animations/tips/index.md delete mode 100644 files/fr/web/css/css_animations/using_css_animations/index.html create mode 100644 files/fr/web/css/css_animations/using_css_animations/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md delete mode 100644 files/fr/web/css/css_basic_user_interface/index.html create mode 100644 files/fr/web/css/css_basic_user_interface/index.md delete mode 100644 files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md delete mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md delete mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.md delete mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md delete mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md delete mode 100644 files/fr/web/css/css_box_alignment/index.html create mode 100644 files/fr/web/css/css_box_alignment/index.md delete mode 100644 files/fr/web/css/css_box_model/index.html create mode 100644 files/fr/web/css/css_box_model/index.md delete mode 100644 files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md delete mode 100644 files/fr/web/css/css_charsets/index.html create mode 100644 files/fr/web/css/css_charsets/index.md delete mode 100644 files/fr/web/css/css_color/index.html create mode 100644 files/fr/web/css/css_color/index.md delete mode 100644 files/fr/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/fr/web/css/css_colors/color_picker_tool/index.md delete mode 100644 files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html create mode 100644 files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md delete mode 100644 files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html create mode 100644 files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md delete mode 100644 files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html create mode 100644 files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md delete mode 100644 files/fr/web/css/css_columns/index.html create mode 100644 files/fr/web/css/css_columns/index.md delete mode 100644 files/fr/web/css/css_columns/spanning_columns/index.html create mode 100644 files/fr/web/css/css_columns/spanning_columns/index.md delete mode 100644 files/fr/web/css/css_columns/styling_columns/index.html create mode 100644 files/fr/web/css/css_columns/styling_columns/index.md delete mode 100644 files/fr/web/css/css_columns/using_multi-column_layouts/index.html create mode 100644 files/fr/web/css/css_columns/using_multi-column_layouts/index.md delete mode 100644 files/fr/web/css/css_conditional_rules/index.html create mode 100644 files/fr/web/css/css_conditional_rules/index.md delete mode 100644 files/fr/web/css/css_conditional_rules/using_feature_queries/index.html create mode 100644 files/fr/web/css/css_conditional_rules/using_feature_queries/index.md delete mode 100644 files/fr/web/css/css_containment/index.html create mode 100644 files/fr/web/css/css_containment/index.md delete mode 100644 files/fr/web/css/css_counter_styles/index.html create mode 100644 files/fr/web/css/css_counter_styles/index.md delete mode 100644 files/fr/web/css/css_device_adaptation/index.html create mode 100644 files/fr/web/css/css_device_adaptation/index.md delete mode 100644 files/fr/web/css/css_display/index.html create mode 100644 files/fr/web/css/css_display/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md delete mode 100644 files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md delete mode 100644 files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html create mode 100644 files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md delete mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html create mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md delete mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html create mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md delete mode 100644 files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html create mode 100644 files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md delete mode 100644 files/fr/web/css/css_flow_layout/index.html create mode 100644 files/fr/web/css/css_flow_layout/index.md delete mode 100644 files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html create mode 100644 files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md delete mode 100644 files/fr/web/css/css_fonts/index.html create mode 100644 files/fr/web/css/css_fonts/index.md delete mode 100644 files/fr/web/css/css_fonts/opentype_fonts_guide/index.html create mode 100644 files/fr/web/css/css_fonts/opentype_fonts_guide/index.md delete mode 100644 files/fr/web/css/css_fonts/variable_fonts_guide/index.html create mode 100644 files/fr/web/css/css_fonts/variable_fonts_guide/index.md delete mode 100644 files/fr/web/css/css_fragmentation/index.html create mode 100644 files/fr/web/css/css_fragmentation/index.md delete mode 100644 files/fr/web/css/css_generated_content/index.html create mode 100644 files/fr/web/css/css_generated_content/index.md delete mode 100644 files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md delete mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md delete mode 100644 files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md delete mode 100644 files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md delete mode 100644 files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.md delete mode 100644 files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md delete mode 100644 files/fr/web/css/css_grid_layout/grid_template_areas/index.html create mode 100644 files/fr/web/css/css_grid_layout/grid_template_areas/index.md delete mode 100644 files/fr/web/css/css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/index.md delete mode 100644 files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html create mode 100644 files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md delete mode 100644 files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html create mode 100644 files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md delete mode 100644 files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md delete mode 100644 files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md delete mode 100644 files/fr/web/css/css_grid_layout/subgrid/index.html create mode 100644 files/fr/web/css/css_grid_layout/subgrid/index.md delete mode 100644 files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md delete mode 100644 files/fr/web/css/css_images/index.html create mode 100644 files/fr/web/css/css_images/index.md delete mode 100644 files/fr/web/css/css_images/using_css_gradients/index.html create mode 100644 files/fr/web/css/css_images/using_css_gradients/index.md delete mode 100644 files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md delete mode 100644 files/fr/web/css/css_lists_and_counters/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/index.md delete mode 100644 files/fr/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/using_css_counters/index.md delete mode 100644 files/fr/web/css/css_logical_properties/basic_concepts/index.html create mode 100644 files/fr/web/css/css_logical_properties/basic_concepts/index.md delete mode 100644 files/fr/web/css/css_logical_properties/floating_and_positioning/index.html create mode 100644 files/fr/web/css/css_logical_properties/floating_and_positioning/index.md delete mode 100644 files/fr/web/css/css_logical_properties/index.html create mode 100644 files/fr/web/css/css_logical_properties/index.md delete mode 100644 files/fr/web/css/css_logical_properties/margins_borders_padding/index.html create mode 100644 files/fr/web/css/css_logical_properties/margins_borders_padding/index.md delete mode 100644 files/fr/web/css/css_logical_properties/sizing/index.html create mode 100644 files/fr/web/css/css_logical_properties/sizing/index.md delete mode 100644 files/fr/web/css/css_masking/index.html create mode 100644 files/fr/web/css/css_masking/index.md delete mode 100644 files/fr/web/css/css_miscellaneous/index.html create mode 100644 files/fr/web/css/css_miscellaneous/index.md delete mode 100644 files/fr/web/css/css_motion_path/index.html create mode 100644 files/fr/web/css/css_motion_path/index.md delete mode 100644 files/fr/web/css/css_namespaces/index.html create mode 100644 files/fr/web/css/css_namespaces/index.md delete mode 100644 files/fr/web/css/css_overflow/index.html create mode 100644 files/fr/web/css/css_overflow/index.md delete mode 100644 files/fr/web/css/css_pages/index.html create mode 100644 files/fr/web/css/css_pages/index.md delete mode 100644 files/fr/web/css/css_positioning/index.html create mode 100644 files/fr/web/css/css_positioning/index.md delete mode 100644 files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md delete mode 100644 files/fr/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/index.md delete mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md delete mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md delete mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md delete mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md delete mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md delete mode 100644 files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md delete mode 100644 files/fr/web/css/css_properties_reference/index.html create mode 100644 files/fr/web/css/css_properties_reference/index.md delete mode 100644 files/fr/web/css/css_ruby/index.html create mode 100644 files/fr/web/css/css_ruby/index.md delete mode 100644 files/fr/web/css/css_scroll_snap/basic_concepts/index.html create mode 100644 files/fr/web/css/css_scroll_snap/basic_concepts/index.md delete mode 100644 files/fr/web/css/css_scroll_snap/browser_compat/index.html create mode 100644 files/fr/web/css/css_scroll_snap/browser_compat/index.md delete mode 100644 files/fr/web/css/css_scroll_snap/index.html create mode 100644 files/fr/web/css/css_scroll_snap/index.md delete mode 100644 files/fr/web/css/css_scroll_snap_points/index.html create mode 100644 files/fr/web/css/css_scroll_snap_points/index.md delete mode 100644 files/fr/web/css/css_scrollbars/index.html create mode 100644 files/fr/web/css/css_scrollbars/index.md delete mode 100644 files/fr/web/css/css_selectors/index.html create mode 100644 files/fr/web/css/css_selectors/index.md delete mode 100644 files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md delete mode 100644 files/fr/web/css/css_shapes/basic_shapes/index.html create mode 100644 files/fr/web/css/css_shapes/basic_shapes/index.md delete mode 100644 files/fr/web/css/css_shapes/from_box_values/index.html create mode 100644 files/fr/web/css/css_shapes/from_box_values/index.md delete mode 100644 files/fr/web/css/css_shapes/index.html create mode 100644 files/fr/web/css/css_shapes/index.md delete mode 100644 files/fr/web/css/css_shapes/overview_of_css_shapes/index.html create mode 100644 files/fr/web/css/css_shapes/overview_of_css_shapes/index.md delete mode 100644 files/fr/web/css/css_shapes/shapes_from_images/index.html create mode 100644 files/fr/web/css/css_shapes/shapes_from_images/index.md delete mode 100644 files/fr/web/css/css_table/index.html create mode 100644 files/fr/web/css/css_table/index.md delete mode 100644 files/fr/web/css/css_text/index.html create mode 100644 files/fr/web/css/css_text/index.md delete mode 100644 files/fr/web/css/css_text_decoration/index.html create mode 100644 files/fr/web/css/css_text_decoration/index.md delete mode 100644 files/fr/web/css/css_transforms/index.html create mode 100644 files/fr/web/css/css_transforms/index.md delete mode 100644 files/fr/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/fr/web/css/css_transforms/using_css_transforms/index.md delete mode 100644 files/fr/web/css/css_transitions/index.html create mode 100644 files/fr/web/css/css_transitions/index.md delete mode 100644 files/fr/web/css/css_transitions/using_css_transitions/index.html create mode 100644 files/fr/web/css/css_transitions/using_css_transitions/index.md delete mode 100644 files/fr/web/css/css_types/index.html create mode 100644 files/fr/web/css/css_types/index.md delete mode 100644 files/fr/web/css/css_values_and_units/index.html create mode 100644 files/fr/web/css/css_values_and_units/index.md delete mode 100644 files/fr/web/css/css_variables/index.html create mode 100644 files/fr/web/css/css_variables/index.md delete mode 100644 files/fr/web/css/css_writing_modes/index.html create mode 100644 files/fr/web/css/css_writing_modes/index.md delete mode 100644 files/fr/web/css/cssom_view/coordinate_systems/index.html create mode 100644 files/fr/web/css/cssom_view/coordinate_systems/index.md delete mode 100644 files/fr/web/css/cssom_view/index.html create mode 100644 files/fr/web/css/cssom_view/index.md delete mode 100644 files/fr/web/css/cursor/index.html create mode 100644 files/fr/web/css/cursor/index.md delete mode 100644 files/fr/web/css/custom-ident/index.html create mode 100644 files/fr/web/css/custom-ident/index.md delete mode 100644 files/fr/web/css/descendant_combinator/index.html create mode 100644 files/fr/web/css/descendant_combinator/index.md delete mode 100644 files/fr/web/css/dimension/index.html create mode 100644 files/fr/web/css/dimension/index.md delete mode 100644 files/fr/web/css/direction/index.html create mode 100644 files/fr/web/css/direction/index.md delete mode 100644 files/fr/web/css/display-box/index.html create mode 100644 files/fr/web/css/display-box/index.md delete mode 100644 files/fr/web/css/display-inside/index.html create mode 100644 files/fr/web/css/display-inside/index.md delete mode 100644 files/fr/web/css/display-internal/index.html create mode 100644 files/fr/web/css/display-internal/index.md delete mode 100644 files/fr/web/css/display-legacy/index.html create mode 100644 files/fr/web/css/display-legacy/index.md delete mode 100644 files/fr/web/css/display-listitem/index.html create mode 100644 files/fr/web/css/display-listitem/index.md delete mode 100644 files/fr/web/css/display-outside/index.html create mode 100644 files/fr/web/css/display-outside/index.md delete mode 100644 files/fr/web/css/display/index.html create mode 100644 files/fr/web/css/display/index.md delete mode 100644 files/fr/web/css/easing-function/index.html create mode 100644 files/fr/web/css/easing-function/index.md delete mode 100644 files/fr/web/css/element()/index.html create mode 100644 files/fr/web/css/element()/index.md delete mode 100644 files/fr/web/css/empty-cells/index.html create mode 100644 files/fr/web/css/empty-cells/index.md delete mode 100644 files/fr/web/css/env()/index.html create mode 100644 files/fr/web/css/env()/index.md delete mode 100644 files/fr/web/css/filter-function/blur()/index.html create mode 100644 files/fr/web/css/filter-function/blur()/index.md delete mode 100644 files/fr/web/css/filter-function/brightness()/index.html create mode 100644 files/fr/web/css/filter-function/brightness()/index.md delete mode 100644 files/fr/web/css/filter-function/contrast()/index.html create mode 100644 files/fr/web/css/filter-function/contrast()/index.md delete mode 100644 files/fr/web/css/filter-function/drop-shadow()/index.html create mode 100644 files/fr/web/css/filter-function/drop-shadow()/index.md delete mode 100644 files/fr/web/css/filter-function/grayscale()/index.html create mode 100644 files/fr/web/css/filter-function/grayscale()/index.md delete mode 100644 files/fr/web/css/filter-function/hue-rotate()/index.html create mode 100644 files/fr/web/css/filter-function/hue-rotate()/index.md delete mode 100644 files/fr/web/css/filter-function/index.html create mode 100644 files/fr/web/css/filter-function/index.md delete mode 100644 files/fr/web/css/filter-function/invert()/index.html create mode 100644 files/fr/web/css/filter-function/invert()/index.md delete mode 100644 files/fr/web/css/filter-function/opacity()/index.html create mode 100644 files/fr/web/css/filter-function/opacity()/index.md delete mode 100644 files/fr/web/css/filter-function/saturate()/index.html create mode 100644 files/fr/web/css/filter-function/saturate()/index.md delete mode 100644 files/fr/web/css/filter-function/sepia()/index.html create mode 100644 files/fr/web/css/filter-function/sepia()/index.md delete mode 100644 files/fr/web/css/filter/index.html create mode 100644 files/fr/web/css/filter/index.md delete mode 100644 files/fr/web/css/filter_effects/index.html create mode 100644 files/fr/web/css/filter_effects/index.md delete mode 100644 files/fr/web/css/fit-content/index.html create mode 100644 files/fr/web/css/fit-content/index.md delete mode 100644 files/fr/web/css/flex-basis/index.html create mode 100644 files/fr/web/css/flex-basis/index.md delete mode 100644 files/fr/web/css/flex-direction/index.html create mode 100644 files/fr/web/css/flex-direction/index.md delete mode 100644 files/fr/web/css/flex-flow/index.html create mode 100644 files/fr/web/css/flex-flow/index.md delete mode 100644 files/fr/web/css/flex-grow/index.html create mode 100644 files/fr/web/css/flex-grow/index.md delete mode 100644 files/fr/web/css/flex-shrink/index.html create mode 100644 files/fr/web/css/flex-shrink/index.md delete mode 100644 files/fr/web/css/flex-wrap/index.html create mode 100644 files/fr/web/css/flex-wrap/index.md delete mode 100644 files/fr/web/css/flex/index.html create mode 100644 files/fr/web/css/flex/index.md delete mode 100644 files/fr/web/css/flex_value/index.html create mode 100644 files/fr/web/css/flex_value/index.md delete mode 100644 files/fr/web/css/float/index.html create mode 100644 files/fr/web/css/float/index.md delete mode 100644 files/fr/web/css/font-family/index.html create mode 100644 files/fr/web/css/font-family/index.md delete mode 100644 files/fr/web/css/font-feature-settings/index.html create mode 100644 files/fr/web/css/font-feature-settings/index.md delete mode 100644 files/fr/web/css/font-kerning/index.html create mode 100644 files/fr/web/css/font-kerning/index.md delete mode 100644 files/fr/web/css/font-language-override/index.html create mode 100644 files/fr/web/css/font-language-override/index.md delete mode 100644 files/fr/web/css/font-optical-sizing/index.html create mode 100644 files/fr/web/css/font-optical-sizing/index.md delete mode 100644 files/fr/web/css/font-size-adjust/index.html create mode 100644 files/fr/web/css/font-size-adjust/index.md delete mode 100644 files/fr/web/css/font-size/index.html create mode 100644 files/fr/web/css/font-size/index.md delete mode 100644 files/fr/web/css/font-smooth/index.html create mode 100644 files/fr/web/css/font-smooth/index.md delete mode 100644 files/fr/web/css/font-stretch/index.html create mode 100644 files/fr/web/css/font-stretch/index.md delete mode 100644 files/fr/web/css/font-style/index.html create mode 100644 files/fr/web/css/font-style/index.md delete mode 100644 files/fr/web/css/font-synthesis/index.html create mode 100644 files/fr/web/css/font-synthesis/index.md delete mode 100644 files/fr/web/css/font-variant-alternates/index.html create mode 100644 files/fr/web/css/font-variant-alternates/index.md delete mode 100644 files/fr/web/css/font-variant-caps/index.html create mode 100644 files/fr/web/css/font-variant-caps/index.md delete mode 100644 files/fr/web/css/font-variant-east-asian/index.html create mode 100644 files/fr/web/css/font-variant-east-asian/index.md delete mode 100644 files/fr/web/css/font-variant-ligatures/index.html create mode 100644 files/fr/web/css/font-variant-ligatures/index.md delete mode 100644 files/fr/web/css/font-variant-numeric/index.html create mode 100644 files/fr/web/css/font-variant-numeric/index.md delete mode 100644 files/fr/web/css/font-variant-position/index.html create mode 100644 files/fr/web/css/font-variant-position/index.md delete mode 100644 files/fr/web/css/font-variant/index.html create mode 100644 files/fr/web/css/font-variant/index.md delete mode 100644 files/fr/web/css/font-variation-settings/index.html create mode 100644 files/fr/web/css/font-variation-settings/index.md delete mode 100644 files/fr/web/css/font-weight/index.html create mode 100644 files/fr/web/css/font-weight/index.md delete mode 100644 files/fr/web/css/font/index.html create mode 100644 files/fr/web/css/font/index.md delete mode 100644 files/fr/web/css/forced-color-adjust/index.html create mode 100644 files/fr/web/css/forced-color-adjust/index.md delete mode 100644 files/fr/web/css/frequency-percentage/index.html create mode 100644 files/fr/web/css/frequency-percentage/index.md delete mode 100644 files/fr/web/css/frequency/index.html create mode 100644 files/fr/web/css/frequency/index.md delete mode 100644 files/fr/web/css/gap/index.html create mode 100644 files/fr/web/css/gap/index.md delete mode 100644 files/fr/web/css/general_sibling_combinator/index.html create mode 100644 files/fr/web/css/general_sibling_combinator/index.md delete mode 100644 files/fr/web/css/gradient/index.html create mode 100644 files/fr/web/css/gradient/index.md delete mode 100644 files/fr/web/css/grid-area/index.html create mode 100644 files/fr/web/css/grid-area/index.md delete mode 100644 files/fr/web/css/grid-auto-columns/index.html create mode 100644 files/fr/web/css/grid-auto-columns/index.md delete mode 100644 files/fr/web/css/grid-auto-flow/index.html create mode 100644 files/fr/web/css/grid-auto-flow/index.md delete mode 100644 files/fr/web/css/grid-auto-rows/index.html create mode 100644 files/fr/web/css/grid-auto-rows/index.md delete mode 100644 files/fr/web/css/grid-column-end/index.html create mode 100644 files/fr/web/css/grid-column-end/index.md delete mode 100644 files/fr/web/css/grid-column-start/index.html create mode 100644 files/fr/web/css/grid-column-start/index.md delete mode 100644 files/fr/web/css/grid-column/index.html create mode 100644 files/fr/web/css/grid-column/index.md delete mode 100644 files/fr/web/css/grid-row-end/index.html create mode 100644 files/fr/web/css/grid-row-end/index.md delete mode 100644 files/fr/web/css/grid-row-start/index.html create mode 100644 files/fr/web/css/grid-row-start/index.md delete mode 100644 files/fr/web/css/grid-row/index.html create mode 100644 files/fr/web/css/grid-row/index.md delete mode 100644 files/fr/web/css/grid-template-areas/index.html create mode 100644 files/fr/web/css/grid-template-areas/index.md delete mode 100644 files/fr/web/css/grid-template-columns/index.html create mode 100644 files/fr/web/css/grid-template-columns/index.md delete mode 100644 files/fr/web/css/grid-template-rows/index.html create mode 100644 files/fr/web/css/grid-template-rows/index.md delete mode 100644 files/fr/web/css/grid-template/index.html create mode 100644 files/fr/web/css/grid-template/index.md delete mode 100644 files/fr/web/css/grid/index.html create mode 100644 files/fr/web/css/grid/index.md delete mode 100644 files/fr/web/css/hanging-punctuation/index.html create mode 100644 files/fr/web/css/hanging-punctuation/index.md delete mode 100644 files/fr/web/css/height/index.html create mode 100644 files/fr/web/css/height/index.md delete mode 100644 files/fr/web/css/hyphens/index.html create mode 100644 files/fr/web/css/hyphens/index.md delete mode 100644 files/fr/web/css/id_selectors/index.html create mode 100644 files/fr/web/css/id_selectors/index.md delete mode 100644 files/fr/web/css/image-orientation/index.html create mode 100644 files/fr/web/css/image-orientation/index.md delete mode 100644 files/fr/web/css/image-rendering/index.html create mode 100644 files/fr/web/css/image-rendering/index.md delete mode 100644 files/fr/web/css/image/index.html create mode 100644 files/fr/web/css/image/index.md delete mode 100644 files/fr/web/css/ime-mode/index.html create mode 100644 files/fr/web/css/ime-mode/index.md delete mode 100644 files/fr/web/css/index.html create mode 100644 files/fr/web/css/index.md delete mode 100644 files/fr/web/css/inherit/index.html create mode 100644 files/fr/web/css/inherit/index.md delete mode 100644 files/fr/web/css/inheritance/index.html create mode 100644 files/fr/web/css/inheritance/index.md delete mode 100644 files/fr/web/css/initial-letter-align/index.html create mode 100644 files/fr/web/css/initial-letter-align/index.md delete mode 100644 files/fr/web/css/initial-letter/index.html create mode 100644 files/fr/web/css/initial-letter/index.md delete mode 100644 files/fr/web/css/initial/index.html create mode 100644 files/fr/web/css/initial/index.md delete mode 100644 files/fr/web/css/initial_value/index.html create mode 100644 files/fr/web/css/initial_value/index.md delete mode 100644 files/fr/web/css/inline-size/index.html create mode 100644 files/fr/web/css/inline-size/index.md delete mode 100644 files/fr/web/css/inline_formatting_context/index.html create mode 100644 files/fr/web/css/inline_formatting_context/index.md delete mode 100644 files/fr/web/css/inset-block-end/index.html create mode 100644 files/fr/web/css/inset-block-end/index.md delete mode 100644 files/fr/web/css/inset-block-start/index.html create mode 100644 files/fr/web/css/inset-block-start/index.md delete mode 100644 files/fr/web/css/inset-block/index.html create mode 100644 files/fr/web/css/inset-block/index.md delete mode 100644 files/fr/web/css/inset-inline-end/index.html create mode 100644 files/fr/web/css/inset-inline-end/index.md delete mode 100644 files/fr/web/css/inset-inline-start/index.html create mode 100644 files/fr/web/css/inset-inline-start/index.md delete mode 100644 files/fr/web/css/inset-inline/index.html create mode 100644 files/fr/web/css/inset-inline/index.md delete mode 100644 files/fr/web/css/inset/index.html create mode 100644 files/fr/web/css/inset/index.md delete mode 100644 files/fr/web/css/integer/index.html create mode 100644 files/fr/web/css/integer/index.md delete mode 100644 files/fr/web/css/isolation/index.html create mode 100644 files/fr/web/css/isolation/index.md delete mode 100644 files/fr/web/css/justify-content/index.html create mode 100644 files/fr/web/css/justify-content/index.md delete mode 100644 files/fr/web/css/justify-items/index.html create mode 100644 files/fr/web/css/justify-items/index.md delete mode 100644 files/fr/web/css/justify-self/index.html create mode 100644 files/fr/web/css/justify-self/index.md delete mode 100644 files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md delete mode 100644 files/fr/web/css/layout_cookbook/card/index.html create mode 100644 files/fr/web/css/layout_cookbook/card/index.md delete mode 100644 files/fr/web/css/layout_cookbook/center_an_element/index.html create mode 100644 files/fr/web/css/layout_cookbook/center_an_element/index.md delete mode 100644 files/fr/web/css/layout_cookbook/column_layouts/index.html create mode 100644 files/fr/web/css/layout_cookbook/column_layouts/index.md delete mode 100644 files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html create mode 100644 files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md delete mode 100644 files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html create mode 100644 files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md delete mode 100644 files/fr/web/css/layout_cookbook/grid_wrapper/index.html create mode 100644 files/fr/web/css/layout_cookbook/grid_wrapper/index.md delete mode 100644 files/fr/web/css/layout_cookbook/index.html create mode 100644 files/fr/web/css/layout_cookbook/index.md delete mode 100644 files/fr/web/css/layout_cookbook/list_group_with_badges/index.html create mode 100644 files/fr/web/css/layout_cookbook/list_group_with_badges/index.md delete mode 100644 files/fr/web/css/layout_cookbook/media_objects/index.html create mode 100644 files/fr/web/css/layout_cookbook/media_objects/index.md delete mode 100644 files/fr/web/css/layout_cookbook/pagination/index.html create mode 100644 files/fr/web/css/layout_cookbook/pagination/index.md delete mode 100644 files/fr/web/css/layout_cookbook/split_navigation/index.html create mode 100644 files/fr/web/css/layout_cookbook/split_navigation/index.md delete mode 100644 files/fr/web/css/layout_cookbook/sticky_footers/index.html create mode 100644 files/fr/web/css/layout_cookbook/sticky_footers/index.md delete mode 100644 files/fr/web/css/layout_mode/index.html create mode 100644 files/fr/web/css/layout_mode/index.md delete mode 100644 files/fr/web/css/left/index.html create mode 100644 files/fr/web/css/left/index.md delete mode 100644 files/fr/web/css/length-percentage/index.html create mode 100644 files/fr/web/css/length-percentage/index.md delete mode 100644 files/fr/web/css/length/index.html create mode 100644 files/fr/web/css/length/index.md delete mode 100644 files/fr/web/css/letter-spacing/index.html create mode 100644 files/fr/web/css/letter-spacing/index.md delete mode 100644 files/fr/web/css/line-break/index.html create mode 100644 files/fr/web/css/line-break/index.md delete mode 100644 files/fr/web/css/line-height-step/index.html create mode 100644 files/fr/web/css/line-height-step/index.md delete mode 100644 files/fr/web/css/line-height/index.html create mode 100644 files/fr/web/css/line-height/index.md delete mode 100644 files/fr/web/css/list-style-image/index.html create mode 100644 files/fr/web/css/list-style-image/index.md delete mode 100644 files/fr/web/css/list-style-position/index.html create mode 100644 files/fr/web/css/list-style-position/index.md delete mode 100644 files/fr/web/css/list-style-type/index.html create mode 100644 files/fr/web/css/list-style-type/index.md delete mode 100644 files/fr/web/css/list-style/index.html create mode 100644 files/fr/web/css/list-style/index.md delete mode 100644 files/fr/web/css/list_of_proprietary_css_features/index.html create mode 100644 files/fr/web/css/list_of_proprietary_css_features/index.md delete mode 100644 files/fr/web/css/margin-block-end/index.html create mode 100644 files/fr/web/css/margin-block-end/index.md delete mode 100644 files/fr/web/css/margin-block-start/index.html create mode 100644 files/fr/web/css/margin-block-start/index.md delete mode 100644 files/fr/web/css/margin-block/index.html create mode 100644 files/fr/web/css/margin-block/index.md delete mode 100644 files/fr/web/css/margin-bottom/index.html create mode 100644 files/fr/web/css/margin-bottom/index.md delete mode 100644 files/fr/web/css/margin-inline-end/index.html create mode 100644 files/fr/web/css/margin-inline-end/index.md delete mode 100644 files/fr/web/css/margin-inline-start/index.html create mode 100644 files/fr/web/css/margin-inline-start/index.md delete mode 100644 files/fr/web/css/margin-inline/index.html create mode 100644 files/fr/web/css/margin-inline/index.md delete mode 100644 files/fr/web/css/margin-left/index.html create mode 100644 files/fr/web/css/margin-left/index.md delete mode 100644 files/fr/web/css/margin-right/index.html create mode 100644 files/fr/web/css/margin-right/index.md delete mode 100644 files/fr/web/css/margin-top/index.html create mode 100644 files/fr/web/css/margin-top/index.md delete mode 100644 files/fr/web/css/margin-trim/index.html create mode 100644 files/fr/web/css/margin-trim/index.md delete mode 100644 files/fr/web/css/margin/index.html create mode 100644 files/fr/web/css/margin/index.md delete mode 100644 files/fr/web/css/mask-border-mode/index.html create mode 100644 files/fr/web/css/mask-border-mode/index.md delete mode 100644 files/fr/web/css/mask-border-outset/index.html create mode 100644 files/fr/web/css/mask-border-outset/index.md delete mode 100644 files/fr/web/css/mask-border-repeat/index.html create mode 100644 files/fr/web/css/mask-border-repeat/index.md delete mode 100644 files/fr/web/css/mask-border-slice/index.html create mode 100644 files/fr/web/css/mask-border-slice/index.md delete mode 100644 files/fr/web/css/mask-border-source/index.html create mode 100644 files/fr/web/css/mask-border-source/index.md delete mode 100644 files/fr/web/css/mask-border-width/index.html create mode 100644 files/fr/web/css/mask-border-width/index.md delete mode 100644 files/fr/web/css/mask-border/index.html create mode 100644 files/fr/web/css/mask-border/index.md delete mode 100644 files/fr/web/css/mask-clip/index.html create mode 100644 files/fr/web/css/mask-clip/index.md delete mode 100644 files/fr/web/css/mask-composite/index.html create mode 100644 files/fr/web/css/mask-composite/index.md delete mode 100644 files/fr/web/css/mask-image/index.html create mode 100644 files/fr/web/css/mask-image/index.md delete mode 100644 files/fr/web/css/mask-mode/index.html create mode 100644 files/fr/web/css/mask-mode/index.md delete mode 100644 files/fr/web/css/mask-origin/index.html create mode 100644 files/fr/web/css/mask-origin/index.md delete mode 100644 files/fr/web/css/mask-position/index.html create mode 100644 files/fr/web/css/mask-position/index.md delete mode 100644 files/fr/web/css/mask-repeat/index.html create mode 100644 files/fr/web/css/mask-repeat/index.md delete mode 100644 files/fr/web/css/mask-size/index.html create mode 100644 files/fr/web/css/mask-size/index.md delete mode 100644 files/fr/web/css/mask-type/index.html create mode 100644 files/fr/web/css/mask-type/index.md delete mode 100644 files/fr/web/css/mask/index.html create mode 100644 files/fr/web/css/mask/index.md delete mode 100644 files/fr/web/css/math-style/index.html create mode 100644 files/fr/web/css/math-style/index.md delete mode 100644 files/fr/web/css/max()/index.html create mode 100644 files/fr/web/css/max()/index.md delete mode 100644 files/fr/web/css/max-block-size/index.html create mode 100644 files/fr/web/css/max-block-size/index.md delete mode 100644 files/fr/web/css/max-height/index.html create mode 100644 files/fr/web/css/max-height/index.md delete mode 100644 files/fr/web/css/max-inline-size/index.html create mode 100644 files/fr/web/css/max-inline-size/index.md delete mode 100644 files/fr/web/css/max-width/index.html create mode 100644 files/fr/web/css/max-width/index.md delete mode 100644 files/fr/web/css/media_queries/index.html create mode 100644 files/fr/web/css/media_queries/index.md delete mode 100644 files/fr/web/css/media_queries/testing_media_queries/index.html create mode 100644 files/fr/web/css/media_queries/testing_media_queries/index.md delete mode 100644 files/fr/web/css/media_queries/using_media_queries/index.html create mode 100644 files/fr/web/css/media_queries/using_media_queries/index.md delete mode 100644 files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html create mode 100644 files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.md delete mode 100644 files/fr/web/css/microsoft_extensions/index.html create mode 100644 files/fr/web/css/microsoft_extensions/index.md delete mode 100644 files/fr/web/css/min()/index.html create mode 100644 files/fr/web/css/min()/index.md delete mode 100644 files/fr/web/css/min-block-size/index.html create mode 100644 files/fr/web/css/min-block-size/index.md delete mode 100644 files/fr/web/css/min-height/index.html create mode 100644 files/fr/web/css/min-height/index.md delete mode 100644 files/fr/web/css/min-inline-size/index.html create mode 100644 files/fr/web/css/min-inline-size/index.md delete mode 100644 files/fr/web/css/min-width/index.html create mode 100644 files/fr/web/css/min-width/index.md delete mode 100644 files/fr/web/css/minmax()/index.html create mode 100644 files/fr/web/css/minmax()/index.md delete mode 100644 files/fr/web/css/mix-blend-mode/index.html create mode 100644 files/fr/web/css/mix-blend-mode/index.md delete mode 100644 files/fr/web/css/mozilla_extensions/index.html create mode 100644 files/fr/web/css/mozilla_extensions/index.md delete mode 100644 files/fr/web/css/number/index.html create mode 100644 files/fr/web/css/number/index.md delete mode 100644 files/fr/web/css/object-fit/index.html create mode 100644 files/fr/web/css/object-fit/index.md delete mode 100644 files/fr/web/css/object-position/index.html create mode 100644 files/fr/web/css/object-position/index.md delete mode 100644 files/fr/web/css/offset-anchor/index.html create mode 100644 files/fr/web/css/offset-anchor/index.md delete mode 100644 files/fr/web/css/offset-distance/index.html create mode 100644 files/fr/web/css/offset-distance/index.md delete mode 100644 files/fr/web/css/offset-path/index.html create mode 100644 files/fr/web/css/offset-path/index.md delete mode 100644 files/fr/web/css/offset-position/index.html create mode 100644 files/fr/web/css/offset-position/index.md delete mode 100644 files/fr/web/css/offset-rotate/index.html create mode 100644 files/fr/web/css/offset-rotate/index.md delete mode 100644 files/fr/web/css/offset/index.html create mode 100644 files/fr/web/css/offset/index.md delete mode 100644 files/fr/web/css/opacity/index.html create mode 100644 files/fr/web/css/opacity/index.md delete mode 100644 files/fr/web/css/order/index.html create mode 100644 files/fr/web/css/order/index.md delete mode 100644 files/fr/web/css/orphans/index.html create mode 100644 files/fr/web/css/orphans/index.md delete mode 100644 files/fr/web/css/outline-color/index.html create mode 100644 files/fr/web/css/outline-color/index.md delete mode 100644 files/fr/web/css/outline-offset/index.html create mode 100644 files/fr/web/css/outline-offset/index.md delete mode 100644 files/fr/web/css/outline-style/index.html create mode 100644 files/fr/web/css/outline-style/index.md delete mode 100644 files/fr/web/css/outline-width/index.html create mode 100644 files/fr/web/css/outline-width/index.md delete mode 100644 files/fr/web/css/outline/index.html create mode 100644 files/fr/web/css/outline/index.md delete mode 100644 files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html create mode 100644 files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md delete mode 100644 files/fr/web/css/overflow-anchor/index.html create mode 100644 files/fr/web/css/overflow-anchor/index.md delete mode 100644 files/fr/web/css/overflow-block/index.html create mode 100644 files/fr/web/css/overflow-block/index.md delete mode 100644 files/fr/web/css/overflow-inline/index.html create mode 100644 files/fr/web/css/overflow-inline/index.md delete mode 100644 files/fr/web/css/overflow-wrap/index.html create mode 100644 files/fr/web/css/overflow-wrap/index.md delete mode 100644 files/fr/web/css/overflow-x/index.html create mode 100644 files/fr/web/css/overflow-x/index.md delete mode 100644 files/fr/web/css/overflow-y/index.html create mode 100644 files/fr/web/css/overflow-y/index.md delete mode 100644 files/fr/web/css/overflow/index.html create mode 100644 files/fr/web/css/overflow/index.md delete mode 100644 files/fr/web/css/overscroll-behavior-x/index.html create mode 100644 files/fr/web/css/overscroll-behavior-x/index.md delete mode 100644 files/fr/web/css/overscroll-behavior-y/index.html create mode 100644 files/fr/web/css/overscroll-behavior-y/index.md delete mode 100644 files/fr/web/css/overscroll-behavior/index.html create mode 100644 files/fr/web/css/overscroll-behavior/index.md delete mode 100644 files/fr/web/css/padding-block-end/index.html create mode 100644 files/fr/web/css/padding-block-end/index.md delete mode 100644 files/fr/web/css/padding-block-start/index.html create mode 100644 files/fr/web/css/padding-block-start/index.md delete mode 100644 files/fr/web/css/padding-block/index.html create mode 100644 files/fr/web/css/padding-block/index.md delete mode 100644 files/fr/web/css/padding-bottom/index.html create mode 100644 files/fr/web/css/padding-bottom/index.md delete mode 100644 files/fr/web/css/padding-inline-end/index.html create mode 100644 files/fr/web/css/padding-inline-end/index.md delete mode 100644 files/fr/web/css/padding-inline-start/index.html create mode 100644 files/fr/web/css/padding-inline-start/index.md delete mode 100644 files/fr/web/css/padding-inline/index.html create mode 100644 files/fr/web/css/padding-inline/index.md delete mode 100644 files/fr/web/css/padding-left/index.html create mode 100644 files/fr/web/css/padding-left/index.md delete mode 100644 files/fr/web/css/padding-right/index.html create mode 100644 files/fr/web/css/padding-right/index.md delete mode 100644 files/fr/web/css/padding-top/index.html create mode 100644 files/fr/web/css/padding-top/index.md delete mode 100644 files/fr/web/css/padding/index.html create mode 100644 files/fr/web/css/padding/index.md delete mode 100644 files/fr/web/css/page-break-after/index.html create mode 100644 files/fr/web/css/page-break-after/index.md delete mode 100644 files/fr/web/css/page-break-before/index.html create mode 100644 files/fr/web/css/page-break-before/index.md delete mode 100644 files/fr/web/css/page-break-inside/index.html create mode 100644 files/fr/web/css/page-break-inside/index.md delete mode 100644 files/fr/web/css/paged_media/index.html create mode 100644 files/fr/web/css/paged_media/index.md delete mode 100644 files/fr/web/css/paint-order/index.html create mode 100644 files/fr/web/css/paint-order/index.md delete mode 100644 files/fr/web/css/path()/index.html create mode 100644 files/fr/web/css/path()/index.md delete mode 100644 files/fr/web/css/percentage/index.html create mode 100644 files/fr/web/css/percentage/index.md delete mode 100644 files/fr/web/css/perspective-origin/index.html create mode 100644 files/fr/web/css/perspective-origin/index.md delete mode 100644 files/fr/web/css/perspective/index.html create mode 100644 files/fr/web/css/perspective/index.md delete mode 100644 files/fr/web/css/place-content/index.html create mode 100644 files/fr/web/css/place-content/index.md delete mode 100644 files/fr/web/css/place-items/index.html create mode 100644 files/fr/web/css/place-items/index.md delete mode 100644 files/fr/web/css/place-self/index.html create mode 100644 files/fr/web/css/place-self/index.md delete mode 100644 files/fr/web/css/pointer-events/index.html create mode 100644 files/fr/web/css/pointer-events/index.md delete mode 100644 files/fr/web/css/position/index.html create mode 100644 files/fr/web/css/position/index.md delete mode 100644 files/fr/web/css/position_value/index.html create mode 100644 files/fr/web/css/position_value/index.md delete mode 100644 files/fr/web/css/privacy_and_the__colon_visited_selector/index.html create mode 100644 files/fr/web/css/privacy_and_the__colon_visited_selector/index.md delete mode 100644 files/fr/web/css/pseudo-classes/index.html create mode 100644 files/fr/web/css/pseudo-classes/index.md delete mode 100644 files/fr/web/css/pseudo-elements/index.html create mode 100644 files/fr/web/css/pseudo-elements/index.md delete mode 100644 files/fr/web/css/quotes/index.html create mode 100644 files/fr/web/css/quotes/index.md delete mode 100644 files/fr/web/css/ratio/index.html create mode 100644 files/fr/web/css/ratio/index.md delete mode 100644 files/fr/web/css/reference/index.html create mode 100644 files/fr/web/css/reference/index.md delete mode 100644 files/fr/web/css/repeat()/index.html create mode 100644 files/fr/web/css/repeat()/index.md delete mode 100644 files/fr/web/css/replaced_element/index.html create mode 100644 files/fr/web/css/replaced_element/index.md delete mode 100644 files/fr/web/css/resize/index.html create mode 100644 files/fr/web/css/resize/index.md delete mode 100644 files/fr/web/css/resolution/index.html create mode 100644 files/fr/web/css/resolution/index.md delete mode 100644 files/fr/web/css/resolved_value/index.html create mode 100644 files/fr/web/css/resolved_value/index.md delete mode 100644 files/fr/web/css/revert/index.html create mode 100644 files/fr/web/css/revert/index.md delete mode 100644 files/fr/web/css/right/index.html create mode 100644 files/fr/web/css/right/index.md delete mode 100644 files/fr/web/css/rotate/index.html create mode 100644 files/fr/web/css/rotate/index.md delete mode 100644 files/fr/web/css/row-gap/index.html create mode 100644 files/fr/web/css/row-gap/index.md delete mode 100644 files/fr/web/css/ruby-align/index.html create mode 100644 files/fr/web/css/ruby-align/index.md delete mode 100644 files/fr/web/css/ruby-position/index.html create mode 100644 files/fr/web/css/ruby-position/index.md delete mode 100644 files/fr/web/css/scale/index.html create mode 100644 files/fr/web/css/scale/index.md delete mode 100644 files/fr/web/css/scaling_of_svg_backgrounds/index.html create mode 100644 files/fr/web/css/scaling_of_svg_backgrounds/index.md delete mode 100644 files/fr/web/css/scroll-behavior/index.html create mode 100644 files/fr/web/css/scroll-behavior/index.md delete mode 100644 files/fr/web/css/scroll-margin-block-end/index.html create mode 100644 files/fr/web/css/scroll-margin-block-end/index.md delete mode 100644 files/fr/web/css/scroll-margin-block-start/index.html create mode 100644 files/fr/web/css/scroll-margin-block-start/index.md delete mode 100644 files/fr/web/css/scroll-margin-block/index.html create mode 100644 files/fr/web/css/scroll-margin-block/index.md delete mode 100644 files/fr/web/css/scroll-margin-bottom/index.html create mode 100644 files/fr/web/css/scroll-margin-bottom/index.md delete mode 100644 files/fr/web/css/scroll-margin-inline-end/index.html create mode 100644 files/fr/web/css/scroll-margin-inline-end/index.md delete mode 100644 files/fr/web/css/scroll-margin-inline-start/index.html create mode 100644 files/fr/web/css/scroll-margin-inline-start/index.md delete mode 100644 files/fr/web/css/scroll-margin-inline/index.html create mode 100644 files/fr/web/css/scroll-margin-inline/index.md delete mode 100644 files/fr/web/css/scroll-margin-left/index.html create mode 100644 files/fr/web/css/scroll-margin-left/index.md delete mode 100644 files/fr/web/css/scroll-margin-right/index.html create mode 100644 files/fr/web/css/scroll-margin-right/index.md delete mode 100644 files/fr/web/css/scroll-margin-top/index.html create mode 100644 files/fr/web/css/scroll-margin-top/index.md delete mode 100644 files/fr/web/css/scroll-margin/index.html create mode 100644 files/fr/web/css/scroll-margin/index.md delete mode 100644 files/fr/web/css/scroll-padding-block-end/index.html create mode 100644 files/fr/web/css/scroll-padding-block-end/index.md delete mode 100644 files/fr/web/css/scroll-padding-block-start/index.html create mode 100644 files/fr/web/css/scroll-padding-block-start/index.md delete mode 100644 files/fr/web/css/scroll-padding-block/index.html create mode 100644 files/fr/web/css/scroll-padding-block/index.md delete mode 100644 files/fr/web/css/scroll-padding-bottom/index.html create mode 100644 files/fr/web/css/scroll-padding-bottom/index.md delete mode 100644 files/fr/web/css/scroll-padding-inline-end/index.html create mode 100644 files/fr/web/css/scroll-padding-inline-end/index.md delete mode 100644 files/fr/web/css/scroll-padding-inline-start/index.html create mode 100644 files/fr/web/css/scroll-padding-inline-start/index.md delete mode 100644 files/fr/web/css/scroll-padding-inline/index.html create mode 100644 files/fr/web/css/scroll-padding-inline/index.md delete mode 100644 files/fr/web/css/scroll-padding-left/index.html create mode 100644 files/fr/web/css/scroll-padding-left/index.md delete mode 100644 files/fr/web/css/scroll-padding-right/index.html create mode 100644 files/fr/web/css/scroll-padding-right/index.md delete mode 100644 files/fr/web/css/scroll-padding-top/index.html create mode 100644 files/fr/web/css/scroll-padding-top/index.md delete mode 100644 files/fr/web/css/scroll-padding/index.html create mode 100644 files/fr/web/css/scroll-padding/index.md delete mode 100644 files/fr/web/css/scroll-snap-align/index.html create mode 100644 files/fr/web/css/scroll-snap-align/index.md delete mode 100644 files/fr/web/css/scroll-snap-coordinate/index.html create mode 100644 files/fr/web/css/scroll-snap-coordinate/index.md delete mode 100644 files/fr/web/css/scroll-snap-destination/index.html create mode 100644 files/fr/web/css/scroll-snap-destination/index.md delete mode 100644 files/fr/web/css/scroll-snap-points-x/index.html create mode 100644 files/fr/web/css/scroll-snap-points-x/index.md delete mode 100644 files/fr/web/css/scroll-snap-points-y/index.html create mode 100644 files/fr/web/css/scroll-snap-points-y/index.md delete mode 100644 files/fr/web/css/scroll-snap-stop/index.html create mode 100644 files/fr/web/css/scroll-snap-stop/index.md delete mode 100644 files/fr/web/css/scroll-snap-type-x/index.html create mode 100644 files/fr/web/css/scroll-snap-type-x/index.md delete mode 100644 files/fr/web/css/scroll-snap-type-y/index.html create mode 100644 files/fr/web/css/scroll-snap-type-y/index.md delete mode 100644 files/fr/web/css/scroll-snap-type/index.html create mode 100644 files/fr/web/css/scroll-snap-type/index.md delete mode 100644 files/fr/web/css/scrollbar-color/index.html create mode 100644 files/fr/web/css/scrollbar-color/index.md delete mode 100644 files/fr/web/css/scrollbar-width/index.html create mode 100644 files/fr/web/css/scrollbar-width/index.md delete mode 100644 files/fr/web/css/selector_list/index.html create mode 100644 files/fr/web/css/selector_list/index.md delete mode 100644 files/fr/web/css/shape-image-threshold/index.html create mode 100644 files/fr/web/css/shape-image-threshold/index.md delete mode 100644 files/fr/web/css/shape-margin/index.html create mode 100644 files/fr/web/css/shape-margin/index.md delete mode 100644 files/fr/web/css/shape-outside/index.html create mode 100644 files/fr/web/css/shape-outside/index.md delete mode 100644 files/fr/web/css/shape/index.html create mode 100644 files/fr/web/css/shape/index.md delete mode 100644 files/fr/web/css/shorthand_properties/index.html create mode 100644 files/fr/web/css/shorthand_properties/index.md delete mode 100644 files/fr/web/css/specified_value/index.html create mode 100644 files/fr/web/css/specified_value/index.md delete mode 100644 files/fr/web/css/string/index.html create mode 100644 files/fr/web/css/string/index.md delete mode 100644 files/fr/web/css/symbols()/index.html create mode 100644 files/fr/web/css/symbols()/index.md delete mode 100644 files/fr/web/css/tab-size/index.html create mode 100644 files/fr/web/css/tab-size/index.md delete mode 100644 files/fr/web/css/table-layout/index.html create mode 100644 files/fr/web/css/table-layout/index.md delete mode 100644 files/fr/web/css/text-align-last/index.html create mode 100644 files/fr/web/css/text-align-last/index.md delete mode 100644 files/fr/web/css/text-align/index.html create mode 100644 files/fr/web/css/text-align/index.md delete mode 100644 files/fr/web/css/text-combine-upright/index.html create mode 100644 files/fr/web/css/text-combine-upright/index.md delete mode 100644 files/fr/web/css/text-decoration-color/index.html create mode 100644 files/fr/web/css/text-decoration-color/index.md delete mode 100644 files/fr/web/css/text-decoration-line/index.html create mode 100644 files/fr/web/css/text-decoration-line/index.md delete mode 100644 files/fr/web/css/text-decoration-skip-ink/index.html create mode 100644 files/fr/web/css/text-decoration-skip-ink/index.md delete mode 100644 files/fr/web/css/text-decoration-skip/index.html create mode 100644 files/fr/web/css/text-decoration-skip/index.md delete mode 100644 files/fr/web/css/text-decoration-style/index.html create mode 100644 files/fr/web/css/text-decoration-style/index.md delete mode 100644 files/fr/web/css/text-decoration-thickness/index.html create mode 100644 files/fr/web/css/text-decoration-thickness/index.md delete mode 100644 files/fr/web/css/text-decoration/index.html create mode 100644 files/fr/web/css/text-decoration/index.md delete mode 100644 files/fr/web/css/text-emphasis-color/index.html create mode 100644 files/fr/web/css/text-emphasis-color/index.md delete mode 100644 files/fr/web/css/text-emphasis-position/index.html create mode 100644 files/fr/web/css/text-emphasis-position/index.md delete mode 100644 files/fr/web/css/text-emphasis-style/index.html create mode 100644 files/fr/web/css/text-emphasis-style/index.md delete mode 100644 files/fr/web/css/text-emphasis/index.html create mode 100644 files/fr/web/css/text-emphasis/index.md delete mode 100644 files/fr/web/css/text-indent/index.html create mode 100644 files/fr/web/css/text-indent/index.md delete mode 100644 files/fr/web/css/text-justify/index.html create mode 100644 files/fr/web/css/text-justify/index.md delete mode 100644 files/fr/web/css/text-orientation/index.html create mode 100644 files/fr/web/css/text-orientation/index.md delete mode 100644 files/fr/web/css/text-overflow/index.html create mode 100644 files/fr/web/css/text-overflow/index.md delete mode 100644 files/fr/web/css/text-rendering/index.html create mode 100644 files/fr/web/css/text-rendering/index.md delete mode 100644 files/fr/web/css/text-shadow/index.html create mode 100644 files/fr/web/css/text-shadow/index.md delete mode 100644 files/fr/web/css/text-size-adjust/index.html create mode 100644 files/fr/web/css/text-size-adjust/index.md delete mode 100644 files/fr/web/css/text-transform/index.html create mode 100644 files/fr/web/css/text-transform/index.md delete mode 100644 files/fr/web/css/text-underline-offset/index.html create mode 100644 files/fr/web/css/text-underline-offset/index.md delete mode 100644 files/fr/web/css/text-underline-position/index.html create mode 100644 files/fr/web/css/text-underline-position/index.md delete mode 100644 files/fr/web/css/time-percentage/index.html create mode 100644 files/fr/web/css/time-percentage/index.md delete mode 100644 files/fr/web/css/time/index.html create mode 100644 files/fr/web/css/time/index.md delete mode 100644 files/fr/web/css/tools/linear-gradient_generator/index.html create mode 100644 files/fr/web/css/tools/linear-gradient_generator/index.md delete mode 100644 files/fr/web/css/top/index.html create mode 100644 files/fr/web/css/top/index.md delete mode 100644 files/fr/web/css/touch-action/index.html create mode 100644 files/fr/web/css/touch-action/index.md delete mode 100644 files/fr/web/css/transform-box/index.html create mode 100644 files/fr/web/css/transform-box/index.md delete mode 100644 files/fr/web/css/transform-function/index.html create mode 100644 files/fr/web/css/transform-function/index.md delete mode 100644 files/fr/web/css/transform-function/matrix()/index.html create mode 100644 files/fr/web/css/transform-function/matrix()/index.md delete mode 100644 files/fr/web/css/transform-function/matrix3d()/index.html create mode 100644 files/fr/web/css/transform-function/matrix3d()/index.md delete mode 100644 files/fr/web/css/transform-function/perspective()/index.html create mode 100644 files/fr/web/css/transform-function/perspective()/index.md delete mode 100644 files/fr/web/css/transform-function/rotate()/index.html create mode 100644 files/fr/web/css/transform-function/rotate()/index.md delete mode 100644 files/fr/web/css/transform-function/rotate3d()/index.html create mode 100644 files/fr/web/css/transform-function/rotate3d()/index.md delete mode 100644 files/fr/web/css/transform-function/rotatex()/index.html create mode 100644 files/fr/web/css/transform-function/rotatex()/index.md delete mode 100644 files/fr/web/css/transform-function/rotatey()/index.html create mode 100644 files/fr/web/css/transform-function/rotatey()/index.md delete mode 100644 files/fr/web/css/transform-function/rotatez()/index.html create mode 100644 files/fr/web/css/transform-function/rotatez()/index.md delete mode 100644 files/fr/web/css/transform-function/scale()/index.html create mode 100644 files/fr/web/css/transform-function/scale()/index.md delete mode 100644 files/fr/web/css/transform-function/scale3d()/index.html create mode 100644 files/fr/web/css/transform-function/scale3d()/index.md delete mode 100644 files/fr/web/css/transform-function/scalex()/index.html create mode 100644 files/fr/web/css/transform-function/scalex()/index.md delete mode 100644 files/fr/web/css/transform-function/scaley()/index.html create mode 100644 files/fr/web/css/transform-function/scaley()/index.md delete mode 100644 files/fr/web/css/transform-function/scalez()/index.html create mode 100644 files/fr/web/css/transform-function/scalez()/index.md delete mode 100644 files/fr/web/css/transform-function/skew()/index.html create mode 100644 files/fr/web/css/transform-function/skew()/index.md delete mode 100644 files/fr/web/css/transform-function/skewx()/index.html create mode 100644 files/fr/web/css/transform-function/skewx()/index.md delete mode 100644 files/fr/web/css/transform-function/skewy()/index.html create mode 100644 files/fr/web/css/transform-function/skewy()/index.md delete mode 100644 files/fr/web/css/transform-function/translate()/index.html create mode 100644 files/fr/web/css/transform-function/translate()/index.md delete mode 100644 files/fr/web/css/transform-function/translate3d()/index.html create mode 100644 files/fr/web/css/transform-function/translate3d()/index.md delete mode 100644 files/fr/web/css/transform-function/translatey()/index.html create mode 100644 files/fr/web/css/transform-function/translatey()/index.md delete mode 100644 files/fr/web/css/transform-function/translatez()/index.html create mode 100644 files/fr/web/css/transform-function/translatez()/index.md delete mode 100644 files/fr/web/css/transform-origin/index.html create mode 100644 files/fr/web/css/transform-origin/index.md delete mode 100644 files/fr/web/css/transform-style/index.html create mode 100644 files/fr/web/css/transform-style/index.md delete mode 100644 files/fr/web/css/transform/index.html create mode 100644 files/fr/web/css/transform/index.md delete mode 100644 files/fr/web/css/transition-delay/index.html create mode 100644 files/fr/web/css/transition-delay/index.md delete mode 100644 files/fr/web/css/transition-duration/index.html create mode 100644 files/fr/web/css/transition-duration/index.md delete mode 100644 files/fr/web/css/transition-property/index.html create mode 100644 files/fr/web/css/transition-property/index.md delete mode 100644 files/fr/web/css/transition-timing-function/index.html create mode 100644 files/fr/web/css/transition-timing-function/index.md delete mode 100644 files/fr/web/css/transition/index.html create mode 100644 files/fr/web/css/transition/index.md delete mode 100644 files/fr/web/css/translate/index.html create mode 100644 files/fr/web/css/translate/index.md delete mode 100644 files/fr/web/css/translation-value/index.html create mode 100644 files/fr/web/css/translation-value/index.md delete mode 100644 files/fr/web/css/tutorials/index.html create mode 100644 files/fr/web/css/tutorials/index.md delete mode 100644 files/fr/web/css/type_selectors/index.html create mode 100644 files/fr/web/css/type_selectors/index.md delete mode 100644 files/fr/web/css/unicode-bidi/index.html create mode 100644 files/fr/web/css/unicode-bidi/index.md delete mode 100644 files/fr/web/css/universal_selectors/index.html create mode 100644 files/fr/web/css/universal_selectors/index.md delete mode 100644 files/fr/web/css/unset/index.html create mode 100644 files/fr/web/css/unset/index.md delete mode 100644 files/fr/web/css/url()/index.html create mode 100644 files/fr/web/css/url()/index.md delete mode 100644 files/fr/web/css/used_value/index.html create mode 100644 files/fr/web/css/used_value/index.md delete mode 100644 files/fr/web/css/user-modify/index.html create mode 100644 files/fr/web/css/user-modify/index.md delete mode 100644 files/fr/web/css/user-select/index.html create mode 100644 files/fr/web/css/user-select/index.md delete mode 100644 files/fr/web/css/using_css_custom_properties/index.html create mode 100644 files/fr/web/css/using_css_custom_properties/index.md delete mode 100644 files/fr/web/css/value_definition_syntax/index.html create mode 100644 files/fr/web/css/value_definition_syntax/index.md delete mode 100644 files/fr/web/css/var()/index.html create mode 100644 files/fr/web/css/var()/index.md delete mode 100644 files/fr/web/css/vertical-align/index.html create mode 100644 files/fr/web/css/vertical-align/index.md delete mode 100644 files/fr/web/css/viewport_concepts/index.html create mode 100644 files/fr/web/css/viewport_concepts/index.md delete mode 100644 files/fr/web/css/visibility/index.html create mode 100644 files/fr/web/css/visibility/index.md delete mode 100644 files/fr/web/css/visual_formatting_model/index.html create mode 100644 files/fr/web/css/visual_formatting_model/index.md delete mode 100644 files/fr/web/css/webkit_extensions/index.html create mode 100644 files/fr/web/css/webkit_extensions/index.md delete mode 100644 files/fr/web/css/white-space/index.html create mode 100644 files/fr/web/css/white-space/index.md delete mode 100644 files/fr/web/css/widows/index.html create mode 100644 files/fr/web/css/widows/index.md delete mode 100644 files/fr/web/css/width/index.html create mode 100644 files/fr/web/css/width/index.md delete mode 100644 files/fr/web/css/will-change/index.html create mode 100644 files/fr/web/css/will-change/index.md delete mode 100644 files/fr/web/css/word-break/index.html create mode 100644 files/fr/web/css/word-break/index.md delete mode 100644 files/fr/web/css/word-spacing/index.html create mode 100644 files/fr/web/css/word-spacing/index.md delete mode 100644 files/fr/web/css/writing-mode/index.html create mode 100644 files/fr/web/css/writing-mode/index.md delete mode 100644 files/fr/web/css/z-index/index.html create mode 100644 files/fr/web/css/z-index/index.md delete mode 100644 files/fr/web/css/zoom/index.html create mode 100644 files/fr/web/css/zoom/index.md (limited to 'files/fr/web/css') diff --git a/files/fr/web/css/--_star_/index.html b/files/fr/web/css/--_star_/index.html deleted file mode 100644 index 456b7022d5..0000000000 --- a/files/fr/web/css/--_star_/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Propriétés personnalisées (--*) -slug: Web/CSS/--* -tags: - - CSS - - Experimental - - Reference - - Variables - - Variables CSS -translation_of: Web/CSS/--* ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Les noms des propriétés qui sont préfixés par deux tirets : -- (par exemple : --nom-exemple) représentent des propriétés personnalisées (custom properties) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction {{cssxref("var")}}.

- -

La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d'une propriété personnalisée sera déterminée par l'algorithme de la cascade.

- -

{{cssinfo}}

- -

Syntaxe

- -
--unmotcle: left;
---unecouleur: #0000ff;
---unevaleurcomplexe: 3px 6px rgb(20, 32, 54);
-
- -
-
<declaration-value>
-
Cette valeur correspond à une séquence de un ou plusieurs fragments tant que la séquence ne contient pas de fragments interdits. Elle représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<p id="premierParagraphe">Ce paragraphe devrait être sur fond bleu avec un texte jaune.</p>
-<p id="secondParagraphe">Ce paragraphe devrait être sur fond jaune avec un texte bleu.</p>
- -

CSS

- -
:root {
-  --premiere-couleur: #488cff;
-  --seconde-couleur: #ffff8c;
-}
-
-#premierParagraphe {
-  background-color: var(--premiere-couleur);
-  color: var(--seconde-couleur);
-}
-
-#secondParagraphe {
-  background-color: var(--seconde-couleur);
-  color: var(--premiere-couleur);
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 500, 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}{{Spec2("CSS3 Variables")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.custom-property")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/--_star_/index.md b/files/fr/web/css/--_star_/index.md new file mode 100644 index 0000000000..456b7022d5 --- /dev/null +++ b/files/fr/web/css/--_star_/index.md @@ -0,0 +1,91 @@ +--- +title: Propriétés personnalisées (--*) +slug: Web/CSS/--* +tags: + - CSS + - Experimental + - Reference + - Variables + - Variables CSS +translation_of: Web/CSS/--* +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Les noms des propriétés qui sont préfixés par deux tirets : -- (par exemple : --nom-exemple) représentent des propriétés personnalisées (custom properties) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction {{cssxref("var")}}.

+ +

La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d'une propriété personnalisée sera déterminée par l'algorithme de la cascade.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
--unmotcle: left;
+--unecouleur: #0000ff;
+--unevaleurcomplexe: 3px 6px rgb(20, 32, 54);
+
+ +
+
<declaration-value>
+
Cette valeur correspond à une séquence de un ou plusieurs fragments tant que la séquence ne contient pas de fragments interdits. Elle représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<p id="premierParagraphe">Ce paragraphe devrait être sur fond bleu avec un texte jaune.</p>
+<p id="secondParagraphe">Ce paragraphe devrait être sur fond jaune avec un texte bleu.</p>
+ +

CSS

+ +
:root {
+  --premiere-couleur: #488cff;
+  --seconde-couleur: #ffff8c;
+}
+
+#premierParagraphe {
+  background-color: var(--premiere-couleur);
+  color: var(--seconde-couleur);
+}
+
+#secondParagraphe {
+  background-color: var(--seconde-couleur);
+  color: var(--premiere-couleur);
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 500, 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}{{Spec2("CSS3 Variables")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.custom-property")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-context-properties/index.html b/files/fr/web/css/-moz-context-properties/index.html deleted file mode 100644 index c7cf7e321f..0000000000 --- a/files/fr/web/css/-moz-context-properties/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: '-moz-context-properties' -slug: Web/CSS/-moz-context-properties -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-context-properties ---- -
{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}
- -

Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément <img> à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété -moz-context-properties.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
--moz-context-properties: fill;
--moz-context-properties: fill, stroke;
-
-/* Valeurs globales */
--moz-context-properties: inherit;
--moz-context-properties: initial;
--moz-context-properties: unset;
-
- -

Valeurs

- -
-
fill
-
Expose la valeur fill appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
-
stroke
-
Expose la valeur stroke appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
-
fill-opacity
-
Expose la valeur fill-opacity appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
-
stroke-opacity
-
Expose la valeur stroke-opacity appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dans cet exemple, on embarque un SVG simple dans un élément <img>.

- -

Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :

- -
img {
-  width: 100px;
-  height: 100px;
-  -moz-context-properties: fill, stroke;
-}
-
-.img1 {
-    fill: lime;
-    stroke: purple;
-}
- -

Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :

- -
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
-                       <rect width='100%' height='100%' stroke-width='30px'
-                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
- -

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.

-
- -

Spécifications

- -

Cette propriété n'est définie dans aucun standard CSS.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-moz-context-properties")}}

diff --git a/files/fr/web/css/-moz-context-properties/index.md b/files/fr/web/css/-moz-context-properties/index.md new file mode 100644 index 0000000000..c7cf7e321f --- /dev/null +++ b/files/fr/web/css/-moz-context-properties/index.md @@ -0,0 +1,81 @@ +--- +title: '-moz-context-properties' +slug: Web/CSS/-moz-context-properties +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-context-properties +--- +
{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}
+ +

Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément <img> à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété -moz-context-properties.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* Valeurs globales */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+
+ +

Valeurs

+ +
+
fill
+
Expose la valeur fill appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+
stroke
+
Expose la valeur stroke appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+
fill-opacity
+
Expose la valeur fill-opacity appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+
stroke-opacity
+
Expose la valeur stroke-opacity appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dans cet exemple, on embarque un SVG simple dans un élément <img>.

+ +

Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :

+ +
img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+}
+
+.img1 {
+    fill: lime;
+    stroke: purple;
+}
+ +

Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :

+ +
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                       <rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+ +

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.

+
+ +

Spécifications

+ +

Cette propriété n'est définie dans aucun standard CSS.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-moz-context-properties")}}

diff --git a/files/fr/web/css/-moz-float-edge/index.html b/files/fr/web/css/-moz-float-edge/index.html deleted file mode 100644 index a81710c8d9..0000000000 --- a/files/fr/web/css/-moz-float-edge/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '-moz-float-edge' -slug: Web/CSS/-moz-float-edge -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-float-edge ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -moz-float-edge définit si les propriétés de hauteur et de larguer d'un élément incluent la marge, la bordure et/ou le remplissage (padding).

- -
/* Valeurs avec un mot-clé */
--moz-float-edge: border-box;
--moz-float-edge: content-box;
--moz-float-edge: margin-box;
--moz-float-edge: padding-box;
-
-/* Valeurs globales */
--moz-float-edge: inherit;
--moz-float-edge: initial;
--moz-float-edge: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
border-box
-
Les propriétés de hauteur et de largeur incluent le contenu, le remplissage et la bordure mais pas la marge.
-
content-box
-
Les propriétés de hauteur et de largeur incluent le contenu, mais pas le remplissage, la bordure et la marge.
-
margin-box
-
Les propriétés de hauteur et de largeur incluent le contenu, le remplissage, la bordure et la marge.
-
padding-box
-
Les propriétés de hauteur et de largeur incluent le contenu et le remplissage mais pas la bordure ni la marge.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.box {
-  display: block;
-  height: 5px;
-  margin: 0.5em auto 0.5em auto;
-  color: gray;
-  -moz-float-edge: margin-box;
-  box-sizing: border-box;
-}
- -

HTML

- -
<div class="box">
-   <p>
-      Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit.
-   </p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-float-edge/index.md b/files/fr/web/css/-moz-float-edge/index.md new file mode 100644 index 0000000000..a81710c8d9 --- /dev/null +++ b/files/fr/web/css/-moz-float-edge/index.md @@ -0,0 +1,82 @@ +--- +title: '-moz-float-edge' +slug: Web/CSS/-moz-float-edge +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-float-edge +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -moz-float-edge définit si les propriétés de hauteur et de larguer d'un élément incluent la marge, la bordure et/ou le remplissage (padding).

+ +
/* Valeurs avec un mot-clé */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Valeurs globales */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
border-box
+
Les propriétés de hauteur et de largeur incluent le contenu, le remplissage et la bordure mais pas la marge.
+
content-box
+
Les propriétés de hauteur et de largeur incluent le contenu, mais pas le remplissage, la bordure et la marge.
+
margin-box
+
Les propriétés de hauteur et de largeur incluent le contenu, le remplissage, la bordure et la marge.
+
padding-box
+
Les propriétés de hauteur et de largeur incluent le contenu et le remplissage mais pas la bordure ni la marge.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.box {
+  display: block;
+  height: 5px;
+  margin: 0.5em auto 0.5em auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+}
+ +

HTML

+ +
<div class="box">
+   <p>
+      Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
+   </p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Voir aussi

+ + 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 deleted file mode 100644 index 58e1ca993b..0000000000 --- a/files/fr/web/css/-moz-force-broken-image-icon/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: '-moz-force-broken-image-icon' -slug: Web/CSS/-moz-force-broken-image-icon -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-force-broken-image-icon ---- -
{{Non-standard_header}}{{ CSSRef}}
- -

La propriété -moz-force-broken-image-icon est une propriété CSS non-standard. Lorsqu'elle vaut 1, elle permet de forcer l'affichage d'une icône d'image brisée même si l'image possède un attribut {{HTMLElement("img","alt","#attr-alt")}}. Lorsqu'elle vaut 0, l'image est utilisée de façon normale et n'affichera que l'attribut alt.

- -

Syntaxe

- -

Valeurs

- -
-
{{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.

-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
img {
-  -moz-force-broken-image-icon: 1;
-  height: 100px;
-  width: 100px;
-}
- -

HTML

- -
<img src='/lien/vers/image/cassée.png' alt='Un lien vers une image cassée'>
- -

Résultat

- -

{{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é.

-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Notes

- - - -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.md b/files/fr/web/css/-moz-force-broken-image-icon/index.md new file mode 100644 index 0000000000..58e1ca993b --- /dev/null +++ b/files/fr/web/css/-moz-force-broken-image-icon/index.md @@ -0,0 +1,70 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +
{{Non-standard_header}}{{ CSSRef}}
+ +

La propriété -moz-force-broken-image-icon est une propriété CSS non-standard. Lorsqu'elle vaut 1, elle permet de forcer l'affichage d'une icône d'image brisée même si l'image possède un attribut {{HTMLElement("img","alt","#attr-alt")}}. Lorsqu'elle vaut 0, l'image est utilisée de façon normale et n'affichera que l'attribut alt.

+ +

Syntaxe

+ +

Valeurs

+ +
+
{{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.

+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
img {
+  -moz-force-broken-image-icon: 1;
+  height: 100px;
+  width: 100px;
+}
+ +

HTML

+ +
<img src='/lien/vers/image/cassée.png' alt='Un lien vers une image cassée'>
+ +

Résultat

+ +

{{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é.

+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-image-rect/index.html b/files/fr/web/css/-moz-image-rect/index.html deleted file mode 100644 index 45b4ec33bf..0000000000 --- a/files/fr/web/css/-moz-image-rect/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: '-moz-image-rect' -slug: Web/CSS/-moz-image-rect -tags: - - CSS - - Fonction - - Non-standard - - Reference -translation_of: Web/CSS/-moz-image-rect ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La propriété -moz-image-rect permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs sprites à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.

- -

Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à -moz-image-rect, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.

- -

La syntaxe de cette propriété est similaire à la fonction rect() qui génère une valeur de type {{cssxref("<shape>")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.

- -

Syntaxe

- -
-moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left);
- -

Valeurs

- -
-
{{cssxref("<uri>")}}
-
L'URI de l'image dont on veut obtenir une portion.
-
top
-
La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
-
right
-
La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
-
bottom
-
La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
-
left
-
La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.

- -

CSS

- -
#container {
-  width:267px;
-  height:272px;
-  top:100px;
-  left:100px;
-  position:absolute;
-  font-size:16px;
-  text-shadow:white 0px 0px 6px;
-  text-align:center;
-}
-
-#box1 {
-  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
-  width:133px;
-  height:136px;
-  position:absolute;
-}
-
-#box2 {
-  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
-  width:133px;
-  height:136px;
-  position:absolute;
-}
-
-#box3 {
-  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
-  width:133px;
-  height:136px;
-  position:absolute;
-}
-
-#box4 {
-  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
-  width:133px;
-  height:136px;
-  position:absolute;
-}
-
- -

HTML

- -
<div id="container" onclick="rotate()">
-  <div id="box1" style="left:0px;top:0px;">Top left</div>
-  <div id="box2" style="left:133px;top:0px;">Top right</div>
-  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
-  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
-</div>
-
- -

JavaScript

- -
function rotate() {
-  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
-
-  // Now that we've saved the last one, start rotating
-
-  for (var i=1; i<=4; i++) {
-    var curId = "box" + i;
-
-    // Shift the background images
-
-    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
-    document.getElementById(curId).style.backgroundImage = prevStyle;
-    prevStyle = curStyle;
-  }
-}
- -

Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité.

- -

Résultat

- -

{{EmbedLiveSample("Exemples","400","400")}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.types.-moz-image-rect")}}

diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md new file mode 100644 index 0000000000..45b4ec33bf --- /dev/null +++ b/files/fr/web/css/-moz-image-rect/index.md @@ -0,0 +1,124 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +tags: + - CSS + - Fonction + - Non-standard + - Reference +translation_of: Web/CSS/-moz-image-rect +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La propriété -moz-image-rect permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs sprites à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.

+ +

Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à -moz-image-rect, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.

+ +

La syntaxe de cette propriété est similaire à la fonction rect() qui génère une valeur de type {{cssxref("<shape>")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.

+ +

Syntaxe

+ +
-moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left);
+ +

Valeurs

+ +
+
{{cssxref("<uri>")}}
+
L'URI de l'image dont on veut obtenir une portion.
+
top
+
La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
+
right
+
La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
+
bottom
+
La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
+
left
+
La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.

+ +

CSS

+ +
#container {
+  width:267px;
+  height:272px;
+  top:100px;
+  left:100px;
+  position:absolute;
+  font-size:16px;
+  text-shadow:white 0px 0px 6px;
+  text-align:center;
+}
+
+#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

HTML

+ +
<div id="container" onclick="rotate()">
+  <div id="box1" style="left:0px;top:0px;">Top left</div>
+  <div id="box2" style="left:133px;top:0px;">Top right</div>
+  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
+  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
+</div>
+
+ +

JavaScript

+ +
function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Now that we've saved the last one, start rotating
+
+  for (var i=1; i<=4; i++) {
+    var curId = "box" + i;
+
+    // Shift the background images
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}
+ +

Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité.

+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","400","400")}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.-moz-image-rect")}}

diff --git a/files/fr/web/css/-moz-image-region/index.html b/files/fr/web/css/-moz-image-region/index.html deleted file mode 100644 index b63d4192c2..0000000000 --- a/files/fr/web/css/-moz-image-region/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: '-moz-image-region' -slug: Web/CSS/-moz-image-region -tags: - - CSS - - Non-standard - - Propriété - - Référence(2) -translation_of: Web/CSS/-moz-image-region ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété {{cssxref("list-style-image")}}, la propriété -moz-image-region définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des sprites afin d'améliorer les performances.

- -
/* Valeur avec un mot-clé */
--moz-image-region: auto;
-
-/* Valeur de type <shape> */
--moz-image-region: rect(0, 8px, 4px, 4px);
-
-/* Valeurs globales */
--moz-image-region: inherit;
--moz-image-region: initial;
--moz-image-region: unset;
- -

La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.

- -
-

Note : Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.

-
- -

Syntaxe

- -

Valeurs

- -
-
auto
-
La région pour l'image est définie automatiquement
-
<shape>
-
Une forme définit la portion d'image qui doit être utilisée. La fonction rect() permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir {{cssxref("<shape>")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
#example-button {
-  /* display only the 4x4 area from the top left of this image */
-  list-style-image: url("chrome://example/skin/example.png");
-  -moz-image-region: rect(0px, 4px, 4px, 0px);
-}
-#example-button:hover {
-  /* use the 4x4 area to the right of the first for the hovered button */
-  -moz-image-region: rect(0px, 8px, 4px, 4px);
-}
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-moz-image-region")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-image-region/index.md b/files/fr/web/css/-moz-image-region/index.md new file mode 100644 index 0000000000..b63d4192c2 --- /dev/null +++ b/files/fr/web/css/-moz-image-region/index.md @@ -0,0 +1,73 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - Non-standard + - Propriété + - Référence(2) +translation_of: Web/CSS/-moz-image-region +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété {{cssxref("list-style-image")}}, la propriété -moz-image-region définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des sprites afin d'améliorer les performances.

+ +
/* Valeur avec un mot-clé */
+-moz-image-region: auto;
+
+/* Valeur de type <shape> */
+-moz-image-region: rect(0, 8px, 4px, 4px);
+
+/* Valeurs globales */
+-moz-image-region: inherit;
+-moz-image-region: initial;
+-moz-image-region: unset;
+ +

La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.

+ +
+

Note : Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
La région pour l'image est définie automatiquement
+
<shape>
+
Une forme définit la portion d'image qui doit être utilisée. La fonction rect() permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir {{cssxref("<shape>")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
#example-button {
+  /* display only the 4x4 area from the top left of this image */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* use the 4x4 area to the right of the first for the hovered button */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-moz-image-region")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-orient/index.html b/files/fr/web/css/-moz-orient/index.html deleted file mode 100644 index 4fd2c9583f..0000000000 --- a/files/fr/web/css/-moz-orient/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: '-moz-orient' -slug: Web/CSS/-moz-orient -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-orient ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -moz-orient définit l'orientation de l'élément sur lequel elle est appliquée.

- -

Syntaxe

- -

La propriété moz-orient est définie avec un mot-clé parmi ceux de la liste ci-après.

- -

Valeurs

- -
-
inline
-
L'élément est affiché dans la même direction que l'axe du texte : il est horizontal si le mode d'écriture est horizontal et vertical pour un mode d'écriture vertical.
-
block
-
L'élément est affiché dans la direction perpendiculaire à l'axe du texte : il est vertical si le mode d'écriture est horizontal et horizontal pour un mode d'écriture vertical.
-
horizontal
-
L'élément est affiché horizontalement.
-
vertical
-
L'élément est affiché verticalement.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<p>
-  La barre de progression suivante est
-  horizontale (le comportement par défaut) :
-</p>
-<progress max="100" value="75"></progress>
-
-<p>
-  La barre de progression suivante
-  est verticale :
-</p>
-<progress class="vert" max="100" value="75"></progress>
- -

CSS

- -
.vert {
-  -moz-orient: vertical;
-  width: 16px;
-  height: 150px;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","360")}}

- -

Spécifications

- -

Bien que proposée au W3C, cette propriété ne fait partie d'aucune spécification standard. C'est donc une propriété propriétaire liée à Mozilla/Gecko.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-moz-orient")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-orient/index.md b/files/fr/web/css/-moz-orient/index.md new file mode 100644 index 0000000000..4fd2c9583f --- /dev/null +++ b/files/fr/web/css/-moz-orient/index.md @@ -0,0 +1,78 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-orient +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -moz-orient définit l'orientation de l'élément sur lequel elle est appliquée.

+ +

Syntaxe

+ +

La propriété moz-orient est définie avec un mot-clé parmi ceux de la liste ci-après.

+ +

Valeurs

+ +
+
inline
+
L'élément est affiché dans la même direction que l'axe du texte : il est horizontal si le mode d'écriture est horizontal et vertical pour un mode d'écriture vertical.
+
block
+
L'élément est affiché dans la direction perpendiculaire à l'axe du texte : il est vertical si le mode d'écriture est horizontal et horizontal pour un mode d'écriture vertical.
+
horizontal
+
L'élément est affiché horizontalement.
+
vertical
+
L'élément est affiché verticalement.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<p>
+  La barre de progression suivante est
+  horizontale (le comportement par défaut) :
+</p>
+<progress max="100" value="75"></progress>
+
+<p>
+  La barre de progression suivante
+  est verticale :
+</p>
+<progress class="vert" max="100" value="75"></progress>
+ +

CSS

+ +
.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","360")}}

+ +

Spécifications

+ +

Bien que proposée au W3C, cette propriété ne fait partie d'aucune spécification standard. C'est donc une propriété propriétaire liée à Mozilla/Gecko.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-moz-orient")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html deleted file mode 100644 index 4b4cbfb209..0000000000 --- a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: '-moz-outline-radius-bottomleft' -slug: Web/CSS/-moz-outline-radius-bottomleft -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-outline-radius-bottomleft ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Dans les applications Mozilla, la propriété -moz-outline-radius-bottomleft définit l'arrondi du coin inférieur gauche du contour.

- -

Exemples

- -

HTML

- -
<p>Regardez le coin inférieur gauche de ce paragraphe.</p>
- -

CSS

- -
p {
-  margin: 5px;
-  border: solid cyan;
-  outline: dotted red;
-  -moz-outline-radius-bottomleft: 2em;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -
-

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

-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.md b/files/fr/web/css/-moz-outline-radius-bottomleft/index.md new file mode 100644 index 0000000000..4b4cbfb209 --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.md @@ -0,0 +1,49 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Dans les applications Mozilla, la propriété -moz-outline-radius-bottomleft définit l'arrondi du coin inférieur gauche du contour.

+ +

Exemples

+ +

HTML

+ +
<p>Regardez le coin inférieur gauche de ce paragraphe.</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomleft: 2em;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +
+

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

+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.html b/files/fr/web/css/-moz-outline-radius-bottomright/index.html deleted file mode 100644 index 8c4e1a813a..0000000000 --- a/files/fr/web/css/-moz-outline-radius-bottomright/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: '-moz-outline-radius-bottomright' -slug: Web/CSS/-moz-outline-radius-bottomright -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-outline-radius-bottomright ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Dans les applications Mozilla, la propriété -moz-outline-radius-bottomright définit l'arrondi du coin inférieur droit du contour.

- -

Exemples

- -

HTML

- -
<p>Regardez le coin inférieur droit de ce paragraphe.</p>
- -

CSS

- -
p {
-  margin: 5px;
-  border: solid cyan;
-  outline: dotted red;
-  -moz-outline-radius-bottomright: 2em;
-}
- -

Résultat

- -

{{EmbedLiveSample("Example")}}

- -
-

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

-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.md b/files/fr/web/css/-moz-outline-radius-bottomright/index.md new file mode 100644 index 0000000000..8c4e1a813a --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.md @@ -0,0 +1,49 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Dans les applications Mozilla, la propriété -moz-outline-radius-bottomright définit l'arrondi du coin inférieur droit du contour.

+ +

Exemples

+ +

HTML

+ +
<p>Regardez le coin inférieur droit de ce paragraphe.</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomright: 2em;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Example")}}

+ +
+

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

+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.html b/files/fr/web/css/-moz-outline-radius-topleft/index.html deleted file mode 100644 index 825b0b8e08..0000000000 --- a/files/fr/web/css/-moz-outline-radius-topleft/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: '-moz-outline-radius-topleft' -slug: Web/CSS/-moz-outline-radius-topleft -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-outline-radius-topleft ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Dans les applications Mozilla, la propriété -moz-outline-radius-topleft définit l'arrondi du coin supérieur gauche du contour.

- -

Exemples

- -

HTML

- -
<p>Observez le coin supérieur gauche de ce paragraphe.</p>
- -

CSS

- -
p {
-  margin: 5px;
-  border: solid cyan;
-  outline: dotted red;
-  -moz-outline-radius-topleft: 2em;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -
-

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

-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.md b/files/fr/web/css/-moz-outline-radius-topleft/index.md new file mode 100644 index 0000000000..825b0b8e08 --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius-topleft/index.md @@ -0,0 +1,49 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Dans les applications Mozilla, la propriété -moz-outline-radius-topleft définit l'arrondi du coin supérieur gauche du contour.

+ +

Exemples

+ +

HTML

+ +
<p>Observez le coin supérieur gauche de ce paragraphe.</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 2em;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +
+

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

+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.html b/files/fr/web/css/-moz-outline-radius-topright/index.html deleted file mode 100644 index df414e6d10..0000000000 --- a/files/fr/web/css/-moz-outline-radius-topright/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: '-moz-outline-radius-topright' -slug: Web/CSS/-moz-outline-radius-topright -tags: - - CSS - - Non-standard - - Propriété - - Référence(2) -translation_of: Web/CSS/-moz-outline-radius-topright ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Dans les applications Mozilla, la propriété -moz-outline-radius-topright définit l'arrondi du coin supérieur droit du contour.

- -

Exemples

- -

HTML

- -
<p>Observez le coin supérieur droit de ce paragraphe.</p>
- -

CSS

- -
p {
-  margin: 5px;
-  border: solid cyan;
-  outline: dotted red;
-  -moz-outline-radius-topright: 2em;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -
-

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

-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.md b/files/fr/web/css/-moz-outline-radius-topright/index.md new file mode 100644 index 0000000000..df414e6d10 --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius-topright/index.md @@ -0,0 +1,49 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +tags: + - CSS + - Non-standard + - Propriété + - Référence(2) +translation_of: Web/CSS/-moz-outline-radius-topright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Dans les applications Mozilla, la propriété -moz-outline-radius-topright définit l'arrondi du coin supérieur droit du contour.

+ +

Exemples

+ +

HTML

+ +
<p>Observez le coin supérieur droit de ce paragraphe.</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topright: 2em;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +
+

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

+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-outline-radius/index.html b/files/fr/web/css/-moz-outline-radius/index.html deleted file mode 100644 index f91a602fcb..0000000000 --- a/files/fr/web/css/-moz-outline-radius/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: '-moz-outline-radius' -slug: Web/CSS/-moz-outline-radius -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-outline-radius ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Dans les applications Mozilla (ex. Firefox), la propriété -moz-outline-radius peut être utilisée afin que le contour dessiné autour d'un élément ait des angles arrondis. Le contour ({{cssxref("outline")}}) est dessiné autour des éléments pour les faire ressortir.

- -
/* Une seule valeur */
--moz-outline-radius: 25px;
-
-/* Deux valeurs */
--moz-outline-radius: 25px 1em;
-
-/* Trois valeurs */
--moz-outline-radius: 25px 1em 12%;
-
-/* Quatre valeurs */
--moz-outline-radius: 25px 1em 12% 4mm;
-
-/* Valeurs globales */
--moz-outline-radius: inherit;
--moz-outline-radius: initial;
--moz-outline-radius: unset;
-
- -

La propriété -moz-outline-radius est une propriété raccourcie qui permet de définir les quatre propriétés destinées à chacun des angles {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} et {{cssxref("-moz-outline-radius-bottomleft")}}.

- -

Syntaxe

- -

Valeurs

- -
-

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 :

- -
-
<length>
-
Voir {{cssxref("<length>")}} pour les valeurs possibles.
-
<percentage>
-
Voir {{cssxref("<percentage>")}}, voir {{cssxref("border-radius")}} pour plus de détails sur la proportionnalité des pourcentages.
-
- -

Gestion des valeurs multiples :

- - - -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple1 {
-  border: 1px solid black;
-  outline: dotted red;
-  -moz-outline-radius: 12% 1em 25px;
-}
-
-.exemple2 {
-  border: 1px solid black;
-  outline: dotted red;
-  -moz-outline-radius-topleft: 12%;
-  -moz-outline-radius-topright: 1em;
-  -moz-outline-radius-bottomright: 35px;
-  -moz-outline-radius-bottomleft: 1em;
-}
- -

HTML

- -
<p class="exemple1">
-  La propriété outline-style en utilisant -moz-outline-radius
-</p>
-<p class="exemple2">
-  Un exemple légèrement plus compliqué avec -moz-outline-radius-xxx
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '200', '200')}}

- -
-

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

-
- -

Notes

- - - -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-moz-outline-radius")}}

diff --git a/files/fr/web/css/-moz-outline-radius/index.md b/files/fr/web/css/-moz-outline-radius/index.md new file mode 100644 index 0000000000..f91a602fcb --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius/index.md @@ -0,0 +1,117 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-outline-radius +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Dans les applications Mozilla (ex. Firefox), la propriété -moz-outline-radius peut être utilisée afin que le contour dessiné autour d'un élément ait des angles arrondis. Le contour ({{cssxref("outline")}}) est dessiné autour des éléments pour les faire ressortir.

+ +
/* Une seule valeur */
+-moz-outline-radius: 25px;
+
+/* Deux valeurs */
+-moz-outline-radius: 25px 1em;
+
+/* Trois valeurs */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Quatre valeurs */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* Valeurs globales */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+
+ +

La propriété -moz-outline-radius est une propriété raccourcie qui permet de définir les quatre propriétés destinées à chacun des angles {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} et {{cssxref("-moz-outline-radius-bottomleft")}}.

+ +

Syntaxe

+ +

Valeurs

+ +
+

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 :

+ +
+
<length>
+
Voir {{cssxref("<length>")}} pour les valeurs possibles.
+
<percentage>
+
Voir {{cssxref("<percentage>")}}, voir {{cssxref("border-radius")}} pour plus de détails sur la proportionnalité des pourcentages.
+
+ +

Gestion des valeurs multiples :

+ + + +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple1 {
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius: 12% 1em 25px;
+}
+
+.exemple2 {
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 12%;
+  -moz-outline-radius-topright: 1em;
+  -moz-outline-radius-bottomright: 35px;
+  -moz-outline-radius-bottomleft: 1em;
+}
+ +

HTML

+ +
<p class="exemple1">
+  La propriété outline-style en utilisant -moz-outline-radius
+</p>
+<p class="exemple2">
+  Un exemple légèrement plus compliqué avec -moz-outline-radius-xxx
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '200', '200')}}

+ +
+

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

+
+ +

Notes

+ + + +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-moz-outline-radius")}}

diff --git a/files/fr/web/css/-moz-user-focus/index.html b/files/fr/web/css/-moz-user-focus/index.html deleted file mode 100644 index 62492eb50c..0000000000 --- a/files/fr/web/css/-moz-user-focus/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: '-moz-user-focus' -slug: Web/CSS/-moz-user-focus -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-user-focus ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -moz-user-focus est utilisée pour indiquer si l'élément peut recevoir le focus.

- -
/* Valeurs avec un mot-clé */
--moz-user-focus: normal;
--moz-user-focus: ignore;
-
-/* Valeurs globales */
--moz-user-focus: inherit;
--moz-user-focus: initial;
--moz-user-focus: unset;
-
- -

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.

-
- -

Syntaxe

- -

Valeurs

- -
-
ignore
-
L'élément n'accepte pas le focus (au clavier ou au pointeur) et sera sauté lors de la navigation à la tabulation.
-
normal
-
L'élément peut recevoir le focus normalement.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<input class="ignored" value="L'utilisateur ne peut pas placer le focus sur cet élément.">
-
- -

CSS

- -
.ignored {
-  -moz-user-focus: ignore;
-}
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : user-focus a été proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs mais a été rejetée par le groupe de travail.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-moz-user-focus")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-user-focus/index.md b/files/fr/web/css/-moz-user-focus/index.md new file mode 100644 index 0000000000..62492eb50c --- /dev/null +++ b/files/fr/web/css/-moz-user-focus/index.md @@ -0,0 +1,75 @@ +--- +title: '-moz-user-focus' +slug: Web/CSS/-moz-user-focus +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-user-focus +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -moz-user-focus est utilisée pour indiquer si l'élément peut recevoir le focus.

+ +
/* Valeurs avec un mot-clé */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Valeurs globales */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+
+ +

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.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
ignore
+
L'élément n'accepte pas le focus (au clavier ou au pointeur) et sera sauté lors de la navigation à la tabulation.
+
normal
+
L'élément peut recevoir le focus normalement.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<input class="ignored" value="L'utilisateur ne peut pas placer le focus sur cet élément.">
+
+ +

CSS

+ +
.ignored {
+  -moz-user-focus: ignore;
+}
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : user-focus a été proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs mais a été rejetée par le groupe de travail.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-moz-user-focus")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-user-input/index.html b/files/fr/web/css/-moz-user-input/index.html deleted file mode 100644 index 75138e739c..0000000000 --- a/files/fr/web/css/-moz-user-input/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: '-moz-user-input' -slug: Web/CSS/-moz-user-input -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-moz-user-input ---- -
{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(60)}}
- -

Pour les applications Mozilla, la propriété -moz-user-input détermine si l'utilisateur peut effectuer une saisie sur l'élément (bien que rejetée, cette propriété a contribué à la construction de la propriété standard {{cssxref("user-input")}}.

- -
/* Valeurs avec un mot-clé */
--moz-user-input: none;
--moz-user-input: enabled;
--moz-user-input: disabled;
-
-/* Valeurs globales */
--moz-user-input: inherit;
--moz-user-input: initial;
--moz-user-input: unset;
-
- -

Pour les éléments qui acceptent la saisie par défaut (ex. les élémetns {{HTMLElement("textarea")}}), la valeur initiale de -moz-user-input sera enabled.

- -

Syntaxe

- -

Valeurs

- -
-
none
-
L'élément ne réagit pas aux saisies de l'utilisateur et il ne prend jamais l'état {{cssxref(":active")}}.
-
enabled
-
L'utilisateur peut effectuer une saisie sur cet élément. Pour les boîtes de texte, c'est le comportement par défaut. Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).
-
disabled
-
L'utilisateur ne peut pas effectuer de saisie sur cet élément (cela n'est pas équivalent à utiliser l'attribut {{XULAttr("disabled")}} avec la valeur true car l'élément est dessiné normalement). Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
input.exemple {
-  /* L'utilisateur pourra sélectionner le texte
-     mais ne pourra pas le modifier. */
-  -moz-user-input: disabled;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : user-focus a été proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs mais a été rejetée par le groupe de travail.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-moz-user-input")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-moz-user-input/index.md b/files/fr/web/css/-moz-user-input/index.md new file mode 100644 index 0000000000..75138e739c --- /dev/null +++ b/files/fr/web/css/-moz-user-input/index.md @@ -0,0 +1,70 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-moz-user-input +--- +
{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(60)}}
+ +

Pour les applications Mozilla, la propriété -moz-user-input détermine si l'utilisateur peut effectuer une saisie sur l'élément (bien que rejetée, cette propriété a contribué à la construction de la propriété standard {{cssxref("user-input")}}.

+ +
/* Valeurs avec un mot-clé */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Valeurs globales */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+
+ +

Pour les éléments qui acceptent la saisie par défaut (ex. les élémetns {{HTMLElement("textarea")}}), la valeur initiale de -moz-user-input sera enabled.

+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
L'élément ne réagit pas aux saisies de l'utilisateur et il ne prend jamais l'état {{cssxref(":active")}}.
+
enabled
+
L'utilisateur peut effectuer une saisie sur cet élément. Pour les boîtes de texte, c'est le comportement par défaut. Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).
+
disabled
+
L'utilisateur ne peut pas effectuer de saisie sur cet élément (cela n'est pas équivalent à utiliser l'attribut {{XULAttr("disabled")}} avec la valeur true car l'élément est dessiné normalement). Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
input.exemple {
+  /* L'utilisateur pourra sélectionner le texte
+     mais ne pourra pas le modifier. */
+  -moz-user-input: disabled;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : user-focus a été proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs mais a été rejetée par le groupe de travail.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-moz-user-input")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-border-before/index.html b/files/fr/web/css/-webkit-border-before/index.html deleted file mode 100644 index 9e383a0fb7..0000000000 --- a/files/fr/web/css/-webkit-border-before/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: '-webkit-border-before' -slug: Web/CSS/-webkit-border-before -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-border-before ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-border-before est une propriété raccourcie qui permet de définir les propriétés de la bordure pour le début d'un élément dans l'axe de bloc (l'axe logique orthogonal à l'axe de lecture).

- -
/* Valeurs décrivant une bordure */
--webkit-border-before: 1px;
--webkit-border-before: 2px dotted;
--webkit-border-before: medium dashed blue;
-
-/* Valeurs globales */
--webkit-border-before: inherit;
--webkit-border-before: initial;
--webkit-border-before: unset;
-
- -

-webkit-border-before peut ainsi être utilisée pour définir les valeurs d'une ou plusieurs de ces propriétés : {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, et {{cssxref("-webkit-border-before-color")}}. Cette propriété est une propriété logique qui correspond à une propriété physique selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}ou {{cssxref("border-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -

Cette propriété est à mettre en relation avec les propriétés {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, et {{cssxref("-webkit-border-end")}} qui définissent les autres bordures de l'élément.

- -

L'équivalent standard de cette propriété est la propriété non-préfixée {{cssxref("border-block-start")}}.

- -

Syntaxe

- -

Valeurs

- -

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

- -
-
<border-width>
-
Voir {{cssxref("border-width")}}.
-
<border-style>
-
Voir {{cssxref("border-style")}}.
-
<color>
-
Voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.texteExemple {
-  writing-mode: vertical-rl;
-  -webkit-border-before: 5px dashed blue;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Texte pour l'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Toutefois, on peut la rapprocher de la propriété standard {{cssxref("border-block-start")}}.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-border-before")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-border-before/index.md b/files/fr/web/css/-webkit-border-before/index.md new file mode 100644 index 0000000000..9e383a0fb7 --- /dev/null +++ b/files/fr/web/css/-webkit-border-before/index.md @@ -0,0 +1,106 @@ +--- +title: '-webkit-border-before' +slug: Web/CSS/-webkit-border-before +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-border-before +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-border-before est une propriété raccourcie qui permet de définir les propriétés de la bordure pour le début d'un élément dans l'axe de bloc (l'axe logique orthogonal à l'axe de lecture).

+ +
/* Valeurs décrivant une bordure */
+-webkit-border-before: 1px;
+-webkit-border-before: 2px dotted;
+-webkit-border-before: medium dashed blue;
+
+/* Valeurs globales */
+-webkit-border-before: inherit;
+-webkit-border-before: initial;
+-webkit-border-before: unset;
+
+ +

-webkit-border-before peut ainsi être utilisée pour définir les valeurs d'une ou plusieurs de ces propriétés : {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, et {{cssxref("-webkit-border-before-color")}}. Cette propriété est une propriété logique qui correspond à une propriété physique selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}ou {{cssxref("border-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +

Cette propriété est à mettre en relation avec les propriétés {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, et {{cssxref("-webkit-border-end")}} qui définissent les autres bordures de l'élément.

+ +

L'équivalent standard de cette propriété est la propriété non-préfixée {{cssxref("border-block-start")}}.

+ +

Syntaxe

+ +

Valeurs

+ +

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

+ +
+
<border-width>
+
Voir {{cssxref("border-width")}}.
+
<border-style>
+
Voir {{cssxref("border-style")}}.
+
<color>
+
Voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  -webkit-border-before: 5px dashed blue;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Texte pour l'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Toutefois, on peut la rapprocher de la propriété standard {{cssxref("border-block-start")}}.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-border-before")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-box-reflect/index.html b/files/fr/web/css/-webkit-box-reflect/index.html deleted file mode 100644 index 856a9ca5b0..0000000000 --- a/files/fr/web/css/-webkit-box-reflect/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: '-webkit-box-reflect' -slug: Web/CSS/-webkit-box-reflect -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-box-reflect ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La propriété -webkit-box-reflect peut être utilisée afin de créer un effet de réflexion d'un élément dans une direction donnée.

- -
/* Valeurs de directions */
--webkit-box-reflect: above;
--webkit-box-reflect: below;
--webkit-box-reflect: left;
--webkit-box-reflect: right;
-
-/* Valeurs incluant un décalage */
--webkit-box-reflect: below 10px;
-
-/* Valeur de masque */
--webkit-box-reflect: below 0 linear-gradient(transparent, white);
-
-/* Valeurs globales */
--webkit-box-reflect: inherit;
--webkit-box-reflect: initial;
--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()")}}.

-
- -

Syntaxe

- -

Valeurs

- -
-
above, below, right, left
-
Des mots-clés qui indiquent la direction dans laquelle créer la réflexion (respectivement : au-dessus, en-dessous, à droite, à gauche).
-
<length>
-
La taille du reflet créé, cf. {{cssxref("<length>")}} sur les valeurs possibles.
-
<image>
-
Le masque à appliquer au reflet, cf. {{cssxref("<image>")}} sur les valeurs possibles.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

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()")}}.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-box-reflect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-box-reflect/index.md b/files/fr/web/css/-webkit-box-reflect/index.md new file mode 100644 index 0000000000..856a9ca5b0 --- /dev/null +++ b/files/fr/web/css/-webkit-box-reflect/index.md @@ -0,0 +1,70 @@ +--- +title: '-webkit-box-reflect' +slug: Web/CSS/-webkit-box-reflect +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-box-reflect +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La propriété -webkit-box-reflect peut être utilisée afin de créer un effet de réflexion d'un élément dans une direction donnée.

+ +
/* Valeurs de directions */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Valeurs incluant un décalage */
+-webkit-box-reflect: below 10px;
+
+/* Valeur de masque */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Valeurs globales */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-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()")}}.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
above, below, right, left
+
Des mots-clés qui indiquent la direction dans laquelle créer la réflexion (respectivement : au-dessus, en-dessous, à droite, à gauche).
+
<length>
+
La taille du reflet créé, cf. {{cssxref("<length>")}} sur les valeurs possibles.
+
<image>
+
Le masque à appliquer au reflet, cf. {{cssxref("<image>")}} sur les valeurs possibles.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

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()")}}.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-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 deleted file mode 100644 index 26895d4690..0000000000 --- a/files/fr/web/css/-webkit-line-clamp/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: '-webkit-line-clamp' -slug: Web/CSS/-webkit-line-clamp -tags: - - CSS - - Propriété -translation_of: Web/CSS/-webkit-line-clamp ---- -
{{CSSRef}}
- -

La propriété CSS -webkit-line-clamp permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.

- -

Cette propriété fonctionne uniquement si {{cssxref("display")}} vaut -webkit-box ou -webkit-inline-box et si {{cssxref("-webkit-box-orient")}} vaut vertical.

- -

Dans la plupart des cas, on utilisera également {{cssxref("overflow")}} avec la valeur hidden, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).

- -

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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
--webkit-line-clamp: none;
-
-/* Valeurs entières */
-/* Type <integer> */
--webkit-line-clamp: 3;
--webkit-line-clamp: 10;
-
-/* Valeurs globales */
--webkit-line-clamp: inherit;
--webkit-line-clamp: initial;
--webkit-line-clamp: unset;
-
- -
-
none
-
Cette valeur indique que le contenu ne sera pas rogné.
-
{{cssxref("integer")}}
-
Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.
-
- -

Exemples

- -

HTML

- -
<p>
-  Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes.
-  Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped.
-</p>
- -

CSS

- -
p {
-  width: 300px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%", "100")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}{{Spec2("CSS3 Overflow")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-line-clamp")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md new file mode 100644 index 0000000000..26895d4690 --- /dev/null +++ b/files/fr/web/css/-webkit-line-clamp/index.md @@ -0,0 +1,99 @@ +--- +title: '-webkit-line-clamp' +slug: Web/CSS/-webkit-line-clamp +tags: + - CSS + - Propriété +translation_of: Web/CSS/-webkit-line-clamp +--- +
{{CSSRef}}
+ +

La propriété CSS -webkit-line-clamp permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.

+ +

Cette propriété fonctionne uniquement si {{cssxref("display")}} vaut -webkit-box ou -webkit-inline-box et si {{cssxref("-webkit-box-orient")}} vaut vertical.

+ +

Dans la plupart des cas, on utilisera également {{cssxref("overflow")}} avec la valeur hidden, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).

+ +

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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+-webkit-line-clamp: none;
+
+/* Valeurs entières */
+/* Type <integer> */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* Valeurs globales */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+
+ +
+
none
+
Cette valeur indique que le contenu ne sera pas rogné.
+
{{cssxref("integer")}}
+
Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.
+
+ +

Exemples

+ +

HTML

+ +
<p>
+  Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes.
+  Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped.
+</p>
+ +

CSS

+ +
p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%", "100")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}{{Spec2("CSS3 Overflow")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-line-clamp")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-mask-attachment/index.html b/files/fr/web/css/-webkit-mask-attachment/index.html deleted file mode 100644 index f278d89b0f..0000000000 --- a/files/fr/web/css/-webkit-mask-attachment/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: '-webkit-mask-attachment' -slug: Web/CSS/-webkit-mask-attachment -tags: - - CSS - - Non-standard - - Propriété - - Reference -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.

- -
/* Valeurs avec un mot-clé */
--webkit-mask-attachment: scroll;
--webkit-mask-attachment: fixed;
--webkit-mask-attachment: local;
-
-/* Valeurs multiples */
--webkit-mask-attachment: scroll, local;
--webkit-mask-attachment: fixed, local, scroll;
-
-/* Valeurs globales */
--webkit-mask-attachment: inherit;
--webkit-mask-attachment: initial;
--webkit-mask-attachment: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
scroll
-
Si le mot-clé scroll est utilisé, l'image de masque défilera avec le bloc qui l'englobe.
-
fixed
-
Si le mot-clé fixed est utilisé, l'image de masque ne défilera pas. Sa position sera fixe pour la zone d'affichag (viewport).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
body {
-  -webkit-mask-image: url('images/mask.png');
-  -webkit-mask-attachment: fixed;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-mask-attachment")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-mask-attachment/index.md b/files/fr/web/css/-webkit-mask-attachment/index.md new file mode 100644 index 0000000000..f278d89b0f --- /dev/null +++ b/files/fr/web/css/-webkit-mask-attachment/index.md @@ -0,0 +1,73 @@ +--- +title: '-webkit-mask-attachment' +slug: Web/CSS/-webkit-mask-attachment +tags: + - CSS + - Non-standard + - Propriété + - Reference +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.

+ +
/* Valeurs avec un mot-clé */
+-webkit-mask-attachment: scroll;
+-webkit-mask-attachment: fixed;
+-webkit-mask-attachment: local;
+
+/* Valeurs multiples */
+-webkit-mask-attachment: scroll, local;
+-webkit-mask-attachment: fixed, local, scroll;
+
+/* Valeurs globales */
+-webkit-mask-attachment: inherit;
+-webkit-mask-attachment: initial;
+-webkit-mask-attachment: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
scroll
+
Si le mot-clé scroll est utilisé, l'image de masque défilera avec le bloc qui l'englobe.
+
fixed
+
Si le mot-clé fixed est utilisé, l'image de masque ne défilera pas. Sa position sera fixe pour la zone d'affichag (viewport).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
body {
+  -webkit-mask-image: url('images/mask.png');
+  -webkit-mask-attachment: fixed;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-mask-attachment")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-mask-box-image/index.html b/files/fr/web/css/-webkit-mask-box-image/index.html deleted file mode 100644 index 79d751a5c2..0000000000 --- a/files/fr/web/css/-webkit-mask-box-image/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: '-webkit-mask-box-image' -slug: Web/CSS/-webkit-mask-box-image -tags: - - CSS - - Non-standard - - Reference - - Web -translation_of: Web/CSS/-webkit-mask-box-image ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-mask-box-image permet de définir l'image de masque utilisée pour la boîte de bordure d'un élément.

- - - -

Syntaxe

- -
-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
-
- -

Où :

- -
-
<mask-box-image>
-
{{cssxref("<uri>")}} | <gradient> | none
-
<top> <right> <bottom> <left>
-
<length> | <percentage>
-
<x-repeat> <y-repeat>
-
repeat | stretch | round
-
- -

Valeurs

- -
-
<uri>
-
L'emplacement de la ressource qui doit être utilisée comme image de masque.
-
<gradient>
-
Une fonction -webkit-gradient utilisée pour générer l'image de masque.
-
none
-
Ce mot-clé indique que la boîte de bordure n'a pas de masque.
-
- -
-
<length>
-
Le décalage à appliquer à l'image de masque (cf. {{cssxref("<length>")}} pour les unités possibles).
-
<percentage>
-
Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).
-
repeat
-
L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.
-
stretch
-
L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.
-
round
-
 L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.
-
- -

Exemples

- -
.exempleUn {
-  -webkit-mask-box-image: url('mask.png');
-}
-
-.exempleDeux {
-  -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-mask-box-image")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-mask-box-image/index.md b/files/fr/web/css/-webkit-mask-box-image/index.md new file mode 100644 index 0000000000..79d751a5c2 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-box-image/index.md @@ -0,0 +1,92 @@ +--- +title: '-webkit-mask-box-image' +slug: Web/CSS/-webkit-mask-box-image +tags: + - CSS + - Non-standard + - Reference + - Web +translation_of: Web/CSS/-webkit-mask-box-image +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-mask-box-image permet de définir l'image de masque utilisée pour la boîte de bordure d'un élément.

+ + + +

Syntaxe

+ +
-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
+
+ +

Où :

+ +
+
<mask-box-image>
+
{{cssxref("<uri>")}} | <gradient> | none
+
<top> <right> <bottom> <left>
+
<length> | <percentage>
+
<x-repeat> <y-repeat>
+
repeat | stretch | round
+
+ +

Valeurs

+ +
+
<uri>
+
L'emplacement de la ressource qui doit être utilisée comme image de masque.
+
<gradient>
+
Une fonction -webkit-gradient utilisée pour générer l'image de masque.
+
none
+
Ce mot-clé indique que la boîte de bordure n'a pas de masque.
+
+ +
+
<length>
+
Le décalage à appliquer à l'image de masque (cf. {{cssxref("<length>")}} pour les unités possibles).
+
<percentage>
+
Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).
+
repeat
+
L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.
+
stretch
+
L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.
+
round
+
 L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.
+
+ +

Exemples

+ +
.exempleUn {
+  -webkit-mask-box-image: url('mask.png');
+}
+
+.exempleDeux {
+  -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-mask-box-image")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-mask-composite/index.html b/files/fr/web/css/-webkit-mask-composite/index.html deleted file mode 100644 index 03022f2f52..0000000000 --- a/files/fr/web/css/-webkit-mask-composite/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: '-webkit-mask-composite' -slug: Web/CSS/-webkit-mask-composite -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-mask-composite ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-mask-composite définit la façon dont plusieurs images de masque sont appliquées pour un même élément. Les images de masques sont composées dans l'ordre inverse dans lequel elles sont listées dans la propriété {{cssxref("-webkit-mask-image")}}.

- -
/* Valeurs avec un mot-clé */
--webkit-mask-composite: clear;
--webkit-mask-composite: copy;
--webkit-mask-composite: source-over;
--webkit-mask-composite: source-in;
--webkit-mask-composite: source-out;
--webkit-mask-composite: source-atop;
--webkit-mask-composite: destination-over;
--webkit-mask-composite: destination-in;
--webkit-mask-composite: destination-out;
--webkit-mask-composite: destination-atop;
--webkit-mask-composite: xor;
-
-/* Valeurs globales */
--webkit-mask-composite: inherit;
--webkit-mask-composite: initial;
--webkit-mask-composite: unset;
-
- -
-

Note : La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.

-
- -

Syntaxe

- -

Valeurs

- -
-
clear
-
Les pixels qui se recouvrent entre l'image source et l'image de destination sont enlevés.
-
copy
-
Les pixels du masque source remplacent ceux du masque de destination.
-
source-over
-
Le contenu du masque source est appliqué sur l'image du masque de destination.
-
source-in
-
Les pixels qui se recouvrent sont remplacés par les pixels de l'image du masque source. Tous les autres pixels sont enlevés.
-
source-out
-
Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de masque source.
-
source-atop
-
Les pixels de l'image de masque de destination sont utilisés. Les pixels de l'image de masque source sont utilisés uniquement s'ils ne recouvrent pas une portion de l'image de destination. Cela fait que l'image source n'a aucun effet.
-
destination-over
-
L'image de masque de destination est affichée par dessus l'image de masque source.
-
destination-in
-
Les pixels qui se recouvrent sont remplacés par ceux de l'image de destination. Tous les autres pixels sont enlevés.
-
destination-out
-
Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de destination.
-
destination-atop
-
Les pixels de l'image source sont affichés. Les pixels de l'image de destination sont uniquement utilisés s'ils ne chevauchent pas des portions non-transparentes de l'image source. Cela fait que l'image de destination n'a aucun effet.
-
xor
-
Les pixels qui se chevauchent deviennent complètement transparents s'ils étaient complètement opaques.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
.exemple {
-  -webkit-mask-image: url(mask1.png), url('mask2.png');
-  -webkit-mask-composite: xor, source-over;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-mask-composite")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-mask-composite/index.md b/files/fr/web/css/-webkit-mask-composite/index.md new file mode 100644 index 0000000000..03022f2f52 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-composite/index.md @@ -0,0 +1,93 @@ +--- +title: '-webkit-mask-composite' +slug: Web/CSS/-webkit-mask-composite +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-mask-composite +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-mask-composite définit la façon dont plusieurs images de masque sont appliquées pour un même élément. Les images de masques sont composées dans l'ordre inverse dans lequel elles sont listées dans la propriété {{cssxref("-webkit-mask-image")}}.

+ +
/* Valeurs avec un mot-clé */
+-webkit-mask-composite: clear;
+-webkit-mask-composite: copy;
+-webkit-mask-composite: source-over;
+-webkit-mask-composite: source-in;
+-webkit-mask-composite: source-out;
+-webkit-mask-composite: source-atop;
+-webkit-mask-composite: destination-over;
+-webkit-mask-composite: destination-in;
+-webkit-mask-composite: destination-out;
+-webkit-mask-composite: destination-atop;
+-webkit-mask-composite: xor;
+
+/* Valeurs globales */
+-webkit-mask-composite: inherit;
+-webkit-mask-composite: initial;
+-webkit-mask-composite: unset;
+
+ +
+

Note : La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
clear
+
Les pixels qui se recouvrent entre l'image source et l'image de destination sont enlevés.
+
copy
+
Les pixels du masque source remplacent ceux du masque de destination.
+
source-over
+
Le contenu du masque source est appliqué sur l'image du masque de destination.
+
source-in
+
Les pixels qui se recouvrent sont remplacés par les pixels de l'image du masque source. Tous les autres pixels sont enlevés.
+
source-out
+
Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de masque source.
+
source-atop
+
Les pixels de l'image de masque de destination sont utilisés. Les pixels de l'image de masque source sont utilisés uniquement s'ils ne recouvrent pas une portion de l'image de destination. Cela fait que l'image source n'a aucun effet.
+
destination-over
+
L'image de masque de destination est affichée par dessus l'image de masque source.
+
destination-in
+
Les pixels qui se recouvrent sont remplacés par ceux de l'image de destination. Tous les autres pixels sont enlevés.
+
destination-out
+
Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de destination.
+
destination-atop
+
Les pixels de l'image source sont affichés. Les pixels de l'image de destination sont uniquement utilisés s'ils ne chevauchent pas des portions non-transparentes de l'image source. Cela fait que l'image de destination n'a aucun effet.
+
xor
+
Les pixels qui se chevauchent deviennent complètement transparents s'ils étaient complètement opaques.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
.exemple {
+  -webkit-mask-image: url(mask1.png), url('mask2.png');
+  -webkit-mask-composite: xor, source-over;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-mask-composite")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-mask-position-x/index.html b/files/fr/web/css/-webkit-mask-position-x/index.html deleted file mode 100644 index d5bb42b38f..0000000000 --- a/files/fr/web/css/-webkit-mask-position-x/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: '-webkit-mask-position-x' -slug: Web/CSS/-webkit-mask-position-x -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-mask-position-x ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-mask-position-x permet de définir la position horizontale initiale d'une image de masque.

- -
/* Valeurs avec un mot-clé */
--webkit-mask-position-x: left;
--webkit-mask-position-x: center;
--webkit-mask-position-x: right;
-
-/* Valeurs proportionnelles */
-/* Type <percentage>        */
--webkit-mask-position-x: 100%;
--webkit-mask-position-x: -50%;
-
-/* Valeurs de longueur */
-/* Type <length>       */
--webkit-mask-position-x: 50px;
--webkit-mask-position-x: -1cm;
-
-/* Gestion de plusieurs valeurs */
--webkit-mask-position-x: 50px, 25%, -3em;
-
-/* Valeurs globales */
--webkit-mask-position-x: inherit;
--webkit-mask-position-x: initial;
--webkit-mask-position-x: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
<length-percentage>
-
Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (padding). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (0% indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et 100% indique que le bord droit de l'image est aligné avec le bord droit  de la boîte de remplissage).
-
left
-
Un mot-clé équivalent à 0%.
-
right
-
Un mot-clé équivalent à 100%.
-
center
-
Un mot-clé équivalent à 50%.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
.exempleUn {
-  -webkit-mask-image: url(mask.png);
-  -webkit-mask-position-x: right;
-}
-
-.exempleDeux {
-  -webkit-mask-image: url(mask.png);
-  -webkit-mask-position-x: 25%;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-mask-position-x")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-mask-position-x/index.md b/files/fr/web/css/-webkit-mask-position-x/index.md new file mode 100644 index 0000000000..d5bb42b38f --- /dev/null +++ b/files/fr/web/css/-webkit-mask-position-x/index.md @@ -0,0 +1,88 @@ +--- +title: '-webkit-mask-position-x' +slug: Web/CSS/-webkit-mask-position-x +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-mask-position-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-mask-position-x permet de définir la position horizontale initiale d'une image de masque.

+ +
/* Valeurs avec un mot-clé */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Gestion de plusieurs valeurs */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Valeurs globales */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<length-percentage>
+
Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (padding). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (0% indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et 100% indique que le bord droit de l'image est aligné avec le bord droit  de la boîte de remplissage).
+
left
+
Un mot-clé équivalent à 0%.
+
right
+
Un mot-clé équivalent à 100%.
+
center
+
Un mot-clé équivalent à 50%.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
.exempleUn {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: right;
+}
+
+.exempleDeux {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: 25%;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-mask-position-x")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-mask-position-y/index.html b/files/fr/web/css/-webkit-mask-position-y/index.html deleted file mode 100644 index 8e944059d1..0000000000 --- a/files/fr/web/css/-webkit-mask-position-y/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: '-webkit-mask-position-y' -slug: Web/CSS/-webkit-mask-position-y -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-mask-position-y ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-mask-position-y permet de définir la position verticale initiale d'une image de masque.

- -
/* Valeurs avec un mot-clé */
--webkit-mask-position-y: top;
--webkit-mask-position-y: center;
--webkit-mask-position-y: bottom;
-
-/* Valeurs proportionnelles */
-/* Type <percentage>        */
--webkit-mask-position-y: 100%;
--webkit-mask-position-y: -50%;
-
-/* Valeurs de longueur */
-/* Type <length>       */
--webkit-mask-position-y: 50px;
--webkit-mask-position-y: -1cm;
-
-/* Gestion de plusieurs valeurs */
--webkit-mask-position-y: 50px, 25%, -3em;
-
-/* Valeurs globales */
--webkit-mask-position-y: inherit;
--webkit-mask-position-y: initial;
--webkit-mask-position-y: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
<length-percentage>
-
Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (padding). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (0% indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et 100% indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).
-
<length>
-
Une longueur, mesurée à partir du bord haut de la boîte de remplissage (padding), qui indique la position verticale de l'image.
-
top
-
Un mot-clé équivalent à 0%.
-
bottom
-
Un mot-clé équivalent à 100%.
-
center
-
Un mot-clé équivalent à 50%.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
.exempleUn {
-  -webkit-mask-image: url(mask.png);
-  -webkit-mask-position-y: bottom;
-}
-
-.exempleDeux {
-  -webkit-mask-image: url(mask.png);
-  -webkit-mask-position-y: 25%;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-mask-position-y")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-mask-position-y/index.md b/files/fr/web/css/-webkit-mask-position-y/index.md new file mode 100644 index 0000000000..8e944059d1 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-position-y/index.md @@ -0,0 +1,90 @@ +--- +title: '-webkit-mask-position-y' +slug: Web/CSS/-webkit-mask-position-y +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-mask-position-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-mask-position-y permet de définir la position verticale initiale d'une image de masque.

+ +
/* Valeurs avec un mot-clé */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Gestion de plusieurs valeurs */
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Valeurs globales */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<length-percentage>
+
Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (padding). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (0% indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et 100% indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).
+
<length>
+
Une longueur, mesurée à partir du bord haut de la boîte de remplissage (padding), qui indique la position verticale de l'image.
+
top
+
Un mot-clé équivalent à 0%.
+
bottom
+
Un mot-clé équivalent à 100%.
+
center
+
Un mot-clé équivalent à 50%.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
.exempleUn {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: bottom;
+}
+
+.exempleDeux {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: 25%;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-mask-position-y")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.html b/files/fr/web/css/-webkit-mask-repeat-x/index.html deleted file mode 100644 index 0669e8a600..0000000000 --- a/files/fr/web/css/-webkit-mask-repeat-x/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: '-webkit-mask-repeat-x' -slug: Web/CSS/-webkit-mask-repeat-x -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-mask-repeat-x ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-mask-repeat-x définit la façon dont une image de masque est répétée horizontalement.

- -
/* Valeurs avec un mot-clé */
--webkit-mask-repeat-x: repeat;
--webkit-mask-repeat-x: no-repeat;
--webkit-mask-repeat-x: space;
--webkit-mask-repeat-x: round;
-
-/* Valeurs multiples */
--webkit-mask-repeat-x: repeat, no-repeat, space;
-
-/* Valeurs globales */
--webkit-mask-repeat-x: inherit;
--webkit-mask-repeat-x: initial;
--webkit-mask-repeat-x: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
repeat
-
L'image de masque est répétée horizontalement.
-
no-repeat
-
L'image de masque n'est pas répétée horizontalement, seul un exemplaire est dessiné selon l'axe horizontal. Le contenu restant sur l'axe horizontal pour les éléments masqués n'est pas affiché.
-
space
-
L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords droit et gauche de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.
-
round
-
L'image est répétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit large de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
.exempleun {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat-x: repeat;
-}
-
-.exempledeux {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat-x: no-repeat;
-}
-
- -

Gestion de plusieurs images

- -

On peut définir un style de répétition (<repeat-style>) différent pour chacune des images de masque en séparant les valeurs par des virgules :

- -
.exempletrois {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-repeat-x: repeat, space;
-}
-
- -

Chaque image aura la valeur associée, dans le même ordre.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-mask-repeat-x")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.md b/files/fr/web/css/-webkit-mask-repeat-x/index.md new file mode 100644 index 0000000000..0669e8a600 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-repeat-x/index.md @@ -0,0 +1,85 @@ +--- +title: '-webkit-mask-repeat-x' +slug: Web/CSS/-webkit-mask-repeat-x +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-mask-repeat-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-mask-repeat-x définit la façon dont une image de masque est répétée horizontalement.

+ +
/* Valeurs avec un mot-clé */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Valeurs multiples */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Valeurs globales */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
repeat
+
L'image de masque est répétée horizontalement.
+
no-repeat
+
L'image de masque n'est pas répétée horizontalement, seul un exemplaire est dessiné selon l'axe horizontal. Le contenu restant sur l'axe horizontal pour les éléments masqués n'est pas affiché.
+
space
+
L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords droit et gauche de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.
+
round
+
L'image est répétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit large de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
.exempleun {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: repeat;
+}
+
+.exempledeux {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: no-repeat;
+}
+
+ +

Gestion de plusieurs images

+ +

On peut définir un style de répétition (<repeat-style>) différent pour chacune des images de masque en séparant les valeurs par des virgules :

+ +
.exempletrois {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-x: repeat, space;
+}
+
+ +

Chaque image aura la valeur associée, dans le même ordre.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-mask-repeat-x")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.html b/files/fr/web/css/-webkit-mask-repeat-y/index.html deleted file mode 100644 index d3bdaf3055..0000000000 --- a/files/fr/web/css/-webkit-mask-repeat-y/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: '-webkit-mask-repeat-y' -slug: Web/CSS/-webkit-mask-repeat-y -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-mask-repeat-y ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-mask-repeat-y définit la façon dont une image de masque est répétée verticalement.

- -
/* Valeurs avec un mot-clé */
--webkit-mask-repeat-y: repeat;
--webkit-mask-repeat-y: no-repeat;
--webkit-mask-repeat-y: space;
--webkit-mask-repeat-y: round;
-
-/* Valeurs multiples */
--webkit-mask-repeat-y: repeat, no-repeat, space;
-
-/* Valeurs globales */
--webkit-mask-repeat-y: inherit;
--webkit-mask-repeat-y: initial;
--webkit-mask-repeat-y: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
repeat
-
L'image de masque est répétée verticalement.
-
no-repeat
-
L'image de masque n'est pas répétée verticalement, seul un exemplaire est dessiné selon l'axe vertical. Le contenu restant sur l'axe vertical pour les éléments masqués n'est pas affiché.
-
space
-
L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords bas et haut de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.
-
round
-
L'image est repétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit haute de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
.exempleun {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat-y: repeat;
-}
-
-.exempledeux {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat-y: no-repeat;
-}
-
- -

Gestion de plusieurs images

- -

On peut définir un style de répétition (<repeat-style>) différent pour chacune des images de masque en séparant les valeurs par des virgules :

- -
.exempletrois {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-repeat-y: repeat, space;
-}
-
- -

Chaque image aura la valeur associée, dans le même ordre.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-mask-repeat-y")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.md b/files/fr/web/css/-webkit-mask-repeat-y/index.md new file mode 100644 index 0000000000..d3bdaf3055 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-repeat-y/index.md @@ -0,0 +1,85 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-mask-repeat-y définit la façon dont une image de masque est répétée verticalement.

+ +
/* Valeurs avec un mot-clé */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Valeurs multiples */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Valeurs globales */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
repeat
+
L'image de masque est répétée verticalement.
+
no-repeat
+
L'image de masque n'est pas répétée verticalement, seul un exemplaire est dessiné selon l'axe vertical. Le contenu restant sur l'axe vertical pour les éléments masqués n'est pas affiché.
+
space
+
L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords bas et haut de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.
+
round
+
L'image est repétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit haute de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
.exempleun {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: repeat;
+}
+
+.exempledeux {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: no-repeat;
+}
+
+ +

Gestion de plusieurs images

+ +

On peut définir un style de répétition (<repeat-style>) différent pour chacune des images de masque en séparant les valeurs par des virgules :

+ +
.exempletrois {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-y: repeat, space;
+}
+
+ +

Chaque image aura la valeur associée, dans le même ordre.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-mask-repeat-y")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-overflow-scrolling/index.html b/files/fr/web/css/-webkit-overflow-scrolling/index.html deleted file mode 100644 index 5f6b8e2325..0000000000 --- a/files/fr/web/css/-webkit-overflow-scrolling/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: '-webkit-overflow-scrolling' -slug: Web/CSS/-webkit-overflow-scrolling -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-overflow-scrolling ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-overflow-scrolling permet de contrôler si l'appareil tactile utilise l'inertie pour faire défiler l'élément visé par la déclaration.

- -

Valeurs

- -
-
auto
-
Le défilement « normal » est utilisé : le défilement s'arrête dès que le doigt ne touche plus l'écran.
-
touch
-
Le défilement simule une certaine inertie : le contenu continue à défiler légèrement après que le toucher soit fini. La vitesse et la durée du défilement sont proportionnelles à la vitesse de déplacement du doigt sur l'écran. Cela crée un nouveau contexte d'empilement.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  width: 100%;
-  overflow: auto;
-}
-
-p {
-  width: 200%;
-  background: #f5f9fa;
-  border: 2px solid #eaf2f4;
-  padding: 10px;
-}
-
-.scroll-touch {
-  -webkit-overflow-scrolling: touch; /* on laisse le défilement se poursuivre */
-}
-
-.scroll-auto {
-  -webkit-overflow-scrolling: auto; /* on arrête le défilement immédiatement */
-}
- -

HTML

- -
<div class="scroll-touch">
-  <p>
-    Ce paragraphe a un défilement inertiel.
-  </p>
-</div>
-<div class="scroll-auto">
-  <p>
-     Pas celui-ci.
-  </p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est documentée dans la référence CSS de Safari.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-overflow-scrolling")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-overflow-scrolling/index.md b/files/fr/web/css/-webkit-overflow-scrolling/index.md new file mode 100644 index 0000000000..5f6b8e2325 --- /dev/null +++ b/files/fr/web/css/-webkit-overflow-scrolling/index.md @@ -0,0 +1,84 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-overflow-scrolling permet de contrôler si l'appareil tactile utilise l'inertie pour faire défiler l'élément visé par la déclaration.

+ +

Valeurs

+ +
+
auto
+
Le défilement « normal » est utilisé : le défilement s'arrête dès que le doigt ne touche plus l'écran.
+
touch
+
Le défilement simule une certaine inertie : le contenu continue à défiler légèrement après que le toucher soit fini. La vitesse et la durée du défilement sont proportionnelles à la vitesse de déplacement du doigt sur l'écran. Cela crée un nouveau contexte d'empilement.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* on laisse le défilement se poursuivre */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* on arrête le défilement immédiatement */
+}
+ +

HTML

+ +
<div class="scroll-touch">
+  <p>
+    Ce paragraphe a un défilement inertiel.
+  </p>
+</div>
+<div class="scroll-auto">
+  <p>
+     Pas celui-ci.
+  </p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est documentée dans la référence CSS de Safari.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-print-color-adjust/index.html b/files/fr/web/css/-webkit-print-color-adjust/index.html deleted file mode 100644 index dc129741d2..0000000000 --- a/files/fr/web/css/-webkit-print-color-adjust/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: '-webkit-print-color-adjust' -slug: Web/CSS/-webkit-print-color-adjust -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-print-color-adjust ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-print-color-adjust est une extension non-standard qui peut être utilisée pour forcer l'impression des images et couleurs utilisées en arrière-plan pour les navigateurs basés sur WebKit.

- -
/* Valeurs avec un mot-clé */
--webkit-print-color-adjust: economy;
--webkit-print-color-adjust: exact;
-
-/* Valeurs globales */
--webkit-print-color-adjust: inherit;
--webkit-print-color-adjust: initial;
--webkit-print-color-adjust: unset;
-
- -

Syntaxe

- -

La propriété -webkit-print-color-adjust peut être définie avec l'un des mots-clés suivants.

- -

Valeurs

- -
-
economy
-
Le comportement normal : les images et couleurs d'arrière-plan sont uniquement imprimées si l'utilisateur a explicitement permis cette impression dans la boîte de dialogue pour les réglages d'impression.
-
exact
-
Les images et couleurs d'arrière-plan de l'élément auquel la règle CSS est appliquée seront toujours imprimées, les réglages d'impression sont donc surchargés.
-
- -

Exemples

- -
/* Force l'article à être imprimé en noir et blanc */
-article {
-  -webkit-print-color-adjust: exact;
-  background: #222;
-  color: #eee;
-}
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Il existe une proposition sur le wiki du groupe de travail CSS pour standardiser cette propriété.

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-print-color-adjust")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-print-color-adjust/index.md b/files/fr/web/css/-webkit-print-color-adjust/index.md new file mode 100644 index 0000000000..dc129741d2 --- /dev/null +++ b/files/fr/web/css/-webkit-print-color-adjust/index.md @@ -0,0 +1,61 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/-webkit-print-color-adjust +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-print-color-adjust +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-print-color-adjust est une extension non-standard qui peut être utilisée pour forcer l'impression des images et couleurs utilisées en arrière-plan pour les navigateurs basés sur WebKit.

+ +
/* Valeurs avec un mot-clé */
+-webkit-print-color-adjust: economy;
+-webkit-print-color-adjust: exact;
+
+/* Valeurs globales */
+-webkit-print-color-adjust: inherit;
+-webkit-print-color-adjust: initial;
+-webkit-print-color-adjust: unset;
+
+ +

Syntaxe

+ +

La propriété -webkit-print-color-adjust peut être définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
economy
+
Le comportement normal : les images et couleurs d'arrière-plan sont uniquement imprimées si l'utilisateur a explicitement permis cette impression dans la boîte de dialogue pour les réglages d'impression.
+
exact
+
Les images et couleurs d'arrière-plan de l'élément auquel la règle CSS est appliquée seront toujours imprimées, les réglages d'impression sont donc surchargés.
+
+ +

Exemples

+ +
/* Force l'article à être imprimé en noir et blanc */
+article {
+  -webkit-print-color-adjust: exact;
+  background: #222;
+  color: #eee;
+}
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Il existe une proposition sur le wiki du groupe de travail CSS pour standardiser cette propriété.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-print-color-adjust")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-tap-highlight-color/index.html b/files/fr/web/css/-webkit-tap-highlight-color/index.html deleted file mode 100644 index 677d4e4be2..0000000000 --- a/files/fr/web/css/-webkit-tap-highlight-color/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: '-webkit-tap-highlight-color' -slug: Web/CSS/-webkit-tap-highlight-color -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-tap-highlight-color ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-tap-highlight-color est une propriété non-standard qui permet de définir la couleur utilisée pour surligner le lien et indiquer qu'il a bien été activé/touché par l'utilisateur.

- -

Syntaxe

- -
-webkit-tap-highlight-color: red;
--webkit-tap-highlight-color: transparent; /* pour retirer la mise en avant */
-
- -

Valeurs

- -
-
<color>
-
La couleur utilisée pour surligner le lien lorsqu'il est touché.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Apple décrit cette propriété dans le guide Safari pour le contenu web.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

Cette propriété est prise en charge par WebKit/Safari, Blink/Chrome ainsi que par certaines versions d'Internet Explorer et Microsoft Edge.

diff --git a/files/fr/web/css/-webkit-tap-highlight-color/index.md b/files/fr/web/css/-webkit-tap-highlight-color/index.md new file mode 100644 index 0000000000..677d4e4be2 --- /dev/null +++ b/files/fr/web/css/-webkit-tap-highlight-color/index.md @@ -0,0 +1,40 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-tap-highlight-color est une propriété non-standard qui permet de définir la couleur utilisée pour surligner le lien et indiquer qu'il a bien été activé/touché par l'utilisateur.

+ +

Syntaxe

+ +
-webkit-tap-highlight-color: red;
+-webkit-tap-highlight-color: transparent; /* pour retirer la mise en avant */
+
+ +

Valeurs

+ +
+
<color>
+
La couleur utilisée pour surligner le lien lorsqu'il est touché.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Apple décrit cette propriété dans le guide Safari pour le contenu web.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

Cette propriété est prise en charge par WebKit/Safari, Blink/Chrome ainsi que par certaines versions d'Internet Explorer et Microsoft Edge.

diff --git a/files/fr/web/css/-webkit-text-fill-color/index.html b/files/fr/web/css/-webkit-text-fill-color/index.html deleted file mode 100644 index f00bc2ae33..0000000000 --- a/files/fr/web/css/-webkit-text-fill-color/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: '-webkit-text-fill-color' -slug: Web/CSS/-webkit-text-fill-color -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-text-fill-color ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-text-fill-color définit la couleur utilisée pour dessiner le contenu des lettres qui forment un texte. Si cette propriété n'est pas définie, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée.

- -
/* Valeurs de couleurs */
-/* Type <color>        */
--webkit-text-fill-color: red;
--webkit-text-fill-color: #000000;
--webkit-text-fill-color: rgb(100, 200, 0);
-
-/* Valeurs globales */
--webkit-text-fill-color: inherit;
--webkit-text-fill-color: initial;
--webkit-text-fill-color: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
<color>
-
La couleur utilisée pour colorer les lettres du texte.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  margin: 0;
-  font-size: 3em;
-  -webkit-text-fill-color: green;
-}
-
- -

HTML

- -
<p>Ce texte est vert.</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Example", "380px", "60px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Référence CSS Safari -webkit-text-fill-color' dans ce document.Documentation non-officielle, non-standard.Documentation initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-text-fill-color")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-text-fill-color/index.md b/files/fr/web/css/-webkit-text-fill-color/index.md new file mode 100644 index 0000000000..f00bc2ae33 --- /dev/null +++ b/files/fr/web/css/-webkit-text-fill-color/index.md @@ -0,0 +1,98 @@ +--- +title: '-webkit-text-fill-color' +slug: Web/CSS/-webkit-text-fill-color +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-text-fill-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-text-fill-color définit la couleur utilisée pour dessiner le contenu des lettres qui forment un texte. Si cette propriété n'est pas définie, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée.

+ +
/* Valeurs de couleurs */
+/* Type <color>        */
+-webkit-text-fill-color: red;
+-webkit-text-fill-color: #000000;
+-webkit-text-fill-color: rgb(100, 200, 0);
+
+/* Valeurs globales */
+-webkit-text-fill-color: inherit;
+-webkit-text-fill-color: initial;
+-webkit-text-fill-color: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<color>
+
La couleur utilisée pour colorer les lettres du texte.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  margin: 0;
+  font-size: 3em;
+  -webkit-text-fill-color: green;
+}
+
+ +

HTML

+ +
<p>Ce texte est vert.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Example", "380px", "60px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Référence CSS Safari -webkit-text-fill-color' dans ce document.Documentation non-officielle, non-standard.Documentation initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-text-fill-color")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-text-security/index.html b/files/fr/web/css/-webkit-text-security/index.html deleted file mode 100644 index 290fc9d2b7..0000000000 --- a/files/fr/web/css/-webkit-text-security/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: '-webkit-text-security' -slug: Web/CSS/-webkit-text-security -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-text-security ---- -
{{CSSRef}} {{Non-standard_header}}
- -

-webkit-text-security est une propriété CSS non-standard qui permet de masquer les caractères saisis dans un camp d'un formulaire (ex. {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) en les remplaçant par une forme géométrique. Cette propriété n'affecte que les champs qui ne sont pas de type password.

- -

Syntaxe

- -
-webkit-text-security: circle;
--webkit-text-security: disc;
--webkit-text-security: square;
--webkit-text-security: none;
-
- -

Exemples

- -

En utilisant un navigateur qui prend en charge cette propriété et en saisissant des caractères dans le champs, vous pourrez les voir remplacées par des carrés.

- -

HTML

- -
<label for="name">Nom :</label>
-<input type="text" name="name" id="name" />
- -

CSS

- -
input {
-  -webkit-text-security: square;
-}
- -

Résultat

- -

{{EmbedLiveSample("Example")}}

- -

Spécifications

- -

Cette propriété WebKit est spécifique à ce moteur et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

Cette propriété est prise en charge par les navigateurs basés sur WebKit ou Blink.

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-text-security/index.md b/files/fr/web/css/-webkit-text-security/index.md new file mode 100644 index 0000000000..290fc9d2b7 --- /dev/null +++ b/files/fr/web/css/-webkit-text-security/index.md @@ -0,0 +1,54 @@ +--- +title: '-webkit-text-security' +slug: Web/CSS/-webkit-text-security +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-text-security +--- +
{{CSSRef}} {{Non-standard_header}}
+ +

-webkit-text-security est une propriété CSS non-standard qui permet de masquer les caractères saisis dans un camp d'un formulaire (ex. {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) en les remplaçant par une forme géométrique. Cette propriété n'affecte que les champs qui ne sont pas de type password.

+ +

Syntaxe

+ +
-webkit-text-security: circle;
+-webkit-text-security: disc;
+-webkit-text-security: square;
+-webkit-text-security: none;
+
+ +

Exemples

+ +

En utilisant un navigateur qui prend en charge cette propriété et en saisissant des caractères dans le champs, vous pourrez les voir remplacées par des carrés.

+ +

HTML

+ +
<label for="name">Nom :</label>
+<input type="text" name="name" id="name" />
+ +

CSS

+ +
input {
+  -webkit-text-security: square;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Spécifications

+ +

Cette propriété WebKit est spécifique à ce moteur et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

Cette propriété est prise en charge par les navigateurs basés sur WebKit ou Blink.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.html b/files/fr/web/css/-webkit-text-stroke-color/index.html deleted file mode 100644 index 8717f6e1aa..0000000000 --- a/files/fr/web/css/-webkit-text-stroke-color/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: '-webkit-text-stroke-color' -slug: Web/CSS/-webkit-text-stroke-color -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-text-stroke-color ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-text-stroke-color permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de {{cssxref("color")}} qui sera utilisée.

- -
/* Valeurs de couleur */
-/* Type <color>       */
--webkit-text-stroke-color: red;
--webkit-text-stroke-color: #e08ab4;
--webkit-text-stroke-color: rgb(200, 100, 0);
-
-/* Valeurs globales */
--webkit-text-stroke-color: inherit;
--webkit-text-stroke-color: initial;
--webkit-text-stroke-color: unset;
-
- -

{{cssinfo}}

- -

Syntaxe

- -

Valeurs

- -
-
<color>
-
La couleur du contour pour les lettres.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<p>Texte avec un contour</p>
-<input type="color" value="#ff0000">
- -

CSS

- -
p {
-  margin: 0;
-  font-size: 4em;
-  -webkit-text-stroke-width: 3px;
-  -webkit-text-stroke-color: #ff0000;
-  /* Cette valeur peut être modifiée */
-}
-
- - - -

Résultat

- -

{{EmbedLiveSample("Exemples", "500px", "100px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Référence CSS Safari -webkit-text-stroke-color dans ce document.Documentation non-officielle, non-standard.Documentation initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-text-stroke-color")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.md b/files/fr/web/css/-webkit-text-stroke-color/index.md new file mode 100644 index 0000000000..8717f6e1aa --- /dev/null +++ b/files/fr/web/css/-webkit-text-stroke-color/index.md @@ -0,0 +1,105 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-text-stroke-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-text-stroke-color permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de {{cssxref("color")}} qui sera utilisée.

+ +
/* Valeurs de couleur */
+/* Type <color>       */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Valeurs globales */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
<color>
+
La couleur du contour pour les lettres.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<p>Texte avec un contour</p>
+<input type="color" value="#ff0000">
+ +

CSS

+ +
p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: #ff0000;
+  /* Cette valeur peut être modifiée */
+}
+
+ + + +

Résultat

+ +

{{EmbedLiveSample("Exemples", "500px", "100px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Référence CSS Safari -webkit-text-stroke-color dans ce document.Documentation non-officielle, non-standard.Documentation initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-text-stroke-color")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.html b/files/fr/web/css/-webkit-text-stroke-width/index.html deleted file mode 100644 index 9e34011338..0000000000 --- a/files/fr/web/css/-webkit-text-stroke-width/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: '-webkit-text-stroke-width' -slug: Web/CSS/-webkit-text-stroke-width -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-text-stroke-width ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-text-stroke-width permet de définir l'épaisseur du trait qui entoure les lettres du texte.

- -

{{cssinfo}}

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
--webkit-text-stroke-width: thin;
--webkit-text-stroke-width: medium;
--webkit-text-stroke-width: thick;
-
-/* Valeurs de longueur */
-/* Type <length>       */
--webkit-text-stroke-width: 2px;
--webkit-text-stroke-width: 0.1em;
--webkit-text-stroke-width: 1mm;
--webkit-text-stroke-width: 5pt;
-
-/* Valeurs globales */
--webkit-text-stroke-width: inherit;
--webkit-text-stroke-width: initial;
--webkit-text-stroke-width: unset;
-
- -

Valeurs

- -
-
<line-width>
-
La largeur du trait utilisé pour entourer les lettres du texte.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  margin: 0;
-  font-size: 4em;
-  -webkit-text-stroke-color: red;
-}
-
-#thin {
-  -webkit-text-stroke-width: thin;
-}
-
-#medium {
-  -webkit-text-stroke-width: 3px;
-}
-
-#thick {
-  -webkit-text-stroke-width: 1.5mm;
-}
-
- -

HTML

- -
<p id="thin">Trait fin</p>
-<p id="medium">Trait moyen</p>
-<p id="thick">Trait épais</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "450px", "230px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Référence CSS Safari -webkit-text-stroke-width dans ce document.Documentation non-officielle, non-standard.Documentation initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-text-stroke-width")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.md b/files/fr/web/css/-webkit-text-stroke-width/index.md new file mode 100644 index 0000000000..9e34011338 --- /dev/null +++ b/files/fr/web/css/-webkit-text-stroke-width/index.md @@ -0,0 +1,118 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-text-stroke-width +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-text-stroke-width permet de définir l'épaisseur du trait qui entoure les lettres du texte.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+-webkit-text-stroke-width: thin;
+-webkit-text-stroke-width: medium;
+-webkit-text-stroke-width: thick;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+-webkit-text-stroke-width: 2px;
+-webkit-text-stroke-width: 0.1em;
+-webkit-text-stroke-width: 1mm;
+-webkit-text-stroke-width: 5pt;
+
+/* Valeurs globales */
+-webkit-text-stroke-width: inherit;
+-webkit-text-stroke-width: initial;
+-webkit-text-stroke-width: unset;
+
+ +

Valeurs

+ +
+
<line-width>
+
La largeur du trait utilisé pour entourer les lettres du texte.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-color: red;
+}
+
+#thin {
+  -webkit-text-stroke-width: thin;
+}
+
+#medium {
+  -webkit-text-stroke-width: 3px;
+}
+
+#thick {
+  -webkit-text-stroke-width: 1.5mm;
+}
+
+ +

HTML

+ +
<p id="thin">Trait fin</p>
+<p id="medium">Trait moyen</p>
+<p id="thick">Trait épais</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "450px", "230px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Référence CSS Safari -webkit-text-stroke-width dans ce document.Documentation non-officielle, non-standard.Documentation initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-text-stroke-width")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-text-stroke/index.html b/files/fr/web/css/-webkit-text-stroke/index.html deleted file mode 100644 index 1b44d52d3b..0000000000 --- a/files/fr/web/css/-webkit-text-stroke/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: '-webkit-text-stroke' -slug: Web/CSS/-webkit-text-stroke -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-text-stroke ---- -
{{CSSRef}}{{Non-standard_header}}
- -

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 */
--webkit-text-stroke: 4px navy;
-
-/* Valeurs globales */
--webkit-text-stroke: inherit;
--webkit-text-stroke: initial;
--webkit-text-stroke: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
<length>
-
L'épaisseur du contour (cf. {{cssxref("<length>")}}).
-
<color>
-
La couleur du contour (cf. {{cssxref("<color>")}}).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
#exemple {
-  font-size: 3em;
-  margin: 0;
-  -webkit-text-stroke: 2px red;
-}
- -

HTML

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

Résultat

- -

{{EmbedLiveSample("Exemples", 600, 60)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Référence CSS Safari -webkit-text-stroke dans ce document.Documentation non-officielle, non-standard.Documentation initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-text-stroke")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/-webkit-text-stroke/index.md b/files/fr/web/css/-webkit-text-stroke/index.md new file mode 100644 index 0000000000..1b44d52d3b --- /dev/null +++ b/files/fr/web/css/-webkit-text-stroke/index.md @@ -0,0 +1,95 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-text-stroke +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

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 */
+-webkit-text-stroke: 4px navy;
+
+/* Valeurs globales */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<length>
+
L'épaisseur du contour (cf. {{cssxref("<length>")}}).
+
<color>
+
La couleur du contour (cf. {{cssxref("<color>")}}).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#exemple {
+  font-size: 3em;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}
+ +

HTML

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

Résultat

+ +

{{EmbedLiveSample("Exemples", 600, 60)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Référence CSS Safari -webkit-text-stroke dans ce document.Documentation non-officielle, non-standard.Documentation initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-text-stroke")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-webkit-touch-callout/index.html b/files/fr/web/css/-webkit-touch-callout/index.html deleted file mode 100644 index 29ae2fe13a..0000000000 --- a/files/fr/web/css/-webkit-touch-callout/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: '-webkit-touch-callout' -slug: Web/CSS/-webkit-touch-callout -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/-webkit-touch-callout ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propriété -webkit-touch-callout permet de contrôler l'affichage de la légende (callout) affichée par défaut lorsque le toucher est maintenu sur un élément.

- -

Lorsqu'un élément est touché et que la pression est maintenue sur iOS, Safari affiche une bulle d'informations à propos du lien. Cette propriété permet de désactiver ce fonctionnement.

- -
/* Valeurs avec un mot-clé */
--webkit-touch-callout: default;
--webkit-touch-callout: none;
-
-/* Valeurs globales */
--webkit-touch-callout: initial;
--webkit-touch-callout: inherit;
--webkit-touch-callout: unset;
- -

Syntaxe

- -

Valeurs

- -
-
default
-
La légende par défaut est activée.
-
none
-
La légende est désactivée.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
.exemple {
-  -webkit-touch-callout: none;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est décrite dans la référence CSS de Safari.

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.-webkit-touch-callout")}}

diff --git a/files/fr/web/css/-webkit-touch-callout/index.md b/files/fr/web/css/-webkit-touch-callout/index.md new file mode 100644 index 0000000000..29ae2fe13a --- /dev/null +++ b/files/fr/web/css/-webkit-touch-callout/index.md @@ -0,0 +1,54 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/-webkit-touch-callout +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -webkit-touch-callout permet de contrôler l'affichage de la légende (callout) affichée par défaut lorsque le toucher est maintenu sur un élément.

+ +

Lorsqu'un élément est touché et que la pression est maintenue sur iOS, Safari affiche une bulle d'informations à propos du lien. Cette propriété permet de désactiver ce fonctionnement.

+ +
/* Valeurs avec un mot-clé */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Valeurs globales */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;
+ +

Syntaxe

+ +

Valeurs

+ +
+
default
+
La légende par défaut est activée.
+
none
+
La légende est désactivée.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
.exemple {
+  -webkit-touch-callout: none;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est décrite dans la référence CSS de Safari.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.-webkit-touch-callout")}}

diff --git a/files/fr/web/css/@charset/index.html b/files/fr/web/css/@charset/index.html deleted file mode 100644 index 34e47a96b2..0000000000 --- a/files/fr/web/css/@charset/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: '@charset' -slug: Web/CSS/@charset -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@charset ---- -
{{CSSRef}}
- -

La règle @  @charset définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des instructions imbriquées et ne peut donc pas être utilisée à l'intérieur des groupes conditionnels. Si plusieurs règles @charset sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut style d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte.

- -
@charset "utf-8";
- -

Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que {{cssxref("content")}}.

- -

Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :

- -
    -
  1. La valeur du caractère indiquant l'ordre des octets Unicode qui est placé au début du fichier (le BOM)
    2. -
  2. La valeur fournie par l'attribut charset de l'en-tête HTTP Content-Type ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.
    3. -
  3. La règle @ CSS @charset.
    4. -
  4. L'encodage défini dans le document appelant la ressource (l'attribut charset de l'élément {{HTMLElement("link")}}). Cette méthode est désormais obsolète et ne doit plus être utilisée.
    5. -
  5. Dans tous les autres cas, on considère que le document est encodé en UTF-8
    6. -
- -

Syntaxe

- -
@charset <charset>;
-
- -

où

- -
-
charset
-
Est une chaîne de caractères (une valeur CSS de type  {{cssxref("<string>")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans le registre IANA et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec préféré  (preferred) doit être utilisé.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Exemples valides

- -
@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
-@charset "iso-8859-15"; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */
-
- -

Exemples invalides

- -
 @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
-@charset UTF-8;         /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("<string>")}}) */
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.charset")}}

diff --git a/files/fr/web/css/@charset/index.md b/files/fr/web/css/@charset/index.md new file mode 100644 index 0000000000..34e47a96b2 --- /dev/null +++ b/files/fr/web/css/@charset/index.md @@ -0,0 +1,79 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@charset +--- +
{{CSSRef}}
+ +

La règle @  @charset définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des instructions imbriquées et ne peut donc pas être utilisée à l'intérieur des groupes conditionnels. Si plusieurs règles @charset sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut style d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte.

+ +
@charset "utf-8";
+ +

Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que {{cssxref("content")}}.

+ +

Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :

+ +
    +
  1. La valeur du caractère indiquant l'ordre des octets Unicode qui est placé au début du fichier (le BOM)
    2. +
  2. La valeur fournie par l'attribut charset de l'en-tête HTTP Content-Type ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.
    3. +
  3. La règle @ CSS @charset.
    4. +
  4. L'encodage défini dans le document appelant la ressource (l'attribut charset de l'élément {{HTMLElement("link")}}). Cette méthode est désormais obsolète et ne doit plus être utilisée.
    5. +
  5. Dans tous les autres cas, on considère que le document est encodé en UTF-8
    6. +
+ +

Syntaxe

+ +
@charset <charset>;
+
+ +

où

+ +
+
charset
+
Est une chaîne de caractères (une valeur CSS de type  {{cssxref("<string>")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans le registre IANA et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec préféré  (preferred) doit être utilisé.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Exemples valides

+ +
@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
+@charset "iso-8859-15"; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */
+
+ +

Exemples invalides

+ +
 @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
+@charset UTF-8;         /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("<string>")}}) */
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.charset")}}

diff --git a/files/fr/web/css/@counter-style/additive-symbols/index.html b/files/fr/web/css/@counter-style/additive-symbols/index.html deleted file mode 100644 index 538f1b0fe8..0000000000 --- a/files/fr/web/css/@counter-style/additive-symbols/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: additive-symbols -slug: Web/CSS/@counter-style/additive-symbols -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/additive-symbols ---- -
{{CSSRef}}
- -

Le descripteur additive-symbols, utilisé pour la règle @ {{cssxref("@counter-style")}} est semblable au descripteur {{cssxref('symbols')}} et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur {{cssxref('system')}} prend la valeur additive. Le descripteur additive-symbols définit des tuples additifs. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes de notation additive tels que les nombres romains.

- -
additive-symbols: 3 "0";
-additive-symbols: 3 "0", 2 "\2E\20";
-additive-symbols: 3 "0", 2 url(symbol.png);
-
- -

Lorsque la valeur du descripteur system est cyclic, numeric, alphabetic, symbolic ou fixed, c'est le descripteur symbols qui est utilisé à la place de additive-symbols afin de définir les symboles utilisés pour le compteur.

- -

Syntaxe

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style additive-symbols-example {
-  system: additive;
-  additive-symbols: V 5, IV 4, I 1;
-}
-.exemple {
-  list-style: additive-symbols-example;
-}
- -

HTML

- -
<ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.additive-symbols")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/additive-symbols/index.md b/files/fr/web/css/@counter-style/additive-symbols/index.md new file mode 100644 index 0000000000..538f1b0fe8 --- /dev/null +++ b/files/fr/web/css/@counter-style/additive-symbols/index.md @@ -0,0 +1,85 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/additive-symbols +--- +
{{CSSRef}}
+ +

Le descripteur additive-symbols, utilisé pour la règle @ {{cssxref("@counter-style")}} est semblable au descripteur {{cssxref('symbols')}} et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur {{cssxref('system')}} prend la valeur additive. Le descripteur additive-symbols définit des tuples additifs. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes de notation additive tels que les nombres romains.

+ +
additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+
+ +

Lorsque la valeur du descripteur system est cyclic, numeric, alphabetic, symbolic ou fixed, c'est le descripteur symbols qui est utilisé à la place de additive-symbols afin de définir les symboles utilisés pour le compteur.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: V 5, IV 4, I 1;
+}
+.exemple {
+  list-style: additive-symbols-example;
+}
+ +

HTML

+ +
<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.additive-symbols")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/fallback/index.html b/files/fr/web/css/@counter-style/fallback/index.html deleted file mode 100644 index 92c54c2c55..0000000000 --- a/files/fr/web/css/@counter-style/fallback/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: fallback -slug: Web/CSS/@counter-style/fallback -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/fallback ---- -
{{CSSRef}}
- -

Le descripteur fallback, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur decimal qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont :

- - - -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-fallback: lower-alpha;
-fallback: custom-gangnam-style;
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style fallback-example {
-  system: fixed; symbols: "\24B6" "\24B7" "\24B8";
-  fallback: upper-alpha;
-}
-.exemple {
-  list-style: fallback-example;
-}
- -

HTML

- -
<ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-fallback', 'fallback')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.fallback")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/fallback/index.md b/files/fr/web/css/@counter-style/fallback/index.md new file mode 100644 index 0000000000..92c54c2c55 --- /dev/null +++ b/files/fr/web/css/@counter-style/fallback/index.md @@ -0,0 +1,88 @@ +--- +title: fallback +slug: Web/CSS/@counter-style/fallback +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/fallback +--- +
{{CSSRef}}
+ +

Le descripteur fallback, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur decimal qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont :

+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+fallback: lower-alpha;
+fallback: custom-gangnam-style;
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style fallback-example {
+  system: fixed; symbols: "\24B6" "\24B7" "\24B8";
+  fallback: upper-alpha;
+}
+.exemple {
+  list-style: fallback-example;
+}
+ +

HTML

+ +
<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-fallback', 'fallback')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.fallback")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/index.html b/files/fr/web/css/@counter-style/index.html deleted file mode 100644 index 6a557b88d4..0000000000 --- a/files/fr/web/css/@counter-style/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: '@counter-style' -slug: Web/CSS/@counter-style -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@counter-style ---- -
{{CSSRef}}
- -

La règle @ CSS @counter-style permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle @counter-style explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes.

- -
@counter-style thumbs {
-  system: cyclic;
-  symbols: "\1F44D";
-  suffix: " ";
-}
-
-ul {
-   list-style: thumbs;
-}
- -

La version initiale de CSS définit un ensemble de compteurs qui peuvent être utilisés pour mettre en forme les listes. Malgré l'ajout de nouveaux styles au fur et à mesure, cette approche s'est retrouvée limitée pour couvrir tous les besoins liés à la typographie. La règle @counter-style permet donc aux auteurs de définir librement d'autres styles si les styles prédéfinis ne conviennent pas.

- -

Syntaxe

- -

Descripteurs

- -

Chaque @counter-style est identifié par un nom et possède un ensemble de descripteurs.

- -
-
{{cssxref("@counter-style/system", "system")}}
-
Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes.
-
- -
-
{{cssxref("@counter-style/negative", "negative")}}
-
Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative.
-
- -
-
{{cssxref("@counter-style/prefix", "prefix")}}
-
Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif.
-
- -
-
{{cssxref("@counter-style/suffix", "suffix")}}
-
Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation.
-
- -
-
{{cssxref("@counter-style/range", "range")}}
-
Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours.
-
- -
-
{{cssxref("@counter-style/pad", "pad")}}
-
Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement.
-
- -
-
{{cssxref("@counter-style/fallback", "fallback")}}
-
Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne.
-
- -
-
{{cssxref("@counter-style/symbols", "symbols")}}
-
Ce descripteur définit les symboles qui doivent être utilisés pour représenter le marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants. L'utilisation des symboles et leur combinaison pour représenter le marqueur dépend de l'algorithme indiqué via le descripteur system. Ainsi, si system vaut fixed, chacun des N symboles définis dans le descripteur sera utilisé pour représenter les N premiers symboles. Une fois l'ensemble épuisé, le style de secours sera utilisé pour le reste de la liste.
-
- Cet exemple de règle @counter-style utilise des images plutôt que des caractères. Attention, l'utilisation d'image pour les symboles est une fonctionnalité à risque en termes de conservation dans la spécification et n'est implémentée par aucun navigateur.
- - 
@counter-style winners-list {
-  system: fixed;
-  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
-  suffix: " ";
-}
-
-
- -
-
{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
-
Certains symboles définis via le descripteurs symbols sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des tuples additifs décrit avec ce descripteur. Chaque tuple additif se compose 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.
-
- -
-
{{cssxref("@counter-style/speak-as", "speak-as")}}
-
Ce descripteur indique la façon dont le compteur peut être prononcé par un lecteur d'écran. Ainsi, la valeur du symbole peut être lue comme un nombre ou comme un alphabet ou comme des sons fournis.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style circled-alpha {
-  system: fixed;
-  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
-  suffix: " ";
-}
- -
.exemple {
-   list-style: circled-alpha;
-}
-
- -

HTML

- -
<ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-  <li>Six</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -
-

Note : Une page d'exemple avec plus de variables est disponible ici : https://mdn.github.io/css-examples/counter-style-demo/.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style")}}

- -

Notes relatives à Quantum

- - - -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/index.md b/files/fr/web/css/@counter-style/index.md new file mode 100644 index 0000000000..6a557b88d4 --- /dev/null +++ b/files/fr/web/css/@counter-style/index.md @@ -0,0 +1,168 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@counter-style +--- +
{{CSSRef}}
+ +

La règle @ CSS @counter-style permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle @counter-style explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes.

+ +
@counter-style thumbs {
+  system: cyclic;
+  symbols: "\1F44D";
+  suffix: " ";
+}
+
+ul {
+   list-style: thumbs;
+}
+ +

La version initiale de CSS définit un ensemble de compteurs qui peuvent être utilisés pour mettre en forme les listes. Malgré l'ajout de nouveaux styles au fur et à mesure, cette approche s'est retrouvée limitée pour couvrir tous les besoins liés à la typographie. La règle @counter-style permet donc aux auteurs de définir librement d'autres styles si les styles prédéfinis ne conviennent pas.

+ +

Syntaxe

+ +

Descripteurs

+ +

Chaque @counter-style est identifié par un nom et possède un ensemble de descripteurs.

+ +
+
{{cssxref("@counter-style/system", "system")}}
+
Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes.
+
+ +
+
{{cssxref("@counter-style/negative", "negative")}}
+
Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative.
+
+ +
+
{{cssxref("@counter-style/prefix", "prefix")}}
+
Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif.
+
+ +
+
{{cssxref("@counter-style/suffix", "suffix")}}
+
Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation.
+
+ +
+
{{cssxref("@counter-style/range", "range")}}
+
Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours.
+
+ +
+
{{cssxref("@counter-style/pad", "pad")}}
+
Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement.
+
+ +
+
{{cssxref("@counter-style/fallback", "fallback")}}
+
Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne.
+
+ +
+
{{cssxref("@counter-style/symbols", "symbols")}}
+
Ce descripteur définit les symboles qui doivent être utilisés pour représenter le marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants. L'utilisation des symboles et leur combinaison pour représenter le marqueur dépend de l'algorithme indiqué via le descripteur system. Ainsi, si system vaut fixed, chacun des N symboles définis dans le descripteur sera utilisé pour représenter les N premiers symboles. Une fois l'ensemble épuisé, le style de secours sera utilisé pour le reste de la liste.
+
+ Cet exemple de règle @counter-style utilise des images plutôt que des caractères. Attention, l'utilisation d'image pour les symboles est une fonctionnalité à risque en termes de conservation dans la spécification et n'est implémentée par aucun navigateur.
+ + 
@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}
+
+
+ +
+
{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+
Certains symboles définis via le descripteurs symbols sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des tuples additifs décrit avec ce descripteur. Chaque tuple additif se compose 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.
+
+ +
+
{{cssxref("@counter-style/speak-as", "speak-as")}}
+
Ce descripteur indique la façon dont le compteur peut être prononcé par un lecteur d'écran. Ainsi, la valeur du symbole peut être lue comme un nombre ou comme un alphabet ou comme des sons fournis.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}
+ +
.exemple {
+   list-style: circled-alpha;
+}
+
+ +

HTML

+ +
<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+  <li>Six</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +
+

Note : Une page d'exemple avec plus de variables est disponible ici : https://mdn.github.io/css-examples/counter-style-demo/.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style")}}

+ +

Notes relatives à Quantum

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/negative/index.html b/files/fr/web/css/@counter-style/negative/index.html deleted file mode 100644 index 673163de4e..0000000000 --- a/files/fr/web/css/@counter-style/negative/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: negative -slug: Web/CSS/@counter-style/negative -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/negative ---- -
{{CSSRef}}
- -

Le descripteur negative, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir la représentation du compteur lorsque la valeur est négative.

- -
/* Valeurs représentant les symboles */
-negative: "-";       /* Préfixe '-' si la valeur est négative */
-negative: "(" ")";   /* Entoure la valeur avec '(' et ')' si elle est négative */
-
- -

Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur negative n'a d'effet que si la valeur du descripteur system est symbolic, alphabetic, numeric, additive ou extends et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur negative est fourni, il est ignoré.

- -

Syntaxe

- -

Valeurs

- -
-
Premier symbole
-
Le préfixe (type {{cssxref("<symbol>")}}) à ajouter à la représentation lorsque la valeur du compteur est négative.
-
Deuxième symbole {{optional_inline}}
-
Si cette valeur (type {{cssxref("<symbol>")}}) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style neg {
-  system: numeric;
-  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
-  negative: "(-" ")";
-}
-.exemple {
-  list-style: neg;
-}
- -

HTML

- -
<ul class="exemple" start="-3">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.negative")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/negative/index.md b/files/fr/web/css/@counter-style/negative/index.md new file mode 100644 index 0000000000..673163de4e --- /dev/null +++ b/files/fr/web/css/@counter-style/negative/index.md @@ -0,0 +1,95 @@ +--- +title: negative +slug: Web/CSS/@counter-style/negative +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/negative +--- +
{{CSSRef}}
+ +

Le descripteur negative, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir la représentation du compteur lorsque la valeur est négative.

+ +
/* Valeurs représentant les symboles */
+negative: "-";       /* Préfixe '-' si la valeur est négative */
+negative: "(" ")";   /* Entoure la valeur avec '(' et ')' si elle est négative */
+
+ +

Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur negative n'a d'effet que si la valeur du descripteur system est symbolic, alphabetic, numeric, additive ou extends et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur negative est fourni, il est ignoré.

+ +

Syntaxe

+ +

Valeurs

+ +
+
Premier symbole
+
Le préfixe (type {{cssxref("<symbol>")}}) à ajouter à la représentation lorsque la valeur du compteur est négative.
+
Deuxième symbole {{optional_inline}}
+
Si cette valeur (type {{cssxref("<symbol>")}}) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style neg {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  negative: "(-" ")";
+}
+.exemple {
+  list-style: neg;
+}
+ +

HTML

+ +
<ul class="exemple" start="-3">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.negative")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/pad/index.html b/files/fr/web/css/@counter-style/pad/index.html deleted file mode 100644 index a27313ddef..0000000000 --- a/files/fr/web/css/@counter-style/pad/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: pad -slug: Web/CSS/@counter-style/pad -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/pad ---- -
{{CSSRef}}
- -

Le descripteur pad, utilisé dans la règle @ {{cssxref("@counter-style")}} peut être utilisé pour que la représentation du marqueur pour le compteur ait une longueur minimale. Si la représentation du marqueur est plus courte que la longueur indiquée, le marqueur sera complété autant de fois que nécessaire avec le symbole indiqué. Les représentations du marqueur qui sont plus longues que la longueur minimale indiquée dans le descripteur sont construites normalement.

- -

Le descripteur pad utilise deux paramètres :

- - - -

Syntaxe

- -
pad: 3 "0";
-
- -

Valeurs

- -
-
<integer> && <symbol>
-
La composante <integer> indique la longueur minimale du marqueur. La valeur doit être positive. Si la représentation du marqueur est plus courte, elle sera complétée avec la valeur indiquée par la composante <symbol>.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style pad-example {
-  system: numeric;
-  symbols: "0" "1" "2" "3" "4" "5";
-  pad: 2 "0";
-}
-.exemple {
-  list-style: pad-example;
-}
- -

HTML

- -
<ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-pad', 'pad')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.pad")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/pad/index.md b/files/fr/web/css/@counter-style/pad/index.md new file mode 100644 index 0000000000..a27313ddef --- /dev/null +++ b/files/fr/web/css/@counter-style/pad/index.md @@ -0,0 +1,96 @@ +--- +title: pad +slug: Web/CSS/@counter-style/pad +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/pad +--- +
{{CSSRef}}
+ +

Le descripteur pad, utilisé dans la règle @ {{cssxref("@counter-style")}} peut être utilisé pour que la représentation du marqueur pour le compteur ait une longueur minimale. Si la représentation du marqueur est plus courte que la longueur indiquée, le marqueur sera complété autant de fois que nécessaire avec le symbole indiqué. Les représentations du marqueur qui sont plus longues que la longueur minimale indiquée dans le descripteur sont construites normalement.

+ +

Le descripteur pad utilise deux paramètres :

+ + + +

Syntaxe

+ +
pad: 3 "0";
+
+ +

Valeurs

+ +
+
<integer> && <symbol>
+
La composante <integer> indique la longueur minimale du marqueur. La valeur doit être positive. Si la représentation du marqueur est plus courte, elle sera complétée avec la valeur indiquée par la composante <symbol>.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style pad-example {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5";
+  pad: 2 "0";
+}
+.exemple {
+  list-style: pad-example;
+}
+ +

HTML

+ +
<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-pad', 'pad')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.pad")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/prefix/index.html b/files/fr/web/css/@counter-style/prefix/index.html deleted file mode 100644 index 34af4ccc6e..0000000000 --- a/files/fr/web/css/@counter-style/prefix/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: prefix -slug: Web/CSS/@counter-style/prefix -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/prefix ---- -
{{CSSRef}}
- -

Le descripteur prefix, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.

- -

Syntaxe

- -
/* Valeurs de symbole */
-prefix: "»";
-prefix: "Page";
-
- -

Valeurs

- -
-
<symbol>
-
Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. Cette valeur peut être une valeur de type {{cssxref("<string>")}}, {{cssxref("<image>")}} ou {{cssxref("<custom-ident>")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style chapitres {
-  system: numeric;
-  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
-  prefix: 'Chapitre ';
-}
-
-.exemple {
-  list-style: chapitres;
-  padding-left: 15ch;
-}
- -

HTML

- -
<ul class="exemple">
-  <li>Au fond du terrier</li>
-  <li>La mare aux larmes</li>
-  <li>La course cocasse</li>
-  <li>L'habitation du lapin blanc</li>
-  <li>Conseils d'une chenille</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-prefix', 'prefix')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.prefix")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/prefix/index.md b/files/fr/web/css/@counter-style/prefix/index.md new file mode 100644 index 0000000000..34af4ccc6e --- /dev/null +++ b/files/fr/web/css/@counter-style/prefix/index.md @@ -0,0 +1,93 @@ +--- +title: prefix +slug: Web/CSS/@counter-style/prefix +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/prefix +--- +
{{CSSRef}}
+ +

Le descripteur prefix, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.

+ +

Syntaxe

+ +
/* Valeurs de symbole */
+prefix: "»";
+prefix: "Page";
+
+ +

Valeurs

+ +
+
<symbol>
+
Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. Cette valeur peut être une valeur de type {{cssxref("<string>")}}, {{cssxref("<image>")}} ou {{cssxref("<custom-ident>")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style chapitres {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  prefix: 'Chapitre ';
+}
+
+.exemple {
+  list-style: chapitres;
+  padding-left: 15ch;
+}
+ +

HTML

+ +
<ul class="exemple">
+  <li>Au fond du terrier</li>
+  <li>La mare aux larmes</li>
+  <li>La course cocasse</li>
+  <li>L'habitation du lapin blanc</li>
+  <li>Conseils d'une chenille</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-prefix', 'prefix')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.prefix")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/range/index.html b/files/fr/web/css/@counter-style/range/index.html deleted file mode 100644 index 4bc4ce55cd..0000000000 --- a/files/fr/web/css/@counter-style/range/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: range -slug: Web/CSS/@counter-style/range -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/range ---- -
{{CSSRef}}
- -

Le descripteur range, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir l'intervalle de valeurs pris en compte par le compteur personnalisé. Si la valeur du compteur de la liste est en dehors de cet intervalle, ce sera la mise en forme de secours qui sera utilisée pour représenter le marqueur du compteur. La valeur de range peut être auto ou une liste de majorants/minorants, séparés par des virgules.

- -

Si range vaut auto :

- - - -

Si range est défini par des entiers, on peut utiliser le mot-clé infinite pour indiquer l'infini. Lorsque infinite est indiqué comme la première valeur d'un intervalle, il est interprété comme l'infini négatif, sinon comme l'infini positif.

- -

{{cssinfo}}

- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-range: auto;
-
-/* Valeurs encadrant un intervalle */
-range: 2 5;
-range: infinite 10;
-range: 6 infinite;
-range: infinite infinite;
-
-/* Valeurs indiquant plusieurs intervalles */
-range: 2 5, 8 10;
-range: infinite 6, 10 infinite;
-
- -

Values

- -
-
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é.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style range-multi-example {
-  system: cyclic;
-  symbols: "\25A0" "\25A1";
-  range: 2 4, 7 9;
-}
-
-.exemple {
-  list-style: range-multi-example;
-}
- -

HTML

- -
<ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-  <li>Six</li>
-  <li>Sept</li>
-  <li>Huit</li>
-  <li>Neuf</li>
-  <li>Dix</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Counter Styles", "#counter-style-range", "range")}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.range")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/range/index.md b/files/fr/web/css/@counter-style/range/index.md new file mode 100644 index 0000000000..4bc4ce55cd --- /dev/null +++ b/files/fr/web/css/@counter-style/range/index.md @@ -0,0 +1,119 @@ +--- +title: range +slug: Web/CSS/@counter-style/range +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/range +--- +
{{CSSRef}}
+ +

Le descripteur range, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir l'intervalle de valeurs pris en compte par le compteur personnalisé. Si la valeur du compteur de la liste est en dehors de cet intervalle, ce sera la mise en forme de secours qui sera utilisée pour représenter le marqueur du compteur. La valeur de range peut être auto ou une liste de majorants/minorants, séparés par des virgules.

+ +

Si range vaut auto :

+ + + +

Si range est défini par des entiers, on peut utiliser le mot-clé infinite pour indiquer l'infini. Lorsque infinite est indiqué comme la première valeur d'un intervalle, il est interprété comme l'infini négatif, sinon comme l'infini positif.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+range: auto;
+
+/* Valeurs encadrant un intervalle */
+range: 2 5;
+range: infinite 10;
+range: 6 infinite;
+range: infinite infinite;
+
+/* Valeurs indiquant plusieurs intervalles */
+range: 2 5, 8 10;
+range: infinite 6, 10 infinite;
+
+ +

Values

+ +
+
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é.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style range-multi-example {
+  system: cyclic;
+  symbols: "\25A0" "\25A1";
+  range: 2 4, 7 9;
+}
+
+.exemple {
+  list-style: range-multi-example;
+}
+ +

HTML

+ +
<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+  <li>Six</li>
+  <li>Sept</li>
+  <li>Huit</li>
+  <li>Neuf</li>
+  <li>Dix</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Counter Styles", "#counter-style-range", "range")}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.range")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/speak-as/index.html b/files/fr/web/css/@counter-style/speak-as/index.html deleted file mode 100644 index 2dd23e1c44..0000000000 --- a/files/fr/web/css/@counter-style/speak-as/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: speak-as -slug: Web/CSS/@counter-style/speak-as -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/speak-as ---- -
{{CSSRef}}
- -

Le descripteur speak-as, rattaché à la règle @ {{cssxref("@counter-style")}}, permet d'indiquer la représentation sonore du compteur qui doit être utilisée par l'agent utilisateur si nécessaire. Ainsi, on peut utiliser ce descripteur pour que le compteur soit énoncé comme un nombre ou avec un signal audio particulier.

- -

Ce descripteur pourra prendre les valeurs auto, bullets, numbers, words, spell-out ou alors pourra pointer vers un autre style de compteur avec le nom de ce style.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-speak-as: auto;
-speak-as: bullets;
-speak-as: numbers;
-speak-as: words;
-speak-as: spell-out;
-
-/* Nom d'un autre style @counter-style */
-speak-as: <counter-style-name>;
-
- -

Valeurs

- -
-
auto
-
Dans ce cas, la valeur réelle de speak-as sera définie selon la valeur utilisée pour le descripteur {{cssxref("system")}} : -
    -
  • Si system vaut alphabetic, speak-as sera alors synonyme de spell-out.
    • -
  • Si system vaut cyclic, speak-as sera alors synonyme de bullets.
    • -
  • Si system vaut extends, la valeur de speak-as sera la même que celle correspondante à auto dans le style étendu.
    • -
  • Dans les autres cas, le comportement de numbers sera utilisé.
    • -
-
-
bullets
-
Un morceau ou un signal sonore utilisé par l'agent utilisateur et qui représente la façon d'énoncer une liste non-ordonnée.
-
numbers
-
La valeur numérique du compteur sera énoncée dans la langue du document.
-
words
-
L'agent utilisateur génèrera une représentation normale du compteur et la lira comme un mot, dans la langue du document.
-
spell-out
-
L'agent utilisateur génèrera une représentation normale du compteur et l'énoncera en l'épelant. Si l'agent utilisateur ne sait pas comment prononcer une valeur du compteur, il la prononcera comme avec la valeur numbers.
-
<counter-style-name>
-
Si la valeur du descripteur est le nom d'un autre style de compteur, ce sera la valeur de speak-as de ce style qui sera utilisée. Si la style visé n'existe pas, cette valeur sera alors synonyme de auto.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style speak-as-exemple {
-  system: fixed;
-  symbols:     ;
-  suffix: " ";
-  speak-as: numbers;
-}
-
-
-.exemple {
-  list-style: speak-as-exemple;
-}
- -

HTML

- -
<ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Accessibilité

- -

La prise en charge de cette fonctionnalité par les outils d'assistance est actuellement très restreinte. Veillez à ne pas reposer sur cette propriété si vous souhaitez transmettre des informations majeures quant au but de la page.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.speak-as")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/speak-as/index.md b/files/fr/web/css/@counter-style/speak-as/index.md new file mode 100644 index 0000000000..2dd23e1c44 --- /dev/null +++ b/files/fr/web/css/@counter-style/speak-as/index.md @@ -0,0 +1,127 @@ +--- +title: speak-as +slug: Web/CSS/@counter-style/speak-as +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/speak-as +--- +
{{CSSRef}}
+ +

Le descripteur speak-as, rattaché à la règle @ {{cssxref("@counter-style")}}, permet d'indiquer la représentation sonore du compteur qui doit être utilisée par l'agent utilisateur si nécessaire. Ainsi, on peut utiliser ce descripteur pour que le compteur soit énoncé comme un nombre ou avec un signal audio particulier.

+ +

Ce descripteur pourra prendre les valeurs auto, bullets, numbers, words, spell-out ou alors pourra pointer vers un autre style de compteur avec le nom de ce style.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+speak-as: auto;
+speak-as: bullets;
+speak-as: numbers;
+speak-as: words;
+speak-as: spell-out;
+
+/* Nom d'un autre style @counter-style */
+speak-as: <counter-style-name>;
+
+ +

Valeurs

+ +
+
auto
+
Dans ce cas, la valeur réelle de speak-as sera définie selon la valeur utilisée pour le descripteur {{cssxref("system")}} : +
    +
  • Si system vaut alphabetic, speak-as sera alors synonyme de spell-out.
    • +
  • Si system vaut cyclic, speak-as sera alors synonyme de bullets.
    • +
  • Si system vaut extends, la valeur de speak-as sera la même que celle correspondante à auto dans le style étendu.
    • +
  • Dans les autres cas, le comportement de numbers sera utilisé.
    • +
+
+
bullets
+
Un morceau ou un signal sonore utilisé par l'agent utilisateur et qui représente la façon d'énoncer une liste non-ordonnée.
+
numbers
+
La valeur numérique du compteur sera énoncée dans la langue du document.
+
words
+
L'agent utilisateur génèrera une représentation normale du compteur et la lira comme un mot, dans la langue du document.
+
spell-out
+
L'agent utilisateur génèrera une représentation normale du compteur et l'énoncera en l'épelant. Si l'agent utilisateur ne sait pas comment prononcer une valeur du compteur, il la prononcera comme avec la valeur numbers.
+
<counter-style-name>
+
Si la valeur du descripteur est le nom d'un autre style de compteur, ce sera la valeur de speak-as de ce style qui sera utilisée. Si la style visé n'existe pas, cette valeur sera alors synonyme de auto.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style speak-as-exemple {
+  system: fixed;
+  symbols:     ;
+  suffix: " ";
+  speak-as: numbers;
+}
+
+
+.exemple {
+  list-style: speak-as-exemple;
+}
+ +

HTML

+ +
<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Accessibilité

+ +

La prise en charge de cette fonctionnalité par les outils d'assistance est actuellement très restreinte. Veillez à ne pas reposer sur cette propriété si vous souhaitez transmettre des informations majeures quant au but de la page.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.speak-as")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/suffix/index.html b/files/fr/web/css/@counter-style/suffix/index.html deleted file mode 100644 index 9dfe61362b..0000000000 --- a/files/fr/web/css/@counter-style/suffix/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: suffix -slug: Web/CSS/@counter-style/suffix -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/suffix ---- -
{{CSSRef}}
- -

Le descripteur suffix, utilisé avec la règle @ {{cssxref("@counter-style")}}, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera "\2E\20" (un point « . » suivi par un espace).

- -

Syntaxe

- -
/* Une valeur de type <symbol> */
-suffix: "";
-suffix: ") ";
-
- -

Valeur

- -
-
<symbol>
-
Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type {{cssxref("<string>")}}, {{cssxref("<image>")}} ou {{cssxref("<custom-ident>")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style options {
-  system: fixed;
-  symbols: A B C D;
-  suffix: ") ";
-}
-
-.exemple {
-  list-style: options;
-}
- -

HTML

- -
<ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Autre</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-suffix', 'suffix')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.suffix")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/suffix/index.md b/files/fr/web/css/@counter-style/suffix/index.md new file mode 100644 index 0000000000..9dfe61362b --- /dev/null +++ b/files/fr/web/css/@counter-style/suffix/index.md @@ -0,0 +1,91 @@ +--- +title: suffix +slug: Web/CSS/@counter-style/suffix +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/suffix +--- +
{{CSSRef}}
+ +

Le descripteur suffix, utilisé avec la règle @ {{cssxref("@counter-style")}}, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera "\2E\20" (un point « . » suivi par un espace).

+ +

Syntaxe

+ +
/* Une valeur de type <symbol> */
+suffix: "";
+suffix: ") ";
+
+ +

Valeur

+ +
+
<symbol>
+
Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type {{cssxref("<string>")}}, {{cssxref("<image>")}} ou {{cssxref("<custom-ident>")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style options {
+  system: fixed;
+  symbols: A B C D;
+  suffix: ") ";
+}
+
+.exemple {
+  list-style: options;
+}
+ +

HTML

+ +
<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Autre</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-suffix', 'suffix')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.suffix")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/symbols/index.html b/files/fr/web/css/@counter-style/symbols/index.html deleted file mode 100644 index 758b13e4aa..0000000000 --- a/files/fr/web/css/@counter-style/symbols/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: symbols -slug: Web/CSS/@counter-style/symbols -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/symbols ---- -
{{CSSRef}}
- -

Le descripteur symbols, rattaché à la règle @ {{cssxref("@counter-style")}}, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.

- -
symbols: A B C D E;
-symbols: "\24B6" "\24B7" "\24B8" D E;
-symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
-symbols: url('premier.svg') url('deuxieme.svg') url('troisieme.svg');
-symbols: indic-numbers;
-
- -

Le descripteur symbols doit être défini lorsque la valeur du descripteur {{cssxref('system')}} vaut cyclic, numeric, alphabetic, symbolic ou fixed. Lorsque system vaut additive, ce sera le descripteur {{cssxref('additive-symbols')}} qui sera utilisé afin de définir les symboles.

- - - -

Syntaxe

- -

Valeurs

- - - -
-
<symbol>
-
Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur symbols peut être :
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@counter-style symbols-exemple {
-  system: fixed;
-  symbols: A "1" "\24B7" D E;
-}
-
-.exemple {
-  list-style: symbols-exemple;
-}
- -

HTML

- -
<ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.symbols")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/symbols/index.md b/files/fr/web/css/@counter-style/symbols/index.md new file mode 100644 index 0000000000..758b13e4aa --- /dev/null +++ b/files/fr/web/css/@counter-style/symbols/index.md @@ -0,0 +1,106 @@ +--- +title: symbols +slug: Web/CSS/@counter-style/symbols +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/symbols +--- +
{{CSSRef}}
+ +

Le descripteur symbols, rattaché à la règle @ {{cssxref("@counter-style")}}, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.

+ +
symbols: A B C D E;
+symbols: "\24B6" "\24B7" "\24B8" D E;
+symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
+symbols: url('premier.svg') url('deuxieme.svg') url('troisieme.svg');
+symbols: indic-numbers;
+
+ +

Le descripteur symbols doit être défini lorsque la valeur du descripteur {{cssxref('system')}} vaut cyclic, numeric, alphabetic, symbolic ou fixed. Lorsque system vaut additive, ce sera le descripteur {{cssxref('additive-symbols')}} qui sera utilisé afin de définir les symboles.

+ + + +

Syntaxe

+ +

Valeurs

+ + + +
+
<symbol>
+
Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur symbols peut être :
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@counter-style symbols-exemple {
+  system: fixed;
+  symbols: A "1" "\24B7" D E;
+}
+
+.exemple {
+  list-style: symbols-exemple;
+}
+ +

HTML

+ +
<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.symbols")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@counter-style/system/index.html b/files/fr/web/css/@counter-style/system/index.html deleted file mode 100644 index 07ba664616..0000000000 --- a/files/fr/web/css/@counter-style/system/index.html +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: system -slug: Web/CSS/@counter-style/system -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@counter-style/system ---- -
{{CSSRef}}
- -

La descripteur system, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir l'algorithme utilisé pour convertir la valeur entière d'un compteur en une chaîne de caractères.

- -
/* Valeurs avec un mot-clé */
-system: cyclic;
-system: numeric;
-system: alphabetic;
-system: symbolic;
-system: additive;
-system: fixed;
-
-/* Combinaison de valeurs */
-system: fixed 3;
-system: extends decimal;
-
- -

Si l'algorithme défini dans ce descripteur est incapable de construire la chaîne de caractères pour une valeur donnée, ce sera le système de secours qui sera utilisé ({{cssxref("fallback")}}).

- -

Syntaxe

- -

Ce descripteur peut prendre l'une de ces trois formes :

- - - -
-
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()")}}.
-
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. - 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.
-
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. -
-
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).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Utilisation de cyclic

- -

CSS

- -
@counter-style fisheye {
-  system: cyclic;
-  symbols: ◉;
-  suffix: " ";
-}
-
-.list {
-    list-style: fisheye;
-}
- -

HTML

- -
<ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Utilisation_de_cyclic')}}

- -

Utilisation de fixed

- -

CSS

- -
@counter-style circled-digits {
-  system: fixed;
-  symbols: ➀ ➁ ➂;
-  suffix: ' ';
-}
-
-.list {
-  list-style: circled-digits;
-}
-
- -

HTML

- -
<ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Utilisation_de_fixed')}}

- -

Utilisation de symbolic

- -

CSS

- -
@counter-style abc {
-  system: symbolic;
-  symbols: a b c;
-  suffix: ". ";
-}
-
-.list {
-  list-style: abc;
-}
-
- -

HTML

- -
<ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Utilisation_de_symbolic')}}

- -

Utilisation de alphabetic

- -

CSS

- -
@counter-style abc {
-  system: alphabetic;
-  symbols: a b c;
-  suffix: ". ";
-}
-
-.list {
-  list-style: abc;
-}
-
- -

HTML

- -
<ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Utilisation_de_alphabetic')}}

- -

Utilisation de numeric avec des lettres

- -

CSS

- -
@counter-style abc {
-  system: numeric;
-  symbols: a b c;
-  suffix: ". ";
-}
-
-.list {
-  list-style: abc;
-}
- -

HTML

- -
<ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}}

- -

Utilisation de numeric avec des chiffres

- -

CSS

- -
@counter-style numbers {
-  system: numeric;
-  symbols: 0 1 2 3 4 5 6 7 8 9;
-  suffix: ". ";
-}
-
-.list {
-  list-style: numbers;
-}
-
- -

HTML

- -
<ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
- -

{{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}}

- -

Utilisation de additive

- -

CSS

- -
@counter-style upper-roman {
-  system: additive;
-  range: 1 3999;
-  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
-}
-
-.list {
-  list-style: upper-roman;
-}
-
- -

HTML

- -
<ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Utilisation_de_additive')}}

- -

Combinaison avec extends

- -

CSS

- -
@counter-style alpha-modified {
-  system: extends lower-alpha;
-  prefix: "(";
-  suffix: ") ";
-}
-
-.list {
-  list-style: alpha-modified;
-}
-
- -

HTML

- -
<ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Combinaison_avec_extends')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.counter-style.system")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@counter-style/system/index.md b/files/fr/web/css/@counter-style/system/index.md new file mode 100644 index 0000000000..07ba664616 --- /dev/null +++ b/files/fr/web/css/@counter-style/system/index.md @@ -0,0 +1,328 @@ +--- +title: system +slug: Web/CSS/@counter-style/system +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/system +--- +
{{CSSRef}}
+ +

La descripteur system, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir l'algorithme utilisé pour convertir la valeur entière d'un compteur en une chaîne de caractères.

+ +
/* Valeurs avec un mot-clé */
+system: cyclic;
+system: numeric;
+system: alphabetic;
+system: symbolic;
+system: additive;
+system: fixed;
+
+/* Combinaison de valeurs */
+system: fixed 3;
+system: extends decimal;
+
+ +

Si l'algorithme défini dans ce descripteur est incapable de construire la chaîne de caractères pour une valeur donnée, ce sera le système de secours qui sera utilisé ({{cssxref("fallback")}}).

+ +

Syntaxe

+ +

Ce descripteur peut prendre l'une de ces trois formes :

+ + + +
+
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()")}}.
+
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. + 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.
+
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. +
+
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).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Utilisation de cyclic

+ +

CSS

+ +
@counter-style fisheye {
+  system: cyclic;
+  symbols: ◉;
+  suffix: " ";
+}
+
+.list {
+    list-style: fisheye;
+}
+ +

HTML

+ +
<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_de_cyclic')}}

+ +

Utilisation de fixed

+ +

CSS

+ +
@counter-style circled-digits {
+  system: fixed;
+  symbols: ➀ ➁ ➂;
+  suffix: ' ';
+}
+
+.list {
+  list-style: circled-digits;
+}
+
+ +

HTML

+ +
<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_de_fixed')}}

+ +

Utilisation de symbolic

+ +

CSS

+ +
@counter-style abc {
+  system: symbolic;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}
+
+ +

HTML

+ +
<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_de_symbolic')}}

+ +

Utilisation de alphabetic

+ +

CSS

+ +
@counter-style abc {
+  system: alphabetic;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}
+
+ +

HTML

+ +
<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_de_alphabetic')}}

+ +

Utilisation de numeric avec des lettres

+ +

CSS

+ +
@counter-style abc {
+  system: numeric;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}
+ +

HTML

+ +
<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}}

+ +

Utilisation de numeric avec des chiffres

+ +

CSS

+ +
@counter-style numbers {
+  system: numeric;
+  symbols: 0 1 2 3 4 5 6 7 8 9;
+  suffix: ". ";
+}
+
+.list {
+  list-style: numbers;
+}
+
+ +

HTML

+ +
<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+ +

{{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}}

+ +

Utilisation de additive

+ +

CSS

+ +
@counter-style upper-roman {
+  system: additive;
+  range: 1 3999;
+  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
+}
+
+.list {
+  list-style: upper-roman;
+}
+
+ +

HTML

+ +
<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_de_additive')}}

+ +

Combinaison avec extends

+ +

CSS

+ +
@counter-style alpha-modified {
+  system: extends lower-alpha;
+  prefix: "(";
+  suffix: ") ";
+}
+
+.list {
+  list-style: alpha-modified;
+}
+
+ +

HTML

+ +
<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Combinaison_avec_extends')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.counter-style.system")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@document/index.html b/files/fr/web/css/@document/index.html deleted file mode 100644 index 06a8348209..0000000000 --- a/files/fr/web/css/@document/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: '@document' -slug: Web/CSS/@document -tags: - - At-rule - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@document ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La règle @ CSS @document restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur.

- -
@document url("https://www.example.com/") {
-  h1 {
-    color: green;
-  }
-}
- - - -

Syntaxe

- -

Une règle @document peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont :

- - - -

Les valeurs fournies aux fonctions url(), url-prefix(), media-document() et domain() peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction regexp() doivent être délimitées par des apostrophes.

- -

Les valeurs échappées fournies à la fonction regexp() doivent être en outre échappées pour le CSS. Par exemple, un . (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en \.), puis d'échapper cette chaîne en utilisant les règles CSS (en \\.).

- -
-

Note : Il existe une version préfixée de cette propriété pour Mozilla : @-moz-document. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}).

-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
@document url("http://www.w3.org/"),
-               url-prefix("http://www.w3.org/Style/"),
-               domain("mozilla.org"),
-               media-document("video"),
-               regexp("https:.*")
-{
-  /* Ces règles CSS s'appliquent à :
-     - la page "http://www.w3.org/"
-     - toute page dont l'URL commence par "http://www.w3.org/Style/"
-     - toute page dont l'hôte de l'URL est "mozilla.org"
-       ou finit par ".mozilla.org"
-     - toute vidéo
-     - toute page dont l'URL commence par "https:" */
-
-  /* Rendre ces pages vraiment laides */
-  body {
-    color: purple;
-    background: yellow;
-  }
-}
-
- -

Spécifications

- -

Initialement dans {{SpecName('CSS3 Conditional')}}, @document a été repoussée au niveau 4.

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.document")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md new file mode 100644 index 0000000000..06a8348209 --- /dev/null +++ b/files/fr/web/css/@document/index.md @@ -0,0 +1,84 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - At-rule + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@document +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La règle @ CSS @document restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur.

+ +
@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+ + + +

Syntaxe

+ +

Une règle @document peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont :

+ + + +

Les valeurs fournies aux fonctions url(), url-prefix(), media-document() et domain() peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction regexp() doivent être délimitées par des apostrophes.

+ +

Les valeurs échappées fournies à la fonction regexp() doivent être en outre échappées pour le CSS. Par exemple, un . (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en \.), puis d'échapper cette chaîne en utilisant les règles CSS (en \\.).

+ +
+

Note : Il existe une version préfixée de cette propriété pour Mozilla : @-moz-document. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}).

+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
@document url("http://www.w3.org/"),
+               url-prefix("http://www.w3.org/Style/"),
+               domain("mozilla.org"),
+               media-document("video"),
+               regexp("https:.*")
+{
+  /* Ces règles CSS s'appliquent à :
+     - la page "http://www.w3.org/"
+     - toute page dont l'URL commence par "http://www.w3.org/Style/"
+     - toute page dont l'hôte de l'URL est "mozilla.org"
+       ou finit par ".mozilla.org"
+     - toute vidéo
+     - toute page dont l'URL commence par "https:" */
+
+  /* Rendre ces pages vraiment laides */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+
+ +

Spécifications

+ +

Initialement dans {{SpecName('CSS3 Conditional')}}, @document a été repoussée au niveau 4.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.document")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@font-face/ascent-override/index.html b/files/fr/web/css/@font-face/ascent-override/index.html deleted file mode 100644 index dbbeb8eaa3..0000000000 --- a/files/fr/web/css/@font-face/ascent-override/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: ascent-override -slug: Web/CSS/@font-face/ascent-override -browser-compat: css.at-rules.font-face.ascent-override -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.

- -

Syntaxe

- -
ascent-override: normal;
-ascent-override: 90%;
- -

Valeurs

- -
-
normal
-
La valeur par défaut. La mesure du jambage supérieur est obtenue à partir du fichier de police.
-
<percentage>
-
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.
-
- -

Définition formelle

- -

{{cssinfo}}

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Surcharge de la mesure d'une police de recours

- -

La propriété ascent-override peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.

- -
@font-face {
-  font-family: web-font;
-  src: url("https://example.com/font.woff");
-}
-
-@font-face {
-  font-family: local-font;
-  src: local(Local Font);
-  ascent-override: 125%;
-}
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@font-face/ascent-override/index.md b/files/fr/web/css/@font-face/ascent-override/index.md new file mode 100644 index 0000000000..dbbeb8eaa3 --- /dev/null +++ b/files/fr/web/css/@font-face/ascent-override/index.md @@ -0,0 +1,74 @@ +--- +title: ascent-override +slug: Web/CSS/@font-face/ascent-override +browser-compat: css.at-rules.font-face.ascent-override +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.

+ +

Syntaxe

+ +
ascent-override: normal;
+ascent-override: 90%;
+ +

Valeurs

+ +
+
normal
+
La valeur par défaut. La mesure du jambage supérieur est obtenue à partir du fichier de police.
+
<percentage>
+
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.
+
+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Surcharge de la mesure d'une police de recours

+ +

La propriété ascent-override peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.

+ +
@font-face {
+  font-family: web-font;
+  src: url("https://example.com/font.woff");
+}
+
+@font-face {
+  font-family: local-font;
+  src: local(Local Font);
+  ascent-override: 125%;
+}
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@font-face/descent-override/index.html b/files/fr/web/css/@font-face/descent-override/index.html deleted file mode 100644 index 6805fdd77f..0000000000 --- a/files/fr/web/css/@font-face/descent-override/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: descent-override -slug: Web/CSS/@font-face/descent-override -browser-compat: css.at-rules.font-face.descent-override -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.

- -

Syntaxe

- -
descent-override: normal;
-descent-override: 90%;
- -

Valeurs

- -
-
normal
-
La valeur par défaut. La mesure du jambage inférieur est obtenue à partir du fichier de police.
-
<percentage>
-
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.
-
- -

Définition formelle

- -

{{cssinfo}}

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Surcharge de la mesure d'une police de recours

- -

La propriété descent-override peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.

- -
@font-face {
-  font-family: web-font;
-  src: url("https://example.com/font.woff");
-}
-
-@font-face {
-  font-family: local-font;
-  src: local(Local Font);
-  descent-override: 125%;
-}
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@font-face/descent-override/index.md b/files/fr/web/css/@font-face/descent-override/index.md new file mode 100644 index 0000000000..6805fdd77f --- /dev/null +++ b/files/fr/web/css/@font-face/descent-override/index.md @@ -0,0 +1,74 @@ +--- +title: descent-override +slug: Web/CSS/@font-face/descent-override +browser-compat: css.at-rules.font-face.descent-override +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.

+ +

Syntaxe

+ +
descent-override: normal;
+descent-override: 90%;
+ +

Valeurs

+ +
+
normal
+
La valeur par défaut. La mesure du jambage inférieur est obtenue à partir du fichier de police.
+
<percentage>
+
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.
+
+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Surcharge de la mesure d'une police de recours

+ +

La propriété descent-override peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.

+ +
@font-face {
+  font-family: web-font;
+  src: url("https://example.com/font.woff");
+}
+
+@font-face {
+  font-family: local-font;
+  src: local(Local Font);
+  descent-override: 125%;
+}
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@font-face/font-display/index.html b/files/fr/web/css/@font-face/font-display/index.html deleted file mode 100644 index 2b89c8661d..0000000000 --- a/files/fr/web/css/@font-face/font-display/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: font-display -slug: Web/CSS/@font-face/font-display -tags: - - CSS - - Descripteur - - Experimental - - Reference -translation_of: Web/CSS/@font-face/font-display ---- -
{{CSSRef}}
- -

La propriété font-display détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.

- -

Le déroulement de l'affichage d'une police

- -

La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.

- -
-
Période 1 : Blocage des fontes
-
Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
-
Période 2 : Échange des fontes
-
Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
-
Période 3 : Échec du chargement des fontes
-
Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.
-
- -

{{cssinfo}}

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-font-display: auto;
-font-display: block;
-font-display: swap;
-font-display: fallback;
-font-display: optional;
- -

Valeurs

- -
-
auto
-
La stratégie d'affichage de la fonte est définie par l'agent utilisateur.
-
block
-
La période de blocage est courte et est suivi d'une période d'échange infinie.
-
swap
-
La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.
-
fallback
-
La période de blocage est extrêmement courte et est suivie par une courte période d'échange.
-
optional
-
La période de blocage est extrêmement courte et il n'y a pas de période d'échange.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
@font-face {
-  font-family: FonteExemple;
-  src: url(/chemin/vers/fonts/examplefont.woff) format('woff'),
-       url(/chemin/vers/fonts/examplefont.eot) format('eot');
-  font-weight: 400;
-  font-style: normal;
-  font-display: fallback;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face.font-display")}}

diff --git a/files/fr/web/css/@font-face/font-display/index.md b/files/fr/web/css/@font-face/font-display/index.md new file mode 100644 index 0000000000..2b89c8661d --- /dev/null +++ b/files/fr/web/css/@font-face/font-display/index.md @@ -0,0 +1,90 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

La propriété font-display détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.

+ +

Le déroulement de l'affichage d'une police

+ +

La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.

+ +
+
Période 1 : Blocage des fontes
+
Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
+
Période 2 : Échange des fontes
+
Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
+
Période 3 : Échec du chargement des fontes
+
Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.
+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Valeurs

+ +
+
auto
+
La stratégie d'affichage de la fonte est définie par l'agent utilisateur.
+
block
+
La période de blocage est courte et est suivi d'une période d'échange infinie.
+
swap
+
La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.
+
fallback
+
La période de blocage est extrêmement courte et est suivie par une courte période d'échange.
+
optional
+
La période de blocage est extrêmement courte et il n'y a pas de période d'échange.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
@font-face {
+  font-family: FonteExemple;
+  src: url(/chemin/vers/fonts/examplefont.woff) format('woff'),
+       url(/chemin/vers/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face.font-display")}}

diff --git a/files/fr/web/css/@font-face/font-family/index.html b/files/fr/web/css/@font-face/font-family/index.html deleted file mode 100644 index 35b4247f85..0000000000 --- a/files/fr/web/css/@font-face/font-family/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: font-family -slug: Web/CSS/@font-face/font-family -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@font-face/font-family ---- -
{{CSSRef}}
- -

Le descripteur font-family permet aux auteurs d'un document de définir la police de caractères à utiliser au sein d'une règle @ {{cssxref("@font-face")}}.

- -

Syntaxe

- -
/* Valeurs de chaînes de caractères */
-/* Type <string>                    */
-font-family: "police de caractères a";
-font-family: 'une autre police';
-
-/* Valeur de type <custom-ident> */
-font-family: exemplepolice;
-
- -

Valeurs

- -
-
<family-name>
-
Définit le nom de la police de caractères.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
@font-face {
-  font-family: exemplepolice;
-  src: url('exemplepolice.ttf');
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face.font-family")}}

diff --git a/files/fr/web/css/@font-face/font-family/index.md b/files/fr/web/css/@font-face/font-family/index.md new file mode 100644 index 0000000000..35b4247f85 --- /dev/null +++ b/files/fr/web/css/@font-face/font-family/index.md @@ -0,0 +1,67 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-family +--- +
{{CSSRef}}
+ +

Le descripteur font-family permet aux auteurs d'un document de définir la police de caractères à utiliser au sein d'une règle @ {{cssxref("@font-face")}}.

+ +

Syntaxe

+ +
/* Valeurs de chaînes de caractères */
+/* Type <string>                    */
+font-family: "police de caractères a";
+font-family: 'une autre police';
+
+/* Valeur de type <custom-ident> */
+font-family: exemplepolice;
+
+ +

Valeurs

+ +
+
<family-name>
+
Définit le nom de la police de caractères.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
@font-face {
+  font-family: exemplepolice;
+  src: url('exemplepolice.ttf');
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face.font-family")}}

diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html deleted file mode 100644 index 505de0c2ac..0000000000 --- a/files/fr/web/css/@font-face/font-stretch/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: font-stretch -slug: Web/CSS/@font-face/font-stretch -tags: - - '@font-face' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@font-face/font-stretch ---- -

{{CSSRef}}{{draft}}

- -

Le descripteur CSS font-stretch permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.

- -

Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors font-stretch de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.

- -

{{cssinfo}}

- -

Syntaxe

- -
/* Valeurs simples */
-font-stretch: ultra-condensed;
-font-stretch: extra-condensed;
-font-stretch: condensed;
-font-stretch: semi-condensed;
-font-stretch: normal;
-font-stretch: semi-expanded;
-font-stretch: expanded;
-font-stretch: extra-expanded;
-font-stretch: ultra-expanded;
-font-stretch: 50%;
-font-stretch: 100%;
-font-stretch: 200%;
-
-/* Valeurs multiples */
-font-stretch: 75% 125%;
-font-stretch: condensed ultra-condensed;;
-
- -

Valeurs

- -
-
normal
-
Indique la forme normale (en largeur) de la police.
-
semi-condensed, condensed, extra-condensed, ultra-condensed
-
Indique une forme plus condensée que la normale (la valeur ultra-condensed correspond à la forme la plus condensée).
-
semi-expanded, expanded, extra-expanded, ultra-expanded
-
Indique une forme plus étendue que la normale (la valeur ultra-expanded étant la plus étendue).
-
<percentage>
-
Un pourcentage (une valeur de type {{cssxref("<percentage>")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.
-
- -

Dans les versions antérieures de la spécification pour font-stretch, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <percentage>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.

- -

Pour les polices variables TrueType et OpenType, c'est l'axe de variation "wdth" qui est utilisé afin d'implémenter les largeurs variables.

- -

Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.

- -

Correspondance entre les noms et les pourcentages

- -

Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeywordPourcentage
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
- -

Polices variables

- -

La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).

- -

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "wdth" qui est utilisé afin d'implémenter les largeurs variables des glyphes.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.

- -
@font-face {
-  font-family: "Open Sans";
-  src: local("Open Sans") format("woff2"),
-       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-  font-stretch: 87.5% 112.5%;
-}
- -

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.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS3 Fonts')}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face.font-stretch")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@font-face/font-stretch/index.md b/files/fr/web/css/@font-face/font-stretch/index.md new file mode 100644 index 0000000000..505de0c2ac --- /dev/null +++ b/files/fr/web/css/@font-face/font-stretch/index.md @@ -0,0 +1,180 @@ +--- +title: font-stretch +slug: Web/CSS/@font-face/font-stretch +tags: + - '@font-face' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-stretch +--- +

{{CSSRef}}{{draft}}

+ +

Le descripteur CSS font-stretch permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.

+ +

Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors font-stretch de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeurs simples */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs multiples */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+
+ +

Valeurs

+ +
+
normal
+
Indique la forme normale (en largeur) de la police.
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
Indique une forme plus condensée que la normale (la valeur ultra-condensed correspond à la forme la plus condensée).
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
Indique une forme plus étendue que la normale (la valeur ultra-expanded étant la plus étendue).
+
<percentage>
+
Un pourcentage (une valeur de type {{cssxref("<percentage>")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.
+
+ +

Dans les versions antérieures de la spécification pour font-stretch, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <percentage>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.

+ +

Pour les polices variables TrueType et OpenType, c'est l'axe de variation "wdth" qui est utilisé afin d'implémenter les largeurs variables.

+ +

Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.

+ +

Correspondance entre les noms et les pourcentages

+ +

Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordPourcentage
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
+ +

Polices variables

+ +

La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).

+ +

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "wdth" qui est utilisé afin d'implémenter les largeurs variables des glyphes.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.

+ +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}
+ +

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.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS3 Fonts')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face.font-stretch")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@font-face/font-style/index.html b/files/fr/web/css/@font-face/font-style/index.html deleted file mode 100644 index 672e77a232..0000000000 --- a/files/fr/web/css/@font-face/font-style/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: font-style -slug: Web/CSS/@font-face/font-style -tags: - - CSS - - Descripteur - - Reference -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.

- -

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.

- -

Syntaxe

- -
font-style: normal;
-font-style: italic;
-font-style: oblique;
-font-style: oblique 30deg;
-font-style: oblique 30deg 50deg;
- -

Valeurs

- -
-
normal
-
C'est la fonte « normale » de la police qui est choisie.
-
italic
-
C'est la fonte italique de la police qui est choisie.
-
oblique
-
C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.
-
oblique avec un angle
-
C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.
-
oblique avec un intervalle d'angle
-
Utilise une fonte comme oblique et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur oblique, aucune autre valeur n'est autorisée après normal ou italic.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :

- -
@font-face {
-  font-family: garamond;
-  src: url('garamond.ttf');
-}
- -

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

- -

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.

- -
@font-face {
-  font-family: garamond;
-  src: url('garamond-italic.ttf');
-  /* On indique ici que la police est italique */
-  font-style: italic;
-}
- -

italic garamond

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS4 Fonts')}}Ajoute la possibilité d'utiliser le mot-clé oblique suivi par une valeur angulaire.
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face.font-style")}}

diff --git a/files/fr/web/css/@font-face/font-style/index.md b/files/fr/web/css/@font-face/font-style/index.md new file mode 100644 index 0000000000..672e77a232 --- /dev/null +++ b/files/fr/web/css/@font-face/font-style/index.md @@ -0,0 +1,97 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +tags: + - CSS + - Descripteur + - Reference +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.

+ +

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.

+ +

Syntaxe

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 30deg;
+font-style: oblique 30deg 50deg;
+ +

Valeurs

+ +
+
normal
+
C'est la fonte « normale » de la police qui est choisie.
+
italic
+
C'est la fonte italique de la police qui est choisie.
+
oblique
+
C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.
+
oblique avec un angle
+
C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.
+
oblique avec un intervalle d'angle
+
Utilise une fonte comme oblique et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur oblique, aucune autre valeur n'est autorisée après normal ou italic.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :

+ +
@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}
+ +

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

+ +

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.

+ +
@font-face {
+  font-family: garamond;
+  src: url('garamond-italic.ttf');
+  /* On indique ici que la police est italique */
+  font-style: italic;
+}
+ +

italic garamond

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS4 Fonts')}}Ajoute la possibilité d'utiliser le mot-clé oblique suivi par une valeur angulaire.
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face.font-style")}}

diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.html b/files/fr/web/css/@font-face/font-variation-settings/index.html deleted file mode 100644 index 750c35e29c..0000000000 --- a/files/fr/web/css/@font-face/font-variation-settings/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: font-variation-settings -slug: Web/CSS/@font-face/font-variation-settings -tags: - - '@font-face' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@font-face/font-variation-settings ---- -
{{CSSRef}}
- -

Le descripteur font-variation-settings, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.

- -

Syntaxe

- -
/* On utilise les paramètres par défaut */
-font-variation-settings: normal;
-
-/* On indique les valeurs pour les noms des axes OpenType */
-font-variation-settings: "xhgt" 0.7;
- -

Valeurs

- -
-
normal
-
Le texte est disposé avec les paramètres par défaut.
-
<string> <number>
-
Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom ({{cssxref("<string>")}}) de 4 caractères ASCII, suivis d'un nombre ({{cssxref("number")}}) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
@font-face {
-  font-family: 'OpenTypeFont';
-  src: url('open_type_font.woff2') format('woff2');
-  font-weight: normal;
-  font-style: normal;
-  font-variation-settings: 'wght' 400, 'wdth' 300;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face.font-variation-settings")}}

diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.md b/files/fr/web/css/@font-face/font-variation-settings/index.md new file mode 100644 index 0000000000..750c35e29c --- /dev/null +++ b/files/fr/web/css/@font-face/font-variation-settings/index.md @@ -0,0 +1,69 @@ +--- +title: font-variation-settings +slug: Web/CSS/@font-face/font-variation-settings +tags: + - '@font-face' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-variation-settings +--- +
{{CSSRef}}
+ +

Le descripteur font-variation-settings, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.

+ +

Syntaxe

+ +
/* On utilise les paramètres par défaut */
+font-variation-settings: normal;
+
+/* On indique les valeurs pour les noms des axes OpenType */
+font-variation-settings: "xhgt" 0.7;
+ +

Valeurs

+ +
+
normal
+
Le texte est disposé avec les paramètres par défaut.
+
<string> <number>
+
Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom ({{cssxref("<string>")}}) de 4 caractères ASCII, suivis d'un nombre ({{cssxref("number")}}) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
@font-face {
+  font-family: 'OpenTypeFont';
+  src: url('open_type_font.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-variation-settings: 'wght' 400, 'wdth' 300;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face.font-variation-settings")}}

diff --git a/files/fr/web/css/@font-face/font-weight/index.html b/files/fr/web/css/@font-face/font-weight/index.html deleted file mode 100644 index 9b6c5fb851..0000000000 --- a/files/fr/web/css/@font-face/font-weight/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: font-weight -slug: Web/CSS/@font-face/font-weight -tags: - - '@font-face' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@font-face/font-weight ---- -

{{CSSRef}}

- -

Le descripteur CSS font-weight permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle {{cssxref("@font-face")}}. La propriété font-weight peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).

- -

Pour une police particulière, les auteurs peuvent télécharger différentes fontes qui utilisent les différents styles d'une même police et alors utiliser le descripteur font-weight afin de définir explicitement le niveau de graisse. La valeur utilisée pour le descripteur est la même que celle qui peut être utilisée pour la propriété.

- -

{{cssinfo}}

- -

Il existe généralement un nombre limité de niveaux de graisse pour une police donnée. Lorsqu'on utilise un niveau de graisse qui n'existe pas, c'est le niveau le plus proche qui est utilisé. Les polices qui ne disposent pas d'une fonte en gras sont généralement synthétisées par l'agent utilisateur (pour empêcher cette synthèse, on pourra utiliser la propriété {{cssxref('font-synthesis')}}).

- -

Syntaxe

- -
/* Valeurs simples */
-font-weight: normal;
-font-weight: bold;
-font-weight: 400;
-
-/* Valeurs multiples */
-font-weight: normal bold;
-font-weight: 300 500;
-
- -

Valeurs

- -
-
normal
-
Le niveau de graisse normal (équivaut à la valeur numérique 400).
-
bold
-
La fonte en gras (équivaut à la valeur numérique 700).
-
<number>
-
Un nombre (une valeur de type {{cssxref("<number>")}}) comprise entre 1 et 1000 (et incluant ces limites). Plus la valeur est élevée, plus le niveau de graisse utilisé sera important. Certains valeurs communément utilisées possèdent un nom : voir ci-après le tableau de correspondance entre les noms et les valeurs).
-
- -

Dans les versions antérieures de la spécification, font-weight n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices qui ne sont pas variables pourront n'utiliser que ces valeurs (les valeurs intermédiaires, ex. 451) seront ramenées à la valeur palier la plus proche.

- -

Avec la spécification CSS Fonts de niveau 4, la syntaxe a été étendue afin que n'importe quel nombre entre 1 and 1000 (au sens large) puisse être utilisé. Les polices variables (voir plus bas) ont aussi été introduites et on peut donc avoir un contrôle plus précis sur le niveau de graisse utilisé.

- -

Correspondance entre les noms et les valeurs numériques

- -

Les valeurs numériques entre 100 et 900 correspondent (approximativement) à ces noms communément utilisés :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurNom commun
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
- -

Polices variables

- -

La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.

- -

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "wght" qui est utilisé afin d'implémenter ces largeurs variables.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en utilisant le niveau de graisse normal.

- -
@font-face {
-  font-family: "Open Sans";
-  src: local("Open Sans") format("woff2"),
-       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-  font-weight: 400;
-}
- -

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.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS3 Fonts')}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face.font-weight")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@font-face/font-weight/index.md b/files/fr/web/css/@font-face/font-weight/index.md new file mode 100644 index 0000000000..9b6c5fb851 --- /dev/null +++ b/files/fr/web/css/@font-face/font-weight/index.md @@ -0,0 +1,170 @@ +--- +title: font-weight +slug: Web/CSS/@font-face/font-weight +tags: + - '@font-face' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/font-weight +--- +

{{CSSRef}}

+ +

Le descripteur CSS font-weight permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle {{cssxref("@font-face")}}. La propriété font-weight peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).

+ +

Pour une police particulière, les auteurs peuvent télécharger différentes fontes qui utilisent les différents styles d'une même police et alors utiliser le descripteur font-weight afin de définir explicitement le niveau de graisse. La valeur utilisée pour le descripteur est la même que celle qui peut être utilisée pour la propriété.

+ +

{{cssinfo}}

+ +

Il existe généralement un nombre limité de niveaux de graisse pour une police donnée. Lorsqu'on utilise un niveau de graisse qui n'existe pas, c'est le niveau le plus proche qui est utilisé. Les polices qui ne disposent pas d'une fonte en gras sont généralement synthétisées par l'agent utilisateur (pour empêcher cette synthèse, on pourra utiliser la propriété {{cssxref('font-synthesis')}}).

+ +

Syntaxe

+ +
/* Valeurs simples */
+font-weight: normal;
+font-weight: bold;
+font-weight: 400;
+
+/* Valeurs multiples */
+font-weight: normal bold;
+font-weight: 300 500;
+
+ +

Valeurs

+ +
+
normal
+
Le niveau de graisse normal (équivaut à la valeur numérique 400).
+
bold
+
La fonte en gras (équivaut à la valeur numérique 700).
+
<number>
+
Un nombre (une valeur de type {{cssxref("<number>")}}) comprise entre 1 et 1000 (et incluant ces limites). Plus la valeur est élevée, plus le niveau de graisse utilisé sera important. Certains valeurs communément utilisées possèdent un nom : voir ci-après le tableau de correspondance entre les noms et les valeurs).
+
+ +

Dans les versions antérieures de la spécification, font-weight n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices qui ne sont pas variables pourront n'utiliser que ces valeurs (les valeurs intermédiaires, ex. 451) seront ramenées à la valeur palier la plus proche.

+ +

Avec la spécification CSS Fonts de niveau 4, la syntaxe a été étendue afin que n'importe quel nombre entre 1 and 1000 (au sens large) puisse être utilisé. Les polices variables (voir plus bas) ont aussi été introduites et on peut donc avoir un contrôle plus précis sur le niveau de graisse utilisé.

+ +

Correspondance entre les noms et les valeurs numériques

+ +

Les valeurs numériques entre 100 et 900 correspondent (approximativement) à ces noms communément utilisés :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurNom commun
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
+ +

Polices variables

+ +

La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.

+ +

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "wght" qui est utilisé afin d'implémenter ces largeurs variables.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en utilisant le niveau de graisse normal.

+ +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-weight: 400;
+}
+ +

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.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS3 Fonts')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face.font-weight")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@font-face/index.html b/files/fr/web/css/@font-face/index.html deleted file mode 100644 index f8dfeee254..0000000000 --- a/files/fr/web/css/@font-face/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: '@font-face' -slug: Web/CSS/@font-face -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@font-face ---- -
{{CSSRef}}
- -

La règle @ @font-face permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur. Si la fonction local() est utilisée, elle indique à l'agent utilisateur de prendre en compte une police présente sur le poste de l'utilisateur.

- -

En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.

- -

Il est courant d'utiliser les deux formes url() et local() afin de pouvoir utiliser une police locale si elle est disponible ou d'en télécharger une autre au cas où.

- -

La règle @font-face peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à une règle @ conditionnelle.

- -
@font-face {
- font-family: "Open Sans";
- src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
-        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-}
- -

Syntaxe

- -

Descripteurs

- -
-
{{cssxref("@font-face/font-display", "font-display")}}
-
Ce descripteur détermine la façon dont une fonte est affichée selon qu'elle a été téléchargée et/ou si elle est prête à être utilisée.
-
{{cssxref("@font-face/font-family", "font-family")}}
-
Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.
-
{{cssxref("@font-face/font-stretch", "font-stretch")}}
-
Une valeur {{cssxref("font-stretch")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-stretch: 50% 200%;.
-
{{cssxref("@font-face/font-style", "font-style")}}
-
Une valeur {{cssxref("font-style")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-style: oblique 20deg 50deg;.
-
{{cssxref("@font-face/font-variant", "font-variant")}}
-
Une valeur {{cssxref("font-variant")}}.
-
{{cssxref("@font-face/font-weight", "font-weight")}}
-
Une valeur {{cssxref("font-weight")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-weight: 100 400;.
-
{{cssxref("font-feature-settings", "font-feature-settings")}}
-
Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux fontes OpenType.
-
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
-
Ce descripteur permet d'avoir un contrôle de bas niveau sur les variations des polices OpenType et TrueType en indiquant les nom des axes et des fonctionnalités à faire varier.
-
{{cssxref("@font-face/src", "src")}}
-
-

Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.

- -

On peut fournir une indication de format au navigateur (afin que celui-ci sélectionne celui qui lui convient le mieux) sous la forme d'une fonction format() qui contient le type comme argument :

- - 
src: url(ideal-sans-serif.woff) format("woff"),
-     url(basic-sans-serif.ttf) format("truetype");
- -

Les types utilisables sont : "woff", "woff2", "truetype", "opentype", "embedded-opentype" et "svg".

-
-
{{cssxref("@font-face/unicode-range", "unicode-range")}}
-
L'intervalle des points de code Unicode pour lesquels la règle  @font-face s'applique.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Police distante

- -

CSS

- -
@font-face {
-  font-family: "Bitstream Vera Serif Bold";
-  src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
-}
-
-body {
-  font-family: "Bitstream Vera Serif Bold", serif;
-}
- -

HTML

- -
<p> Et voici Bitstream Vera Serif Bold.</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Police_distante")}}

- -

Police locale

- -

Ici, l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.

- -

CSS

- -
@font-face {
-  font-family: MaHelvetica;
-  src: local("Helvetica Neue Bold"),
-       local("HelveticaNeue-Bold"),
-       url(MgOpenModernaBold.ttf);
-  font-weight: bold;
-}
- -

HTML

- -
<p> Et voici Ma Helvetica.</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Police_locale")}}

- -

Types MIME associés aux polices

- -

Voici, selon les différents formats de police, les types MIME associés :

- -
-
TrueType
-
font/ttf
-
OpenType
-
font/otf
-
Web Open File Format
-
font/woff
-
Web Open File Format 2
-
font/woff2
-
- -

Notes

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Spécification du format de police avec un nouvel algorithme de compression.
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Spécification du format de police.
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@font-face/index.md b/files/fr/web/css/@font-face/index.md new file mode 100644 index 0000000000..f8dfeee254 --- /dev/null +++ b/files/fr/web/css/@font-face/index.md @@ -0,0 +1,188 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +

La règle @ @font-face permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur. Si la fonction local() est utilisée, elle indique à l'agent utilisateur de prendre en compte une police présente sur le poste de l'utilisateur.

+ +

En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.

+ +

Il est courant d'utiliser les deux formes url() et local() afin de pouvoir utiliser une police locale si elle est disponible ou d'en télécharger une autre au cas où.

+ +

La règle @font-face peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à une règle @ conditionnelle.

+ +
@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

Syntaxe

+ +

Descripteurs

+ +
+
{{cssxref("@font-face/font-display", "font-display")}}
+
Ce descripteur détermine la façon dont une fonte est affichée selon qu'elle a été téléchargée et/ou si elle est prête à être utilisée.
+
{{cssxref("@font-face/font-family", "font-family")}}
+
Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
Une valeur {{cssxref("font-stretch")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-stretch: 50% 200%;.
+
{{cssxref("@font-face/font-style", "font-style")}}
+
Une valeur {{cssxref("font-style")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-style: oblique 20deg 50deg;.
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
Une valeur {{cssxref("font-variant")}}.
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
Une valeur {{cssxref("font-weight")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-weight: 100 400;.
+
{{cssxref("font-feature-settings", "font-feature-settings")}}
+
Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux fontes OpenType.
+
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+
Ce descripteur permet d'avoir un contrôle de bas niveau sur les variations des polices OpenType et TrueType en indiquant les nom des axes et des fonctionnalités à faire varier.
+
{{cssxref("@font-face/src", "src")}}
+
+

Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.

+ +

On peut fournir une indication de format au navigateur (afin que celui-ci sélectionne celui qui lui convient le mieux) sous la forme d'une fonction format() qui contient le type comme argument :

+ + 
src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("truetype");
+ +

Les types utilisables sont : "woff", "woff2", "truetype", "opentype", "embedded-opentype" et "svg".

+
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
L'intervalle des points de code Unicode pour lesquels la règle  @font-face s'applique.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Police distante

+ +

CSS

+ +
@font-face {
+  font-family: "Bitstream Vera Serif Bold";
+  src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
+}
+
+body {
+  font-family: "Bitstream Vera Serif Bold", serif;
+}
+ +

HTML

+ +
<p> Et voici Bitstream Vera Serif Bold.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Police_distante")}}

+ +

Police locale

+ +

Ici, l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.

+ +

CSS

+ +
@font-face {
+  font-family: MaHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+ +

HTML

+ +
<p> Et voici Ma Helvetica.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Police_locale")}}

+ +

Types MIME associés aux polices

+ +

Voici, selon les différents formats de police, les types MIME associés :

+ +
+
TrueType
+
font/ttf
+
OpenType
+
font/otf
+
Web Open File Format
+
font/woff
+
Web Open File Format 2
+
font/woff2
+
+ +

Notes

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Spécification du format de police avec un nouvel algorithme de compression.
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Spécification du format de police.
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@font-face/line-gap-override/index.html b/files/fr/web/css/@font-face/line-gap-override/index.html deleted file mode 100644 index 3c70e24a29..0000000000 --- a/files/fr/web/css/@font-face/line-gap-override/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: line-gap-override -slug: Web/CSS/@font-face/line-gap-override -browser-compat: css.at-rules.font-face.line-gap-override -translation_of: 'Web/CSS/@font-face/line-gap-override' ---- -

{{CSSRef}}

- -

Le descripteur CSS line-gap-override définit la mesure de l'écart de lignes de la police. La mesure de l'écart de lignes peut être l'écart recommandé par la police ou encore un écart externe.

- -

Syntaxe

- -
line-gap-override: normal;
-line-gap-override: 90%;
- -

Valeurs

- -
-
normal
-
La valeur par défaut. Lorsqu'elle est utilisée, la valeur de la mesure est obtenue à partir du fichier de police.
-
<percentage>
-
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}).
-
- -

Définition formelle

- -

{{cssinfo}}

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Surcharge de la mesure d'une police de recours

- -

La propriété line-gap-override peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.

- -
@font-face {
-  font-family: web-font;
-  src: url("https://example.com/font.woff");
-}
-
-@font-face {
-  font-family: local-font;
-  src: local(Local Font);
-  line-gap-override: 125%;
-}
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@font-face/line-gap-override/index.md b/files/fr/web/css/@font-face/line-gap-override/index.md new file mode 100644 index 0000000000..3c70e24a29 --- /dev/null +++ b/files/fr/web/css/@font-face/line-gap-override/index.md @@ -0,0 +1,74 @@ +--- +title: line-gap-override +slug: Web/CSS/@font-face/line-gap-override +browser-compat: css.at-rules.font-face.line-gap-override +translation_of: 'Web/CSS/@font-face/line-gap-override' +--- +

{{CSSRef}}

+ +

Le descripteur CSS line-gap-override définit la mesure de l'écart de lignes de la police. La mesure de l'écart de lignes peut être l'écart recommandé par la police ou encore un écart externe.

+ +

Syntaxe

+ +
line-gap-override: normal;
+line-gap-override: 90%;
+ +

Valeurs

+ +
+
normal
+
La valeur par défaut. Lorsqu'elle est utilisée, la valeur de la mesure est obtenue à partir du fichier de police.
+
<percentage>
+
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}).
+
+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Surcharge de la mesure d'une police de recours

+ +

La propriété line-gap-override peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.

+ +
@font-face {
+  font-family: web-font;
+  src: url("https://example.com/font.woff");
+}
+
+@font-face {
+  font-family: local-font;
+  src: local(Local Font);
+  line-gap-override: 125%;
+}
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@font-face/size-adjust/index.html b/files/fr/web/css/@font-face/size-adjust/index.html deleted file mode 100644 index d56be8dda9..0000000000 --- a/files/fr/web/css/@font-face/size-adjust/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: size-adjust -slug: Web/CSS/@font-face/size-adjust -browser-compat: css.at-rules.font-face.size-adjust -translation_of: 'Web/CSS/@font-face/size-adjust' ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

Le descripteur CSS size-adjust CSS définit un multiplicateur destiné aux contours des glyphes et aux mesures associées à la police. Cela facilite l'harmonisation de l'apparence des polices lorsqu'elles sont rendues avec la même taille.

- -

Le descripteur size-adjust se comporte d'une manière similaire à la propriété {{cssxref("font-size-adjust")}}. Il calcule l'ajustement à effectuer par police en faisant la correspondance avec leurs hauteurs respectives.

- -

Syntaxe

- -
size-adjust: 90%;
- -

Valeurs

- -
-
<percentage>
-
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}), avec une valeur initiale de 100%.
-
- -

Toutes les mesures associées à la police sont mises à l'échelle en utilisant le pourcentage fourni. Cela comprend les glyphes, les tables de hauteur de ligne et surcharge les valeurs fournies par les descripteurs {{cssxref("@font-face")}}.

- -

Définition formelle

- -

{{cssinfo}}

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Surcharge de la mesure d'une police de recours

- -

La propriété size-adjust peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.

- -
@font-face {
-  font-family: web-font;
-  src: url("https://example.com/font.woff");
-}
-
-@font-face {
-  font-family: local-font;
-  src: local(Local Font);
-  size-adjust: 90%;
-}
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@font-face/size-adjust/index.md b/files/fr/web/css/@font-face/size-adjust/index.md new file mode 100644 index 0000000000..d56be8dda9 --- /dev/null +++ b/files/fr/web/css/@font-face/size-adjust/index.md @@ -0,0 +1,72 @@ +--- +title: size-adjust +slug: Web/CSS/@font-face/size-adjust +browser-compat: css.at-rules.font-face.size-adjust +translation_of: 'Web/CSS/@font-face/size-adjust' +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Le descripteur CSS size-adjust CSS définit un multiplicateur destiné aux contours des glyphes et aux mesures associées à la police. Cela facilite l'harmonisation de l'apparence des polices lorsqu'elles sont rendues avec la même taille.

+ +

Le descripteur size-adjust se comporte d'une manière similaire à la propriété {{cssxref("font-size-adjust")}}. Il calcule l'ajustement à effectuer par police en faisant la correspondance avec leurs hauteurs respectives.

+ +

Syntaxe

+ +
size-adjust: 90%;
+ +

Valeurs

+ +
+
<percentage>
+
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}), avec une valeur initiale de 100%.
+
+ +

Toutes les mesures associées à la police sont mises à l'échelle en utilisant le pourcentage fourni. Cela comprend les glyphes, les tables de hauteur de ligne et surcharge les valeurs fournies par les descripteurs {{cssxref("@font-face")}}.

+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Surcharge de la mesure d'une police de recours

+ +

La propriété size-adjust peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.

+ +
@font-face {
+  font-family: web-font;
+  src: url("https://example.com/font.woff");
+}
+
+@font-face {
+  font-family: local-font;
+  src: local(Local Font);
+  size-adjust: 90%;
+}
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@font-face/src/index.html b/files/fr/web/css/@font-face/src/index.html deleted file mode 100644 index 0670afaf67..0000000000 --- a/files/fr/web/css/@font-face/src/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: src -slug: Web/CSS/@font-face/src -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@font-face/src ---- -
{{CSSRef}}
- -

Le descripteur src, associé à la règle @ {{cssxref("@font-face")}}, permet de définir la ressource qui contient les données relatives à une police de caractères. Ce descripteur est obligatoire afin que la règle @font-face soit considérée comme valide.

- -

Sa valeur est composée d'une liste de noms séparés par des virgules, ordonnés par priorité dont chacun fait référence à une police de caractères externe ou locale. Lorsqu'une police doit être utilisée, l'agent utilisateur parcourt la liste de ces références et utilise la première police qui peut être chargée correctement. Si la police de caractères contient des données invalides ou si le nom ne correspond à aucune police de caractères, l'agent utilisateur passe à la suivante.

- -

Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL relative est utilisée, elle est résolue grâce à l'emplacement de la feuille de styles qui contient la règle @font-face. Pour les polices SVG, l'URL pointe vers un élément du document qui contient les définitions SVG de la police. Si l'élément de référence est absent, une référence implicite sera construite avec la première police définie. De même, pour les formats contenant plusieurs polices, seule une police est chargée pour une règle @font-face donnée. Les identifiants de fragment de l'URL peuvent être utilisés pour indiquer la police à charger. Si le format conteneur ne possède pas de schéma d'identification des fragments, ce sera un schéma simple d'indexation (ex. "font-collection#1" pour la première police, "font-collection#2" pour la seconde, etc.) qui sera utilisé.

- -

{{cssinfo}}

- -

Syntaxe

- -
/* <url> */
-src: url(https://unsiteweb.com/chemin/vers/police.woff); /* URL absolue */
-src: url(chemin/vers/police.woff);                       /* URL relative */
-src: url(chemin/vers/police.woff) format("woff");        /* format explicite */
-src: url('chemin/vers/police.woff');                     /* URL entre quotes */
-src: url(chemin/vers/policesvg.svg#exemple);             /* fragment identifiant une police */
-
-/* Valeurs de type <font-face-name> */
-src: local(police);      /* nom sans double quote */
-src: local(une police); /* nom avec espace */
-src: local("police");    /* nom entre double quotes */
-
-/* Liste avec plusieurs éléments */
-src: local(police), url(chemin/vers/police.svg) format("svg"),
-    url(chemin/vers/police.woff) format("woff"),
-    url(chemin/vers/police.otf) format("opentype");
-
- -

Valeurs

- -
-
<url> [ format( <string># ) ]?
-
Définit une référence externe, composée d'une URL et d'une indication optionnelle quant au format de la police chargée via cette URL. L'indication de format contient une liste de chaînes de caractères dont chacune doit correspondre à un format de police connu. Si un agent utilisateur ne prend pas en charge le format indiqué, il ne téléchargera pas la ressource liée à la police. Si aucune indication de format n'est fournie, la ressource associée est toujours téléchargée.
-
<font-face-name>
-
Définit le nom d'une police installée localement grâce à la fonction local() qui permet d'identifier une police de caractères au sein d'une famille de polices. Le nom de la police peut être entre double quotes.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
@font-face {
-  font-family: policeexemple;
-  src: local(Police Exemple), url('policeexemple.woff') format("woff"),
-      url('policeexemple.otf') format("opentype");
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face.src")}}

diff --git a/files/fr/web/css/@font-face/src/index.md b/files/fr/web/css/@font-face/src/index.md new file mode 100644 index 0000000000..0670afaf67 --- /dev/null +++ b/files/fr/web/css/@font-face/src/index.md @@ -0,0 +1,83 @@ +--- +title: src +slug: Web/CSS/@font-face/src +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@font-face/src +--- +
{{CSSRef}}
+ +

Le descripteur src, associé à la règle @ {{cssxref("@font-face")}}, permet de définir la ressource qui contient les données relatives à une police de caractères. Ce descripteur est obligatoire afin que la règle @font-face soit considérée comme valide.

+ +

Sa valeur est composée d'une liste de noms séparés par des virgules, ordonnés par priorité dont chacun fait référence à une police de caractères externe ou locale. Lorsqu'une police doit être utilisée, l'agent utilisateur parcourt la liste de ces références et utilise la première police qui peut être chargée correctement. Si la police de caractères contient des données invalides ou si le nom ne correspond à aucune police de caractères, l'agent utilisateur passe à la suivante.

+ +

Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL relative est utilisée, elle est résolue grâce à l'emplacement de la feuille de styles qui contient la règle @font-face. Pour les polices SVG, l'URL pointe vers un élément du document qui contient les définitions SVG de la police. Si l'élément de référence est absent, une référence implicite sera construite avec la première police définie. De même, pour les formats contenant plusieurs polices, seule une police est chargée pour une règle @font-face donnée. Les identifiants de fragment de l'URL peuvent être utilisés pour indiquer la police à charger. Si le format conteneur ne possède pas de schéma d'identification des fragments, ce sera un schéma simple d'indexation (ex. "font-collection#1" pour la première police, "font-collection#2" pour la seconde, etc.) qui sera utilisé.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* <url> */
+src: url(https://unsiteweb.com/chemin/vers/police.woff); /* URL absolue */
+src: url(chemin/vers/police.woff);                       /* URL relative */
+src: url(chemin/vers/police.woff) format("woff");        /* format explicite */
+src: url('chemin/vers/police.woff');                     /* URL entre quotes */
+src: url(chemin/vers/policesvg.svg#exemple);             /* fragment identifiant une police */
+
+/* Valeurs de type <font-face-name> */
+src: local(police);      /* nom sans double quote */
+src: local(une police); /* nom avec espace */
+src: local("police");    /* nom entre double quotes */
+
+/* Liste avec plusieurs éléments */
+src: local(police), url(chemin/vers/police.svg) format("svg"),
+    url(chemin/vers/police.woff) format("woff"),
+    url(chemin/vers/police.otf) format("opentype");
+
+ +

Valeurs

+ +
+
<url> [ format( <string># ) ]?
+
Définit une référence externe, composée d'une URL et d'une indication optionnelle quant au format de la police chargée via cette URL. L'indication de format contient une liste de chaînes de caractères dont chacune doit correspondre à un format de police connu. Si un agent utilisateur ne prend pas en charge le format indiqué, il ne téléchargera pas la ressource liée à la police. Si aucune indication de format n'est fournie, la ressource associée est toujours téléchargée.
+
<font-face-name>
+
Définit le nom d'une police installée localement grâce à la fonction local() qui permet d'identifier une police de caractères au sein d'une famille de polices. Le nom de la police peut être entre double quotes.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
@font-face {
+  font-family: policeexemple;
+  src: local(Police Exemple), url('policeexemple.woff') format("woff"),
+      url('policeexemple.otf') format("opentype");
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face.src")}}

diff --git a/files/fr/web/css/@font-face/unicode-range/index.html b/files/fr/web/css/@font-face/unicode-range/index.html deleted file mode 100644 index 75a2fa5342..0000000000 --- a/files/fr/web/css/@font-face/unicode-range/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: unicode-range -slug: Web/CSS/@font-face/unicode-range -tags: - - CSS - - Descripteur - - Experimental - - Reference -translation_of: Web/CSS/@font-face/unicode-range ---- -
{{cssref}}
- -

Le descripteur unicode-range, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.

- -

Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.

- -

{{cssinfo}}

- -

Syntaxe

- -
/* Valeurs <unicode-range> */
-unicode-range: U+26;                 /* un seul point de code         */
-unicode-range: U+0-7F;
-unicode-range: U+0025-00FF;          /* un intervalle spécifique      */
-unicode-range: U+4??;                /* un intervalle de substitution */
-unicode-range: U+0025-00FF, U+4??;   /* plusieurs valeurs             */
-
- -

Valeurs

- -

Une valeur de type <unicode-range> peut se présenter de trois façons différentes :

- - - -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (Helvetica) et une police avec des empattements (Times New Roman) pour l'esperluette.

- -

CSS

- -

Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.

- -
@font-face {
-  font-family: 'Ampersand';
-  src: local('Times New Roman');
-  unicode-range: U+26;
-}
-
-div {
-  font-size: 4em;
-  font-family: Ampersand, Helvetica, sans-serif;
-}
- -

HTML

- -
<div>Me & You = Us</div>
- -

Résultat de référence (image statique)

- -

- -

Résultat du navigateur

- -

{{EmbedLiveSample("Exemples", 500,104)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-face.unicode-range")}}

diff --git a/files/fr/web/css/@font-face/unicode-range/index.md b/files/fr/web/css/@font-face/unicode-range/index.md new file mode 100644 index 0000000000..75a2fa5342 --- /dev/null +++ b/files/fr/web/css/@font-face/unicode-range/index.md @@ -0,0 +1,107 @@ +--- +title: unicode-range +slug: Web/CSS/@font-face/unicode-range +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@font-face/unicode-range +--- +
{{cssref}}
+ +

Le descripteur unicode-range, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.

+ +

Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeurs <unicode-range> */
+unicode-range: U+26;                 /* un seul point de code         */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;          /* un intervalle spécifique      */
+unicode-range: U+4??;                /* un intervalle de substitution */
+unicode-range: U+0025-00FF, U+4??;   /* plusieurs valeurs             */
+
+ +

Valeurs

+ +

Une valeur de type <unicode-range> peut se présenter de trois façons différentes :

+ + + +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (Helvetica) et une police avec des empattements (Times New Roman) pour l'esperluette.

+ +

CSS

+ +

Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.

+ +
@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}
+ +

HTML

+ +
<div>Me & You = Us</div>
+ +

Résultat de référence (image statique)

+ +

+ +

Résultat du navigateur

+ +

{{EmbedLiveSample("Exemples", 500,104)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-face.unicode-range")}}

diff --git a/files/fr/web/css/@font-feature-values/index.html b/files/fr/web/css/@font-feature-values/index.html deleted file mode 100644 index cf733cde7b..0000000000 --- a/files/fr/web/css/@font-feature-values/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: '@font-feature-values' -slug: Web/CSS/@font-feature-values -tags: - - CSS - - Reference - - Règle @ -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.

- -
@font-feature-values Font One {
-/* On active la caractéristique nice-style
-   sur Font One */
-  @styleset {
-    nice-style: 12;
-  }
-}
-
-@font-feature-values Font Two {
-/* On active la caractéristique nice-style
-   sur Font Two */
-  @styleset {
-    nice-style: 4;
-  }
-}
-
-…
-/* Indépendamment de la police */
-.nice-look {
-  font-variant-alternates: styleset(nice-style);
-}
-
- -

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
-
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
-
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
-
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
-
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
-
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
-
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.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.font-feature-values")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@font-feature-values/index.md b/files/fr/web/css/@font-feature-values/index.md new file mode 100644 index 0000000000..cf733cde7b --- /dev/null +++ b/files/fr/web/css/@font-feature-values/index.md @@ -0,0 +1,89 @@ +--- +title: '@font-feature-values' +slug: Web/CSS/@font-feature-values +tags: + - CSS + - Reference + - Règle @ +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.

+ +
@font-feature-values Font One {
+/* On active la caractéristique nice-style
+   sur Font One */
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+@font-feature-values Font Two {
+/* On active la caractéristique nice-style
+   sur Font Two */
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+/* Indépendamment de la police */
+.nice-look {
+  font-variant-alternates: styleset(nice-style);
+}
+
+ +

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
+
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
+
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
+
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
+
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
+
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
+
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.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.font-feature-values")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@import/index.html b/files/fr/web/css/@import/index.html deleted file mode 100644 index 41f8a5dd52..0000000000 --- a/files/fr/web/css/@import/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@import ---- -
{{CSSRef}}
- -

La règle @ @import est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles, à l'exception de {{cssxref("@charset")}}. @import n'est pas une instruction imbriquée et ne peut donc pas être utilisée à l'intérieur de groupe de règles conditionnelles.

- -
@import url("fineprint.css") print;
-@import url("bluish.css") speech;
-@import 'custom.css';
-@import url("chrome://communicator/skin/");
-@import "common.css" screen;
-@import url('landscape.css') screen and (orientation:landscape);
-
- -

Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles @import spécifiques à chaque média. Ces imports conditionnels comportent une liste de requête média séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média all.

- -

Syntaxe

- -
@import url;
-@import url liste-requetes-media;
-
- -

où on a :

- -
-
url
-
Une valeur de type {{cssxref("<string>")}} ou {{cssxref("<url>")}} qui représente l'emplacement de la ressource qu'on souhaite importer. L'URL peut être absolue ou relative. On notera que, pour un paquet Mozilla, l'URL ne pointe pas nécessairement vers un fichier, elle peut simplement définir le nom du paquet et la partie utilisée, le fichier approprié sera alors choisi automatiquement (e.g. chrome://communicator/skin/). Voir cet article pour plus d'informations.
-
liste-requetes-media
-
Une liste de requêtes média séparées par des virgules qui conditionnent l'application des règles CSS pour l'URL associée. Si le navigateur ne prend en charge aucune des requêtes indiquées, il ne charge pas la ressource associée.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}}
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}Extension de la syntaxe afin de prendre en charge n'importe quelle requête média et pas uniquement celles sur les types de média.
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}Prise en charge du type {{cssxref("<string>")}} pour indiquer l'URL d'une feuille de style. Il est désormais nécessaire d'insérer les règles @import au début du document CSS.
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.import")}}

diff --git a/files/fr/web/css/@import/index.md b/files/fr/web/css/@import/index.md new file mode 100644 index 0000000000..41f8a5dd52 --- /dev/null +++ b/files/fr/web/css/@import/index.md @@ -0,0 +1,79 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@import +--- +
{{CSSRef}}
+ +

La règle @ @import est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles, à l'exception de {{cssxref("@charset")}}. @import n'est pas une instruction imbriquée et ne peut donc pas être utilisée à l'intérieur de groupe de règles conditionnelles.

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);
+
+ +

Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles @import spécifiques à chaque média. Ces imports conditionnels comportent une liste de requête média séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média all.

+ +

Syntaxe

+ +
@import url;
+@import url liste-requetes-media;
+
+ +

où on a :

+ +
+
url
+
Une valeur de type {{cssxref("<string>")}} ou {{cssxref("<url>")}} qui représente l'emplacement de la ressource qu'on souhaite importer. L'URL peut être absolue ou relative. On notera que, pour un paquet Mozilla, l'URL ne pointe pas nécessairement vers un fichier, elle peut simplement définir le nom du paquet et la partie utilisée, le fichier approprié sera alors choisi automatiquement (e.g. chrome://communicator/skin/). Voir cet article pour plus d'informations.
+
liste-requetes-media
+
Une liste de requêtes média séparées par des virgules qui conditionnent l'application des règles CSS pour l'URL associée. Si le navigateur ne prend en charge aucune des requêtes indiquées, il ne charge pas la ressource associée.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}}
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}Extension de la syntaxe afin de prendre en charge n'importe quelle requête média et pas uniquement celles sur les types de média.
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}Prise en charge du type {{cssxref("<string>")}} pour indiquer l'URL d'une feuille de style. Il est désormais nécessaire d'insérer les règles @import au début du document CSS.
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.import")}}

diff --git a/files/fr/web/css/@keyframes/index.html b/files/fr/web/css/@keyframes/index.html deleted file mode 100644 index 9856d8f815..0000000000 --- a/files/fr/web/css/@keyframes/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: '@keyframes' -slug: Web/CSS/@keyframes -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@keyframes ---- -
{{CSSRef}}
- -

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 {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -

Il est possible de manipuler la règle @ @keyframes via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}.

- -

Afin d'utiliser ces règles, on créera une règle @keyframes avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle @keyframes contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..

- -

Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.

- -

Validité de la liste des étapes

- -

Si une liste d'étapes ne spécifie pas le début (0%/from) ou la fin (100%/to) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial.

- -

Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.

- -

Résolution des doublons

- -

Si plusieurs règles @keyframes existent avec le même nom, c'est la dernière qui est utilisée. Les règles @keyframes ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.

- -

Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.

- -

Gestion des propriétés absentes

- -

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 {
-  0% { top: 0; left: 0; }
-  30% { top: 50px; }
-  68%, 72% { left: 50px; }
-  100% { top: 100px; left: 100%; }
-}
-
- -

Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes 0%, 30% et 100%. Quant à {{cssxref("left")}}, elle est animée aux étapes 0%, 68% , 72% et 100%.

- -

Seules les propriétés qui sont définies sur les étapes de début (0%) et de fin (100%) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.

- -

!important dans une étape

- -

Les déclarations qui utilisent !important dans une description d'étape sont ignorées

- -
@keyframes important1 {
-  from { margin-top: 50px; }
-  50%  { margin-top: 150px !important; } /* ignorée */
-  to   { margin-top: 100px; }
-}
-
-@keyframes important2 {
-  from { margin-top: 50px;
-         margin-bottom: 100px; }
-  to   { margin-top: 150px !important; /* ignorée */
-         margin-bottom: 50px; }
-}
-
- -

Syntaxe

- -

Valeurs

- -
-
<identifier>
-
Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être un identifiant valide selon la syntaxe CSS.
-
from
-
Indique le point de départ de l'animation (correspond à un avancement de 0%).
-
to
-
Indique la fin de l'animation (correspond à un avancement de 100%).
-
{{cssxref("<percentage>")}}
-
Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  animation-duration: 25s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-  75% {
-    font-size: 300%;
-    margin-left: 25%;
-    width: 150%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -

HTML

- -
<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 ;
-  aussi comprit-elle qu’il fallait le traiter avec
-  respect.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","500","300")}}

- -

Plus d'exemples ?

- -

Regardez Utiliser les animations CSS pour de plus amples exemples.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.keyframes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md new file mode 100644 index 0000000000..9856d8f815 --- /dev/null +++ b/files/fr/web/css/@keyframes/index.md @@ -0,0 +1,169 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@keyframes +--- +
{{CSSRef}}
+ +

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 {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

Il est possible de manipuler la règle @ @keyframes via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}.

+ +

Afin d'utiliser ces règles, on créera une règle @keyframes avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle @keyframes contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..

+ +

Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.

+ +

Validité de la liste des étapes

+ +

Si une liste d'étapes ne spécifie pas le début (0%/from) ou la fin (100%/to) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial.

+ +

Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.

+ +

Résolution des doublons

+ +

Si plusieurs règles @keyframes existent avec le même nom, c'est la dernière qui est utilisée. Les règles @keyframes ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.

+ +

Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.

+ +

Gestion des propriétés absentes

+ +

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 {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+
+ +

Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes 0%, 30% et 100%. Quant à {{cssxref("left")}}, elle est animée aux étapes 0%, 68% , 72% et 100%.

+ +

Seules les propriétés qui sont définies sur les étapes de début (0%) et de fin (100%) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.

+ +

!important dans une étape

+ +

Les déclarations qui utilisent !important dans une description d'étape sont ignorées

+ +
@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 150px !important; } /* ignorée */
+  to   { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+         margin-bottom: 100px; }
+  to   { margin-top: 150px !important; /* ignorée */
+         margin-bottom: 50px; }
+}
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<identifier>
+
Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être un identifiant valide selon la syntaxe CSS.
+
from
+
Indique le point de départ de l'animation (correspond à un avancement de 0%).
+
to
+
Indique la fin de l'animation (correspond à un avancement de 100%).
+
{{cssxref("<percentage>")}}
+
Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  animation-duration: 25s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

HTML

+ +
<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 ;
+  aussi comprit-elle qu’il fallait le traiter avec
+  respect.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","500","300")}}

+ +

Plus d'exemples ?

+ +

Regardez Utiliser les animations CSS pour de plus amples exemples.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.keyframes")}}

+ +

Voir aussi

+ + 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 deleted file mode 100644 index 10c33af0f5..0000000000 --- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: '-moz-device-pixel-ratio' -slug: Web/CSS/@media/-moz-device-pixel-ratio -tags: - - '@media' - - CSS - - Caractéristique média - - Déprécié - - Non-standard -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.

- -
-

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 :

- -
@media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */
-       (min--moz-device-pixel-ratio: 2),    /* Anciens Firefox (avant Firefox 16) */
-       (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.

-
- -
-

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

- -
-
{{cssxref("<number>")}}
-
Le nombre de pixels physiques pour un pixel CSS.
-
- -


- Média : {{cssxref("Media/Visual")}}
- Gestion des préfixes min/max : Oui

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}

diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md new file mode 100644 index 0000000000..10c33af0f5 --- /dev/null +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md @@ -0,0 +1,46 @@ +--- +title: '-moz-device-pixel-ratio' +slug: Web/CSS/@media/-moz-device-pixel-ratio +tags: + - '@media' + - CSS + - Caractéristique média + - Déprécié + - Non-standard +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.

+ +
+

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 :

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Anciens Firefox (avant Firefox 16) */
+       (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.

+
+ +
+

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

+ +
+
{{cssxref("<number>")}}
+
Le nombre de pixels physiques pour un pixel CSS.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Oui

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}

diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html deleted file mode 100644 index 814c43f592..0000000000 --- a/files/fr/web/css/@media/-ms-high-contrast/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: '-ms-high-contrast' -slug: Web/CSS/@media/-ms-high-contrast -tags: - - '@media' - - CSS - - Caractéristique média - - Non-standard - - Reference -translation_of: Web/CSS/@media/-ms-high-contrast -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.

- -

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.

- -

Syntaxe

- -

La caractéristique média -ms-high-contrast est définie avec une des valeurs définies ci-après.

- -

Valeurs

- -
-
active
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.

-
-
none{{deprecated_inline}}
-
Cette valeur n'est plus prise en charge par Edge.
-
black-on-white
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.

-
-
white-on-black
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.

-
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.

- -
@media screen and (-ms-high-contrast: active) {
-  /* Règles utilisées dans tous les cas si
-     le contraste élevé est utilisé */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
-}
-
- -

Spécifications

- -

Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.

- -

Notes

- -

À partir de Microsoft Edge, -ms-high-contrast: none n'est plus pris en charge.

- -

La caractéristique média -ms-high-contrast fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.

- -

La caractéristique média -ms-high-contrast a été introduite avec Windows 8.

diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.md b/files/fr/web/css/@media/-ms-high-contrast/index.md new file mode 100644 index 0000000000..814c43f592 --- /dev/null +++ b/files/fr/web/css/@media/-ms-high-contrast/index.md @@ -0,0 +1,72 @@ +--- +title: '-ms-high-contrast' +slug: Web/CSS/@media/-ms-high-contrast +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-ms-high-contrast +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.

+ +

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.

+ +

Syntaxe

+ +

La caractéristique média -ms-high-contrast est définie avec une des valeurs définies ci-après.

+ +

Valeurs

+ +
+
active
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.

+
+
none{{deprecated_inline}}
+
Cette valeur n'est plus prise en charge par Edge.
+
black-on-white
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.

+
+
white-on-black
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.

+
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.

+ +
@media screen and (-ms-high-contrast: active) {
+  /* Règles utilisées dans tous les cas si
+     le contraste élevé est utilisé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+
+ +

Spécifications

+ +

Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.

+ +

Notes

+ +

À partir de Microsoft Edge, -ms-high-contrast: none n'est plus pris en charge.

+ +

La caractéristique média -ms-high-contrast fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.

+ +

La caractéristique média -ms-high-contrast a été introduite avec Windows 8.

diff --git a/files/fr/web/css/@media/-webkit-animation/index.html b/files/fr/web/css/@media/-webkit-animation/index.html deleted file mode 100644 index e283f61a62..0000000000 --- a/files/fr/web/css/@media/-webkit-animation/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: '-webkit-animation' -slug: Web/CSS/@media/-webkit-animation -tags: - - CSS - - Caractéristique média - - Non-standard - - Reference -translation_of: Web/CSS/@media/-webkit-animation ---- -
{{CSSRef}}{{Non-standard_header}}
- -

-webkit-animation est une caractéristique média booléenne non-standard qui permet d'indiquer si les animationsCSS ({{cssxref("animation")}}) sont prises en charge dans leurs versions préfixées. Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.

- -

Exemples

- -
@media (-webkit-animation) {
-  /* CSS à utiliser si les animations sont prises en charge */
-}
- -

Spécifications

- -

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais).

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.-webkit-animation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/-webkit-animation/index.md b/files/fr/web/css/@media/-webkit-animation/index.md new file mode 100644 index 0000000000..e283f61a62 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-animation/index.md @@ -0,0 +1,36 @@ +--- +title: '-webkit-animation' +slug: Web/CSS/@media/-webkit-animation +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-animation +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-animation est une caractéristique média booléenne non-standard qui permet d'indiquer si les animationsCSS ({{cssxref("animation")}}) sont prises en charge dans leurs versions préfixées. Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.

+ +

Exemples

+ +
@media (-webkit-animation) {
+  /* CSS à utiliser si les animations sont prises en charge */
+}
+ +

Spécifications

+ +

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais).

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.-webkit-animation")}}

+ +

Voir aussi

+ + 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 deleted file mode 100644 index 3d96ba5464..0000000000 --- a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: '-webkit-device-pixel-ratio' -slug: Web/CSS/@media/-webkit-device-pixel-ratio -tags: - - CSS - - Caractéristique média - - Non-standard - - Reference -translation_of: Web/CSS/@media/-webkit-device-pixel-ratio ---- -
{{CSSRef}}{{Non-standard_header}}
- -

-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.

- -
-

Attention : Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.

-
- -

Syntaxe

- -

-webkit-device-pixel-ratio est une valleur décrivant un intervalle. On peut également utiliser -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio pour fixer un seuil minimum/maximum.

- -

Valeurs

- -
-
{{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.
-
- -

Implémentation

- -
/* Unité dppx implicite */
-@media (-webkit-min-device-pixel-ratio: 2) { ... }
-/* équivalent à */
-@media (min-resolution: 2dppx) { ... }
-
-/* De même */
-@media (-webkit-max-device-pixel-ratio: 2) { ... }
-/* équivalent à */
-@media (max-resolution: 2dppx) { ... }
-
- -

Exemples

- -

CSS

- -
/* Résolution exacte */
-@media (-webkit-device-pixel-ratio: 1) {
-  p {
-    color: red;
-  }
-}
-
-/* Résolution minimale */
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-  p {
-    font-size: 1.5em;
-  }
-}
-
-/* Résolution maximale */
-@media (-webkit-max-device-pixel-ratio: 3) {
-  p {
-    background: yellow;
-  }
-}
- -

HTML

- -
<p>Voici un test pour la densité de pixel de votre appareil.</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Safari CSS Reference 'media query extensions'.Documentation non-officielle, non-standard.Documentation initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md new file mode 100644 index 0000000000..3d96ba5464 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md @@ -0,0 +1,116 @@ +--- +title: '-webkit-device-pixel-ratio' +slug: Web/CSS/@media/-webkit-device-pixel-ratio +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-device-pixel-ratio +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-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.

+ +
+

Attention : Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.

+
+ +

Syntaxe

+ +

-webkit-device-pixel-ratio est une valleur décrivant un intervalle. On peut également utiliser -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio pour fixer un seuil minimum/maximum.

+ +

Valeurs

+ +
+
{{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.
+
+ +

Implémentation

+ +
/* Unité dppx implicite */
+@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (min-resolution: 2dppx) { ... }
+
+/* De même */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (max-resolution: 2dppx) { ... }
+
+ +

Exemples

+ +

CSS

+ +
/* Résolution exacte */
+@media (-webkit-device-pixel-ratio: 1) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  p {
+    font-size: 1.5em;
+  }
+}
+
+/* Résolution maximale */
+@media (-webkit-max-device-pixel-ratio: 3) {
+  p {
+    background: yellow;
+  }
+}
+ +

HTML

+ +
<p>Voici un test pour la densité de pixel de votre appareil.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Safari CSS Reference 'media query extensions'.Documentation non-officielle, non-standard.Documentation initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.html b/files/fr/web/css/@media/-webkit-transform-2d/index.html deleted file mode 100644 index 94ab2e5e51..0000000000 --- a/files/fr/web/css/@media/-webkit-transform-2d/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: '-webkit-transform-2d' -slug: Web/CSS/@media/-webkit-transform-2d -tags: - - CSS - - Caractéristique média - - Non-standard - - Reference -translation_of: Web/CSS/@media/-webkit-transform-2d ---- -
{{CSSRef}}{{Non-standard_header}}
- -

-webkit-transform-2d est une caractéristique média booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.

- -
-

Note : Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.

-
- -

Spécifications

- -

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais) .

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.-webkit-transform-2d")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.md b/files/fr/web/css/@media/-webkit-transform-2d/index.md new file mode 100644 index 0000000000..94ab2e5e51 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transform-2d/index.md @@ -0,0 +1,34 @@ +--- +title: '-webkit-transform-2d' +slug: Web/CSS/@media/-webkit-transform-2d +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-transform-2d +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-transform-2d est une caractéristique média booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.

+ +
+

Note : Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.

+
+ +

Spécifications

+ +

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais) .

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.-webkit-transform-2d")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.html b/files/fr/web/css/@media/-webkit-transform-3d/index.html deleted file mode 100644 index 887649670d..0000000000 --- a/files/fr/web/css/@media/-webkit-transform-3d/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: '-webkit-transform-3d' -slug: Web/CSS/@media/-webkit-transform-3d -tags: - - CSS - - Caractéristique média - - Non-standard - - Reference -translation_of: Web/CSS/@media/-webkit-transform-3d ---- -
{{CSSRef}}{{Non-standard_header}}
- -

-webkit-transform-3d est une caractéristique média booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.

- -
-

Note : Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.

-
- -

Exmple

- -
@media (-webkit-transform-3d) {
-  .toto {
-    transform-style: preserve-3d;
-  }
-}
-
-@media (-webkit-transform-3d: 1) {
-  .toto {
-    transform-style: preserve-3d;
-  }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Safari CSS Reference media query extensions in that document.Documentation non-officielle, non-standard.Documentation initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.-webkit-transform-3d")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.md b/files/fr/web/css/@media/-webkit-transform-3d/index.md new file mode 100644 index 0000000000..887649670d --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transform-3d/index.md @@ -0,0 +1,68 @@ +--- +title: '-webkit-transform-3d' +slug: Web/CSS/@media/-webkit-transform-3d +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-transform-3d +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-transform-3d est une caractéristique média booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.

+ +
+

Note : Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.

+
+ +

Exmple

+ +
@media (-webkit-transform-3d) {
+  .toto {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .toto {
+    transform-style: preserve-3d;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Safari CSS Reference media query extensions in that document.Documentation non-officielle, non-standard.Documentation initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.-webkit-transform-3d")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-transition/index.html b/files/fr/web/css/@media/-webkit-transition/index.html deleted file mode 100644 index 4a408bf765..0000000000 --- a/files/fr/web/css/@media/-webkit-transition/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: '-webkit-transition' -slug: Web/CSS/@media/-webkit-transition -tags: - - CSS - - Caractéristique média - - Non-standard - - Obsolete - - Reference -translation_of: Web/CSS/@media/-webkit-transition ---- -
{{CSSRef}}{{Non-standard_header}}{{obsolete_header}}
- -

-webkit-transition est une caractéristique média booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.

- -
-

Note : Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.

-
- -

Privilégier @supports

- -

S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser -webkit-transition. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} :

- -
@supports(transition: initial) {
-  /* Les règles CSS à utiliser si   */
-  /* les transitions sont prises en */
-  /* charge. */
-}
- -

Spécifications

- -

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais).

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.-webkit-transition")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/-webkit-transition/index.md b/files/fr/web/css/@media/-webkit-transition/index.md new file mode 100644 index 0000000000..4a408bf765 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transition/index.md @@ -0,0 +1,49 @@ +--- +title: '-webkit-transition' +slug: Web/CSS/@media/-webkit-transition +tags: + - CSS + - Caractéristique média + - Non-standard + - Obsolete + - Reference +translation_of: Web/CSS/@media/-webkit-transition +--- +
{{CSSRef}}{{Non-standard_header}}{{obsolete_header}}
+ +

-webkit-transition est une caractéristique média booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.

+ +
+

Note : Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.

+
+ +

Privilégier @supports

+ +

S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser -webkit-transition. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} :

+ +
@supports(transition: initial) {
+  /* Les règles CSS à utiliser si   */
+  /* les transitions sont prises en */
+  /* charge. */
+}
+ +

Spécifications

+ +

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais).

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.-webkit-transition")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/any-hover/index.html b/files/fr/web/css/@media/any-hover/index.html deleted file mode 100644 index 27509c77c4..0000000000 --- a/files/fr/web/css/@media/any-hover/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: any-hover -slug: Web/CSS/@media/any-hover -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/any-hover ---- -
{{CSSRef}}
- -

any-hover est une caractéristique média CSS qui permet de vérifier si un mécanisme de saisie/d'entrée permet à l'utilisateur de survoler les éléments.

- -

Syntaxe

- -

La caractéristique any-hover est définie avec un mot-clé parmi ceux de la liste ci-après.

- -
-
none
-
Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).
-
hover
-
Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.
-
- -

Exemples

- -

HTML

- -
<a href="#">Essayez de me survoler !</a>
- -

CSS

- -
@media (any-hover: hover) {
-  a:hover {
-    background: yellow;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.any-hover")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/any-hover/index.md b/files/fr/web/css/@media/any-hover/index.md new file mode 100644 index 0000000000..27509c77c4 --- /dev/null +++ b/files/fr/web/css/@media/any-hover/index.md @@ -0,0 +1,70 @@ +--- +title: any-hover +slug: Web/CSS/@media/any-hover +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/any-hover +--- +
{{CSSRef}}
+ +

any-hover est une caractéristique média CSS qui permet de vérifier si un mécanisme de saisie/d'entrée permet à l'utilisateur de survoler les éléments.

+ +

Syntaxe

+ +

La caractéristique any-hover est définie avec un mot-clé parmi ceux de la liste ci-après.

+ +
+
none
+
Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).
+
hover
+
Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.
+
+ +

Exemples

+ +

HTML

+ +
<a href="#">Essayez de me survoler !</a>
+ +

CSS

+ +
@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.any-hover")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/any-pointer/index.html b/files/fr/web/css/@media/any-pointer/index.html deleted file mode 100644 index a2ef25ec7c..0000000000 --- a/files/fr/web/css/@media/any-pointer/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: any-pointer -slug: Web/CSS/@media/any-pointer -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/any-pointer ---- -
{{CSSRef}}
- -

any-pointer est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.

- -
-

Note : Si on souhaite tester la précision du mécanisme de pointage principal, on pourra utiliser la caractéristique pointer à la place.

-
- -

Syntaxe

- -

La caractéristique any-pointer est définie comme un mot-clé parmi ceux de la liste ci-après.

- -
-
none
-
L'appareil ne dispose d'aucun dispositif de pointage.
-
coarse
-
Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.
-
fine
-
Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.
-
- -
-

Note : Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur none ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.

-
- -

Exemples

- -

Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.

- -

HTML

- -
<input id="test" type="checkbox" />
-<label for="test">Coucou !</label>
- -

CSS

- -
input[type="checkbox"]:checked {
-  background: gray;
-}
-
-@media (any-pointer: fine) {
-  input[type="checkbox"] {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 15px;
-    height: 15px;
-    border: 1px solid blue;
-  }
-}
-
-@media (any-pointer: coarse) {
-  input[type="checkbox"] {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    border: 2px solid red;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.any-pointer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/any-pointer/index.md b/files/fr/web/css/@media/any-pointer/index.md new file mode 100644 index 0000000000..a2ef25ec7c --- /dev/null +++ b/files/fr/web/css/@media/any-pointer/index.md @@ -0,0 +1,103 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/any-pointer +--- +
{{CSSRef}}
+ +

any-pointer est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.

+ +
+

Note : Si on souhaite tester la précision du mécanisme de pointage principal, on pourra utiliser la caractéristique pointer à la place.

+
+ +

Syntaxe

+ +

La caractéristique any-pointer est définie comme un mot-clé parmi ceux de la liste ci-après.

+ +
+
none
+
L'appareil ne dispose d'aucun dispositif de pointage.
+
coarse
+
Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.
+
fine
+
Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.
+
+ +
+

Note : Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur none ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.

+
+ +

Exemples

+ +

Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Coucou !</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.any-pointer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html deleted file mode 100644 index 0999d4619e..0000000000 --- a/files/fr/web/css/@media/aspect-ratio/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: aspect-ratio -slug: Web/CSS/@media/aspect-ratio -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/aspect-ratio ---- -
{{CSSRef}}
- -

aspect-ratio est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("<ratio>")}}) entre la largeur et la hauteur de la zone d'affichage (viewport).

- -

Syntaxe

- -

La caractéristique aspect-ratio est définie avec un ratio (type CSS {{cssxref("<ratio>")}}) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-aspect-ratio et max-aspect-ratio afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.

- -

Exemples

- -

Exemples de valeurs pour aspect-ratio

- -
-aspect-ratio: 1 / 1;
-aspect-ratio: 16 / 9;
-
- -

Correspondance entre width et height et aspect-ratio

- -

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.

- -

Pour Firefox, la feuille de style interne ressemble à :

- -
-img, input[type="image"], video, embed, iframe, marquee, object, table {
-  aspect-ratio: attr(width) / attr(height);
-}
- -

Pour en savoir plus, vous pouvez consulter Définir la hauteur et largeur des images redevient important (en anglais).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.aspect-ratio")}}

diff --git a/files/fr/web/css/@media/aspect-ratio/index.md b/files/fr/web/css/@media/aspect-ratio/index.md new file mode 100644 index 0000000000..0999d4619e --- /dev/null +++ b/files/fr/web/css/@media/aspect-ratio/index.md @@ -0,0 +1,66 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/aspect-ratio +--- +
{{CSSRef}}
+ +

aspect-ratio est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("<ratio>")}}) entre la largeur et la hauteur de la zone d'affichage (viewport).

+ +

Syntaxe

+ +

La caractéristique aspect-ratio est définie avec un ratio (type CSS {{cssxref("<ratio>")}}) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-aspect-ratio et max-aspect-ratio afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.

+ +

Exemples

+ +

Exemples de valeurs pour aspect-ratio

+ +
+aspect-ratio: 1 / 1;
+aspect-ratio: 16 / 9;
+
+ +

Correspondance entre width et height et aspect-ratio

+ +

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.

+ +

Pour Firefox, la feuille de style interne ressemble à :

+ +
+img, input[type="image"], video, embed, iframe, marquee, object, table {
+  aspect-ratio: attr(width) / attr(height);
+}
+ +

Pour en savoir plus, vous pouvez consulter Définir la hauteur et largeur des images redevient important (en anglais).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.aspect-ratio")}}

diff --git a/files/fr/web/css/@media/aural/index.html b/files/fr/web/css/@media/aural/index.html deleted file mode 100644 index 3de1642213..0000000000 --- a/files/fr/web/css/@media/aural/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: aural -slug: Web/CSS/@media/aural -tags: - - CSS - - Déprécié - - Obsolete - - Reference -translation_of: Web/CSS/@media/aural ---- -
{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}
- -

Un groupe de médias défini par les standards CSS.

- -
-

Note : Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans {{Gecko("6.0")}}. C'est le type de média speech qui le remplace.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
CSS Level 2DépréciationDéfinition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/aural/index.md b/files/fr/web/css/@media/aural/index.md new file mode 100644 index 0000000000..3de1642213 --- /dev/null +++ b/files/fr/web/css/@media/aural/index.md @@ -0,0 +1,42 @@ +--- +title: aural +slug: Web/CSS/@media/aural +tags: + - CSS + - Déprécié + - Obsolete + - Reference +translation_of: Web/CSS/@media/aural +--- +
{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}
+ +

Un groupe de médias défini par les standards CSS.

+ +
+

Note : Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans {{Gecko("6.0")}}. C'est le type de média speech qui le remplace.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
CSS Level 2DépréciationDéfinition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/color-gamut/index.html b/files/fr/web/css/@media/color-gamut/index.html deleted file mode 100644 index e50d76749f..0000000000 --- a/files/fr/web/css/@media/color-gamut/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: color-gamut -slug: Web/CSS/@media/color-gamut -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/color-gamut ---- -
{{CSSRef}}
- -

color-gamut est une caractéristique média dont la valeur décrit l'intervalle approximatif des couleurs qui sont prises en charge par l'agent utilisateur et l'appareil responsable de l'affichage.

- -

Syntaxe

- -

La caractéristique color-gamut est définie avec un mot-clé parmi ceux de la liste ci-après.

- -
-
srgb
-
L'appareil d'affichage prend approximativement en charge l'espace de couleurs sRGB ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.
-
p3
-
L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par l'espace de couleur DCI P3 ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.
-
rec2020
-
L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par l'espace de couleurs ITU-R Recommendation BT.2020 ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.
-
- -

Exemples

- -

HTML

- -
<p>Un test simple.</p>
- -

CSS

- -
@media (color-gamut: srgb) {
-  p {
-    background: #f4ae8a;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.color-gamut")}}

diff --git a/files/fr/web/css/@media/color-gamut/index.md b/files/fr/web/css/@media/color-gamut/index.md new file mode 100644 index 0000000000..e50d76749f --- /dev/null +++ b/files/fr/web/css/@media/color-gamut/index.md @@ -0,0 +1,66 @@ +--- +title: color-gamut +slug: Web/CSS/@media/color-gamut +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/color-gamut +--- +
{{CSSRef}}
+ +

color-gamut est une caractéristique média dont la valeur décrit l'intervalle approximatif des couleurs qui sont prises en charge par l'agent utilisateur et l'appareil responsable de l'affichage.

+ +

Syntaxe

+ +

La caractéristique color-gamut est définie avec un mot-clé parmi ceux de la liste ci-après.

+ +
+
srgb
+
L'appareil d'affichage prend approximativement en charge l'espace de couleurs sRGB ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.
+
p3
+
L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par l'espace de couleur DCI P3 ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.
+
rec2020
+
L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par l'espace de couleurs ITU-R Recommendation BT.2020 ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.
+
+ +

Exemples

+ +

HTML

+ +
<p>Un test simple.</p>
+ +

CSS

+ +
@media (color-gamut: srgb) {
+  p {
+    background: #f4ae8a;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.color-gamut")}}

diff --git a/files/fr/web/css/@media/color-index/index.html b/files/fr/web/css/@media/color-index/index.html deleted file mode 100644 index d50db80028..0000000000 --- a/files/fr/web/css/@media/color-index/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: color-index -slug: Web/CSS/@media/color-index -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/color-index ---- -
{{CSSRef}}
- -

color-index est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur correspond au nombre d'entrées que comporte la palette de couleurs du périphérique de sortie, ou zéro si ce dernier n'en utilise pas.

- -

Syntaxe

- -

La caractéristique color-index est définie sous la forme d'un entier (type {{cssxref("<integer>")}}) et représente le nombre d'entrées de la palette de couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas une telle palette). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-color-index et max-color-index afin cibler des règles en fonction d'un minimum ou d'un maximum.

- -

Exemples

- -

Exemple simple

- -

HTML

- -
<p>Un test simple.</p>
-
- -

CSS

- -
p {
-  color: black;
-}
-
-@media (color-index) {
-  p {
-    color: red;
-  }
-}
-
-@media (min-color-index: 15000) {
-  p {
-    color: #1475ef;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemple_simple")}}

- -

Feuille de style personnalisée

- -

Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.

- -
<link rel="stylesheet" href="http://toto.truc.com/base.css" />
-<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://toto.truc.com/feuille_style_couleurs.css" />
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationEtatCommentaires
{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}{{Spec2('CSS3 Media Queries')}}Définition initiale, la valeur ne peut pas être négative.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.color-index")}}

diff --git a/files/fr/web/css/@media/color-index/index.md b/files/fr/web/css/@media/color-index/index.md new file mode 100644 index 0000000000..d50db80028 --- /dev/null +++ b/files/fr/web/css/@media/color-index/index.md @@ -0,0 +1,82 @@ +--- +title: color-index +slug: Web/CSS/@media/color-index +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/color-index +--- +
{{CSSRef}}
+ +

color-index est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur correspond au nombre d'entrées que comporte la palette de couleurs du périphérique de sortie, ou zéro si ce dernier n'en utilise pas.

+ +

Syntaxe

+ +

La caractéristique color-index est définie sous la forme d'un entier (type {{cssxref("<integer>")}}) et représente le nombre d'entrées de la palette de couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas une telle palette). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-color-index et max-color-index afin cibler des règles en fonction d'un minimum ou d'un maximum.

+ +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
<p>Un test simple.</p>
+
+ +

CSS

+ +
p {
+  color: black;
+}
+
+@media (color-index) {
+  p {
+    color: red;
+  }
+}
+
+@media (min-color-index: 15000) {
+  p {
+    color: #1475ef;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple")}}

+ +

Feuille de style personnalisée

+ +

Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.

+ +
<link rel="stylesheet" href="http://toto.truc.com/base.css" />
+<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://toto.truc.com/feuille_style_couleurs.css" />
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}{{Spec2('CSS3 Media Queries')}}Définition initiale, la valeur ne peut pas être négative.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.color-index")}}

diff --git a/files/fr/web/css/@media/color/index.html b/files/fr/web/css/@media/color/index.html deleted file mode 100644 index 166d7849d0..0000000000 --- a/files/fr/web/css/@media/color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: color -slug: Web/CSS/@media/color -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/color ---- -
{{CSSRef}}
- -

color est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur est le nombre de bits par composante de couleur du périphérique de sortie, ou zéro si ce dernier ne gère pas les couleurs.

- -

Syntaxe

- -

La caractéristique color est définie avec un entier (type CSS {{cssxref("<integer>")}}) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-color et max-color afin de cibler des règles en fonction d'un minimum ou d'un maximum.

- -
-

Note : Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.

-
- -

Exemples

- -

HTML

- -
<p>
-   Ce texte sera noir pour les appareils qui ne prennent en charge
-   aucune couleur, rouge pour ceux qui prennent peu de couleurs en
-   charge et vert sinon.
-</p>
-
- -

CSS

- -
p {
-  color: black;
-}
-
-/* Tout appareil qui gère des couleurs */
-@media (color) {
-  p {
-    color: red;
-  }
-}
-
-/* Tout appareil qui gère des couleurs avec */
-/* au moins 8 bits par composante */
-@media (min-color: 8) {
-  p {
-    color: #24ba13;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#color', 'color')}}{{Spec2('CSS3 Media Queries')}}Définition initiale, la valeur ne peut pas être négative.
{{SpecName('CSS4 Media Queries', '#color', 'color')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond alors à un booléen faux).
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.color")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/color/index.md b/files/fr/web/css/@media/color/index.md new file mode 100644 index 0000000000..166d7849d0 --- /dev/null +++ b/files/fr/web/css/@media/color/index.md @@ -0,0 +1,92 @@ +--- +title: color +slug: Web/CSS/@media/color +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/color +--- +
{{CSSRef}}
+ +

color est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur est le nombre de bits par composante de couleur du périphérique de sortie, ou zéro si ce dernier ne gère pas les couleurs.

+ +

Syntaxe

+ +

La caractéristique color est définie avec un entier (type CSS {{cssxref("<integer>")}}) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-color et max-color afin de cibler des règles en fonction d'un minimum ou d'un maximum.

+ +
+

Note : Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.

+
+ +

Exemples

+ +

HTML

+ +
<p>
+   Ce texte sera noir pour les appareils qui ne prennent en charge
+   aucune couleur, rouge pour ceux qui prennent peu de couleurs en
+   charge et vert sinon.
+</p>
+
+ +

CSS

+ +
p {
+  color: black;
+}
+
+/* Tout appareil qui gère des couleurs */
+@media (color) {
+  p {
+    color: red;
+  }
+}
+
+/* Tout appareil qui gère des couleurs avec */
+/* au moins 8 bits par composante */
+@media (min-color: 8) {
+  p {
+    color: #24ba13;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#color', 'color')}}{{Spec2('CSS3 Media Queries')}}Définition initiale, la valeur ne peut pas être négative.
{{SpecName('CSS4 Media Queries', '#color', 'color')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond alors à un booléen faux).
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.color")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/device-aspect-ratio/index.html b/files/fr/web/css/@media/device-aspect-ratio/index.html deleted file mode 100644 index f9054e3aa9..0000000000 --- a/files/fr/web/css/@media/device-aspect-ratio/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: device-aspect-ratio -slug: Web/CSS/@media/device-aspect-ratio -tags: - - CSS - - Caractéristique média - - Déprécié - - Reference -translation_of: Web/CSS/@media/device-aspect-ratio ---- -
{{CSSRef}}{{deprecated_header}}
- -

device-aspect-ratio est une caractéristique média (cf. {{cssxref("@media")}}) dont la valeur correspond au ratio entre la largeur et la hauteur de l'appareil d'affichage.

- -

Syntaxe

- -

La caractéristique device-aspect-ratio est définie sous la forme d'un ratio (type CSS {{cssxref("<ratio>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-device-aspect-ratio et max-device-aspect-ratio afin de cibler des règles en fonction de minimum ou maximum.

- -

Exemples

- -
article {
-  padding: 1rem;
-}
-
-@media screen and (min-device-aspect-ratio: 16/9) {
-  article {
-    padding: 1rem 5vw;
-  }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.device-aspect-ratio")}}

diff --git a/files/fr/web/css/@media/device-aspect-ratio/index.md b/files/fr/web/css/@media/device-aspect-ratio/index.md new file mode 100644 index 0000000000..f9054e3aa9 --- /dev/null +++ b/files/fr/web/css/@media/device-aspect-ratio/index.md @@ -0,0 +1,57 @@ +--- +title: device-aspect-ratio +slug: Web/CSS/@media/device-aspect-ratio +tags: + - CSS + - Caractéristique média + - Déprécié + - Reference +translation_of: Web/CSS/@media/device-aspect-ratio +--- +
{{CSSRef}}{{deprecated_header}}
+ +

device-aspect-ratio est une caractéristique média (cf. {{cssxref("@media")}}) dont la valeur correspond au ratio entre la largeur et la hauteur de l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique device-aspect-ratio est définie sous la forme d'un ratio (type CSS {{cssxref("<ratio>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-device-aspect-ratio et max-device-aspect-ratio afin de cibler des règles en fonction de minimum ou maximum.

+ +

Exemples

+ +
article {
+  padding: 1rem;
+}
+
+@media screen and (min-device-aspect-ratio: 16/9) {
+  article {
+    padding: 1rem 5vw;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.device-aspect-ratio")}}

diff --git a/files/fr/web/css/@media/device-height/index.html b/files/fr/web/css/@media/device-height/index.html deleted file mode 100644 index 3fdbf2c38f..0000000000 --- a/files/fr/web/css/@media/device-height/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: device-height -slug: Web/CSS/@media/device-height -tags: - - CSS - - Caractéristique média - - Déprécié - - Reference -translation_of: Web/CSS/@media/device-height ---- -
{{CSSRef}}{{deprecated_header}}
- -

device-height est une caractéristique média (cf. {{cssxref("@media")}}) dépréciée dont la valeur correspond à la hauteur de la surface de rendu pour l'appareil d'affichage.

- -

Syntaxe

- -

La caractéristique device-height est définie comme une longueur (type  {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-device-height et max-device-height afin d'utiliser des critères de minimum et maximum.

- -

Exemples

- -

Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.

- -
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://toto.truc.com/short-styles.css" />
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.device-height")}}

diff --git a/files/fr/web/css/@media/device-height/index.md b/files/fr/web/css/@media/device-height/index.md new file mode 100644 index 0000000000..3fdbf2c38f --- /dev/null +++ b/files/fr/web/css/@media/device-height/index.md @@ -0,0 +1,51 @@ +--- +title: device-height +slug: Web/CSS/@media/device-height +tags: + - CSS + - Caractéristique média + - Déprécié + - Reference +translation_of: Web/CSS/@media/device-height +--- +
{{CSSRef}}{{deprecated_header}}
+ +

device-height est une caractéristique média (cf. {{cssxref("@media")}}) dépréciée dont la valeur correspond à la hauteur de la surface de rendu pour l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique device-height est définie comme une longueur (type  {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-device-height et max-device-height afin d'utiliser des critères de minimum et maximum.

+ +

Exemples

+ +

Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://toto.truc.com/short-styles.css" />
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.device-height")}}

diff --git a/files/fr/web/css/@media/device-width/index.html b/files/fr/web/css/@media/device-width/index.html deleted file mode 100644 index 54e3589e24..0000000000 --- a/files/fr/web/css/@media/device-width/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: device-width -slug: Web/CSS/@media/device-width -tags: - - CSS - - Caractéristique média - - Déprécié - - Reference -translation_of: Web/CSS/@media/device-width ---- -
{{CSSRef}}{{deprecated_header}}
- -

device-width est une caractéristique média dépréciée dont la valeur représente la largeur de la surface de rendu de l'appareil d'affichage.

- -

Syntaxe

- -

device-width est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle et les variantes préfixées min-device-width et max-device-width peuvent être utilisées pour manipuler un minimum ou un maximum.

- -

Exemples

- -

Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://toto.truc.com/narrow-styles.css" />
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.device-width")}}

diff --git a/files/fr/web/css/@media/device-width/index.md b/files/fr/web/css/@media/device-width/index.md new file mode 100644 index 0000000000..54e3589e24 --- /dev/null +++ b/files/fr/web/css/@media/device-width/index.md @@ -0,0 +1,51 @@ +--- +title: device-width +slug: Web/CSS/@media/device-width +tags: + - CSS + - Caractéristique média + - Déprécié + - Reference +translation_of: Web/CSS/@media/device-width +--- +
{{CSSRef}}{{deprecated_header}}
+ +

device-width est une caractéristique média dépréciée dont la valeur représente la largeur de la surface de rendu de l'appareil d'affichage.

+ +

Syntaxe

+ +

device-width est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle et les variantes préfixées min-device-width et max-device-width peuvent être utilisées pour manipuler un minimum ou un maximum.

+ +

Exemples

+ +

Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://toto.truc.com/narrow-styles.css" />
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.device-width")}}

diff --git a/files/fr/web/css/@media/display-mode/index.html b/files/fr/web/css/@media/display-mode/index.html deleted file mode 100644 index 0e32d83a0b..0000000000 --- a/files/fr/web/css/@media/display-mode/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: display-mode -slug: Web/CSS/@media/display-mode -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/display-mode ---- -
{{CSSRef}}
- -

display-mode est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.

- -

Cette caractéristique correspond à la propriété display du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).

- -

Syntaxe

- -

La caractéristique display-mode est définie avec un mot-clé parmi ceux du tableau ci-après.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Valeur (mode d'affichage)DescriptionMode d'affichage utilisé en recours
fullscreenToute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (chrome) n'est affiché.standalone
standaloneL'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état.minimal-ui
minimal-uiL'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs.browser
browserL'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.Aucun
- -

Exemples

- -
@media all and (display-mode: fullscreen) {
-  body {
-    margin: 0;
-    border: 5px solid black;
-  }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}{{Spec2('Manifest')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.display-mode")}}

diff --git a/files/fr/web/css/@media/display-mode/index.md b/files/fr/web/css/@media/display-mode/index.md new file mode 100644 index 0000000000..0e32d83a0b --- /dev/null +++ b/files/fr/web/css/@media/display-mode/index.md @@ -0,0 +1,82 @@ +--- +title: display-mode +slug: Web/CSS/@media/display-mode +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/display-mode +--- +
{{CSSRef}}
+ +

display-mode est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.

+ +

Cette caractéristique correspond à la propriété display du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).

+ +

Syntaxe

+ +

La caractéristique display-mode est définie avec un mot-clé parmi ceux du tableau ci-après.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur (mode d'affichage)DescriptionMode d'affichage utilisé en recours
fullscreenToute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (chrome) n'est affiché.standalone
standaloneL'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état.minimal-ui
minimal-uiL'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs.browser
browserL'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.Aucun
+ +

Exemples

+ +
@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}{{Spec2('Manifest')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.display-mode")}}

diff --git a/files/fr/web/css/@media/forced-colors/index.html b/files/fr/web/css/@media/forced-colors/index.html deleted file mode 100644 index ab75ac487c..0000000000 --- a/files/fr/web/css/@media/forced-colors/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: forced-colors -slug: Web/CSS/@media/forced-colors -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/forced-colors ---- -
{{CSSRef}}{{SeeCompatTable}}{{draft}}
- -

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

-
- -

Valeurs

- -
-
none
-
La palette de couleur n'est pas restreinte.
-
active
-
La palette de couleur est restreinte et c'est l'agent utilisateur qui fournira la palette utilisable via un système de mots-clés de couleurs CSS systèmes. La valeur de prefers-color-scheme sera également mise à jour afin que les auteurs puissent adapter la page.
-
- -

Préférences utilisateur

- -

À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que de nombreux systèmes d'exploitation prennent en charge ce type de paramètre.

- -

Exemples

- -

Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illisibles. On tire ici parti d'une requête média pour utiliser une palette restreinte de l'agent utilisateur.

- -

HTML

- -
<div class="colors">quelques couleurs étranges</div>
-
- -

CSS

- -
.colors {
-  background-color: red;
-  color: grey;
-}
-
-@media (forced-colors: active) {
-  .colors {
-    background-color: white;
-    color: black;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("javascript.builtins.Array.sort")}}

- -

Voir aussi

- -

{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/forced-colors/index.md b/files/fr/web/css/@media/forced-colors/index.md new file mode 100644 index 0000000000..ab75ac487c --- /dev/null +++ b/files/fr/web/css/@media/forced-colors/index.md @@ -0,0 +1,84 @@ +--- +title: forced-colors +slug: Web/CSS/@media/forced-colors +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/forced-colors +--- +
{{CSSRef}}{{SeeCompatTable}}{{draft}}
+ +

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

+
+ +

Valeurs

+ +
+
none
+
La palette de couleur n'est pas restreinte.
+
active
+
La palette de couleur est restreinte et c'est l'agent utilisateur qui fournira la palette utilisable via un système de mots-clés de couleurs CSS systèmes. La valeur de prefers-color-scheme sera également mise à jour afin que les auteurs puissent adapter la page.
+
+ +

Préférences utilisateur

+ +

À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que de nombreux systèmes d'exploitation prennent en charge ce type de paramètre.

+ +

Exemples

+ +

Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illisibles. On tire ici parti d'une requête média pour utiliser une palette restreinte de l'agent utilisateur.

+ +

HTML

+ +
<div class="colors">quelques couleurs étranges</div>
+
+ +

CSS

+ +
.colors {
+  background-color: red;
+  color: grey;
+}
+
+@media (forced-colors: active) {
+  .colors {
+    background-color: white;
+    color: black;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("javascript.builtins.Array.sort")}}

+ +

Voir aussi

+ +

{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/grid/index.html b/files/fr/web/css/@media/grid/index.html deleted file mode 100644 index f0ba7043ff..0000000000 --- a/files/fr/web/css/@media/grid/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: grid -slug: Web/CSS/@media/grid -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/grid ---- -
{{CSSRef}}
- -

grid est une caractéristique média CSS (cf {{cssxref("@media")}}) dont la valeur est un booléen qui indique si l'appareil d'affichage fonctionne grâce à une grille (ex. un terminal ou un appareil qui ne dispose que d'une police à chasse fixe) ou grâce à une matrice d'affichage (avec des pixels « classiques »).

- -

La plupart des ordinateurs actuels possèdent des écrans matriciels. Parmi les appareils qui utilisent un affichage en grille, on trouve les appareils qui n'affichent que du texte dans un terminal ou des téléphones simples avec une seule police fixe.

- -

Syntaxe

- -

La caractéristique grid est une valeur booléenne (0 ou 1) (type {{cssxref("<mq-boolean>")}}) qui indique si l'appareil d'affichage fonctionne selon une grille.

- -

Exemples

- -

HTML

- -
<p class="unknown">Impossible de savoir si l'affichage fonctionne sur une grille. :-(</p>
-<p class="bitmap">L'appareil dispose d'un affichage matriciel.</p>
-<p class="grid">L'appareil utilise une grille pour l'affichage !</p>
- -

CSS

- -
:not(.unknown) {
-  color: lightgray;
-}
-
-@media (grid: 0) {
-  .unknown {
-    color: lightgray;
-  }
-
-  .bitmap {
-    color: red;
-    text-transform: uppercase;
-  }
-}
-
-@media (grid: 1) {
-  .unknown {
-    color: lightgray;
-  }
-
-  .grid {
-    color: black;
-    text-transform: uppercase;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.grid")}}

diff --git a/files/fr/web/css/@media/grid/index.md b/files/fr/web/css/@media/grid/index.md new file mode 100644 index 0000000000..f0ba7043ff --- /dev/null +++ b/files/fr/web/css/@media/grid/index.md @@ -0,0 +1,81 @@ +--- +title: grid +slug: Web/CSS/@media/grid +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/grid +--- +
{{CSSRef}}
+ +

grid est une caractéristique média CSS (cf {{cssxref("@media")}}) dont la valeur est un booléen qui indique si l'appareil d'affichage fonctionne grâce à une grille (ex. un terminal ou un appareil qui ne dispose que d'une police à chasse fixe) ou grâce à une matrice d'affichage (avec des pixels « classiques »).

+ +

La plupart des ordinateurs actuels possèdent des écrans matriciels. Parmi les appareils qui utilisent un affichage en grille, on trouve les appareils qui n'affichent que du texte dans un terminal ou des téléphones simples avec une seule police fixe.

+ +

Syntaxe

+ +

La caractéristique grid est une valeur booléenne (0 ou 1) (type {{cssxref("<mq-boolean>")}}) qui indique si l'appareil d'affichage fonctionne selon une grille.

+ +

Exemples

+ +

HTML

+ +
<p class="unknown">Impossible de savoir si l'affichage fonctionne sur une grille. :-(</p>
+<p class="bitmap">L'appareil dispose d'un affichage matriciel.</p>
+<p class="grid">L'appareil utilise une grille pour l'affichage !</p>
+ +

CSS

+ +
:not(.unknown) {
+  color: lightgray;
+}
+
+@media (grid: 0) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .bitmap {
+    color: red;
+    text-transform: uppercase;
+  }
+}
+
+@media (grid: 1) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .grid {
+    color: black;
+    text-transform: uppercase;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.grid")}}

diff --git a/files/fr/web/css/@media/height/index.html b/files/fr/web/css/@media/height/index.html deleted file mode 100644 index 6e88c3a451..0000000000 --- a/files/fr/web/css/@media/height/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: height -slug: Web/CSS/@media/height -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/height ---- -
{{CSSRef}}
- -

height est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur représente la hauteur de la zone d'affichage (viewport) (ou de la boîte de page pour les média paginés).

- -

Syntaxe

- -

La caractéristique height est définie comme une longueur (type {{cssxref("<length>")}}) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées min-height et max-height afin de cibler des règles selon un minimum ou un maximum.

- -

Exemples

- -

HTML

- -
<div>
-  Surveillez cet élément lors du
-  redimensionnement de la zone d'affichage.
-</div>
- -

CSS

- -
/* Hauteur exacte */
-@media (height: 360px) {
-  div {
-    color: red;
-  }
-}
-
-/* Hauteur minimale */
-@media (min-height: 25rem) {
-  div {
-    background: yellow;
-  }
-}
-
-/* Hauteur maximale */
-@media (max-height: 40rem) {
-  div {
-    border: 2px solid blue;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples','90%')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne doit pas être négative.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.height")}}

diff --git a/files/fr/web/css/@media/height/index.md b/files/fr/web/css/@media/height/index.md new file mode 100644 index 0000000000..6e88c3a451 --- /dev/null +++ b/files/fr/web/css/@media/height/index.md @@ -0,0 +1,81 @@ +--- +title: height +slug: Web/CSS/@media/height +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/height +--- +
{{CSSRef}}
+ +

height est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur représente la hauteur de la zone d'affichage (viewport) (ou de la boîte de page pour les média paginés).

+ +

Syntaxe

+ +

La caractéristique height est définie comme une longueur (type {{cssxref("<length>")}}) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées min-height et max-height afin de cibler des règles selon un minimum ou un maximum.

+ +

Exemples

+ +

HTML

+ +
<div>
+  Surveillez cet élément lors du
+  redimensionnement de la zone d'affichage.
+</div>
+ +

CSS

+ +
/* Hauteur exacte */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Hauteur minimale */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Hauteur maximale */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','90%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne doit pas être négative.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.height")}}

diff --git a/files/fr/web/css/@media/hover/index.html b/files/fr/web/css/@media/hover/index.html deleted file mode 100644 index 2ca99b76f9..0000000000 --- a/files/fr/web/css/@media/hover/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: hover -slug: Web/CSS/@media/hover -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/hover ---- -
{{CSSRef}}
- -

hover est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal permet à l'utilisateur de survoler les éléments.

- -

Syntaxe

- -

La caractéristique hover est définie avec un mot-clé parmi ceux de la liste suivant :

- -
-
none
-
Le mécanisme de saisie principal ne permet pas de survoler les éléments (ou ne le permet pas de façon simple ; par exemple sur les appareils mobiles qui émulent le survol avec un appui long) ou il n'existe pas de dispositif de pointage principal.
-
hover
-
Le mécanisme de saisie principal permet de survoler les éléments simplement.
-
- -

Exemples

- -

HTML

- -
<a href="#">Essayez de me survoler !</a>
- -

CSS

- -
@media (hover: hover) {
-  a:hover {
-    background: yellow;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.hover")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/hover/index.md b/files/fr/web/css/@media/hover/index.md new file mode 100644 index 0000000000..2ca99b76f9 --- /dev/null +++ b/files/fr/web/css/@media/hover/index.md @@ -0,0 +1,70 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/hover +--- +
{{CSSRef}}
+ +

hover est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal permet à l'utilisateur de survoler les éléments.

+ +

Syntaxe

+ +

La caractéristique hover est définie avec un mot-clé parmi ceux de la liste suivant :

+ +
+
none
+
Le mécanisme de saisie principal ne permet pas de survoler les éléments (ou ne le permet pas de façon simple ; par exemple sur les appareils mobiles qui émulent le survol avec un appui long) ou il n'existe pas de dispositif de pointage principal.
+
hover
+
Le mécanisme de saisie principal permet de survoler les éléments simplement.
+
+ +

Exemples

+ +

HTML

+ +
<a href="#">Essayez de me survoler !</a>
+ +

CSS

+ +
@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.hover")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/index.html b/files/fr/web/css/@media/index.html deleted file mode 100644 index bc94ddbaf3..0000000000 --- a/files/fr/web/css/@media/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: '@media' -slug: Web/CSS/@media -browser-compat: css.at-rules.media -translation_of: Web/CSS/@media ---- -
{{CSSRef}}
- -

La règle @ @media permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs requêtes média (media queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.

- -
-

Note : Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) grâce à l'interface CSSMediaRule.

-
- -

Syntaxe

- -

Une requête média (type <media-query>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre règle conditionnelle.

- -
/* Au niveau le plus haut du code */
-@media screen and (min-width: 900px) {
-  article {
-    padding: 1rem 3rem;
-  }
-}
-
-/* Imbriquée dans une autre règle-@ conditionnelle */
-@supports (display: flex) {
-  @media screen and (min-width: 900px) {
-    article {
-      display: flex;
-    }
-  }
-}
-
- -

Pour plus d'informations sur la syntaxe des requêtes média, voir Utiliser les requêtes média.

- -

Description

- -

Types de média

- -

{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}}

- -

Caractéristiques de média

- -

{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}}

- -

Accessibilité

- -

Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité em comme valeur pour les requêtes média lorsqu'il faut utiliser une longueur (<length>).

- -

Les unités em et px sont toutes les deux valides mais em s'adapte mieux quand la taille de la police du navigateur a été ajustée.

- -

On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur prefers-reduced-motion afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements.

- -

Sécurité

- -

Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.

- -

Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -
@media print {
-  body { font-size: 10pt }
-}
-@media screen {
-  body { font-size: 13px }
-}
-@media screen, print {
-  body { line-height: 1.2 }
-}
-
-@media only screen
-  and (min-width: 320px)
-  and (max-width: 480px)
-  and (-webkit-min-device-pixel-ratio: 2) {
-    body { line-height: 1.4 }
-}
-
- -

Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :

- -
@media (height > 600px) {
-  body { line-height: 1.4; }
-}
-
-@media (400px <= width <= 700px) {
-  body { line-height: 1.4; }
-}
-
- -

Pour plus d'exemples, voir Utiliser les requêtes média.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/index.md b/files/fr/web/css/@media/index.md new file mode 100644 index 0000000000..bc94ddbaf3 --- /dev/null +++ b/files/fr/web/css/@media/index.md @@ -0,0 +1,112 @@ +--- +title: '@media' +slug: Web/CSS/@media +browser-compat: css.at-rules.media +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +

La règle @ @media permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs requêtes média (media queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.

+ +
+

Note : Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) grâce à l'interface CSSMediaRule.

+
+ +

Syntaxe

+ +

Une requête média (type <media-query>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre règle conditionnelle.

+ +
/* Au niveau le plus haut du code */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Imbriquée dans une autre règle-@ conditionnelle */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+
+ +

Pour plus d'informations sur la syntaxe des requêtes média, voir Utiliser les requêtes média.

+ +

Description

+ +

Types de média

+ +

{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}}

+ +

Caractéristiques de média

+ +

{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}}

+ +

Accessibilité

+ +

Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité em comme valeur pour les requêtes média lorsqu'il faut utiliser une longueur (<length>).

+ +

Les unités em et px sont toutes les deux valides mais em s'adapte mieux quand la taille de la police du navigateur a été ajustée.

+ +

On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur prefers-reduced-motion afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements.

+ +

Sécurité

+ +

Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.

+ +

Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+
+ +

Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :

+ +
@media (height > 600px) {
+  body { line-height: 1.4; }
+}
+
+@media (400px <= width <= 700px) {
+  body { line-height: 1.4; }
+}
+
+ +

Pour plus d'exemples, voir Utiliser les requêtes média.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/inverted-colors/index.html b/files/fr/web/css/@media/inverted-colors/index.html deleted file mode 100644 index 9d1983d497..0000000000 --- a/files/fr/web/css/@media/inverted-colors/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: inverted-colors -slug: Web/CSS/@media/inverted-colors -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/inverted-colors ---- -
{{CSSRef}}
- -

inverted-colors est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.

- -

Syntaxe

- -

Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :

- -
-
none
-
Les couleurs sont affichées normalement.
-
inverted
-
Les couleurs des pixels de la zone affichée ont été inversées.
-
- -

Exemples

- -

HTML

- -
<p>
-  Si vous utilisez les couleurs inversées, ce texte devrait
-  être bleu sur blanc (l'inverse de jaune sur noir). Sinon,
-  il devrait être rouge sur gris clair.
-</p>
-<p>
-  Si le texte est gris, cela indique que votre navigateur
-  ne prend pas en charge la caractéristique média
-  `inverted-colors`.
-</p>
- -

CSS

- -
p {
-  color: gray;
-}
-
-@media (inverted-colors: inverted) {
-  p {
-    background: black;
-    color: yellow;
-  }
-}
-
-@media (inverted-colors: none) {
-  p {
-    background: #eee;
-    color: red;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS5 Media Queries')}}
{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS4 Media Queries')}}Repoussée à la spécification de niveau 5 pour les requêtes média.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.inverted-colors")}}

diff --git a/files/fr/web/css/@media/inverted-colors/index.md b/files/fr/web/css/@media/inverted-colors/index.md new file mode 100644 index 0000000000..9d1983d497 --- /dev/null +++ b/files/fr/web/css/@media/inverted-colors/index.md @@ -0,0 +1,90 @@ +--- +title: inverted-colors +slug: Web/CSS/@media/inverted-colors +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/inverted-colors +--- +
{{CSSRef}}
+ +

inverted-colors est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.

+ +

Syntaxe

+ +

Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :

+ +
+
none
+
Les couleurs sont affichées normalement.
+
inverted
+
Les couleurs des pixels de la zone affichée ont été inversées.
+
+ +

Exemples

+ +

HTML

+ +
<p>
+  Si vous utilisez les couleurs inversées, ce texte devrait
+  être bleu sur blanc (l'inverse de jaune sur noir). Sinon,
+  il devrait être rouge sur gris clair.
+</p>
+<p>
+  Si le texte est gris, cela indique que votre navigateur
+  ne prend pas en charge la caractéristique média
+  `inverted-colors`.
+</p>
+ +

CSS

+ +
p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS5 Media Queries')}}
{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS4 Media Queries')}}Repoussée à la spécification de niveau 5 pour les requêtes média.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.inverted-colors")}}

diff --git a/files/fr/web/css/@media/monochrome/index.html b/files/fr/web/css/@media/monochrome/index.html deleted file mode 100644 index d52c7db54d..0000000000 --- a/files/fr/web/css/@media/monochrome/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: monochrome -slug: Web/CSS/@media/monochrome -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/monochrome ---- -
{{CSSRef}}
- -

monochrome est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil.

- -

Syntaxe

- -

La caractéristique monochrome est un entier (type {{cssxref("<integer>")}})) dont la valeur correspond au nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. Si l'appareil n'est pas monochrome, cela vaudra 0. Cette caractéristique est une caractéristique d'intervalle ce qui signifie qu'on peut également utiliser les variantes préfixées min-monochrome et max-monochrome afin de cibler les règles en fonction d'un minimum ou d'un maximum.

- -

Exemples

- -

HTML

- -
<p class="mono">
-  Votre appareil prend en charge les
-  pixels monochrome !
-</p>
-<p class="no-mono">
-  Votre appareil ne prend pas en charge
-  les pixels monochromes.
-</p>
- -

CSS

- -
p {
-  display: none;
-}
-
-/* Any monochrome device */
-@media (monochrome) {
-  p.mono {
-    display: block;
-    color: #333;
-  }
-}
-
-/* Any non-monochrome device */
-@media (monochrome: 0) {
-  p.no-mono {
-    display: block;
-    color: #ee3636;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative, auquel cas cela correspond à un booléen faux.
{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne doit pas être négative.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.monochrome")}}

diff --git a/files/fr/web/css/@media/monochrome/index.md b/files/fr/web/css/@media/monochrome/index.md new file mode 100644 index 0000000000..d52c7db54d --- /dev/null +++ b/files/fr/web/css/@media/monochrome/index.md @@ -0,0 +1,83 @@ +--- +title: monochrome +slug: Web/CSS/@media/monochrome +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/monochrome +--- +
{{CSSRef}}
+ +

monochrome est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil.

+ +

Syntaxe

+ +

La caractéristique monochrome est un entier (type {{cssxref("<integer>")}})) dont la valeur correspond au nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. Si l'appareil n'est pas monochrome, cela vaudra 0. Cette caractéristique est une caractéristique d'intervalle ce qui signifie qu'on peut également utiliser les variantes préfixées min-monochrome et max-monochrome afin de cibler les règles en fonction d'un minimum ou d'un maximum.

+ +

Exemples

+ +

HTML

+ +
<p class="mono">
+  Votre appareil prend en charge les
+  pixels monochrome !
+</p>
+<p class="no-mono">
+  Votre appareil ne prend pas en charge
+  les pixels monochromes.
+</p>
+ +

CSS

+ +
p {
+  display: none;
+}
+
+/* Any monochrome device */
+@media (monochrome) {
+  p.mono {
+    display: block;
+    color: #333;
+  }
+}
+
+/* Any non-monochrome device */
+@media (monochrome: 0) {
+  p.no-mono {
+    display: block;
+    color: #ee3636;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative, auquel cas cela correspond à un booléen faux.
{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne doit pas être négative.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.monochrome")}}

diff --git a/files/fr/web/css/@media/orientation/index.html b/files/fr/web/css/@media/orientation/index.html deleted file mode 100644 index 53208a4b34..0000000000 --- a/files/fr/web/css/@media/orientation/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: orientation -slug: Web/CSS/@media/orientation -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/orientation ---- -
{{CSSRef}}
- -

orientation est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (viewport) (ou la boîte de la page pour les média paginés).

- -

Syntaxe

- -

La caractéristique orientation se définit grâce à l'un des mots-clés suivants :

- -
-
portrait
-
La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).
-
landscape
-
La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).
-
- -

Exemples

- -

HTML

- -
<div>Boîte 1</div>
-<div>Boîte 2</div>
-<div>Boîte 3</div>
-
- -

CSS

- -
body {
-  display: flex;
-}
-
-div {
-  background: yellow;
-}
-
-@media (orientation: landscape) {
-  body {
-    flex-direction: row;
-  }
-}
-
-@media (orientation: portrait) {
-  body {
-    flex-direction: column;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.orientation")}}

diff --git a/files/fr/web/css/@media/orientation/index.md b/files/fr/web/css/@media/orientation/index.md new file mode 100644 index 0000000000..53208a4b34 --- /dev/null +++ b/files/fr/web/css/@media/orientation/index.md @@ -0,0 +1,86 @@ +--- +title: orientation +slug: Web/CSS/@media/orientation +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/orientation +--- +
{{CSSRef}}
+ +

orientation est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (viewport) (ou la boîte de la page pour les média paginés).

+ +

Syntaxe

+ +

La caractéristique orientation se définit grâce à l'un des mots-clés suivants :

+ +
+
portrait
+
La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).
+
landscape
+
La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).
+
+ +

Exemples

+ +

HTML

+ +
<div>Boîte 1</div>
+<div>Boîte 2</div>
+<div>Boîte 3</div>
+
+ +

CSS

+ +
body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.orientation")}}

diff --git a/files/fr/web/css/@media/overflow-block/index.html b/files/fr/web/css/@media/overflow-block/index.html deleted file mode 100644 index 0ba8f3cf08..0000000000 --- a/files/fr/web/css/@media/overflow-block/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: overflow-block -slug: Web/CSS/@media/overflow-block -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/overflow-block ---- -
{{CSSRef}}
- -

overflow-block est une caractéristique média CSS qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (viewport) dans l'axe logique de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).

- -

Syntaxe

- -

La caractéristique overflow-block est définie avec un mot-clé de la liste suivante :

- -
-
none
-
Le contenu qui dépasse n'est pas affiché.
-
scroll
-
Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.
-
optional-paged
-
Une barre de défilement est ajoutée pour que l'utilisateur puisse voir le contenu ou l'auteur peut utiliser des sauts de page afin que le contenu soit lisible sur une autre page (ex. diaporamas).
-
paged
-
Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).
-
- -

Exemples

- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>
-
- -

CSS

- -
@media (overflow-block: scroll) {
-  p {
-    color: red;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.overflow-block")}}

diff --git a/files/fr/web/css/@media/overflow-block/index.md b/files/fr/web/css/@media/overflow-block/index.md new file mode 100644 index 0000000000..0ba8f3cf08 --- /dev/null +++ b/files/fr/web/css/@media/overflow-block/index.md @@ -0,0 +1,69 @@ +--- +title: overflow-block +slug: Web/CSS/@media/overflow-block +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/overflow-block +--- +
{{CSSRef}}
+ +

overflow-block est une caractéristique média CSS qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (viewport) dans l'axe logique de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).

+ +

Syntaxe

+ +

La caractéristique overflow-block est définie avec un mot-clé de la liste suivante :

+ +
+
none
+
Le contenu qui dépasse n'est pas affiché.
+
scroll
+
Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.
+
optional-paged
+
Une barre de défilement est ajoutée pour que l'utilisateur puisse voir le contenu ou l'auteur peut utiliser des sauts de page afin que le contenu soit lisible sur une autre page (ex. diaporamas).
+
paged
+
Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).
+
+ +

Exemples

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>
+
+ +

CSS

+ +
@media (overflow-block: scroll) {
+  p {
+    color: red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.overflow-block")}}

diff --git a/files/fr/web/css/@media/overflow-inline/index.html b/files/fr/web/css/@media/overflow-inline/index.html deleted file mode 100644 index 142a85420a..0000000000 --- a/files/fr/web/css/@media/overflow-inline/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: overflow-inline -slug: Web/CSS/@media/overflow-inline -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/overflow-inline ---- -
{{CSSRef}}
- -

overflow-inline est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (viewport) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).

- -

Syntaxe

- -

La caractéristique overflow-inline est définit avec un mot-clé parmi ceux de la liste suivante :

- -
-
none
-
Le contenu qui dépasse n'est pas affiché.
-
scroll
-
Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.
-
- -

Exemples

- -

HTML

- -
<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus.
-  Vestibulum ante ipsum primis in faucibus orci luctus et
-  ultrices posuere cubilia Curae; Nunc velit erat, tempus id
-  rutrum sed, dapibus ut urna. Integer vehicula nibh a justo
-  imperdiet rutrum. Nam faucibus pretium orci imperdiet
-  sollicitudin. Nunc id facilisis dui. Proin elementum et
-  massa et feugiat. Integer rutrum ullamcorper eleifend.
-  Proin sit amet tincidunt risus. Sed nec augue congue eros
-  accumsan tincidunt sed eget ex.
-</p>
-
- -

CSS

- -
@media (overflow-inline: scroll) {
-  p {
-    color: red;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.overflow-inline")}}

diff --git a/files/fr/web/css/@media/overflow-inline/index.md b/files/fr/web/css/@media/overflow-inline/index.md new file mode 100644 index 0000000000..142a85420a --- /dev/null +++ b/files/fr/web/css/@media/overflow-inline/index.md @@ -0,0 +1,76 @@ +--- +title: overflow-inline +slug: Web/CSS/@media/overflow-inline +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/overflow-inline +--- +
{{CSSRef}}
+ +

overflow-inline est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (viewport) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).

+ +

Syntaxe

+ +

La caractéristique overflow-inline est définit avec un mot-clé parmi ceux de la liste suivante :

+ +
+
none
+
Le contenu qui dépasse n'est pas affiché.
+
scroll
+
Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.
+
+ +

Exemples

+ +

HTML

+ +
<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus.
+  Vestibulum ante ipsum primis in faucibus orci luctus et
+  ultrices posuere cubilia Curae; Nunc velit erat, tempus id
+  rutrum sed, dapibus ut urna. Integer vehicula nibh a justo
+  imperdiet rutrum. Nam faucibus pretium orci imperdiet
+  sollicitudin. Nunc id facilisis dui. Proin elementum et
+  massa et feugiat. Integer rutrum ullamcorper eleifend.
+  Proin sit amet tincidunt risus. Sed nec augue congue eros
+  accumsan tincidunt sed eget ex.
+</p>
+
+ +

CSS

+ +
@media (overflow-inline: scroll) {
+  p {
+    color: red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.overflow-inline")}}

diff --git a/files/fr/web/css/@media/pointer/index.html b/files/fr/web/css/@media/pointer/index.html deleted file mode 100644 index 6fecdf4b85..0000000000 --- a/files/fr/web/css/@media/pointer/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: pointer -slug: Web/CSS/@media/pointer -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/pointer ---- -
{{CSSRef}}
- -

pointer est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.

- -
-

Note : Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique any-pointer.

-
- -

Syntaxe

- -

Cette caractéristique est définie avec un mot-clé parmi les suivants :

- -
-
none
-
Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.
-
coarse
-
Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.
-
fine
-
Le mécanisme de saisie principal inclut un dispositif de pointage précis.
-
- -

Exemples

- -

Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.

- -

HTML

- -
<input id="test" type="checkbox" />
-<label for="test">Coucou !</label>
- -

CSS

- -
input[type="checkbox"]:checked {
-  background: gray;
-}
-
-@media (pointer: fine) {
-  input[type="checkbox"] {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 15px;
-    height: 15px;
-    border: 1px solid blue;
-  }
-}
-
-@media (pointer: coarse) {
-  input[type="checkbox"] {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    border: 2px solid red;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}Ajout dans la spécification de niveau 4 pour les requêtes média.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.pointer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/pointer/index.md b/files/fr/web/css/@media/pointer/index.md new file mode 100644 index 0000000000..6fecdf4b85 --- /dev/null +++ b/files/fr/web/css/@media/pointer/index.md @@ -0,0 +1,99 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/pointer +--- +
{{CSSRef}}
+ +

pointer est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.

+ +
+

Note : Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique any-pointer.

+
+ +

Syntaxe

+ +

Cette caractéristique est définie avec un mot-clé parmi les suivants :

+ +
+
none
+
Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.
+
coarse
+
Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.
+
fine
+
Le mécanisme de saisie principal inclut un dispositif de pointage précis.
+
+ +

Exemples

+ +

Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Coucou !</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}Ajout dans la spécification de niveau 4 pour les requêtes média.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.pointer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.html b/files/fr/web/css/@media/prefers-color-scheme/index.html deleted file mode 100644 index 4476aacdf7..0000000000 --- a/files/fr/web/css/@media/prefers-color-scheme/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: prefers-color-scheme -slug: Web/CSS/@media/prefers-color-scheme -tags: - - '@media' - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/prefers-color-scheme ---- -
{{CSSRef}}
- -
-

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.)

-
- -

La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).

- -

Syntaxe

- -
-
light
-
Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.
-
dark
-
Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.
-
- -

Exemples

- -

CSS

- -
.day   { background: #eee; color: black; }
-.night { background: #333; color: white; }
-
-@media (prefers-color-scheme: dark) {
-  .day.dark-scheme   { background:  #333; color: white; }
-  .night.dark-scheme { background: black; color:  #ddd; }
-}
-
-@media (prefers-color-scheme: light) {
-  .day.light-scheme   { background: white; color:  #555; }
-  .night.light-scheme { background:  #eee; color: black; }
-}
-
-.day, .night {
-  display: inline-block;
-  padding: 1em;
-  width: 7em;
-  height: 2em;
-  vertical-align: middle;
-}
-
- -

HTML

- -
<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>
-
-<div class="night">Nuit (initial)</div>
-<div class="night light-scheme">Nuit (modifié si utilisation d'un thème clair)</div>
-<div class="night dark-scheme">Nuit (modifié si utilisation d'un thème sombre)</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.prefers-color-scheme")}}

- -

Voir aussi

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}
diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.md b/files/fr/web/css/@media/prefers-color-scheme/index.md new file mode 100644 index 0000000000..4476aacdf7 --- /dev/null +++ b/files/fr/web/css/@media/prefers-color-scheme/index.md @@ -0,0 +1,101 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-color-scheme +--- +
{{CSSRef}}
+ +
+

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.)

+
+ +

La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).

+ +

Syntaxe

+ +
+
light
+
Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.
+
dark
+
Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.
+
+ +

Exemples

+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+
+ +

HTML

+ +
<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>
+
+<div class="night">Nuit (initial)</div>
+<div class="night light-scheme">Nuit (modifié si utilisation d'un thème clair)</div>
+<div class="night dark-scheme">Nuit (modifié si utilisation d'un thème sombre)</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}
diff --git a/files/fr/web/css/@media/prefers-contrast/index.html b/files/fr/web/css/@media/prefers-contrast/index.html deleted file mode 100644 index c2bc1770ca..0000000000 --- a/files/fr/web/css/@media/prefers-contrast/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: prefers-contrast -slug: Web/CSS/@media/prefers-contrast -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/prefers-contrast ---- -
{{CSSRef}}{{SeeCompatTable}}{{draft}}
- -

La caractéristique média prefers-contrast permet de détecter si l'utilisateur a configuré son système pour utiliser un contraste élevé.

- -

Syntaxe

- -
-
no-preference
-
Cette valeur indique que l'utilisateur n'a exprimé aucune préférence particulière. La valeur de ce mot-clé est évaluée à false dans un contexte booléen.
-
high
-
Cette valeur indique que l'utilisateur a configuré son système pour avoir un contraste plus élevé.
-
low
-
Cette valeur indique que l'utilisateur a configuré son système afin d'avoir un niveau de contraste plus faible.
-
- -

Préférences utilisateur

- -

À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que différents systèmes d'exploitation prennent en charge ce type de paramètre.

- -

Exemples

- -

Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.

- -

HTML

- -
<div class="contrast">Une boîte avec un contraste faible.</div>
-
- -

CSS

- -
.contrast {
-  color: grey;
-}
-
-@media (prefers-contrast: high) {
-  .contrast {
-    color: black;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.prefers-contrast")}}

- -

Voir aussi

- - - -

{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md new file mode 100644 index 0000000000..c2bc1770ca --- /dev/null +++ b/files/fr/web/css/@media/prefers-contrast/index.md @@ -0,0 +1,84 @@ +--- +title: prefers-contrast +slug: Web/CSS/@media/prefers-contrast +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-contrast +--- +
{{CSSRef}}{{SeeCompatTable}}{{draft}}
+ +

La caractéristique média prefers-contrast permet de détecter si l'utilisateur a configuré son système pour utiliser un contraste élevé.

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a exprimé aucune préférence particulière. La valeur de ce mot-clé est évaluée à false dans un contexte booléen.
+
high
+
Cette valeur indique que l'utilisateur a configuré son système pour avoir un contraste plus élevé.
+
low
+
Cette valeur indique que l'utilisateur a configuré son système afin d'avoir un niveau de contraste plus faible.
+
+ +

Préférences utilisateur

+ +

À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que différents systèmes d'exploitation prennent en charge ce type de paramètre.

+ +

Exemples

+ +

Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.

+ +

HTML

+ +
<div class="contrast">Une boîte avec un contraste faible.</div>
+
+ +

CSS

+ +
.contrast {
+  color: grey;
+}
+
+@media (prefers-contrast: high) {
+  .contrast {
+    color: black;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.prefers-contrast")}}

+ +

Voir aussi

+ + + +

{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html deleted file mode 100644 index daf259477f..0000000000 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: prefers-reduced-motion -slug: Web/CSS/@media/prefers-reduced-motion -tags: - - '@media' - - Accessibility - - CSS - - Media Queries - - Reference - - media feature -translation_of: Web/CSS/@media/prefers-reduced-motion ---- -
{{CSSRef}}
- -

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.

- -
-

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

- -
-
no-preference
-
Cette valeur indique que l'utilisateur n'a rien indiqué au système.
-
reduce
-
Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.
-
- -

Gestion des préférences

- -

Dans Firefox, la valeur reduce est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :

- - - -

Exemple

- -

Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.

- -

HTML

- -
<div class="animation">boîte animée</div>
-
- -

CSS

- -
.animation {
-  animation: vibrate 0.3s linear infinite both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animation {
-  animation: none;
-  }
-}
-
- - - -

Résultat

- -

{{EmbedLiveSample("example")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md new file mode 100644 index 0000000000..daf259477f --- /dev/null +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -0,0 +1,140 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +tags: + - '@media' + - Accessibility + - CSS + - Media Queries + - Reference + - media feature +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +
{{CSSRef}}
+ +

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.

+ +
+

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

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a rien indiqué au système.
+
reduce
+
Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.
+
+ +

Gestion des préférences

+ +

Dans Firefox, la valeur reduce est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :

+ + + +

Exemple

+ +

Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.

+ +

HTML

+ +
<div class="animation">boîte animée</div>
+
+ +

CSS

+ +
.animation {
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+  animation: none;
+  }
+}
+
+ + + +

Résultat

+ +

{{EmbedLiveSample("example")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/resolution/index.html b/files/fr/web/css/@media/resolution/index.html deleted file mode 100644 index 771d463cd5..0000000000 --- a/files/fr/web/css/@media/resolution/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: resolution -slug: Web/CSS/@media/resolution -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/resolution ---- -
{{CSSRef}}
- -

resolution est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.

- -

Syntaxe

- -

La caractéristique resolution est une valeur de type {{cssxref("<resolution>")}} qui représente la densité de pixels de l'appareil d'affichage. C'est une caractéristique d'intervalle, cela signifie qu'on peut utiliser les variantes préfixées min-resolution et max-resolution afin d'établir des règles selon un minimum ou un maximum.

- -

Exemples

- -

HTML

- -
<p>Un test pour la densité de pixels de votre appareil.</p>
-
- -

CSS

- -
/* Résolution exacte  */
-@media (resolution: 150dpi) {
-  p {
-    color: red;
-  }
-}
-
-/* Résolution minimale */
-@media (min-resolution: 72dpi) {
-  p {
-    text-decoration: underline;
-  }
-}
-
-/* Résolution maximale */
-@media (max-resolution: 300dpi) {
-  p {
-    background: yellow;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.resolution")}}

diff --git a/files/fr/web/css/@media/resolution/index.md b/files/fr/web/css/@media/resolution/index.md new file mode 100644 index 0000000000..771d463cd5 --- /dev/null +++ b/files/fr/web/css/@media/resolution/index.md @@ -0,0 +1,73 @@ +--- +title: resolution +slug: Web/CSS/@media/resolution +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/resolution +--- +
{{CSSRef}}
+ +

resolution est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique resolution est une valeur de type {{cssxref("<resolution>")}} qui représente la densité de pixels de l'appareil d'affichage. C'est une caractéristique d'intervalle, cela signifie qu'on peut utiliser les variantes préfixées min-resolution et max-resolution afin d'établir des règles selon un minimum ou un maximum.

+ +

Exemples

+ +

HTML

+ +
<p>Un test pour la densité de pixels de votre appareil.</p>
+
+ +

CSS

+ +
/* Résolution exacte  */
+@media (resolution: 150dpi) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (min-resolution: 72dpi) {
+  p {
+    text-decoration: underline;
+  }
+}
+
+/* Résolution maximale */
+@media (max-resolution: 300dpi) {
+  p {
+    background: yellow;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.resolution")}}

diff --git a/files/fr/web/css/@media/scripting/index.html b/files/fr/web/css/@media/scripting/index.html deleted file mode 100644 index 4fd191ef33..0000000000 --- a/files/fr/web/css/@media/scripting/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: scripting -slug: Web/CSS/@media/scripting -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/scripting ---- -
{{CSSRef}}
- -

scripting est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.

- -

Syntaxe

- -

La caractéristique scripting est définie avec un mot-clé parmi les suivants :

- -
-
none
-
Les outils de script sont indisponibles pour le document courant.
-
initial-only
-
Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.
-
enabled
-
Les outils de script sont pris en charge et actifs pour le document courant.
-
- -

Exemples

- -

HTML

- -
<p class="script-none">Les outils de script ne sont pas disponibles. :-(</p>
-<p class="script-initial-only">Les outils de script sont uniquement disponibles au chargement initial.</p>
-<p class="script-enabled">Les outils de script sont activés ! :-)</p>
-
- -

CSS

- -
p {
-  color: lightgray;
-}
-
-@media (scripting: none) {
-  .script-none {
-     color: red;
-  }
-}
-
-@media (scripting: initial-only) {
-  .script-initial-only {
-    color: red;
-  }
-}
-
-@media (scripting: enabled) {
-  .script-enabled {
-    color: red;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}{{Spec2('CSS4 Media Queries')}}Reporté à la spécification Media Queries Level 5.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.scripting")}}

diff --git a/files/fr/web/css/@media/scripting/index.md b/files/fr/web/css/@media/scripting/index.md new file mode 100644 index 0000000000..4fd191ef33 --- /dev/null +++ b/files/fr/web/css/@media/scripting/index.md @@ -0,0 +1,85 @@ +--- +title: scripting +slug: Web/CSS/@media/scripting +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/scripting +--- +
{{CSSRef}}
+ +

scripting est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.

+ +

Syntaxe

+ +

La caractéristique scripting est définie avec un mot-clé parmi les suivants :

+ +
+
none
+
Les outils de script sont indisponibles pour le document courant.
+
initial-only
+
Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.
+
enabled
+
Les outils de script sont pris en charge et actifs pour le document courant.
+
+ +

Exemples

+ +

HTML

+ +
<p class="script-none">Les outils de script ne sont pas disponibles. :-(</p>
+<p class="script-initial-only">Les outils de script sont uniquement disponibles au chargement initial.</p>
+<p class="script-enabled">Les outils de script sont activés ! :-)</p>
+
+ +

CSS

+ +
p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}{{Spec2('CSS4 Media Queries')}}Reporté à la spécification Media Queries Level 5.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.scripting")}}

diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html deleted file mode 100644 index 0f07c013b2..0000000000 --- a/files/fr/web/css/@media/shape/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: shape -slug: Web/CSS/@media/shape -tags: - - '@media' - - CSS - - Caractéristique média - - Reference - - Règle @ -translation_of: Web/CSS/@media/shape ---- -
{{CSSRef}} {{Non-standard_header}}
- -

La caractéristique média shape peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.

- -

Syntaxe

- -

La caractéristique shape peut prendre une valeur parmi deux valeurs définies : rect qui représente un écran rectangulaire ou round qui représente un écran circulaire, ovale ou elliptique.

- -
-
rect
-
La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.
-
round
-
La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.
-
- -

Exemples

- -
-

Note : Aucun navigateur n'implémente actuellement cette fonctionnalité.

-
- -

Exemple simple

- -

HTML

- -
<h1>Coucou le monde !</h1>
-
- -

CSS

- -
h1 {
-  text-align: left;
-}
-
-@media (shape: rect) {
-  h1 {
-    text-align: left;
-  }
-}
-
-@media (shape: round) {
-  h1 {
-    text-align: center;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple_simple")}}

- -

Feuille de style spécifique

- -

Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.

- -
<head>
-    <link rel="stylesheet" href="default.css" />
-    <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
-    <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
-</head>
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
CSS Round Display Level 1BrouillonDéfinition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.shape")}}

diff --git a/files/fr/web/css/@media/shape/index.md b/files/fr/web/css/@media/shape/index.md new file mode 100644 index 0000000000..0f07c013b2 --- /dev/null +++ b/files/fr/web/css/@media/shape/index.md @@ -0,0 +1,95 @@ +--- +title: shape +slug: Web/CSS/@media/shape +tags: + - '@media' + - CSS + - Caractéristique média + - Reference + - Règle @ +translation_of: Web/CSS/@media/shape +--- +
{{CSSRef}} {{Non-standard_header}}
+ +

La caractéristique média shape peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.

+ +

Syntaxe

+ +

La caractéristique shape peut prendre une valeur parmi deux valeurs définies : rect qui représente un écran rectangulaire ou round qui représente un écran circulaire, ovale ou elliptique.

+ +
+
rect
+
La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.
+
round
+
La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.
+
+ +

Exemples

+ +
+

Note : Aucun navigateur n'implémente actuellement cette fonctionnalité.

+
+ +

Exemple simple

+ +

HTML

+ +
<h1>Coucou le monde !</h1>
+
+ +

CSS

+ +
h1 {
+  text-align: left;
+}
+
+@media (shape: rect) {
+  h1 {
+    text-align: left;
+  }
+}
+
+@media (shape: round) {
+  h1 {
+    text-align: center;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple")}}

+ +

Feuille de style spécifique

+ +

Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.

+ +
<head>
+    <link rel="stylesheet" href="default.css" />
+    <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
+    <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
+</head>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
CSS Round Display Level 1BrouillonDéfinition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.shape")}}

diff --git a/files/fr/web/css/@media/update-frequency/index.html b/files/fr/web/css/@media/update-frequency/index.html deleted file mode 100644 index 41b540b3ba..0000000000 --- a/files/fr/web/css/@media/update-frequency/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: update -slug: Web/CSS/@media/update-frequency -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/update-frequency ---- -
{{CSSRef}}
- -

update est une caractéristique média (cf. {{cssxref("@media")}}) qui permet de vérifier la vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.

- -

Syntaxe

- -

La caractéristique update est définie avec un mot-clé parmi ceux de la liste ci-après.

- -
-
none
-
Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).
-
slow
-
Une fois le document affiché, son apparence peut évoluer mais lentement (ex. des livres électroniques utilisant une encre électronique ou des appareils de lecture avec un niveau d'énergie faible).
-
fast
-
Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).
-
- -

Exemples

- -

HTML

- -
<p>
-  Si ce texte est animé, cela signifie que vous utilisez
-  un appareil avec un affichage qui évolue rapidement.
-</p>
-
- -

CSS

- -
@keyframes jiggle {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(25px);
-  }
-}
-
-@media (update: fast) {
-  p {
-    animation: 1s jiggle linear alternate infinite;
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#update', 'update')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.update")}}

diff --git a/files/fr/web/css/@media/update-frequency/index.md b/files/fr/web/css/@media/update-frequency/index.md new file mode 100644 index 0000000000..41b540b3ba --- /dev/null +++ b/files/fr/web/css/@media/update-frequency/index.md @@ -0,0 +1,80 @@ +--- +title: update +slug: Web/CSS/@media/update-frequency +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/update-frequency +--- +
{{CSSRef}}
+ +

update est une caractéristique média (cf. {{cssxref("@media")}}) qui permet de vérifier la vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.

+ +

Syntaxe

+ +

La caractéristique update est définie avec un mot-clé parmi ceux de la liste ci-après.

+ +
+
none
+
Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).
+
slow
+
Une fois le document affiché, son apparence peut évoluer mais lentement (ex. des livres électroniques utilisant une encre électronique ou des appareils de lecture avec un niveau d'énergie faible).
+
fast
+
Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).
+
+ +

Exemples

+ +

HTML

+ +
<p>
+  Si ce texte est animé, cela signifie que vous utilisez
+  un appareil avec un affichage qui évolue rapidement.
+</p>
+
+ +

CSS

+ +
@keyframes jiggle {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(25px);
+  }
+}
+
+@media (update: fast) {
+  p {
+    animation: 1s jiggle linear alternate infinite;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#update', 'update')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.update")}}

diff --git a/files/fr/web/css/@media/width/index.html b/files/fr/web/css/@media/width/index.html deleted file mode 100644 index b32ee66222..0000000000 --- a/files/fr/web/css/@media/width/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: width -slug: Web/CSS/@media/width -tags: - - CSS - - Caractéristique média - - Reference -translation_of: Web/CSS/@media/width ---- -
{{CSSRef}}
- -

width est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (viewport) ou de la largeur de la page (pour les média paginés). La largeur est exprimée comme une longueur CSS (type {{cssxref("<length>")}}.

- -

Syntaxe

- -

width est une valeur décrivant la largeur d'affichage, les versions préfixées min-width et max-width peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).

- -
/* Largeur exacte */
-@media (width: 300px) {}
-
-/* Un viewport avec une largeur minimale */
-@media (min-width: 50em) {}
-
-/* Un viewport avec une largeur maximale */
-@media (max-width: 1000px) {}
-
- -

Exemples

- -

HTML

- -
<div>Observez cet élément lorsque vous redimensionnez la largeur du viewport.</div>
- -

CSS

- -
/* Largeur exacte */
-@media (width: 360px) {
-  div {
-    color: red;
-  }
-}
-
-/* Largeur minimale */
-@media (min-width: 35rem) {
-  div {
-    background: yellow;
-  }
-}
-
-/* Largeur maximale */
-@media (max-width: 50rem) {
-  div {
-    border: 2px solid blue;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples','90%')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne peut pas être négative.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.media.width")}}

diff --git a/files/fr/web/css/@media/width/index.md b/files/fr/web/css/@media/width/index.md new file mode 100644 index 0000000000..b32ee66222 --- /dev/null +++ b/files/fr/web/css/@media/width/index.md @@ -0,0 +1,88 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/width +--- +
{{CSSRef}}
+ +

width est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (viewport) ou de la largeur de la page (pour les média paginés). La largeur est exprimée comme une longueur CSS (type {{cssxref("<length>")}}.

+ +

Syntaxe

+ +

width est une valeur décrivant la largeur d'affichage, les versions préfixées min-width et max-width peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).

+ +
/* Largeur exacte */
+@media (width: 300px) {}
+
+/* Un viewport avec une largeur minimale */
+@media (min-width: 50em) {}
+
+/* Un viewport avec une largeur maximale */
+@media (max-width: 1000px) {}
+
+ +

Exemples

+ +

HTML

+ +
<div>Observez cet élément lorsque vous redimensionnez la largeur du viewport.</div>
+ +

CSS

+ +
/* Largeur exacte */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Largeur minimale */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Largeur maximale */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','90%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne peut pas être négative.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.media.width")}}

diff --git a/files/fr/web/css/@namespace/index.html b/files/fr/web/css/@namespace/index.html deleted file mode 100644 index b30bf8e593..0000000000 --- a/files/fr/web/css/@namespace/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: '@namespace' -slug: Web/CSS/@namespace -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@namespace ---- -
{{CSSRef}}
- -

@namespace est une règle @ qui définit les espaces de noms XML utilisés dans une feuille de style CSS. Les espaces de noms définis sont alors utilisés pour restreindre les sélecteurs universels, de type, et d'attribut afin que ceux-ci ne sélectionnent que les éléments contenus dans cet espace de nom. La règle @namespace est généralement utilisée lorsqu'on manipule des documents entremêlant différents espaces de noms (par exemple, un document HTML5 qui contient du SVG en ligne ou du MathML ou alors un fichier XML qui est composé de plusieurs vocabulaires).

- -
@namespace url(http://www.w3.org/1999/xhtml);
-@namespace svg url(http://www.w3.org/2000/svg);
-
-/* Cela correspond à tous les éléments XHTML <a>
-  car XHTML est l'espace de nom par défaut, sans
-  préfixe. */
-a {}
-
-/* Cela correspond à tous les éléments SVG <a> */
-svg|a {}
-
-/* Cela correspond aux éléments <a> XHTML et SVG */
-*|a {}
-
- -

Les règles @namespace doivent suivre les règles @ {{cssxref("@charset")}} et {{cssxref("@import")}} et précéder les autres règles @ ainsi que les déclarations de style contenus dans la feuille de style.

- -

@namespace peut être utilisée afin de définir l'espace de noms par défaut de la feuille de style. Lorsqu'un espace de noms par défaut est définit, les sélecteurs universels et les sélecteurs de types (pas les sélecteurs d'attribut, cf. note ci-après) ne s'appliqueront qu'aux éléments de cet espace de noms.

- -

La règle @namespace peut également être utilisée afin de définir un préfixe d'espace de noms. Lorsqu'un sélecteur universel, de type ou d'attribut est préfixé avec le préfixe de l'espace de noms, ce sélecteur ne ciblera les éléments que si l'espace de nom et le nom ou l'attribut de l'élément correspond.

- -

En HTML5, les éléments étrangers connus seront automatiquement affectés à des espaces de noms. Cela signifie que les éléments HTML se comporteront comme s'ils appartenaient à l'espace de noms XHTML (http://www.w3.org/1999/xhtml) même s'il n'y a aucun attribut xmlns dans le document. Les éléments <svg> et <math> seront affectés à leurs espaces de noms respectifs (http://www.w3.org/2000/svg et http://www.w3.org/1998/Math/MathML).

- -
-

Note : En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. xlink:href), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.

-
- -

Syntaxe

- -
/* Espace de noms par défaut */
-@namespace url(XML-namespace-URL);
-@namespace "XML-namespace-URL";
-
-/* Espace de noms préfixé */
-@namespace préfixe url(XML-namespace-URL);
-@namespace préfixe "XML-namespace-URL";
- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.namespace")}}

diff --git a/files/fr/web/css/@namespace/index.md b/files/fr/web/css/@namespace/index.md new file mode 100644 index 0000000000..b30bf8e593 --- /dev/null +++ b/files/fr/web/css/@namespace/index.md @@ -0,0 +1,76 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@namespace +--- +
{{CSSRef}}
+ +

@namespace est une règle @ qui définit les espaces de noms XML utilisés dans une feuille de style CSS. Les espaces de noms définis sont alors utilisés pour restreindre les sélecteurs universels, de type, et d'attribut afin que ceux-ci ne sélectionnent que les éléments contenus dans cet espace de nom. La règle @namespace est généralement utilisée lorsqu'on manipule des documents entremêlant différents espaces de noms (par exemple, un document HTML5 qui contient du SVG en ligne ou du MathML ou alors un fichier XML qui est composé de plusieurs vocabulaires).

+ +
@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* Cela correspond à tous les éléments XHTML <a>
+  car XHTML est l'espace de nom par défaut, sans
+  préfixe. */
+a {}
+
+/* Cela correspond à tous les éléments SVG <a> */
+svg|a {}
+
+/* Cela correspond aux éléments <a> XHTML et SVG */
+*|a {}
+
+ +

Les règles @namespace doivent suivre les règles @ {{cssxref("@charset")}} et {{cssxref("@import")}} et précéder les autres règles @ ainsi que les déclarations de style contenus dans la feuille de style.

+ +

@namespace peut être utilisée afin de définir l'espace de noms par défaut de la feuille de style. Lorsqu'un espace de noms par défaut est définit, les sélecteurs universels et les sélecteurs de types (pas les sélecteurs d'attribut, cf. note ci-après) ne s'appliqueront qu'aux éléments de cet espace de noms.

+ +

La règle @namespace peut également être utilisée afin de définir un préfixe d'espace de noms. Lorsqu'un sélecteur universel, de type ou d'attribut est préfixé avec le préfixe de l'espace de noms, ce sélecteur ne ciblera les éléments que si l'espace de nom et le nom ou l'attribut de l'élément correspond.

+ +

En HTML5, les éléments étrangers connus seront automatiquement affectés à des espaces de noms. Cela signifie que les éléments HTML se comporteront comme s'ils appartenaient à l'espace de noms XHTML (http://www.w3.org/1999/xhtml) même s'il n'y a aucun attribut xmlns dans le document. Les éléments <svg> et <math> seront affectés à leurs espaces de noms respectifs (http://www.w3.org/2000/svg et http://www.w3.org/1998/Math/MathML).

+ +
+

Note : En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. xlink:href), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.

+
+ +

Syntaxe

+ +
/* Espace de noms par défaut */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* Espace de noms préfixé */
+@namespace préfixe url(XML-namespace-URL);
+@namespace préfixe "XML-namespace-URL";
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.namespace")}}

diff --git a/files/fr/web/css/@page/index.html b/files/fr/web/css/@page/index.html deleted file mode 100644 index 9d44d62546..0000000000 --- a/files/fr/web/css/@page/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: '@page' -slug: Web/CSS/@page -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@page ---- -
{{CSSRef}}
- -

La règle @ @page est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle @page ne permet par de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.

- -
@page {
-  margin: 1cm;
-}
-
-@page :first {
-  margin: 2cm;
-}
- -

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.

-
- -

Syntaxe

- -

Descripteurs

- -
-
size
-
Définit la taille et l'orientation du bloc englobant la boîte de la page. En général, lorsqu'une boîte correspondant à une page est rendu sur une feuille, cela indique la taille de la page utilisée.
-
- -
-
marks
-
Ajoute des marques pour la découpe ou l'alignement des pages du document.
-
- -
-
bleed
-
Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
@page :first {
-  margin: 2cm 3cm;
-}
- -

Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à @page :

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}Ajout des sélecteurs de page :recto et :verso.
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}Aucun changement depuis  {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle @page.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.page")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@page/index.md b/files/fr/web/css/@page/index.md new file mode 100644 index 0000000000..9d44d62546 --- /dev/null +++ b/files/fr/web/css/@page/index.md @@ -0,0 +1,105 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

La règle @ @page est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle @page ne permet par de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.

+ +
@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}
+ +

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.

+
+ +

Syntaxe

+ +

Descripteurs

+ +
+
size
+
Définit la taille et l'orientation du bloc englobant la boîte de la page. En général, lorsqu'une boîte correspondant à une page est rendu sur une feuille, cela indique la taille de la page utilisée.
+
+ +
+
marks
+
Ajoute des marques pour la découpe ou l'alignement des pages du document.
+
+ +
+
bleed
+
Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
@page :first {
+  margin: 2cm 3cm;
+}
+ +

Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à @page :

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}Ajout des sélecteurs de page :recto et :verso.
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}Aucun changement depuis  {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle @page.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.page")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@page/size/index.html b/files/fr/web/css/@page/size/index.html deleted file mode 100644 index 89d4723b4d..0000000000 --- a/files/fr/web/css/@page/size/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: size -slug: Web/CSS/@page/size -tags: - - CSS - - Descripteur - - Experimental - - Reference -translation_of: Web/CSS/@page/size ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Le descripteur size, associé à la règle @ {{cssxref("@page")}}, permet de définir les dimensions et l'orientation de la boîte utilisée pour représenter une page. La plupart du temps, cette taille correspondra à la totalité de la taille de la page imprimée.

- -

Les dimensions de cette boîte peuvent être définies de façon absolues ou relatives (dans ce cas, la page occupera l'espace disponible).

- -

Syntaxe

- -
/* Des mots-clés qui peuvent être utilisées
-   pour remplir l'espace disponible         */
-size: auto;
-size: portrait;
-size: landscape;
-
-/* Des valeurs de longueur */
-/* Type <length>           */
-/* 1 valeur : hauteur = largeur */
-size: 6in;
-
-/* 2 valeurs : la largeur puis la hauteur */
-size: 4in 6in;
-
-/* Des mots-clés qui représentent des */
-/* dimensions absolues                */
-size: A4;
-size: B5;
-size: JIS-B4;
-size: letter;
-
-/* Une déclaration incluant la taille et l'orientation */
-size: A4 portrait;
-
- -

Valeurs

- -
-
auto
-
L'agent utilisateur décidera de la taille de page. En général, ce seront les dimensions de la page cible (celle sur laquelle imprimer/afficher) qui seront utilisées.
-
landscape
-
Le contenu de la page est affiché en paysage (le côté le plus long de la page sera le côté horizontal).
-
portrait
-
Le contenu de la page est affiché en portrait (le côté le plus long de la page sera le côté vertical).
-
<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.
-
A4
-
Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).
-
A3
-
Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.
-
B5
-
Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.
-
B4
-
Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.
-
JIS-B5
-
Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.
-
JIS-B4
-
Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.
-
letter
-
Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.
-
legal
-
Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.
-
ledger
-
Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.
-
-
-
- -

Exemples

- -
@page {
-  size: 4cm 6cm landscape;
-}
-
- -
@media print {
-  @page {
-    size: 50mm 150mm;
-  }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#size', 'size')}}{{Spec2('CSS3 Paged Media')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.page.size")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@page/size/index.md b/files/fr/web/css/@page/size/index.md new file mode 100644 index 0000000000..89d4723b4d --- /dev/null +++ b/files/fr/web/css/@page/size/index.md @@ -0,0 +1,125 @@ +--- +title: size +slug: Web/CSS/@page/size +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@page/size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le descripteur size, associé à la règle @ {{cssxref("@page")}}, permet de définir les dimensions et l'orientation de la boîte utilisée pour représenter une page. La plupart du temps, cette taille correspondra à la totalité de la taille de la page imprimée.

+ +

Les dimensions de cette boîte peuvent être définies de façon absolues ou relatives (dans ce cas, la page occupera l'espace disponible).

+ +

Syntaxe

+ +
/* Des mots-clés qui peuvent être utilisées
+   pour remplir l'espace disponible         */
+size: auto;
+size: portrait;
+size: landscape;
+
+/* Des valeurs de longueur */
+/* Type <length>           */
+/* 1 valeur : hauteur = largeur */
+size: 6in;
+
+/* 2 valeurs : la largeur puis la hauteur */
+size: 4in 6in;
+
+/* Des mots-clés qui représentent des */
+/* dimensions absolues                */
+size: A4;
+size: B5;
+size: JIS-B4;
+size: letter;
+
+/* Une déclaration incluant la taille et l'orientation */
+size: A4 portrait;
+
+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur décidera de la taille de page. En général, ce seront les dimensions de la page cible (celle sur laquelle imprimer/afficher) qui seront utilisées.
+
landscape
+
Le contenu de la page est affiché en paysage (le côté le plus long de la page sera le côté horizontal).
+
portrait
+
Le contenu de la page est affiché en portrait (le côté le plus long de la page sera le côté vertical).
+
<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.
+
A4
+
Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).
+
A3
+
Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.
+
B5
+
Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.
+
B4
+
Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.
+
JIS-B5
+
Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.
+
JIS-B4
+
Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.
+
letter
+
Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.
+
legal
+
Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.
+
ledger
+
Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.
+
+
+
+ +

Exemples

+ +
@page {
+  size: 4cm 6cm landscape;
+}
+
+ +
@media print {
+  @page {
+    size: 50mm 150mm;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#size', 'size')}}{{Spec2('CSS3 Paged Media')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.page.size")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@property/index.html b/files/fr/web/css/@property/index.html deleted file mode 100644 index cdcb5770ff..0000000000 --- a/files/fr/web/css/@property/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: '@property' -slug: Web/CSS/@property -browser-compat: css.at-rules.property -translation_of: 'Web/CSS/@property' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La règle {{cssxref("at-rule")}} CSS @property fait partie du panel d'API CSS Houdini, qui permet de définir explicitement leurs propriétés CSS personnalisées (voir {{cssxref('--*', 'CSS custom properties')}}). Cela permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.

- -

La règle @property permet l'enregistrement d'une propriété personnalisée directement dans une feuille de styles sans avoir à utiliser la moindre ligne de JavaScript. Une règle @property valide enregistre une nouvelle propriété personnalisée comme si {{domxref('CSS.registerProperty')}} avait été appelé avec les mêmes paramètres.

- -

Syntaxe

- -
@property --property-name {
-  syntax: '<color>';
-  inherits: false;
-  initial-value: #c0ffee;
-}
- -

Descripteurs

- -
-
{{cssxref("@property/syntax","syntax")}}
-
Décrit la syntaxe autorisée de la propriété.
-
{{cssxref("@property/inherits","inherits")}}
-
Détermine si l'enregistrement de la propriété personnalisée spécifiée avec @property hérite ou non par défaut.
-
{{cssxref("@property/initial-value","initial-value")}}
-
Détermine la valeur initiale de la propriété.
-
- -

Une règle @property valide enregistre une propriété personnalisée avec comme nom de propriété la sérialisation de du préfixe de la règle.

- -

Une règle @property nécessite le respecte d'une syntaxe (voir {{cssxref("@property/syntax","syntax")}}) et une description d'héritage (voir {{cssxref("@property/inherits","inherits")}}). Si l'un des deux manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée. Le descripteur {{cssxref("@property/initial-value","initial-value")}} est optionnel, uniquement si la syntaxe est une définition de syntaxe universelle. Sinon, le descripteur est requis (s'il manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée).

- -

Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invalident pas l'ensemble de la règle @property.

- -

Exemples

- -

Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} --my-color en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :

- -

Utilisation de la règle CSS at-rule {{cssxref('@property')}} :

- -
@property --my-color {
-  syntax: '<color>';
-  inherits: false;
-  initial-value: #c0ffee;
-}
-
- -

Équivalent avec la fonction JavaScript {{domxref('CSS.registerProperty')}} :

- -
window.CSS.registerProperty({
-  name: '--my-color',
-  syntax: '<color>',
-  inherits: false,
-  initialValue: '#c0ffee',
-});
-
- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@property/index.md b/files/fr/web/css/@property/index.md new file mode 100644 index 0000000000..cdcb5770ff --- /dev/null +++ b/files/fr/web/css/@property/index.md @@ -0,0 +1,80 @@ +--- +title: '@property' +slug: Web/CSS/@property +browser-compat: css.at-rules.property +translation_of: 'Web/CSS/@property' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La règle {{cssxref("at-rule")}} CSS @property fait partie du panel d'API CSS Houdini, qui permet de définir explicitement leurs propriétés CSS personnalisées (voir {{cssxref('--*', 'CSS custom properties')}}). Cela permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.

+ +

La règle @property permet l'enregistrement d'une propriété personnalisée directement dans une feuille de styles sans avoir à utiliser la moindre ligne de JavaScript. Une règle @property valide enregistre une nouvelle propriété personnalisée comme si {{domxref('CSS.registerProperty')}} avait été appelé avec les mêmes paramètres.

+ +

Syntaxe

+ +
@property --property-name {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #c0ffee;
+}
+ +

Descripteurs

+ +
+
{{cssxref("@property/syntax","syntax")}}
+
Décrit la syntaxe autorisée de la propriété.
+
{{cssxref("@property/inherits","inherits")}}
+
Détermine si l'enregistrement de la propriété personnalisée spécifiée avec @property hérite ou non par défaut.
+
{{cssxref("@property/initial-value","initial-value")}}
+
Détermine la valeur initiale de la propriété.
+
+ +

Une règle @property valide enregistre une propriété personnalisée avec comme nom de propriété la sérialisation de du préfixe de la règle.

+ +

Une règle @property nécessite le respecte d'une syntaxe (voir {{cssxref("@property/syntax","syntax")}}) et une description d'héritage (voir {{cssxref("@property/inherits","inherits")}}). Si l'un des deux manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée. Le descripteur {{cssxref("@property/initial-value","initial-value")}} est optionnel, uniquement si la syntaxe est une définition de syntaxe universelle. Sinon, le descripteur est requis (s'il manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée).

+ +

Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invalident pas l'ensemble de la règle @property.

+ +

Exemples

+ +

Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} --my-color en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :

+ +

Utilisation de la règle CSS at-rule {{cssxref('@property')}} :

+ +
@property --my-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #c0ffee;
+}
+
+ +

Équivalent avec la fonction JavaScript {{domxref('CSS.registerProperty')}} :

+ +
window.CSS.registerProperty({
+  name: '--my-color',
+  syntax: '<color>',
+  inherits: false,
+  initialValue: '#c0ffee',
+});
+
+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@supports/index.html b/files/fr/web/css/@supports/index.html deleted file mode 100644 index 163bcdd89f..0000000000 --- a/files/fr/web/css/@supports/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: '@supports' -slug: Web/CSS/@supports -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/@supports ---- -
{{CSSRef}}
- -

La règle @supports permet de définir des déclarations qui dépendent de la prise en charge du navigateur d'une ou plusieurs fonctionnalités CSS. Cette condition est définie par un ensemble de paires de propriété/valeur qui forment une combinaison de conjonctions, disjonctions, négations. Une telle condition est appelée « condition de prise en charge » (ou supports condition).

- -
@supports (display: grid) {
-  div {
-    display: grid;
-  }
-}
- -
@supports not (display: grid) {
-  div {
-    float: right;
-  }
-}
- -

@supports permet ainsi au moteur de rendu de tester la présence d'une fonctionnalité (on parle de feature query).

- -

La règle @ @supports peut être utilisée au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règle conditionnel. Cette règle @ peut être manipulée via le modèle d'objets CSS et JavaScript, notamment via l'interface {{domxref("CSSSupportsRule")}}.

- -

Syntaxe

- -

Une condition de prise en charge se compose d'une ou plusieurs déclarations combinées entre elles par des opérateurs logiques (and, or, not). La précédence des opérateurs peut être surchargée en utilisant des parenthèses autour des déclarations.

- -

Syntaxe déclarative

- -

La plus simple expression est une déclaration CSS, c'est-à-dire un nom de propriété CSS suivi par deux points (:) puis une valeur. Ainsi, l'expression suivante :

- -
@supports ( transform-origin: 5% 5% ) { }
- -

renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur 5% 5% est valide.

- -

Une déclaration CSS est toujours encadrée par des parenthèses.

- -

Syntaxe fonctionnelle

- -

La deuxième syntaxe permet d'utiliser une fonction. Cette syntaxe est prise en charge par les différents navigateurs mais les fonctions sont en cours de standardisation.

- -

selector() {{Experimental_inline}}

- -

Dans l'exemple qui suit, on teste si le navigateur prend en charge la syntaxe du sélecteur passé en argument. Ici, le code renvoie VRAI si le navigateur prend en charge les sélecteurs enfants

- -
@supports selector(A > B) { }
- -

L'opérateur not

- -

L'opérateur not peut être utilisée avant une expression afin de créer un expression dont le résultat logique est la négation du résultat de l'expression originale. Ainsi, l'expression suivante :

- -
@supports not ( transform-origin: 10em 10em 10em ) { }
- -

renvoie VRAI si la propriété {{cssxref("transform-origin")}} du navigateur ne considère pas la valeur 10em 10em 10em comme valide.

- -

Comme pour les autres opérateurs, on peut appliquer l'opérateur not à une déclaration, quelle que soit sa complexité. Les exemples qui suivent sont donc des expressions valides :

- -
@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.

-
- -

L'opérateur and

- -

L'opérateur and peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la conjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si et seulement si les deux expressions de départ sont vraies et FAUX sinon. Dans l'exemple suivant, l'expression complète ne sera vérifiée que si les deux expressions sont vérifiées :

- -
@supports (display: table-cell) and (display: list-item) { }
- -

On peut enchaîner plusieurs conjonctions sans avoir à ajouter de parenthèses (l'opérateur est commutatif).

- -
@supports (display: table-cell) and (display: list-item) and (display:run-in) { }
- -

sera équivalente à :

- -
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) { }
- -

L'opérateur or

- -

L'opérateur or peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la disjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si au moins une des deux expressions est vraie. Dans l'exemple qui suit, l'expression complète est vérifiée si au moins une des deux (ce peuvent être les deux) expressions est vérifiée :

- -
@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) { }
- -

On peut enchaîner plusieurs disjonctions sans qu'il soit nécessaire d'ajouter des parenthèses.

- -
@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
-          ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  ) { }
- -

sera ainsi équivalente à :

- -
@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.

-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Tester la prise en charge d'une propriété CSS donnée

- -
@supports (animation-name: test) {
-    … /* Du code CSS spécifique, appliqué quand les animations sont prises en charge sans préfixe */
-    @keyframes { /* @supports est une règle @ qui peut inclure d'autres règles @ */
-      …
-    }
-}
-
- -

Tester la prise en charge d'une propriété CSS donnée ou d'une version préfixée

- -
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
-            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
-    … /* Du code CSS spécifique, appliqué lorsque les transformations 3D,
-         sont prises en charge, éventuellement avec un préfixe */
-}
-
- -

Tester l'absence de prise en charge d'une propriété CSS

- -
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
-    … /* Du code CSS spécifique, appliqué pour simuler text-align-last:justify */
-}
- -

Tester la prise en charge des propriétés personnalisées

- -
@supports (--toto: green) {
-  body {
-    color: --nomVar;
-  }
-}
- -

Tester la prise en charge d'un sélecteur

- -

{{SeeCompatTable}}

- -
/* Cette règle ne sera pas appliquée si le navigateur */
-/* ne prend pas en charge :is() */
-:is(ul, ol) > li {
-  … /* Le CSS à utiliser lorsque :is(…) est pris en charge */
-}
-
-@supports not selector(:is(a, b)) {
-  /* Que faire lorsque :is() n'est pas pris en charge */
-  ul > li,
-  ol > li {
-    …
-  }
-}
-
-@supports selector(:nth-child(1n of a, b)) {
-  /* Cette règle doit être placée dans un bloc @supports */
-  /* Sinon elle pourra être partiellement appliquée pour les */
-  /* navigateurs qui ne prennent pas en charge :is(…) */
-  :is(nth-child(1n of ul, ol) a,
-  details > summary) {
-    … /* CSS appliqué quand le sélecteur :is(…) et quand la forme
-         `of` pour :nth-child sont pris en charge */
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS4 Conditional")}}Ajout de la fonction selector().
{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS3 Conditional")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.supports")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@supports/index.md b/files/fr/web/css/@supports/index.md new file mode 100644 index 0000000000..163bcdd89f --- /dev/null +++ b/files/fr/web/css/@supports/index.md @@ -0,0 +1,207 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@supports +--- +
{{CSSRef}}
+ +

La règle @supports permet de définir des déclarations qui dépendent de la prise en charge du navigateur d'une ou plusieurs fonctionnalités CSS. Cette condition est définie par un ensemble de paires de propriété/valeur qui forment une combinaison de conjonctions, disjonctions, négations. Une telle condition est appelée « condition de prise en charge » (ou supports condition).

+ +
@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}
+ +
@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}
+ +

@supports permet ainsi au moteur de rendu de tester la présence d'une fonctionnalité (on parle de feature query).

+ +

La règle @ @supports peut être utilisée au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règle conditionnel. Cette règle @ peut être manipulée via le modèle d'objets CSS et JavaScript, notamment via l'interface {{domxref("CSSSupportsRule")}}.

+ +

Syntaxe

+ +

Une condition de prise en charge se compose d'une ou plusieurs déclarations combinées entre elles par des opérateurs logiques (and, or, not). La précédence des opérateurs peut être surchargée en utilisant des parenthèses autour des déclarations.

+ +

Syntaxe déclarative

+ +

La plus simple expression est une déclaration CSS, c'est-à-dire un nom de propriété CSS suivi par deux points (:) puis une valeur. Ainsi, l'expression suivante :

+ +
@supports ( transform-origin: 5% 5% ) { }
+ +

renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur 5% 5% est valide.

+ +

Une déclaration CSS est toujours encadrée par des parenthèses.

+ +

Syntaxe fonctionnelle

+ +

La deuxième syntaxe permet d'utiliser une fonction. Cette syntaxe est prise en charge par les différents navigateurs mais les fonctions sont en cours de standardisation.

+ +

selector() {{Experimental_inline}}

+ +

Dans l'exemple qui suit, on teste si le navigateur prend en charge la syntaxe du sélecteur passé en argument. Ici, le code renvoie VRAI si le navigateur prend en charge les sélecteurs enfants

+ +
@supports selector(A > B) { }
+ +

L'opérateur not

+ +

L'opérateur not peut être utilisée avant une expression afin de créer un expression dont le résultat logique est la négation du résultat de l'expression originale. Ainsi, l'expression suivante :

+ +
@supports not ( transform-origin: 10em 10em 10em ) { }
+ +

renvoie VRAI si la propriété {{cssxref("transform-origin")}} du navigateur ne considère pas la valeur 10em 10em 10em comme valide.

+ +

Comme pour les autres opérateurs, on peut appliquer l'opérateur not à une déclaration, quelle que soit sa complexité. Les exemples qui suivent sont donc des expressions valides :

+ +
@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.

+
+ +

L'opérateur and

+ +

L'opérateur and peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la conjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si et seulement si les deux expressions de départ sont vraies et FAUX sinon. Dans l'exemple suivant, l'expression complète ne sera vérifiée que si les deux expressions sont vérifiées :

+ +
@supports (display: table-cell) and (display: list-item) { }
+ +

On peut enchaîner plusieurs conjonctions sans avoir à ajouter de parenthèses (l'opérateur est commutatif).

+ +
@supports (display: table-cell) and (display: list-item) and (display:run-in) { }
+ +

sera équivalente à :

+ +
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) { }
+ +

L'opérateur or

+ +

L'opérateur or peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la disjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si au moins une des deux expressions est vraie. Dans l'exemple qui suit, l'expression complète est vérifiée si au moins une des deux (ce peuvent être les deux) expressions est vérifiée :

+ +
@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) { }
+ +

On peut enchaîner plusieurs disjonctions sans qu'il soit nécessaire d'ajouter des parenthèses.

+ +
@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+          ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  ) { }
+ +

sera ainsi équivalente à :

+ +
@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.

+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Tester la prise en charge d'une propriété CSS donnée

+ +
@supports (animation-name: test) {
+    … /* Du code CSS spécifique, appliqué quand les animations sont prises en charge sans préfixe */
+    @keyframes { /* @supports est une règle @ qui peut inclure d'autres règles @ */
+      …
+    }
+}
+
+ +

Tester la prise en charge d'une propriété CSS donnée ou d'une version préfixée

+ +
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* Du code CSS spécifique, appliqué lorsque les transformations 3D,
+         sont prises en charge, éventuellement avec un préfixe */
+}
+
+ +

Tester l'absence de prise en charge d'une propriété CSS

+ +
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* Du code CSS spécifique, appliqué pour simuler text-align-last:justify */
+}
+ +

Tester la prise en charge des propriétés personnalisées

+ +
@supports (--toto: green) {
+  body {
+    color: --nomVar;
+  }
+}
+ +

Tester la prise en charge d'un sélecteur

+ +

{{SeeCompatTable}}

+ +
/* Cette règle ne sera pas appliquée si le navigateur */
+/* ne prend pas en charge :is() */
+:is(ul, ol) > li {
+  … /* Le CSS à utiliser lorsque :is(…) est pris en charge */
+}
+
+@supports not selector(:is(a, b)) {
+  /* Que faire lorsque :is() n'est pas pris en charge */
+  ul > li,
+  ol > li {
+    …
+  }
+}
+
+@supports selector(:nth-child(1n of a, b)) {
+  /* Cette règle doit être placée dans un bloc @supports */
+  /* Sinon elle pourra être partiellement appliquée pour les */
+  /* navigateurs qui ne prennent pas en charge :is(…) */
+  :is(nth-child(1n of ul, ol) a,
+  details > summary) {
+    … /* CSS appliqué quand le sélecteur :is(…) et quand la forme
+         `of` pour :nth-child sont pris en charge */
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS4 Conditional")}}Ajout de la fonction selector().
{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS3 Conditional")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.supports")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@viewport/index.html b/files/fr/web/css/@viewport/index.html deleted file mode 100644 index b14056c7ea..0000000000 --- a/files/fr/web/css/@viewport/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: '@viewport' -slug: Web/CSS/@viewport -tags: - - CSS - - Experimental - - Reference - - Règle @ -translation_of: Web/CSS/@viewport ---- -
{{SeeCompatTable}}{{CSSRef}}
- -

La règle @ @viewport permet de configurer la zone d'affichage (le viewport en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran).

- -

Les longueurs exprimées en pourcentages sont calculées de façon relative à la zone d'affichage initiale c'est-à-dire le viewport avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran.

- -

Pour les appareils mobiles (ou pour les appareils de bureau qui sont en plein écran), la zone d'affichage initiale correspond à la portion de l'écran disponible pour l'application. Cela peut correspondre à l'écran entier ou bien à l'écran auquel on enlève les zones contrôlées par le système d'exploitation (par exemple la barre de tâche) ou bien encore à la zone de l'écran qui n'est pas occupée par le système d'exploitation ou d'autres applications.

- -
@viewport {
-  width: device-width;
-}
- -

Syntaxe

- -

Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.

- -

Un facteur de zoom de 1.0 ou de 100% signifie qu'il n'y a eu aucun zoom. Si la valeur est supérieure, cela signifie qu'on a zoomé pour agrandir le contenu. Inversement, si la valeur est inférieure à 1.0 ou à 100%, cela signifie qu'on a dézoomé.

- -

Descripteurs

- -

Les navigateurs sont supposés ignorer les descripteurs non reconnus.

- -
-
{{cssxref("@viewport/min-width","min-width")}}
-
Ce descripteur détermine la largeur minimale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
-
{{cssxref("@viewport/max-width","max-width")}}
-
Ce descripteur détermine la largeur maximale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
-
{{cssxref("@viewport/width","width")}}
-
Ce descripteur est un raccourci qui permet de définir min-width et max-width.
-
{{cssxref("@viewport/min-height","min-height")}}
-
Ce descripteur détermine la hauteur minimale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
-
{{cssxref("@viewport/max-height","max-height")}}
-
Ce descripteur détermine la hauteur maximale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
-
{{cssxref("@viewport/height","height")}}
-
Ce descripteur est un raccourci qui permet de définir min-height et max-height.
-
{{cssxref("@viewport/zoom","zoom")}}
-
Ce descripteur permet de définir le niveau de zoom initial.
-
{{cssxref("@viewport/min-zoom","min-zoom")}}
-
Ce descripteur permet de définir le niveau de zoom minimal.
-
{{cssxref("@viewport/max-zoom","max-zoom")}}
-
Ce descripteur permet de définir le niveau de zoom maximal.
-
{{cssxref("@viewport/user-zoom","user-zoom")}}
-
Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.
-
{{cssxref("@viewport/orientation","orientation")}}
-
Ce descripteur contrôle l'orientation du document.
-
{{cssxref("@viewport/ viewport-fit", "viewport-fit")}}
-
Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.
-
- -
-

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

- -{{csssyntax}} - -

Exemples

- -
@viewport {
-  min-width: 640px;
-  max-width: 800px;
-}
-
-@viewport {
-  zoom: 0.75;
-  min-zoom: 0.5;
-  max-zoom: 0.9;
-}
-
-@viewport {
-  orientation: landscape;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}{{Spec2("CSS Round Display")}}Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}.
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.at-rules.viewport")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/@viewport/index.md b/files/fr/web/css/@viewport/index.md new file mode 100644 index 0000000000..b14056c7ea --- /dev/null +++ b/files/fr/web/css/@viewport/index.md @@ -0,0 +1,118 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - CSS + - Experimental + - Reference + - Règle @ +translation_of: Web/CSS/@viewport +--- +
{{SeeCompatTable}}{{CSSRef}}
+ +

La règle @ @viewport permet de configurer la zone d'affichage (le viewport en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran).

+ +

Les longueurs exprimées en pourcentages sont calculées de façon relative à la zone d'affichage initiale c'est-à-dire le viewport avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran.

+ +

Pour les appareils mobiles (ou pour les appareils de bureau qui sont en plein écran), la zone d'affichage initiale correspond à la portion de l'écran disponible pour l'application. Cela peut correspondre à l'écran entier ou bien à l'écran auquel on enlève les zones contrôlées par le système d'exploitation (par exemple la barre de tâche) ou bien encore à la zone de l'écran qui n'est pas occupée par le système d'exploitation ou d'autres applications.

+ +
@viewport {
+  width: device-width;
+}
+ +

Syntaxe

+ +

Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.

+ +

Un facteur de zoom de 1.0 ou de 100% signifie qu'il n'y a eu aucun zoom. Si la valeur est supérieure, cela signifie qu'on a zoomé pour agrandir le contenu. Inversement, si la valeur est inférieure à 1.0 ou à 100%, cela signifie qu'on a dézoomé.

+ +

Descripteurs

+ +

Les navigateurs sont supposés ignorer les descripteurs non reconnus.

+ +
+
{{cssxref("@viewport/min-width","min-width")}}
+
Ce descripteur détermine la largeur minimale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
+
{{cssxref("@viewport/max-width","max-width")}}
+
Ce descripteur détermine la largeur maximale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
+
{{cssxref("@viewport/width","width")}}
+
Ce descripteur est un raccourci qui permet de définir min-width et max-width.
+
{{cssxref("@viewport/min-height","min-height")}}
+
Ce descripteur détermine la hauteur minimale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
+
{{cssxref("@viewport/max-height","max-height")}}
+
Ce descripteur détermine la hauteur maximale de la zone d'affichage (viewport) lorsque le document est affiché initialement.
+
{{cssxref("@viewport/height","height")}}
+
Ce descripteur est un raccourci qui permet de définir min-height et max-height.
+
{{cssxref("@viewport/zoom","zoom")}}
+
Ce descripteur permet de définir le niveau de zoom initial.
+
{{cssxref("@viewport/min-zoom","min-zoom")}}
+
Ce descripteur permet de définir le niveau de zoom minimal.
+
{{cssxref("@viewport/max-zoom","max-zoom")}}
+
Ce descripteur permet de définir le niveau de zoom maximal.
+
{{cssxref("@viewport/user-zoom","user-zoom")}}
+
Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.
+
{{cssxref("@viewport/orientation","orientation")}}
+
Ce descripteur contrôle l'orientation du document.
+
{{cssxref("@viewport/ viewport-fit", "viewport-fit")}}
+
Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.
+
+ +
+

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

+ +{{csssyntax}} + +

Exemples

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}{{Spec2("CSS Round Display")}}Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}.
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.at-rules.viewport")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-broken/index.html b/files/fr/web/css/_colon_-moz-broken/index.html deleted file mode 100644 index cab1b281e3..0000000000 --- a/files/fr/web/css/_colon_-moz-broken/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: ':-moz-broken' -slug: 'Web/CSS/:-moz-broken' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-broken' ---- -
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
- -

La pseudo-class CSS :-moz-broken s'adapte aux éléments qui représentent des liens cassés vers des images.

- -

Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes.

- -

Syntaxe

- -
:-moz-broken
- -

Exemples

- -

HTML

- -
<img src="broken.jpg" alt="Cette image ne fonctionne pas. :-(">
- -

CSS

- -
:-moz-broken {
-  background: bisque;
-  padding: 8px;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md new file mode 100644 index 0000000000..cab1b281e3 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-broken/index.md @@ -0,0 +1,43 @@ +--- +title: ':-moz-broken' +slug: 'Web/CSS/:-moz-broken' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-broken' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

La pseudo-class CSS :-moz-broken s'adapte aux éléments qui représentent des liens cassés vers des images.

+ +

Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes.

+ +

Syntaxe

+ +
:-moz-broken
+ +

Exemples

+ +

HTML

+ +
<img src="broken.jpg" alt="Cette image ne fonctionne pas. :-(">
+ +

CSS

+ +
:-moz-broken {
+  background: bisque;
+  padding: 8px;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-drag-over/index.html b/files/fr/web/css/_colon_-moz-drag-over/index.html deleted file mode 100644 index f8ef38f055..0000000000 --- a/files/fr/web/css/_colon_-moz-drag-over/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: ':-moz-drag-over' -slug: 'Web/CSS/:-moz-drag-over' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-drag-over' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La pseudo-classe :-moz-drag-over permet de mettre en forme un élément lorsqu'un événement drag-over est appelé dessus.

- -

Syntaxe

- -
element:-moz-drag-over { propriétés de mise en forme }
-
- -

Exemples

- -

CSS

- -
td:-moz-drag-over {
-  color: red;
-}
-
- -

HTML

- -
<table border="1">
-  <tr>
-    <td width="100px" height="100px">Drag Over</td>
-  </tr>
-</table>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","200")}}

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

diff --git a/files/fr/web/css/_colon_-moz-drag-over/index.md b/files/fr/web/css/_colon_-moz-drag-over/index.md new file mode 100644 index 0000000000..f8ef38f055 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-drag-over/index.md @@ -0,0 +1,44 @@ +--- +title: ':-moz-drag-over' +slug: 'Web/CSS/:-moz-drag-over' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-drag-over' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-drag-over permet de mettre en forme un élément lorsqu'un événement drag-over est appelé dessus.

+ +

Syntaxe

+ +
element:-moz-drag-over { propriétés de mise en forme }
+
+ +

Exemples

+ +

CSS

+ +
td:-moz-drag-over {
+  color: red;
+}
+
+ +

HTML

+ +
<table border="1">
+  <tr>
+    <td width="100px" height="100px">Drag Over</td>
+  </tr>
+</table>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","200")}}

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

diff --git a/files/fr/web/css/_colon_-moz-first-node/index.html b/files/fr/web/css/_colon_-moz-first-node/index.html deleted file mode 100644 index 74fcd7f5bb..0000000000 --- a/files/fr/web/css/_colon_-moz-first-node/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: ':-moz-first-node' -slug: 'Web/CSS/:-moz-first-node' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-first-node' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

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.

-
- -

Syntaxe

- -
span:-moz-first-node { propriétés de mise en forme }
-
- -

Exemples

- -

CSS

- -
span:-moz-first-node {
-  background-color: lime;
-}
-
- -

HTML

- -
<p>
-  <span>:-moz-first-node</span>
-  <span>:-moz-last-node</span>
-</p>
-<p>
-  Bip bop bip bop
-  <span>Cet élément n'est pas ciblé car il y a du texte avant.</span>
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "220", "20")}}

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-first-node/index.md b/files/fr/web/css/_colon_-moz-first-node/index.md new file mode 100644 index 0000000000..74fcd7f5bb --- /dev/null +++ b/files/fr/web/css/_colon_-moz-first-node/index.md @@ -0,0 +1,58 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-first-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

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.

+
+ +

Syntaxe

+ +
span:-moz-first-node { propriétés de mise en forme }
+
+ +

Exemples

+ +

CSS

+ +
span:-moz-first-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<p>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</p>
+<p>
+  Bip bop bip bop
+  <span>Cet élément n'est pas ciblé car il y a du texte avant.</span>
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "220", "20")}}

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-focusring/index.html b/files/fr/web/css/_colon_-moz-focusring/index.html deleted file mode 100644 index 6e6181fb70..0000000000 --- a/files/fr/web/css/_colon_-moz-focusring/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: ':-moz-focusring' -slug: 'Web/CSS/:-moz-focusring' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-focusring' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La pseudo-classe :-moz-focusring est similaire à la pseudo-classe {{cssxref(":focus")}} mais ne cible un élément que si celui-ci a le focus et qu'un indicateur doit être dessiné autour ou sur cet élément.

- -

Si :-moz-focusring correspond à un élément, :focus correspondra également (bien que l'inverse ne soit pas toujours vrai). Cela dépend de l'agent utilisateur qui indique si un anneau de focus doit être dessiné sur l'élément qui a reçu le focus. Cette indication dépend fortement du système d'exploitation et le comportement de cette pseudo-classe diffèrera donc selon les plateformes et/ou les paramètres du système.

- -
-

Note : Les développeurs utilisent souvent :-moz-focusring pour différencier l'atteinte du focus via le clic de la souris ou via la navigation au clavier (avec la tabulation). Cette pseudo-classe est également utile si on crée un élément personnalisé dont on veut changer le style en fonction de son comportement.

-
- -

Syntaxe

- -
:-moz-focusring
- -

Exemple

- -

CSS

- -
input {
-  margin: 5px;
-}
-
-:-moz-focusring {
-  color: red;
-  outline: 2px dotted green;
-}
-
- -

HTML

- -
<input/>
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -

Spécifications

- -

Cette fonctionnalité ne fait partie d'aucune spécification bien qu'elle ait discutée avec le groupe de travail et qu'il a été conclus de son ajout dans la spécification CSS sur les sélecteurs de niveau 4 ou 5.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-focusring")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-focusring/index.md b/files/fr/web/css/_colon_-moz-focusring/index.md new file mode 100644 index 0000000000..6e6181fb70 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-focusring/index.md @@ -0,0 +1,59 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-focusring' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-focusring est similaire à la pseudo-classe {{cssxref(":focus")}} mais ne cible un élément que si celui-ci a le focus et qu'un indicateur doit être dessiné autour ou sur cet élément.

+ +

Si :-moz-focusring correspond à un élément, :focus correspondra également (bien que l'inverse ne soit pas toujours vrai). Cela dépend de l'agent utilisateur qui indique si un anneau de focus doit être dessiné sur l'élément qui a reçu le focus. Cette indication dépend fortement du système d'exploitation et le comportement de cette pseudo-classe diffèrera donc selon les plateformes et/ou les paramètres du système.

+ +
+

Note : Les développeurs utilisent souvent :-moz-focusring pour différencier l'atteinte du focus via le clic de la souris ou via la navigation au clavier (avec la tabulation). Cette pseudo-classe est également utile si on crée un élément personnalisé dont on veut changer le style en fonction de son comportement.

+
+ +

Syntaxe

+ +
:-moz-focusring
+ +

Exemple

+ +

CSS

+ +
input {
+  margin: 5px;
+}
+
+:-moz-focusring {
+  color: red;
+  outline: 2px dotted green;
+}
+
+ +

HTML

+ +
<input/>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Spécifications

+ +

Cette fonctionnalité ne fait partie d'aucune spécification bien qu'elle ait discutée avec le groupe de travail et qu'il a été conclus de son ajout dans la spécification CSS sur les sélecteurs de niveau 4 ou 5.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-focusring")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-handler-blocked/index.html b/files/fr/web/css/_colon_-moz-handler-blocked/index.html deleted file mode 100644 index 0168f703f5..0000000000 --- a/files/fr/web/css/_colon_-moz-handler-blocked/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: ':-moz-handler-blocked' -slug: 'Web/CSS/:-moz-handler-blocked' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-handler-blocked' ---- -
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
- -

La pseudo-classe :-moz-handler-blocked permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été bloqué par l'utilisateur.

- -

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-handler-blocked/index.md b/files/fr/web/css/_colon_-moz-handler-blocked/index.md new file mode 100644 index 0000000000..0168f703f5 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-handler-blocked/index.md @@ -0,0 +1,26 @@ +--- +title: ':-moz-handler-blocked' +slug: 'Web/CSS/:-moz-handler-blocked' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-handler-blocked' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

La pseudo-classe :-moz-handler-blocked permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été bloqué par l'utilisateur.

+ +

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-handler-crashed/index.html b/files/fr/web/css/_colon_-moz-handler-crashed/index.html deleted file mode 100644 index 72f1bdff9f..0000000000 --- a/files/fr/web/css/_colon_-moz-handler-crashed/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: ':-moz-handler-crashed' -slug: 'Web/CSS/:-moz-handler-crashed' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-handler-crashed' ---- -
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}
- -

La pseudo-classe :-moz-handler-crashed permet de cibler un élément qui ne peut pas être affiché car le plugin sensé le dessiner a planté.

- -

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-handler-crashed/index.md b/files/fr/web/css/_colon_-moz-handler-crashed/index.md new file mode 100644 index 0000000000..72f1bdff9f --- /dev/null +++ b/files/fr/web/css/_colon_-moz-handler-crashed/index.md @@ -0,0 +1,26 @@ +--- +title: ':-moz-handler-crashed' +slug: 'Web/CSS/:-moz-handler-crashed' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-handler-crashed' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}
+ +

La pseudo-classe :-moz-handler-crashed permet de cibler un élément qui ne peut pas être affiché car le plugin sensé le dessiner a planté.

+ +

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-handler-disabled/index.html b/files/fr/web/css/_colon_-moz-handler-disabled/index.html deleted file mode 100644 index 12ade56fe0..0000000000 --- a/files/fr/web/css/_colon_-moz-handler-disabled/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: ':-moz-handler-disabled' -slug: 'Web/CSS/:-moz-handler-disabled' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-handler-disabled' ---- -
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
- -

La pseudo-classe :-moz-handler-disabled permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été désactivé par l'utilisateur.

- -

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-handler-disabled/index.md b/files/fr/web/css/_colon_-moz-handler-disabled/index.md new file mode 100644 index 0000000000..12ade56fe0 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-handler-disabled/index.md @@ -0,0 +1,26 @@ +--- +title: ':-moz-handler-disabled' +slug: 'Web/CSS/:-moz-handler-disabled' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-handler-disabled' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

La pseudo-classe :-moz-handler-disabled permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été désactivé par l'utilisateur.

+ +

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-last-node/index.html b/files/fr/web/css/_colon_-moz-last-node/index.html deleted file mode 100644 index aab079a2e6..0000000000 --- a/files/fr/web/css/_colon_-moz-last-node/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: ':-moz-last-node' -slug: 'Web/CSS/:-moz-last-node' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-last-node' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

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.

-
- -

Syntaxe

- -
span:-moz-last-node { propriétés de mise en forme }
-
- -

Exemples

- -

CSS

- -
span:-moz-last-node {
-  background-color: lime;
-}
-
- -

HTML

- -
<p>
-  <span>:-moz-first-node</span>
-  <span>:-moz-last-node</span>
-</p>
-<p>
-  <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span>
-  Bip bop bip bop.
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "220", "20")}}

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-last-node/index.md b/files/fr/web/css/_colon_-moz-last-node/index.md new file mode 100644 index 0000000000..aab079a2e6 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-last-node/index.md @@ -0,0 +1,58 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-last-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

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.

+
+ +

Syntaxe

+ +
span:-moz-last-node { propriétés de mise en forme }
+
+ +

Exemples

+ +

CSS

+ +
span:-moz-last-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<p>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</p>
+<p>
+  <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span>
+  Bip bop bip bop.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "220", "20")}}

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-list-bullet/index.html b/files/fr/web/css/_colon_-moz-list-bullet/index.html deleted file mode 100644 index 8bbfcb6954..0000000000 --- a/files/fr/web/css/_colon_-moz-list-bullet/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: '::-moz-list-bullet' -slug: Web/CSS/:-moz-list-bullet -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: Web/CSS/:-moz-list-bullet -original_slug: Web/CSS/::-moz-list-bullet ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément CSS non-standard ::-moz-list-bullet de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).

- -

Syntaxe

- -
li::-moz-list-bullet { propriétés de style }
- -

Exemples

- -

HTML

- -
<ul>
-  <li>Numéro 1</li>
-  <li>Numéro 2</li>
-  <li>Numéro 3</li>
-</ul>
-
-<ul class="list">
-  <li>Numéro 1</li>
-  <li>Numéro 2</li>
-  <li>Numéro 3</li>
-</ul>
-
- -

CSS

- -
.list ::-moz-list-bullet {
-  font-size: 36px;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-list-bullet/index.md b/files/fr/web/css/_colon_-moz-list-bullet/index.md new file mode 100644 index 0000000000..8bbfcb6954 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-list-bullet/index.md @@ -0,0 +1,56 @@ +--- +title: '::-moz-list-bullet' +slug: Web/CSS/:-moz-list-bullet +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: Web/CSS/:-moz-list-bullet +original_slug: Web/CSS/::-moz-list-bullet +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément CSS non-standard ::-moz-list-bullet de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).

+ +

Syntaxe

+ +
li::-moz-list-bullet { propriétés de style }
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li>Numéro 1</li>
+  <li>Numéro 2</li>
+  <li>Numéro 3</li>
+</ul>
+
+<ul class="list">
+  <li>Numéro 1</li>
+  <li>Numéro 2</li>
+  <li>Numéro 3</li>
+</ul>
+
+ +

CSS

+ +
.list ::-moz-list-bullet {
+  font-size: 36px;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-list-number/index.html b/files/fr/web/css/_colon_-moz-list-number/index.html deleted file mode 100644 index 8a4d2f4be6..0000000000 --- a/files/fr/web/css/_colon_-moz-list-number/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: '::-moz-list-number' -slug: Web/CSS/:-moz-list-number -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: Web/CSS/:-moz-list-number -original_slug: Web/CSS/::-moz-list-number ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément CSS ::-moz-list-number permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).

- -

Syntaxe

- -
li::-moz-list-number { propriétés de style }
-
- -

Exemples

- -

CSS

- -
li::-moz-list-number {
-  font-style: italic;
-  font-weight: bold;
-}
-
- -

HTML

- -
<ol>
-  <li>Premier élément</li>
-  <li>Second élément</li>
-  <li>Troisième élément</li>
-</ol>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-list-number/index.md b/files/fr/web/css/_colon_-moz-list-number/index.md new file mode 100644 index 0000000000..8a4d2f4be6 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-list-number/index.md @@ -0,0 +1,53 @@ +--- +title: '::-moz-list-number' +slug: Web/CSS/:-moz-list-number +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: Web/CSS/:-moz-list-number +original_slug: Web/CSS/::-moz-list-number +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément CSS ::-moz-list-number permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).

+ +

Syntaxe

+ +
li::-moz-list-number { propriétés de style }
+
+ +

Exemples

+ +

CSS

+ +
li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+
+ +

HTML

+ +
<ol>
+  <li>Premier élément</li>
+  <li>Second élément</li>
+  <li>Troisième élément</li>
+</ol>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-loading/index.html b/files/fr/web/css/_colon_-moz-loading/index.html deleted file mode 100644 index 4efb552f03..0000000000 --- a/files/fr/web/css/_colon_-moz-loading/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: ':-moz-loading' -slug: 'Web/CSS/:-moz-loading' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-loading' ---- -
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
- -

La pseudo-classe :-moz-loading correspond aux éléments qui ne peuvent être affichés, car ils n'ont pas été chargés (par exemple les images qui n'ont pas encore été transférées sur le réseau). On notera que les images en cours de chargement (le fichier est arrivé et est en train d'être traité pour affichage par le navigateur) ne sont pas ciblées par cette pseudo-classse.

- -

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

- -

Syntaxe

- -
:-moz-loading
- -

Exemples

- -
img:-moz-loading {
-  background-color: #aaa;
-  background-image: url(loading-animation.gif) center no-repeat;
-}
- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-loading/index.md b/files/fr/web/css/_colon_-moz-loading/index.md new file mode 100644 index 0000000000..4efb552f03 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-loading/index.md @@ -0,0 +1,36 @@ +--- +title: ':-moz-loading' +slug: 'Web/CSS/:-moz-loading' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-loading' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
+ +

La pseudo-classe :-moz-loading correspond aux éléments qui ne peuvent être affichés, car ils n'ont pas été chargés (par exemple les images qui n'ont pas encore été transférées sur le réseau). On notera que les images en cours de chargement (le fichier est arrivé et est en train d'être traité pour affichage par le navigateur) ne sont pas ciblées par cette pseudo-classse.

+ +

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

+ +

Syntaxe

+ +
:-moz-loading
+ +

Exemples

+ +
img:-moz-loading {
+  background-color: #aaa;
+  background-image: url(loading-animation.gif) center no-repeat;
+}
+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html deleted file mode 100644 index 13622d0dd1..0000000000 --- a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: ':-moz-locale-dir(ltr)' -slug: 'Web/CSS/:-moz-locale-dir(ltr)' -tags: - - CSS - - Localisation - - Non-standard - - Pseudo-classe - - Reference - - l10n -translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' ---- -
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
- -

La pseudo-classe :-moz-locale-dir(ltr) correspond à un élément si l'interface utilisateur est affichée de gauche à droite. Ceci est déterminé par la préférence intl.uidirection.locale (où locale est le language courant) qui est fixé à "ltr".

- -

Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins du langage de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte le langage de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétée par les spécificités du langage.

- -

Ce sélecteur ne fonctionne pas pour les documents l'HTML; il fait correspondre toujours, peu importe si le langage de l'UI va de gauche à droite ou de droite à gauche.

- -

Exemples

- -

HTML

- -
<p>Sur une interface allant de gauche à droite, ce texte devrait être rouge.</p>
-
- -

CSS

- -
p:-moz-locale-dir(ltr) {
-  color: red;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md new file mode 100644 index 0000000000..13622d0dd1 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md @@ -0,0 +1,47 @@ +--- +title: ':-moz-locale-dir(ltr)' +slug: 'Web/CSS/:-moz-locale-dir(ltr)' +tags: + - CSS + - Localisation + - Non-standard + - Pseudo-classe + - Reference + - l10n +translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
+ +

La pseudo-classe :-moz-locale-dir(ltr) correspond à un élément si l'interface utilisateur est affichée de gauche à droite. Ceci est déterminé par la préférence intl.uidirection.locale (où locale est le language courant) qui est fixé à "ltr".

+ +

Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins du langage de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte le langage de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétée par les spécificités du langage.

+ +

Ce sélecteur ne fonctionne pas pour les documents l'HTML; il fait correspondre toujours, peu importe si le langage de l'UI va de gauche à droite ou de droite à gauche.

+ +

Exemples

+ +

HTML

+ +
<p>Sur une interface allant de gauche à droite, ce texte devrait être rouge.</p>
+
+ +

CSS

+ +
p:-moz-locale-dir(ltr) {
+  color: red;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html deleted file mode 100644 index 8ab4f863d5..0000000000 --- a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: ':-moz-locale-dir(rtl)' -slug: 'Web/CSS/:-moz-locale-dir(rtl)' -tags: - - CSS - - Droite-à-gauche - - Localisation - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' ---- -
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
- -

La pseudo-classe CSS :-moz-locale-dir(rtl) correspond à un élément si l'interface utilisateur est affichée de droite à gauche. Elle est déterminée par la préférence intl.uidirection.locale (où locale est la langue courante) qui est fixée à "rtl".

- -

Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins de la langue de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte la langue de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétées par les spécificités de la langue.

- -

Ce sélecteur ne fonctionne pas correctement pour des documents HTML ; il ne fait jamais correspondre, peu importe si la langue de l'interface utilisateur va de gauche à droite ou de droite à gauche.

- -

Exemples

- -

CSS

- -
p:-moz-locale-dir(rtl) {
-  color: red;
-}
- -

HTML

- -
<p>En utilisant une interface de droite à gauche, ce texte sera rouge.</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md new file mode 100644 index 0000000000..8ab4f863d5 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md @@ -0,0 +1,47 @@ +--- +title: ':-moz-locale-dir(rtl)' +slug: 'Web/CSS/:-moz-locale-dir(rtl)' +tags: + - CSS + - Droite-à-gauche + - Localisation + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
+ +

La pseudo-classe CSS :-moz-locale-dir(rtl) correspond à un élément si l'interface utilisateur est affichée de droite à gauche. Elle est déterminée par la préférence intl.uidirection.locale (où locale est la langue courante) qui est fixée à "rtl".

+ +

Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins de la langue de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte la langue de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétées par les spécificités de la langue.

+ +

Ce sélecteur ne fonctionne pas correctement pour des documents HTML ; il ne fait jamais correspondre, peu importe si la langue de l'interface utilisateur va de gauche à droite ou de droite à gauche.

+ +

Exemples

+ +

CSS

+ +
p:-moz-locale-dir(rtl) {
+  color: red;
+}
+ +

HTML

+ +
<p>En utilisant une interface de droite à gauche, ce texte sera rouge.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.html b/files/fr/web/css/_colon_-moz-only-whitespace/index.html deleted file mode 100644 index d53499bc80..0000000000 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ':-moz-only-whitespace' -slug: 'Web/CSS/:-moz-only-whitespace' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference - - Sélecteur -translation_of: 'Web/CSS/:-moz-only-whitespace' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -
-

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é.

-
- -

La pseudo-classe :-moz-only-whitespace correspond aux éléments qui n'ont aucun nœud enfant, aux nœuds texte vides ou aux nœuds texte ne possédant que des espaces.

- -

Syntaxe

- -{{CSSSyntax}} - -

Exemples

- -

HTML

- -
<div> </div>
-
- -

CSS

- - - -
div {
-  border: 4px solid red;
-}
-
-:-moz-only-whitespace {
-  border-color: lime;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemple", "100%", "50")}}

- -

Spécifications

- -

Cette pseudo-classe a été renommée en :blank dans {{SpecName("CSS4 Selectors", "#changes-2018-02")}} puis la fonctionnalité a été fusionnée avec {{CSSxRef(":empty")}} et {{CSSxRef(":blank")}} a été redéfinie afin d'indiquer un élément {{HTMLElement("input")}} vide.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.moz-only-whitespace")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md new file mode 100644 index 0000000000..d53499bc80 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md @@ -0,0 +1,73 @@ +--- +title: ':-moz-only-whitespace' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference + - Sélecteur +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +
+

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é.

+
+ +

La pseudo-classe :-moz-only-whitespace correspond aux éléments qui n'ont aucun nœud enfant, aux nœuds texte vides ou aux nœuds texte ne possédant que des espaces.

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Exemples

+ +

HTML

+ +
<div> </div>
+
+ +

CSS

+ + + +
div {
+  border: 4px solid red;
+}
+
+:-moz-only-whitespace {
+  border-color: lime;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", "100%", "50")}}

+ +

Spécifications

+ +

Cette pseudo-classe a été renommée en :blank dans {{SpecName("CSS4 Selectors", "#changes-2018-02")}} puis la fonctionnalité a été fusionnée avec {{CSSxRef(":empty")}} et {{CSSxRef(":blank")}} a été redéfinie afin d'indiquer un élément {{HTMLElement("input")}} vide.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.moz-only-whitespace")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-submit-invalid/index.html b/files/fr/web/css/_colon_-moz-submit-invalid/index.html deleted file mode 100644 index 30f9856f3d..0000000000 --- a/files/fr/web/css/_colon_-moz-submit-invalid/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: ':-moz-submit-invalid' -slug: 'Web/CSS/:-moz-submit-invalid' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-submit-invalid' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La pseudo-classe CSS :-moz-submit-invalid représente tout bouton {{HTMLElement("input")}} de type submit présent sur un formulaire dont le contenu n'est pas valide compte-tenu de ses contraintes de validation.

- -

Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-classe afin de personnaliser l'apparence du bouton submit lorsqu'il y a des champs de formulaire invalides.

- -

Syntaxe

- -
:-moz-submit-invalid
-
- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-submit-invalid")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-submit-invalid/index.md b/files/fr/web/css/_colon_-moz-submit-invalid/index.md new file mode 100644 index 0000000000..30f9856f3d --- /dev/null +++ b/files/fr/web/css/_colon_-moz-submit-invalid/index.md @@ -0,0 +1,37 @@ +--- +title: ':-moz-submit-invalid' +slug: 'Web/CSS/:-moz-submit-invalid' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-submit-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe CSS :-moz-submit-invalid représente tout bouton {{HTMLElement("input")}} de type submit présent sur un formulaire dont le contenu n'est pas valide compte-tenu de ses contraintes de validation.

+ +

Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-classe afin de personnaliser l'apparence du bouton submit lorsqu'il y a des champs de formulaire invalides.

+ +

Syntaxe

+ +
:-moz-submit-invalid
+
+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-submit-invalid")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-suppressed/index.html b/files/fr/web/css/_colon_-moz-suppressed/index.html deleted file mode 100644 index d250f94a15..0000000000 --- a/files/fr/web/css/_colon_-moz-suppressed/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: ':-moz-suppressed' -slug: 'Web/CSS/:-moz-suppressed' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-suppressed' ---- -
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
- -

:-moz-suppressed est une pseudo-classe spécifique à Mozilla qui permet de sélectionner les images qui n’ont pas été chargées car le chargement des images depuis ce site a été bloqué.

- -

Ce sélecteur est principalement destiné aux développeurs de thèmes.

- -

Syntaxe

- -
:-moz-suppressed
- -

Exemple

- -
:-moz-suppressed {
-  background: yellow;
-  padding: 8px;
-}
- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-suppressed/index.md b/files/fr/web/css/_colon_-moz-suppressed/index.md new file mode 100644 index 0000000000..d250f94a15 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-suppressed/index.md @@ -0,0 +1,38 @@ +--- +title: ':-moz-suppressed' +slug: 'Web/CSS/:-moz-suppressed' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-suppressed' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

:-moz-suppressed est une pseudo-classe spécifique à Mozilla qui permet de sélectionner les images qui n’ont pas été chargées car le chargement des images depuis ce site a été bloqué.

+ +

Ce sélecteur est principalement destiné aux développeurs de thèmes.

+ +

Syntaxe

+ +
:-moz-suppressed
+ +

Exemple

+ +
:-moz-suppressed {
+  background: yellow;
+  padding: 8px;
+}
+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.html b/files/fr/web/css/_colon_-moz-user-disabled/index.html deleted file mode 100644 index 7890fbdca6..0000000000 --- a/files/fr/web/css/_colon_-moz-user-disabled/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: ':-moz-user-disabled' -slug: 'Web/CSS/:-moz-user-disabled' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-user-disabled' ---- -
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
- -

La pseudo-classe CSS :-moz-user-disabled correspond aux  éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur.

- -

Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes.

- -

Syntaxe

- -
:-moz-user-disabled
- -

Exemples

- -
:-moz-user-disabled {
-  background-color: lightgray;
-  padding: 8px;
-}
- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.md b/files/fr/web/css/_colon_-moz-user-disabled/index.md new file mode 100644 index 0000000000..7890fbdca6 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-user-disabled/index.md @@ -0,0 +1,38 @@ +--- +title: ':-moz-user-disabled' +slug: 'Web/CSS/:-moz-user-disabled' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-user-disabled' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

La pseudo-classe CSS :-moz-user-disabled correspond aux  éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur.

+ +

Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes.

+ +

Syntaxe

+ +
:-moz-user-disabled
+ +

Exemples

+ +
:-moz-user-disabled {
+  background-color: lightgray;
+  padding: 8px;
+}
+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.html b/files/fr/web/css/_colon_-moz-window-inactive/index.html deleted file mode 100644 index e0352a939f..0000000000 --- a/files/fr/web/css/_colon_-moz-window-inactive/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: ':-moz-window-inactive' -slug: 'Web/CSS/:-moz-window-inactive' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-moz-window-inactive' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

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é.

-
- -

:-moz-window-inactive fonctionne également pour le contenu des documents HTML.

- -

Exemples

- -

Cet exemple illustre la modification de l'apparence de l'arrière-plan d'une boîte selon que la fenêtre est active ou non.

- -

CSS

- -
#maboite {
-  background: linear-gradient(to bottom, blue, cyan);
-}
-
-#maboite:-moz-window-inactive {
-  background: cyan;
-}
-
- -

HTML

- -
<div id="maboite" style="width:200px; height:200px;">
-  <p>Une boîte :)</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","220","220")}}

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-window-inactive")}}

diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.md b/files/fr/web/css/_colon_-moz-window-inactive/index.md new file mode 100644 index 0000000000..e0352a939f --- /dev/null +++ b/files/fr/web/css/_colon_-moz-window-inactive/index.md @@ -0,0 +1,53 @@ +--- +title: ':-moz-window-inactive' +slug: 'Web/CSS/:-moz-window-inactive' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-window-inactive' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

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é.

+
+ +

:-moz-window-inactive fonctionne également pour le contenu des documents HTML.

+ +

Exemples

+ +

Cet exemple illustre la modification de l'apparence de l'arrière-plan d'une boîte selon que la fenêtre est active ou non.

+ +

CSS

+ +
#maboite {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#maboite:-moz-window-inactive {
+  background: cyan;
+}
+
+ +

HTML

+ +
<div id="maboite" style="width:200px; height:200px;">
+  <p>Une boîte :)</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","220","220")}}

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-window-inactive")}}

diff --git a/files/fr/web/css/_colon_active/index.html b/files/fr/web/css/_colon_active/index.html deleted file mode 100644 index 0ac630a4c3..0000000000 --- a/files/fr/web/css/_colon_active/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:active' ---- -
{{CSSRef}}
- -

La pseudo-classe :active permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un feedback indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.

- -
/* ne cible <a> que lorsqu'il est activé */
-/* par exemple quand on clique dessus */
-a:active {
-  color: red;
-}
- -

La pseudo-classe :active est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML {{HTMLElement("a")}} et {{HTMLElement("button")}} mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément {{HTMLElement("label")}} associé.

- -

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.

-
- -

Syntax

- -{{csssyntax}} - -

Exemples

- -

Liens actifs

- -

CSS

- -
a:link { color: blue; }          /* Liens non visités */
-a:visited { color: purple; }     /* Liens visités */
-a:hover { background: yellow; }  /* Liens survolés */
-a:active { color: red; }         /* Liens actifs */
-
-p:active { background: #eee; }   /* Paragraphes actifs */
- -

HTML

- -
<p>Ce paragraphe contient un lien :
-  <a href="#">Ce lien devient rouge quand vous cliquez dessus.</a>
-  Le paragraphe sera sur un fond gris quand vous cliquerez dessus
-  ou sur le lien.
-</p>
- -

Résultat

- -

{{EmbedLiveSample('Liens_actifs')}}

- -

Éléments de formulaire actifs

- -

CSS

- -
form :active {
-  color: red;
-}
-
-form button {
-  background: white;
-}
- -

HTML

- -
<form>
-  <label for="mon-button">Un bouton :</label>
-  <button id="mon-button" type="button">Cliquez sur moi ou sur mon libellé !</button>
-</form>
- -

Résultat

- -

{{EmbedLiveSample('Éléments_de_formulaire_actifs')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.active")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md new file mode 100644 index 0000000000..0ac630a4c3 --- /dev/null +++ b/files/fr/web/css/_colon_active/index.md @@ -0,0 +1,129 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

La pseudo-classe :active permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un feedback indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.

+ +
/* ne cible <a> que lorsqu'il est activé */
+/* par exemple quand on clique dessus */
+a:active {
+  color: red;
+}
+ +

La pseudo-classe :active est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML {{HTMLElement("a")}} et {{HTMLElement("button")}} mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément {{HTMLElement("label")}} associé.

+ +

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.

+
+ +

Syntax

+ +{{csssyntax}} + +

Exemples

+ +

Liens actifs

+ +

CSS

+ +
a:link { color: blue; }          /* Liens non visités */
+a:visited { color: purple; }     /* Liens visités */
+a:hover { background: yellow; }  /* Liens survolés */
+a:active { color: red; }         /* Liens actifs */
+
+p:active { background: #eee; }   /* Paragraphes actifs */
+ +

HTML

+ +
<p>Ce paragraphe contient un lien :
+  <a href="#">Ce lien devient rouge quand vous cliquez dessus.</a>
+  Le paragraphe sera sur un fond gris quand vous cliquerez dessus
+  ou sur le lien.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Liens_actifs')}}

+ +

Éléments de formulaire actifs

+ +

CSS

+ +
form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

HTML

+ +
<form>
+  <label for="mon-button">Un bouton :</label>
+  <button id="mon-button" type="button">Cliquez sur moi ou sur mon libellé !</button>
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample('Éléments_de_formulaire_actifs')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.active")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_any-link/index.html b/files/fr/web/css/_colon_any-link/index.html deleted file mode 100644 index 689e4d42b2..0000000000 --- a/files/fr/web/css/_colon_any-link/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ':any-link' -slug: 'Web/CSS/:any-link' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:any-link' ---- -
{{CSSRef}}
- -

La pseudo-classe :any-link permet de représenter un élément qui agit comme la source de l'ancre d'un hyperlien (qu'il ait été visité ou non). Elle permet donc de cibler les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}} avec un attribut href. Autrement dit, elle cible les éléments qui correspondent à {{cssxref(":link")}} ou à {{cssxref(":visited")}}.

- -
/* cible tous les éléments qui seraient ciblés par */
-/* :link ou :visited */
-:any-link {
-  color: green;
-  font-weight: bold;
-}
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
:any-link {
-  color: green;
-  font-weight: bold;
-}
-
-/* Pour les navigateurs WebKit */
-:-webkit-any-link {
-  color: green;
-  font-weight: bold;
-}
-
- -

HTML

- -
<a href="https://mozilla.org">Une page différente</a><br>
-<a href="#">Une ancre</a><br>
-<a>Un lien sans cible (n'est pas mis en forme)</a>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","100%","100%")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.any-link")}}

diff --git a/files/fr/web/css/_colon_any-link/index.md b/files/fr/web/css/_colon_any-link/index.md new file mode 100644 index 0000000000..689e4d42b2 --- /dev/null +++ b/files/fr/web/css/_colon_any-link/index.md @@ -0,0 +1,73 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}}
+ +

La pseudo-classe :any-link permet de représenter un élément qui agit comme la source de l'ancre d'un hyperlien (qu'il ait été visité ou non). Elle permet donc de cibler les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}} avec un attribut href. Autrement dit, elle cible les éléments qui correspondent à {{cssxref(":link")}} ou à {{cssxref(":visited")}}.

+ +
/* cible tous les éléments qui seraient ciblés par */
+/* :link ou :visited */
+:any-link {
+  color: green;
+  font-weight: bold;
+}
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
:any-link {
+  color: green;
+  font-weight: bold;
+}
+
+/* Pour les navigateurs WebKit */
+:-webkit-any-link {
+  color: green;
+  font-weight: bold;
+}
+
+ +

HTML

+ +
<a href="https://mozilla.org">Une page différente</a><br>
+<a href="#">Une ancre</a><br>
+<a>Un lien sans cible (n'est pas mis en forme)</a>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","100%","100%")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.any-link")}}

diff --git a/files/fr/web/css/_colon_autofill/index.html b/files/fr/web/css/_colon_autofill/index.html deleted file mode 100644 index c74d26ed18..0000000000 --- a/files/fr/web/css/_colon_autofill/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: ':-webkit-autofill' -slug: Web/CSS/:autofill -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: Web/CSS/:-webkit-autofill -original_slug: Web/CSS/:-webkit-autofill ---- -
{{CSSRef}}{{Non-standard_header}}
- -

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.

-
- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-autofill")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_autofill/index.md b/files/fr/web/css/_colon_autofill/index.md new file mode 100644 index 0000000000..c74d26ed18 --- /dev/null +++ b/files/fr/web/css/_colon_autofill/index.md @@ -0,0 +1,34 @@ +--- +title: ':-webkit-autofill' +slug: Web/CSS/:autofill +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: Web/CSS/:-webkit-autofill +original_slug: Web/CSS/:-webkit-autofill +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

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.

+
+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-autofill")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_blank/index.html b/files/fr/web/css/_colon_blank/index.html deleted file mode 100644 index db9d6f5d06..0000000000 --- a/files/fr/web/css/_colon_blank/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: ':blank' -slug: 'Web/CSS/:blank' -tags: - - CSS - - Draft - - Experimental - - Pseudo-classe - - Reference -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.

-
- -

La pseudo-classe :blank permet de sélectionner les champs saissables par l'utilisateur et qui sont vides (par exemple des éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} où rien n'a encore été saisi).

- -

Syntaxe

- -{{CSSSyntax}} - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.blank")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_blank/index.md b/files/fr/web/css/_colon_blank/index.md new file mode 100644 index 0000000000..db9d6f5d06 --- /dev/null +++ b/files/fr/web/css/_colon_blank/index.md @@ -0,0 +1,51 @@ +--- +title: ':blank' +slug: 'Web/CSS/:blank' +tags: + - CSS + - Draft + - Experimental + - Pseudo-classe + - Reference +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.

+
+ +

La pseudo-classe :blank permet de sélectionner les champs saissables par l'utilisateur et qui sont vides (par exemple des éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} où rien n'a encore été saisi).

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.blank")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_checked/index.html b/files/fr/web/css/_colon_checked/index.html deleted file mode 100644 index fba13cef19..0000000000 --- a/files/fr/web/css/_colon_checked/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: ':checked' -slug: Web/CSS/:checked -tags: - - CSS - - Pseudo-classe - - Reference -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.

- -
/* cible n'importe quel bouton radio sélectionné, case
-/* à cocher cochée ou option sélectionnée */
-input:checked {
-  margin-left: 25px;
-  border: 1px solid blue;
-}
-
- -
-

Note : Les navigateurs considèrent souvent les éléments <option> comme des éléments remplacéset la possibilité de mise en forme avec :checked varie d'un navigateur à l'autre.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Exemple simple

- -

HTML

- -
-<div>
-  <input type="radio" name="my-input" id="yes">
-  <label for="yes">Oui</label>
-
-  <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;
-}
-
-/* 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;
-}
-
-/* Éléments cases à cocher cochés */
-input[type="checkbox"]:checked {
-  box-shadow: 0 0 0 3px hotpink;
-}
-
-/* Éléments options sélectionnés */
-option:checked {
-  box-shadow: 0 0 0 3px lime;
-  color: red;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("exemple_simple")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}{{Spec2('HTML5 W3C')}}La sémantique relative au HTML est définie.
{{SpecName('CSS4 Selectors', '#checked', ':checked')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}}{{Spec2('CSS3 Basic UI')}}Lien avec la spécification de niveau 3 pour les sélecteurs.
{{SpecName('CSS3 Selectors', '#checked', ':checked')}}{{Spec2('CSS3 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.checked")}}

diff --git a/files/fr/web/css/_colon_checked/index.md b/files/fr/web/css/_colon_checked/index.md new file mode 100644 index 0000000000..fba13cef19 --- /dev/null +++ b/files/fr/web/css/_colon_checked/index.md @@ -0,0 +1,132 @@ +--- +title: ':checked' +slug: Web/CSS/:checked +tags: + - CSS + - Pseudo-classe + - Reference +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.

+ +
/* cible n'importe quel bouton radio sélectionné, case
+/* à cocher cochée ou option sélectionnée */
+input:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+
+ +
+

Note : Les navigateurs considèrent souvent les éléments <option> comme des éléments remplacéset la possibilité de mise en forme avec :checked varie d'un navigateur à l'autre.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
+<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Oui</label>
+
+  <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;
+}
+
+/* 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;
+}
+
+/* Éléments cases à cocher cochés */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Éléments options sélectionnés */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("exemple_simple")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}{{Spec2('HTML5 W3C')}}La sémantique relative au HTML est définie.
{{SpecName('CSS4 Selectors', '#checked', ':checked')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}}{{Spec2('CSS3 Basic UI')}}Lien avec la spécification de niveau 3 pour les sélecteurs.
{{SpecName('CSS3 Selectors', '#checked', ':checked')}}{{Spec2('CSS3 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.checked")}}

diff --git a/files/fr/web/css/_colon_current/index.html b/files/fr/web/css/_colon_current/index.html deleted file mode 100644 index b96560db91..0000000000 --- a/files/fr/web/css/_colon_current/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: ':current' -slug: 'Web/CSS/:current' -browser-compat: css.selectors.current -translation_of: Web/CSS/:current ---- -

{{CSSRef}}

- -

Le sélecteur de pseudo-classe CSS :current est une pseudo-classe agissant dans la dimension temporelle et représentant l'élément actuellement affiché, ou un ancêtre de cet élément. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.

- -
:current(p, span) {
-  background-color: yellow;
-}
- -

Syntaxe

- -

{{csssyntax}}

- -

Exemples

- -

CSS

- -
:current(p, span) {
-  background-color: yellow;
-}
- -

HTML

- -
<video controls preload="metadata">
-  <source src="video.mp4" type="video/mp4" />
-  <source src="video.webm" type="video/webm" />
-  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
-</video>
- -

WebVTT

- -
FICHIER WEBVTT
-
-1
-00:00:03.500 --> 00:00:05.000
-Voici le premier sous-titre
-
-2
-00:00:06.000 --> 00:00:09.000
-Voici le second sous-titre
-
-3
-00:00:11.000 --> 00:00:19.000
-Voici le troisième sous-titre
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_current/index.md b/files/fr/web/css/_colon_current/index.md new file mode 100644 index 0000000000..b96560db91 --- /dev/null +++ b/files/fr/web/css/_colon_current/index.md @@ -0,0 +1,66 @@ +--- +title: ':current' +slug: 'Web/CSS/:current' +browser-compat: css.selectors.current +translation_of: Web/CSS/:current +--- +

{{CSSRef}}

+ +

Le sélecteur de pseudo-classe CSS :current est une pseudo-classe agissant dans la dimension temporelle et représentant l'élément actuellement affiché, ou un ancêtre de cet élément. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.

+ +
:current(p, span) {
+  background-color: yellow;
+}
+ +

Syntaxe

+ +

{{csssyntax}}

+ +

Exemples

+ +

CSS

+ +
:current(p, span) {
+  background-color: yellow;
+}
+ +

HTML

+ +
<video controls preload="metadata">
+  <source src="video.mp4" type="video/mp4" />
+  <source src="video.webm" type="video/webm" />
+  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
+</video>
+ +

WebVTT

+ +
FICHIER WEBVTT
+
+1
+00:00:03.500 --> 00:00:05.000
+Voici le premier sous-titre
+
+2
+00:00:06.000 --> 00:00:09.000
+Voici le second sous-titre
+
+3
+00:00:11.000 --> 00:00:19.000
+Voici le troisième sous-titre
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_default/index.html b/files/fr/web/css/_colon_default/index.html deleted file mode 100644 index 195232f149..0000000000 --- a/files/fr/web/css/_colon_default/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: ':default' -slug: 'Web/CSS/:default' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:default' ---- -
{{CSSRef}}
- -

La pseudo-classe :default représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).

- -
/* Cible l'élément par défaut d'un groupe */
-:default {
-  background-color: lime;
-}
- -

Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.

- -

Ce sélecteur peut être utilisé sur des éléments {{htmlelement("button")}}, <input type="checkbox">, <input type="radio"> et {{htmlelement("option")}} :

- - - -
-

Note : La spécification WHATWG HTML définit cela dans le paragraphe 4.16.3.

-
- -

Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe :default.

- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input:default {
-  box-shadow: 0 0 2px 1px coral;
-}
-
-input:default + label {
-  color: coral;
-}
-
- -

HTML

- -
<fieldset>
-  <legend>Saison préférée</legend>
-
-  <input type="radio" name="season" id="spring">
-  <label for="spring">Printemps</label>
-
-  <input type="radio" name="season" id="summer" checked>
-  <label for="summer">Eté</label>
-
-  <input type="radio" name="season" id="fall">
-  <label for="fall">Automne</label>
-
-  <input type="radio" name="season" id="winter">
-  <label for="winter">Hiver</label>
-</fieldset>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}La sémantique liée au HTML est définie et les contraintes de validation sont également définies.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 Basic UI')}}Définition initiale de la pseudo-classe mais pas de la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.default")}}

diff --git a/files/fr/web/css/_colon_default/index.md b/files/fr/web/css/_colon_default/index.md new file mode 100644 index 0000000000..195232f149 --- /dev/null +++ b/files/fr/web/css/_colon_default/index.md @@ -0,0 +1,111 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

La pseudo-classe :default représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).

+ +
/* Cible l'élément par défaut d'un groupe */
+:default {
+  background-color: lime;
+}
+ +

Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.

+ +

Ce sélecteur peut être utilisé sur des éléments {{htmlelement("button")}}, <input type="checkbox">, <input type="radio"> et {{htmlelement("option")}} :

+ + + +
+

Note : La spécification WHATWG HTML définit cela dans le paragraphe 4.16.3.

+
+ +

Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe :default.

+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+
+ +

HTML

+ +
<fieldset>
+  <legend>Saison préférée</legend>
+
+  <input type="radio" name="season" id="spring">
+  <label for="spring">Printemps</label>
+
+  <input type="radio" name="season" id="summer" checked>
+  <label for="summer">Eté</label>
+
+  <input type="radio" name="season" id="fall">
+  <label for="fall">Automne</label>
+
+  <input type="radio" name="season" id="winter">
+  <label for="winter">Hiver</label>
+</fieldset>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}La sémantique liée au HTML est définie et les contraintes de validation sont également définies.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 Basic UI')}}Définition initiale de la pseudo-classe mais pas de la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.default")}}

diff --git a/files/fr/web/css/_colon_defined/index.html b/files/fr/web/css/_colon_defined/index.html deleted file mode 100644 index a1bfe2b1b9..0000000000 --- a/files/fr/web/css/_colon_defined/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: ':defined' -slug: 'Web/CSS/:defined' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:defined' -browser-compat: css.selectors.defined ---- -
{{CSSRef}}
- -

La pseudo-classe :defined représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur, ainsi que les éléments personnalisés (« custom elements ») ayant correctement été définis (c'est-à-dire grâce à la méthode CustomElementRegistry.define()).

- -
/* Cette règle cible tout élément défini */
-:defined {
-  font-style: italic;
-}
-
-/* Cette règle cible n'importe quelle instance d'un élément personnalisé donné */
-simple-custom:defined {
-  display: block;
-}
-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Les fragments de code qui suivent sont tirés du dépôt defined-pseudo-class (voir le résultat en live).

- -

Pour cette démonstration on définit un élément personnalisé trivial :

- -
customElements.define('simple-custom',
-  class extends HTMLElement {
-    constructor() {
-      super();
-
-      let divElem = document.createElement('div');
-      divElem.textContent = this.getAttribute('text');
-
-      let shadowRoot = this.attachShadow({mode: 'open'})
-        .appendChild(divElem);
-  }
-})
- -

On insère ensuite une copie de cet élément dans le document, à côté d'un paragraphe classique {<p> :

- -
<simple-custom text="Le texte de l'élément personnalisé"></simple-custom>
-
-<p>Un paragraphe normal</p>
- -

Dans la feuille CSS, on inclut d'abord les règles suivantes :

- -
// On utilise deux arrières-plans distincts pour ces deux éléments
-p {
-  background: yellow;
-}
-
-simple-custom {
-  background: cyan;
-}
-
-// On met en italique le texte de ces deux éléments
-:defined {
-  font-style: italic;
-}
- -

Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :

- -
simple-custom:not(:defined) {
-  display: none;
-}
-
-simple-custom:defined {
-  display: block;
-}
- -

Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en forme sur la page.

- -

Spécifications

- -{{Specifications}} - -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_defined/index.md b/files/fr/web/css/_colon_defined/index.md new file mode 100644 index 0000000000..a1bfe2b1b9 --- /dev/null +++ b/files/fr/web/css/_colon_defined/index.md @@ -0,0 +1,98 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:defined' +browser-compat: css.selectors.defined +--- +
{{CSSRef}}
+ +

La pseudo-classe :defined représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur, ainsi que les éléments personnalisés (« custom elements ») ayant correctement été définis (c'est-à-dire grâce à la méthode CustomElementRegistry.define()).

+ +
/* Cette règle cible tout élément défini */
+:defined {
+  font-style: italic;
+}
+
+/* Cette règle cible n'importe quelle instance d'un élément personnalisé donné */
+simple-custom:defined {
+  display: block;
+}
+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Les fragments de code qui suivent sont tirés du dépôt defined-pseudo-class (voir le résultat en live).

+ +

Pour cette démonstration on définit un élément personnalisé trivial :

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

On insère ensuite une copie de cet élément dans le document, à côté d'un paragraphe classique {<p> :

+ +
<simple-custom text="Le texte de l'élément personnalisé"></simple-custom>
+
+<p>Un paragraphe normal</p>
+ +

Dans la feuille CSS, on inclut d'abord les règles suivantes :

+ +
// On utilise deux arrières-plans distincts pour ces deux éléments
+p {
+  background: yellow;
+}
+
+simple-custom {
+  background: cyan;
+}
+
+// On met en italique le texte de ces deux éléments
+:defined {
+  font-style: italic;
+}
+ +

Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :

+ +
simple-custom:not(:defined) {
+  display: none;
+}
+
+simple-custom:defined {
+  display: block;
+}
+ +

Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en forme sur la page.

+ +

Spécifications

+ +{{Specifications}} + +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_dir/index.html b/files/fr/web/css/_colon_dir/index.html deleted file mode 100644 index 258e28c8b5..0000000000 --- a/files/fr/web/css/_colon_dir/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: ':dir' -slug: 'Web/CSS/:dir' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:dir' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe :dir permet de cibler un élément selon la direction du texte qu'il contient. En HTML, la direction est définie grâce à l'attribut {{htmlattrxref("dir", "html")}}. Pour les autres types de document, cela peut être déterminé autrement.

- -
/* Cible le contenu avec du texte */
-/* écrit de droite à gauche */
-:dir(rtl) {
-  background-color: red;
-}
- -

On notera que la pseudo-classe :dir() ne fonctionne pas de la même façon que le sélecteur d'attribut [dir=…]. Ce dernier utilise la valeur de l'attribut {{htmlattrxref("dir", "html")}} et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon [dir=rtl] ou [dir=ltr] ne pourront pas correspondre à la valeur auto qui peut être utilisée sur l'attribut dir. Au contraire, :dir() calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille auto).

- -

:dir() ne prend en compte que la valeur sémantique de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que {{cssxref("direction")}}.

- -

Syntaxe

- -

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}}

- -

Exemples

- -

CSS

- -
:-moz-dir(rtl) {
-  color: lime;
-}
-
-:dir(rtl) {
-  color: lime;
-}
-
-:-moz-dir(ltr) {
-  color: black;
-}
-
-:dir(ltr) {
-  color: black;
-}
- -

HTML

- -
<div dir="rtl">
-  <span>test1</span>
-  <div dir="ltr">test2
-    <div dir="auto">עִבְרִית</div>
-  </div>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%", 70)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.dir")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_dir/index.md b/files/fr/web/css/_colon_dir/index.md new file mode 100644 index 0000000000..258e28c8b5 --- /dev/null +++ b/files/fr/web/css/_colon_dir/index.md @@ -0,0 +1,107 @@ +--- +title: ':dir' +slug: 'Web/CSS/:dir' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :dir permet de cibler un élément selon la direction du texte qu'il contient. En HTML, la direction est définie grâce à l'attribut {{htmlattrxref("dir", "html")}}. Pour les autres types de document, cela peut être déterminé autrement.

+ +
/* Cible le contenu avec du texte */
+/* écrit de droite à gauche */
+:dir(rtl) {
+  background-color: red;
+}
+ +

On notera que la pseudo-classe :dir() ne fonctionne pas de la même façon que le sélecteur d'attribut [dir=…]. Ce dernier utilise la valeur de l'attribut {{htmlattrxref("dir", "html")}} et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon [dir=rtl] ou [dir=ltr] ne pourront pas correspondre à la valeur auto qui peut être utilisée sur l'attribut dir. Au contraire, :dir() calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille auto).

+ +

:dir() ne prend en compte que la valeur sémantique de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que {{cssxref("direction")}}.

+ +

Syntaxe

+ +

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}}

+ +

Exemples

+ +

CSS

+ +
:-moz-dir(rtl) {
+  color: lime;
+}
+
+:dir(rtl) {
+  color: lime;
+}
+
+:-moz-dir(ltr) {
+  color: black;
+}
+
+:dir(ltr) {
+  color: black;
+}
+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%", 70)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.dir")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_disabled/index.html b/files/fr/web/css/_colon_disabled/index.html deleted file mode 100644 index a39b26df64..0000000000 --- a/files/fr/web/css/_colon_disabled/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: ':disabled' -slug: 'Web/CSS/:disabled' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:disabled' ---- -
{{CSSRef}}
- -

La pseudo-classe :disabled permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.

- -
/* Cible tous les champs de saisie texte */
-/* qui sont désactivés */
-input[type="text"]:disabled {
-  background: #ccc;
-}
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input[type="text"]:disabled { background: #ccc; }
-
- -

HTML

- -
<form action="#">
-  <fieldset>
-    <legend>Adresse de livraison</legend>
-    <input type="text" placeholder="Nom">
-    <input type="text" placeholder="Adresse">
-    <input type="text" placeholder="Code postal">
-  </fieldset>
-  <fieldset id="facturation">
-    <legend>Adresse de facturation</legend>
-    <label for="facturation_livraison">Identique à l'adresse de livraison</label>
-    <input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked>
-    <br />
-    <input type="text" placeholder="Nom" disabled>
-    <input type="text" placeholder="Adresse" disabled>
-    <input type="text" placeholder="Code postal" disabled>
-  </fieldset>
-</form>
-
- -

JavaScript

- -
function toggleBilling() {
-  var billingItems = document.querySelectorAll('#facturation input[type="text"]');
-  for (var i = 0; i < billingItems.length; i++) {
-    billingItems[i].disabled = !billingItems[i].disabled;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '300px', '250px')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux formulaires.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 Basic UI')}}Référence à la spécification de niveau 3 sur les sélecteurs.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Définition de la pseudo-classe mais sans la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.disabled")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_disabled/index.md b/files/fr/web/css/_colon_disabled/index.md new file mode 100644 index 0000000000..a39b26df64 --- /dev/null +++ b/files/fr/web/css/_colon_disabled/index.md @@ -0,0 +1,115 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

La pseudo-classe :disabled permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.

+ +
/* Cible tous les champs de saisie texte */
+/* qui sont désactivés */
+input[type="text"]:disabled {
+  background: #ccc;
+}
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input[type="text"]:disabled { background: #ccc; }
+
+ +

HTML

+ +
<form action="#">
+  <fieldset>
+    <legend>Adresse de livraison</legend>
+    <input type="text" placeholder="Nom">
+    <input type="text" placeholder="Adresse">
+    <input type="text" placeholder="Code postal">
+  </fieldset>
+  <fieldset id="facturation">
+    <legend>Adresse de facturation</legend>
+    <label for="facturation_livraison">Identique à l'adresse de livraison</label>
+    <input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked>
+    <br />
+    <input type="text" placeholder="Nom" disabled>
+    <input type="text" placeholder="Adresse" disabled>
+    <input type="text" placeholder="Code postal" disabled>
+  </fieldset>
+</form>
+
+ +

JavaScript

+ +
function toggleBilling() {
+  var billingItems = document.querySelectorAll('#facturation input[type="text"]');
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '300px', '250px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux formulaires.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 Basic UI')}}Référence à la spécification de niveau 3 sur les sélecteurs.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Définition de la pseudo-classe mais sans la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.disabled")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_empty/index.html b/files/fr/web/css/_colon_empty/index.html deleted file mode 100644 index 81091c8db4..0000000000 --- a/files/fr/web/css/_colon_empty/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: ':empty' -slug: Web/CSS/:empty -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: Web/CSS/:empty ---- -
{{CSSRef}}
- -

La pseudo-classe :empty correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec {{cssxref("content")}} n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).

- -
/* Cible tous les éléments <div> qui */
-/* n'ont  pas de contenu */
-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é.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
body {
-  display: flex;
-  justify-content: space-around;
-}
-
-.box {
-  background: red;
-  height: 100px;
-  width: 100px;
-}
-
-.box:empty {
-  background: blue;
-}
-
- -

HTML

- -
<div class="box"><!-- Je serai bleu. --></div>
-<div class="box">Je serai rouge.</div>
-<div class="box">
-    <!-- Je serai rouge à cause des espaces autour du commentaire -->
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples','100%','105')}}

- -

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.

- -

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

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty")}}{{Spec2('CSS4 Selectors')}}Modifier afin d'obtenir le comportement de {{CSSxRef(":-moz-only-whitespace")}}.
{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty")}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.empty")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_empty/index.md b/files/fr/web/css/_colon_empty/index.md new file mode 100644 index 0000000000..81091c8db4 --- /dev/null +++ b/files/fr/web/css/_colon_empty/index.md @@ -0,0 +1,105 @@ +--- +title: ':empty' +slug: Web/CSS/:empty +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:empty +--- +
{{CSSRef}}
+ +

La pseudo-classe :empty correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec {{cssxref("content")}} n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).

+ +
/* Cible tous les éléments <div> qui */
+/* n'ont  pas de contenu */
+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é.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
body {
+  display: flex;
+  justify-content: space-around;
+}
+
+.box {
+  background: red;
+  height: 100px;
+  width: 100px;
+}
+
+.box:empty {
+  background: blue;
+}
+
+ +

HTML

+ +
<div class="box"><!-- Je serai bleu. --></div>
+<div class="box">Je serai rouge.</div>
+<div class="box">
+    <!-- Je serai rouge à cause des espaces autour du commentaire -->
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','100%','105')}}

+ +

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.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty")}}{{Spec2('CSS4 Selectors')}}Modifier afin d'obtenir le comportement de {{CSSxRef(":-moz-only-whitespace")}}.
{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty")}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.empty")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_enabled/index.html b/files/fr/web/css/_colon_enabled/index.html deleted file mode 100644 index 09241724f6..0000000000 --- a/files/fr/web/css/_colon_enabled/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: ':enabled' -slug: 'Web/CSS/:enabled' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:enabled' ---- -
{{CSSRef}}
- -

La pseudo-classe :enabled permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).

- -
/* Cible n'importe quel élément <input> actif */
-input:enabled {
-  color: #22AA22;
-}
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

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">
-  <label for="PremierChamp">Premier champ (activé) :</label>
-  <input type="text" id="PremierChamp" value="Titi"><br />
-
-  <label for="DeuxiemeChamp">Deuxième champ (désactivé) :</label>
-  <input type="text" id="DeuxiemeChamp" value="Toto" disabled="disabled"><br />
-
-  <input type="button" value="Envoyer"/>
-</form>
-
- -

CSS

- -
input:enabled {
-  color: #22AA22;
-}
-
-input:disabled {
-  color: #D9D9D9;
-}
-
- -

Résultat

- -
{{EmbedLiveSample("Exemples",550,95)}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique dans le contexte de HTML et des formulaires.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Lien vers la spécification des sélecteurs de niveau 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.enabled")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_enabled/index.md b/files/fr/web/css/_colon_enabled/index.md new file mode 100644 index 0000000000..09241724f6 --- /dev/null +++ b/files/fr/web/css/_colon_enabled/index.md @@ -0,0 +1,102 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

La pseudo-classe :enabled permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).

+ +
/* Cible n'importe quel élément <input> actif */
+input:enabled {
+  color: #22AA22;
+}
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

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">
+  <label for="PremierChamp">Premier champ (activé) :</label>
+  <input type="text" id="PremierChamp" value="Titi"><br />
+
+  <label for="DeuxiemeChamp">Deuxième champ (désactivé) :</label>
+  <input type="text" id="DeuxiemeChamp" value="Toto" disabled="disabled"><br />
+
+  <input type="button" value="Envoyer"/>
+</form>
+
+ +

CSS

+ +
input:enabled {
+  color: #22AA22;
+}
+
+input:disabled {
+  color: #D9D9D9;
+}
+
+ +

Résultat

+ +
{{EmbedLiveSample("Exemples",550,95)}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique dans le contexte de HTML et des formulaires.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Lien vers la spécification des sélecteurs de niveau 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.enabled")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_first-child/index.html b/files/fr/web/css/_colon_first-child/index.html deleted file mode 100644 index f82d5e854b..0000000000 --- a/files/fr/web/css/_colon_first-child/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: ':first-child' -slug: 'Web/CSS/:first-child' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:first-child' ---- -
{{CSSRef}}
- -

La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.

- -
/* Cible n'importe quel élément <p> qui est */
-/* le premier fils de son élément parent */
-p:first-child {
-  color: lime;
-  background-color: black;
-}
- -
-

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

- -{{csssyntax}} - -

Exemples

- -

Premier exemple

- -

CSS

- -
p:first-child {
-  color: lime;
-  background-color: black;
-  padding: 5px;
-}
- -

HTML

- -
<div>
-  <p>Ce paragraphe est mis en forme car c'est un élément
-     p ET que c'est le premier fils de l'élément div.</p>
-  <p>En revanche, ce paragraphe n'est pas mis en forme
-     car ce n'est pas le premier !</p>
-</div>
-
-<div>
-  <h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
-      un paragraphe.</h2>
-  <p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
-     le premier fils !</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Premier_exemple','100%',300)}}

- -

Utiliser les listes non ordonnées

- -

CSS

- -
li{
-  color:blue;
-}
-
-li:first-child{
-  color:green;
-}
- -

HTML

- -
<ul>
-  <li>Élément 1 de la liste</li>
-  <li>Élément 2</li>
-  <li>Élément 3</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Utiliser_les_listes_non_ordonnées',300,100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Les éléments correspondants ne doivent pas avoir nécessairement de parent.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.first-child")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_first-child/index.md b/files/fr/web/css/_colon_first-child/index.md new file mode 100644 index 0000000000..f82d5e854b --- /dev/null +++ b/files/fr/web/css/_colon_first-child/index.md @@ -0,0 +1,126 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.

+ +
/* Cible n'importe quel élément <p> qui est */
+/* le premier fils de son élément parent */
+p:first-child {
+  color: lime;
+  background-color: black;
+}
+ +
+

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

+ +{{csssyntax}} + +

Exemples

+ +

Premier exemple

+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+ +

HTML

+ +
<div>
+  <p>Ce paragraphe est mis en forme car c'est un élément
+     p ET que c'est le premier fils de l'élément div.</p>
+  <p>En revanche, ce paragraphe n'est pas mis en forme
+     car ce n'est pas le premier !</p>
+</div>
+
+<div>
+  <h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
+      un paragraphe.</h2>
+  <p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
+     le premier fils !</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Premier_exemple','100%',300)}}

+ +

Utiliser les listes non ordonnées

+ +

CSS

+ +
li{
+  color:blue;
+}
+
+li:first-child{
+  color:green;
+}
+ +

HTML

+ +
<ul>
+  <li>Élément 1 de la liste</li>
+  <li>Élément 2</li>
+  <li>Élément 3</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Utiliser_les_listes_non_ordonnées',300,100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Les éléments correspondants ne doivent pas avoir nécessairement de parent.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.first-child")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_first-of-type/index.html b/files/fr/web/css/_colon_first-of-type/index.html deleted file mode 100644 index c4582933bd..0000000000 --- a/files/fr/web/css/_colon_first-of-type/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: ':first-of-type' -slug: 'Web/CSS/:first-of-type' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:first-of-type' ---- -
{{CSSRef}}
- -

La pseudo-classe :first-of-type permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).

- -
/* Cible le premier élément <p> d'un type donné */
-/* parmi ses éléments voisins */
-p:first-of-type {
-  color: red;
-}
- -
-

Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div :first-of-type {
-  background-color: lime;
-}
- -

HTML

- -
<div>
-  <span>Voici le premier span !</span>
-  <span>Un autre span, pas le premier.</span>
-  <span>Quid de cet <em>élément imbriqué </em>?</span>
-  <b>Un autre type d'élément.</b>
-  <span>Ce type là est déjà apparu.</span>
-</div>
-
- -

Résultat

- -
{{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 : Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le <div>.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Les éléments ciblés ne doivent pas nécessairement avoir de parent.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.first-of-type")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_first-of-type/index.md b/files/fr/web/css/_colon_first-of-type/index.md new file mode 100644 index 0000000000..c4582933bd --- /dev/null +++ b/files/fr/web/css/_colon_first-of-type/index.md @@ -0,0 +1,93 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-classe :first-of-type permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).

+ +
/* Cible le premier élément <p> d'un type donné */
+/* parmi ses éléments voisins */
+p:first-of-type {
+  color: red;
+}
+ +
+

Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div :first-of-type {
+  background-color: lime;
+}
+ +

HTML

+ +
<div>
+  <span>Voici le premier span !</span>
+  <span>Un autre span, pas le premier.</span>
+  <span>Quid de cet <em>élément imbriqué </em>?</span>
+  <b>Un autre type d'élément.</b>
+  <span>Ce type là est déjà apparu.</span>
+</div>
+
+ +

Résultat

+ +
{{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 : Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le <div>.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Les éléments ciblés ne doivent pas nécessairement avoir de parent.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.first-of-type")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_first/index.html b/files/fr/web/css/_colon_first/index.html deleted file mode 100644 index 00a1c2771e..0000000000 --- a/files/fr/web/css/_colon_first/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: ':first' -slug: Web/CSS/:first -tags: - - CSS - - Pseudo-classe - - Reference -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 */
-/* lorsqu'on imprime */
-@page :first {
-  margin-left: 50%;
-  margin-top: 50%;
-}
- -

Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :

- - - -

De plus, seules les unités absolues peuvent être utilisées pour les marges.

- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
@page :first {
-  margin-left: 50%;
-  margin-top: 50%;
-}
-
-p {
-  page-break-after: always;
-}
- -

HTML

- -
<p>Première page.</p>
-<p>Deuxième page.</p>
-<button>Imprimer</button>
- -

JavaScript

- -
document.querySelector("button").addEventListener('click', () => {
-  window.print();
-});
- -

Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.

- -

{{EmbedLiveSample("Exemples","80%","150px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Aucune modification.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.first")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_first/index.md b/files/fr/web/css/_colon_first/index.md new file mode 100644 index 0000000000..00a1c2771e --- /dev/null +++ b/files/fr/web/css/_colon_first/index.md @@ -0,0 +1,98 @@ +--- +title: ':first' +slug: Web/CSS/:first +tags: + - CSS + - Pseudo-classe + - Reference +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 */
+/* lorsqu'on imprime */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +

Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :

+ + + +

De plus, seules les unités absolues peuvent être utilisées pour les marges.

+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+ +

HTML

+ +
<p>Première page.</p>
+<p>Deuxième page.</p>
+<button>Imprimer</button>
+ +

JavaScript

+ +
document.querySelector("button").addEventListener('click', () => {
+  window.print();
+});
+ +

Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.

+ +

{{EmbedLiveSample("Exemples","80%","150px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Aucune modification.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.first")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_focus-visible/index.html b/files/fr/web/css/_colon_focus-visible/index.html deleted file mode 100644 index 8354f4329b..0000000000 --- a/files/fr/web/css/_colon_focus-visible/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ':focus-visible' -slug: 'Web/CSS/:focus-visible' -tags: - - CSS - - Pseudo-classe - - Reference - - Web -translation_of: 'Web/CSS/:focus-visible' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe :focus-visible s'applique lorsqu'un élément correspond à la pseudo-classe {{cssxref("focus")}} et que l'agent utilisateur détermine, via une heuristique, que le focus devrait être mis en évidence sur l'élément (la plupart des navigateurs affichent un contour en surbrillance par défaut).

- -

Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier).

- -

On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée  :-moz-focusring. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations.

- -

Syntaxe

- -
:focus-visible
- -

Exemples

- -

Exemple simple

- -

Dans cet exemple, le sélecteur :focus-visible utilise le comportement de l'agent utilisateur afin de déterminer lorsqu'il doit s'appliquer. Pour utiliser l'exemple, comparez ce qui se produit selon que vous utilisez une souris ou un clavier et notez la différence avec les éléments ciblés par :focus.

- -

HTML

- -
<input value="Styles par défaut"><br>
-<button>Styles par défaut</button><br>
-<input class="focus-only" value=":focus only"><br>
-<button class="focus-only">:focus only</button><br>
-<input class="focus-visible-only" value=":focus-visible only"><br>
-<button class="focus-visible-only">:focus-visible only</button>
- -

CSS

- -
input, button {
-  margin: 10px;
-}
-
-.focus-only:focus {
-  outline: 2px solid black;
-}
-
-.focus-visible-only:focus-visible {
-  outline: 4px dashed darkorange;
-}
-
- -

{{EmbedLiveSample('Exemple_simple', '100%', '300')}}

- -

Choisir d'afficher l’indicateur de focus

- -

Un contrôle personnalisé (par exemple un bouton provenant d'un custom element) peut utiliser :focus-visible afin d'appliquer ou non un indicateur de focus pour la navigation au clavier afin de calquer au comportement natif de {{htmlelement("button")}}.

- -

HTML

- -
<custom-button tabindex="0" role="button">Cliquez-moi</custom-button>
- -

CSS

- -
custom-button {
-  display: inline-block;
-  margin: 10px;
-}
-
-custom-button:focus {
-  /* Fournir une alternative pour les navigateurs
-     qui ne prennent pas en charge :focus-visible */
-  outline: 2px solid red;
-  background: lightgrey;
-}
-
-custom-button:focus:not(:focus-visible) {
-  /* Retirer l'indicateur de focus à la souris
-     pour les navigateurs qui prennent en charge :focus-visible */
-  background: transparent;
-}
-
-custom-button:focus-visible {
-  /* Dessiner un contour pour les navigateurs qui
-     prennent en charge :focus-visible lorsque la
-     navigation est au clavier */
-  outline: 4px dashed darkorange;
-  background: transparent;
-}
- -

{{EmbedLiveSample("Choisir_d'afficher_l’indicateur_de_focus", '100%', '300')}}

- -

Accessibilité

- -

Troubles de la vision

- -

Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast nécessite un contraste minimum de 3 à 1.

- - - -

Troubles cognitifs

- -

L'apparition ou la disparition d'un indicateur de focus peut être source de confusion pour les personnes souffrant de troubles cognitifs ou pour les personnes qui ne sont pas habituées à ces interfaces.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.focus-visible")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_focus-visible/index.md b/files/fr/web/css/_colon_focus-visible/index.md new file mode 100644 index 0000000000..8354f4329b --- /dev/null +++ b/files/fr/web/css/_colon_focus-visible/index.md @@ -0,0 +1,135 @@ +--- +title: ':focus-visible' +slug: 'Web/CSS/:focus-visible' +tags: + - CSS + - Pseudo-classe + - Reference + - Web +translation_of: 'Web/CSS/:focus-visible' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :focus-visible s'applique lorsqu'un élément correspond à la pseudo-classe {{cssxref("focus")}} et que l'agent utilisateur détermine, via une heuristique, que le focus devrait être mis en évidence sur l'élément (la plupart des navigateurs affichent un contour en surbrillance par défaut).

+ +

Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier).

+ +

On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée  :-moz-focusring. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations.

+ +

Syntaxe

+ +
:focus-visible
+ +

Exemples

+ +

Exemple simple

+ +

Dans cet exemple, le sélecteur :focus-visible utilise le comportement de l'agent utilisateur afin de déterminer lorsqu'il doit s'appliquer. Pour utiliser l'exemple, comparez ce qui se produit selon que vous utilisez une souris ou un clavier et notez la différence avec les éléments ciblés par :focus.

+ +

HTML

+ +
<input value="Styles par défaut"><br>
+<button>Styles par défaut</button><br>
+<input class="focus-only" value=":focus only"><br>
+<button class="focus-only">:focus only</button><br>
+<input class="focus-visible-only" value=":focus-visible only"><br>
+<button class="focus-visible-only">:focus-visible only</button>
+ +

CSS

+ +
input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+
+ +

{{EmbedLiveSample('Exemple_simple', '100%', '300')}}

+ +

Choisir d'afficher l’indicateur de focus

+ +

Un contrôle personnalisé (par exemple un bouton provenant d'un custom element) peut utiliser :focus-visible afin d'appliquer ou non un indicateur de focus pour la navigation au clavier afin de calquer au comportement natif de {{htmlelement("button")}}.

+ +

HTML

+ +
<custom-button tabindex="0" role="button">Cliquez-moi</custom-button>
+ +

CSS

+ +
custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Fournir une alternative pour les navigateurs
+     qui ne prennent pas en charge :focus-visible */
+  outline: 2px solid red;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Retirer l'indicateur de focus à la souris
+     pour les navigateurs qui prennent en charge :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Dessiner un contour pour les navigateurs qui
+     prennent en charge :focus-visible lorsque la
+     navigation est au clavier */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}
+ +

{{EmbedLiveSample("Choisir_d'afficher_l’indicateur_de_focus", '100%', '300')}}

+ +

Accessibilité

+ +

Troubles de la vision

+ +

Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast nécessite un contraste minimum de 3 à 1.

+ + + +

Troubles cognitifs

+ +

L'apparition ou la disparition d'un indicateur de focus peut être source de confusion pour les personnes souffrant de troubles cognitifs ou pour les personnes qui ne sont pas habituées à ces interfaces.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.focus-visible")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_focus-within/index.html b/files/fr/web/css/_colon_focus-within/index.html deleted file mode 100644 index 96f6ec7d91..0000000000 --- a/files/fr/web/css/_colon_focus-within/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ':focus-within' -slug: 'Web/CSS/:focus-within' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:focus-within' ---- -
{{CSSRef}}
- -

La pseudo-classe :focus-within s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du Shadow DOM. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).

- -
/* Cible n'importe quel <div> lorsqu'un */
-/* de ses descendants a reçu le focus */
-div:focus-within {
-  background: yellow;
-}
- -

Cette pseudo-classe s'applique également aux descendants de l'élément ciblé ainsi qu'aux descendants dont la racine est la racine d'un arbre du {{Glossary("Shadow DOM")}}.

- -

Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire lorsque l'utilisateur passe le focus sur l'un de ses éléments {{HTMLElement("input")}}.

- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.name-container {
-  padding: 4px;
-}
-
-.name-container:focus-within {
-  background: yellow;
-}
-
-input {
-  margin: 4px;
-}
- -

HTML

- -
<p>
-  L'élément div ci-après aura un fond jaune
-  si l'un des deux champs de saisie a le focus.
-</p>
-<div class="name-container">
-  <label for="prenom">
-    Prénom :
-    <input id="prenom" placeholder="Prénom" type="text">
-  </label>
-  <label for="nom">
-    Nom :
-    <input id="nom" placeholder="Nom" type="text">
-  </label>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 500, 150)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.focus-within")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_focus-within/index.md b/files/fr/web/css/_colon_focus-within/index.md new file mode 100644 index 0000000000..96f6ec7d91 --- /dev/null +++ b/files/fr/web/css/_colon_focus-within/index.md @@ -0,0 +1,94 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

La pseudo-classe :focus-within s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du Shadow DOM. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).

+ +
/* Cible n'importe quel <div> lorsqu'un */
+/* de ses descendants a reçu le focus */
+div:focus-within {
+  background: yellow;
+}
+ +

Cette pseudo-classe s'applique également aux descendants de l'élément ciblé ainsi qu'aux descendants dont la racine est la racine d'un arbre du {{Glossary("Shadow DOM")}}.

+ +

Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire lorsque l'utilisateur passe le focus sur l'un de ses éléments {{HTMLElement("input")}}.

+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.name-container {
+  padding: 4px;
+}
+
+.name-container:focus-within {
+  background: yellow;
+}
+
+input {
+  margin: 4px;
+}
+ +

HTML

+ +
<p>
+  L'élément div ci-après aura un fond jaune
+  si l'un des deux champs de saisie a le focus.
+</p>
+<div class="name-container">
+  <label for="prenom">
+    Prénom :
+    <input id="prenom" placeholder="Prénom" type="text">
+  </label>
+  <label for="nom">
+    Nom :
+    <input id="nom" placeholder="Nom" type="text">
+  </label>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 500, 150)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.focus-within")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_focus/index.html b/files/fr/web/css/_colon_focus/index.html deleted file mode 100644 index 2f2b20b790..0000000000 --- a/files/fr/web/css/_colon_focus/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: ':focus' -slug: 'Web/CSS/:focus' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:focus' ---- -
{{CSSRef}}
- -

La pseudo-classe :focus permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).

- -
/* Cible n'importe quel élément <input> */
-/* uniquement lorsqu'il a le focus */
-input:focus {
-  color: red;
-}
- -

Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents (comme {{cssxref(":checked")}}, {{cssxref(":enabled")}} mais pas comme {{cssxref(":active")}} ou {{cssxref(":hover")}}).

- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.prenom:focus {
-  background: yellow;
-  color: red;
-}
-
-.nom:focus {
-  background: yellow;
-  color: lime;
-}
- -

HTML

- -
<input class="prenom" value="Rouge si focus">
-<input class="nom" value="Vert si focus">
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '100%', 40)}}

- -

Accessibilité

- -

Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast nécessite un contraste minimum de 3 à 1.

- - - -

:focus { outline: none; }

- -

Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre indicateur qui respecte la recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast :

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Définition de la sémantique relative à HTML.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.focus")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_focus/index.md b/files/fr/web/css/_colon_focus/index.md new file mode 100644 index 0000000000..2f2b20b790 --- /dev/null +++ b/files/fr/web/css/_colon_focus/index.md @@ -0,0 +1,108 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

La pseudo-classe :focus permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).

+ +
/* Cible n'importe quel élément <input> */
+/* uniquement lorsqu'il a le focus */
+input:focus {
+  color: red;
+}
+ +

Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents (comme {{cssxref(":checked")}}, {{cssxref(":enabled")}} mais pas comme {{cssxref(":active")}} ou {{cssxref(":hover")}}).

+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.prenom:focus {
+  background: yellow;
+  color: red;
+}
+
+.nom:focus {
+  background: yellow;
+  color: lime;
+}
+ +

HTML

+ +
<input class="prenom" value="Rouge si focus">
+<input class="nom" value="Vert si focus">
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', 40)}}

+ +

Accessibilité

+ +

Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast nécessite un contraste minimum de 3 à 1.

+ + + +

:focus { outline: none; }

+ +

Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre indicateur qui respecte la recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast :

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Définition de la sémantique relative à HTML.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.focus")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_fullscreen/index.html b/files/fr/web/css/_colon_fullscreen/index.html deleted file mode 100644 index 70a63996e7..0000000000 --- a/files/fr/web/css/_colon_fullscreen/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: ':fullscreen' -slug: 'Web/CSS/:fullscreen' -tags: - - CSS - - Fullscreen API - - Pseudo-classe - - Reference -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.

- -

Syntaxe

- -{{csssyntax}} - -

Notes d'utilisation

- -

La pseudo-classe :fullscreen permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.

- -

Exemples

- -

Dans cet exemple, on change la couleur d'un bouton selon que le document est en plein écran ou non. On n'utilise pas JavaScript pour changer les styles.

- -

CSS

- -

On utilise deux règles. La première qui permet de définir la couleur d'arrière plan pour le bouton « Passer en mode plein écran » lorsque l'élément n'est pas en plein écran. Pour distinguer ce cas, on utilise :not(:fullscreen), qui permet de cibler les éléments qui n'ont pas la pseudo-classe :fullscreen.

- -
#fs-toggle:not(:fullscreen) {
-  background-color: #afa;
-}
-
- -

Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo-classe :fullscreen et on définit une autre couleur (ici un rouge pâle).

- -
#fs-toggle:fullscreen {
-  background-color: #faa;
-}
- -

HTML

- -
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
-
-<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
-  change the style of a button used to toggle full-screen mode on and off,
-  entirely using CSS.</p>
-
-<button id="fs-toggle">Toggle Fullscreen</button>
- -

Dans ce fragment de code HTML, c'est l'élément {{HTMLElement("button")}} avec l'identifiant "fs-toggle" qui changera d'une couleur à une autre selon que le document est en plein écran ou non.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.fullscreen")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_fullscreen/index.md b/files/fr/web/css/_colon_fullscreen/index.md new file mode 100644 index 0000000000..70a63996e7 --- /dev/null +++ b/files/fr/web/css/_colon_fullscreen/index.md @@ -0,0 +1,91 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Fullscreen API + - Pseudo-classe + - Reference +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.

+ +

Syntaxe

+ +{{csssyntax}} + +

Notes d'utilisation

+ +

La pseudo-classe :fullscreen permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.

+ +

Exemples

+ +

Dans cet exemple, on change la couleur d'un bouton selon que le document est en plein écran ou non. On n'utilise pas JavaScript pour changer les styles.

+ +

CSS

+ +

On utilise deux règles. La première qui permet de définir la couleur d'arrière plan pour le bouton « Passer en mode plein écran » lorsque l'élément n'est pas en plein écran. Pour distinguer ce cas, on utilise :not(:fullscreen), qui permet de cibler les éléments qui n'ont pas la pseudo-classe :fullscreen.

+ +
#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+
+ +

Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo-classe :fullscreen et on définit une autre couleur (ici un rouge pâle).

+ +
#fs-toggle:fullscreen {
+  background-color: #faa;
+}
+ +

HTML

+ +
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
+
+<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.</p>
+
+<button id="fs-toggle">Toggle Fullscreen</button>
+ +

Dans ce fragment de code HTML, c'est l'élément {{HTMLElement("button")}} avec l'identifiant "fs-toggle" qui changera d'une couleur à une autre selon que le document est en plein écran ou non.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.fullscreen")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_future/index.html b/files/fr/web/css/_colon_future/index.html deleted file mode 100644 index 5f52b3f062..0000000000 --- a/files/fr/web/css/_colon_future/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: ':future' -slug: 'Web/CSS/:future' -browser-compat: css.selectors.future -translation_of: Web/CSS/:future ---- -

{{CSSRef}}

- -

Le sélecteur de pseudo-classe CSS :future est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement après un élément correspondant à {{cssxref(":current")}}. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.

- -
:future(p, span) {
-  display: none;
-}
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
:future(p, span) {
-  display: none;
-}
- -

HTML

- -
<video controls preload="metadata">
-  <source src="video.mp4" type="video/mp4" />
-  <source src="video.webm" type="video/webm" />
-  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
-</video>
- -

WebVTT 

- -
FICHIER WEBVTT
-
-1
-00:00:03.500 --> 00:00:05.000
-Voici le premier sous-titre
-
-2
-00:00:06.000 --> 00:00:09.000
-Voici le second sous-titre
-
-3
-00:00:11.000 --> 00:00:19.000
-Voici le troisième sous-titre
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_future/index.md b/files/fr/web/css/_colon_future/index.md new file mode 100644 index 0000000000..5f52b3f062 --- /dev/null +++ b/files/fr/web/css/_colon_future/index.md @@ -0,0 +1,66 @@ +--- +title: ':future' +slug: 'Web/CSS/:future' +browser-compat: css.selectors.future +translation_of: Web/CSS/:future +--- +

{{CSSRef}}

+ +

Le sélecteur de pseudo-classe CSS :future est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement après un élément correspondant à {{cssxref(":current")}}. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.

+ +
:future(p, span) {
+  display: none;
+}
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
:future(p, span) {
+  display: none;
+}
+ +

HTML

+ +
<video controls preload="metadata">
+  <source src="video.mp4" type="video/mp4" />
+  <source src="video.webm" type="video/webm" />
+  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
+</video>
+ +

WebVTT 

+ +
FICHIER WEBVTT
+
+1
+00:00:03.500 --> 00:00:05.000
+Voici le premier sous-titre
+
+2
+00:00:06.000 --> 00:00:09.000
+Voici le second sous-titre
+
+3
+00:00:11.000 --> 00:00:19.000
+Voici le troisième sous-titre
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_has/index.html b/files/fr/web/css/_colon_has/index.html deleted file mode 100644 index 6b2f7ff50e..0000000000 --- a/files/fr/web/css/_colon_has/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: ':has' -slug: 'Web/CSS/:has' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference - - Sélecteur -translation_of: 'Web/CSS/:has' ---- -
{{CSSRef}}
- -

La pseudo-classe :has() permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément).

- -

Cette pseudo-classe :has() prend en paramètre une liste de sélecteurs.

- -
-

Note : Pour des raisons de performances et dans la spécification actuelle, has() n'est pas classé comme un sélecteur dynamique et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.

-
- -
/* Avec cette ligne de JavaScript, on récupère  */
-/* tous les éléments <a> qui ont un fils direct */
-/* qui est un élément <img> */
-/* Attention, actuellement cette fonction n'est */
-/* pas prise en charge par les navigateurs et   */
-/* n'est pas conçue pour fonctionner dans les   */
-/* feuilles de style */
-var test = document.querySelector('a:has(> img)');
- -

Syntaxe

- -
:has(liste_selecteurs) { proprietes }
- -

Exemples

- -

Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :

- -
a:has(> img)
-
- -

Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :

- -
h1:has(+ p)
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#relational", ":has()")}}{{Spec2("CSS4 Selectors")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.has")}}

diff --git a/files/fr/web/css/_colon_has/index.md b/files/fr/web/css/_colon_has/index.md new file mode 100644 index 0000000000..6b2f7ff50e --- /dev/null +++ b/files/fr/web/css/_colon_has/index.md @@ -0,0 +1,67 @@ +--- +title: ':has' +slug: 'Web/CSS/:has' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference + - Sélecteur +translation_of: 'Web/CSS/:has' +--- +
{{CSSRef}}
+ +

La pseudo-classe :has() permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément).

+ +

Cette pseudo-classe :has() prend en paramètre une liste de sélecteurs.

+ +
+

Note : Pour des raisons de performances et dans la spécification actuelle, has() n'est pas classé comme un sélecteur dynamique et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.

+
+ +
/* Avec cette ligne de JavaScript, on récupère  */
+/* tous les éléments <a> qui ont un fils direct */
+/* qui est un élément <img> */
+/* Attention, actuellement cette fonction n'est */
+/* pas prise en charge par les navigateurs et   */
+/* n'est pas conçue pour fonctionner dans les   */
+/* feuilles de style */
+var test = document.querySelector('a:has(> img)');
+ +

Syntaxe

+ +
:has(liste_selecteurs) { proprietes }
+ +

Exemples

+ +

Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :

+ +
a:has(> img)
+
+ +

Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :

+ +
h1:has(+ p)
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#relational", ":has()")}}{{Spec2("CSS4 Selectors")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.has")}}

diff --git a/files/fr/web/css/_colon_host()/index.html b/files/fr/web/css/_colon_host()/index.html deleted file mode 100644 index f2bbe1b429..0000000000 --- a/files/fr/web/css/_colon_host()/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: ':host()' -slug: 'Web/CSS/:host()' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:host()' ---- -
{{CSSRef}}
- -

La fonction de pseudo-classe :host() permet de sélectionner l'hôte du shadow DOM contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.

- -

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.

-
- -
/* On cible l'hôte du shadow DOM uniquement s'il
-   correspond au sélecteur passé en argument */
-:host(.special-custom-element) {
-  font-weight: bold;
-}
-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Les fragments de code suivants sont extraits du dépôt d'exemple host-selectors (voir le résultat live).

- -

Dans cet exemple, on dispose d'un élément personnalisé,  <context-span>, qui peut contenir du texte :

- -
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
- -

Dans le constructeur de l'élément, on crée un élément style et un élément span. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément style recevra quelques règles CSS :

- -
let style = document.createElement('style');
-let span = document.createElement('span');
-span.textContent = this.textContent;
-
-const shadowRoot = this.attachShadow({mode: 'open'});
-shadowRoot.appendChild(style);
-shadowRoot.appendChild(span);
-
-style.textContent = 'span:hover { text-decoration: underline; }' +
-                    ':host-context(h1) { font-style: italic; }' +
-                    ':host-context(h1):after { content: " - no links in headers!" }' +
-                    ':host-context(article, aside) { color: gray; }' +
-                    ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
- -

La règle :host(.footer) { color : red; } s'applique à toutes les instances de l'élément <context-span> (il s'agit ici de l'hôte) du document qui possèdent la classe footer. Ici, pour ces éléments donnés, on utilise une couleur spécifique.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#host-selector', ':host()')}}{{Spec2('CSS Scope')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.hostfunction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_host()/index.md b/files/fr/web/css/_colon_host()/index.md new file mode 100644 index 0000000000..f2bbe1b429 --- /dev/null +++ b/files/fr/web/css/_colon_host()/index.md @@ -0,0 +1,87 @@ +--- +title: ':host()' +slug: 'Web/CSS/:host()' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:host()' +--- +
{{CSSRef}}
+ +

La fonction de pseudo-classe :host() permet de sélectionner l'hôte du shadow DOM contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.

+ +

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.

+
+ +
/* On cible l'hôte du shadow DOM uniquement s'il
+   correspond au sélecteur passé en argument */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Les fragments de code suivants sont extraits du dépôt d'exemple host-selectors (voir le résultat live).

+ +

Dans cet exemple, on dispose d'un élément personnalisé,  <context-span>, qui peut contenir du texte :

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

Dans le constructeur de l'élément, on crée un élément style et un élément span. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément style recevra quelques règles CSS :

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

La règle :host(.footer) { color : red; } s'applique à toutes les instances de l'élément <context-span> (il s'agit ici de l'hôte) du document qui possèdent la classe footer. Ici, pour ces éléments donnés, on utilise une couleur spécifique.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#host-selector', ':host()')}}{{Spec2('CSS Scope')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.hostfunction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_host-context()/index.html b/files/fr/web/css/_colon_host-context()/index.html deleted file mode 100644 index 6457aa73c3..0000000000 --- a/files/fr/web/css/_colon_host-context()/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ':host-context()' -slug: 'Web/CSS/:host-context()' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference - - Web -translation_of: 'Web/CSS/:host-context()' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe :host-context() est une fonction qui sélectionne l'hôte (shadow host) du shadow DOM qui contient le CSS utilisé à l'intérieur, uniquement si le sélecteur fourni en argument correspond à l'ancêtre de l'hôte selon l'arborescence du DOM.

- -

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.

-
- -
/* Cible un hôte uniquement si c'est un descendant
-   du sélecteur passé en argument */
-:host-context(h1) {
-  font-weight: bold;
-}
-
-:host-context(main article) {
-  font-weight: bold;
-}
-
-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Les fragments de code suivants sont tirés du dépôt host-selectors (voir le résultat live).

- -

Dans cet exemple, on dispose d'un élément personnalisé — <context-span> — au sein duquel on peut avoir du texte :

- -
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
- -

Dans le constructeur de l'élément, on crée des éléments style et span et on remplit le span avec le contenu de l'élément personnalisé puis on applique certains règles CSS pour l'élément style :

- -
let style = document.createElement('style');
-let span = document.createElement('span');
-span.textContent = this.textContent;
-
-const shadowRoot = this.attachShadow({mode: 'open'});
-shadowRoot.appendChild(style);
-shadowRoot.appendChild(span);
-
-style.textContent = 'span:hover { text-decoration: underline; }' +
-                    ':host-context(h1) { font-style: italic; }' +
-                    ':host-context(h1):after { content: " - no links in headers!" }' +
-                    ':host-context(article, aside) { color: gray; }' +
-                    ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
- -

Les règles :host-context(h1) { font-style: italic; } et :host-context(h1):after { content: " - no links in headers!" } permettent de mettre en forme l'instance de l'élément <context-span> (l'hôte de cette instance) à l'intérieur de l'élément <h1>. Nous avons utilisé cet hôte afin d'indiquer clairement qu'un tel élément personnalisé ne doit pas apparaître dans un titre <h1>.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#host-selector', ':host-context()')}}{{Spec2('CSS Scope')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.host-context")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_host-context()/index.md b/files/fr/web/css/_colon_host-context()/index.md new file mode 100644 index 0000000000..6457aa73c3 --- /dev/null +++ b/files/fr/web/css/_colon_host-context()/index.md @@ -0,0 +1,94 @@ +--- +title: ':host-context()' +slug: 'Web/CSS/:host-context()' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference + - Web +translation_of: 'Web/CSS/:host-context()' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :host-context() est une fonction qui sélectionne l'hôte (shadow host) du shadow DOM qui contient le CSS utilisé à l'intérieur, uniquement si le sélecteur fourni en argument correspond à l'ancêtre de l'hôte selon l'arborescence du DOM.

+ +

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.

+
+ +
/* Cible un hôte uniquement si c'est un descendant
+   du sélecteur passé en argument */
+:host-context(h1) {
+  font-weight: bold;
+}
+
+:host-context(main article) {
+  font-weight: bold;
+}
+
+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Les fragments de code suivants sont tirés du dépôt host-selectors (voir le résultat live).

+ +

Dans cet exemple, on dispose d'un élément personnalisé — <context-span> — au sein duquel on peut avoir du texte :

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

Dans le constructeur de l'élément, on crée des éléments style et span et on remplit le span avec le contenu de l'élément personnalisé puis on applique certains règles CSS pour l'élément style :

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

Les règles :host-context(h1) { font-style: italic; } et :host-context(h1):after { content: " - no links in headers!" } permettent de mettre en forme l'instance de l'élément <context-span> (l'hôte de cette instance) à l'intérieur de l'élément <h1>. Nous avons utilisé cet hôte afin d'indiquer clairement qu'un tel élément personnalisé ne doit pas apparaître dans un titre <h1>.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#host-selector', ':host-context()')}}{{Spec2('CSS Scope')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.host-context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_host/index.html b/files/fr/web/css/_colon_host/index.html deleted file mode 100644 index e8a2a7a89f..0000000000 --- a/files/fr/web/css/_colon_host/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: ':host' -slug: 'Web/CSS/:host' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:host' ---- -
{{CSSRef}}
- -

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.

-
- -
/* Cible la racine d'un hôte de shadow DOM */
-:host {
-  font-weight: bold;
-}
-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Les fragments de code qui suivent sont extraits du dépôt d'exemple host-selectors (voir le résultat live).

- -

Dans cet exemple, on dispose d'un élément personnalisé <context-span>  qui peut contenir du texte :

- -
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
- -

Pour le constructeur de cet élément, on crée des éléments style et span : l'élément span recevra le contenu de l'élément personnalisé et style recevra quelques règles CSS :

- -
let style = document.createElement('style');
-let span = document.createElement('span');
-span.textContent = this.textContent;
-
-const shadowRoot = this.attachShadow({mode: 'open'});
-shadowRoot.appendChild(style);
-shadowRoot.appendChild(span);
-
-style.textContent = 'span:hover { text-decoration: underline; }' +
-                    ':host-context(h1) { font-style: italic; }' +
-                    ':host-context(h1):after { content: " - no links in headers!" }' +
-                    ':host-context(article, aside) { color: gray; }' +
-                    ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
- -

La règle :host { background: rgba(0,0,0,0.1); padding: 2px 5px; } permet de cibler l'ensemble des instances de <context-span> (qui est l'hôte ici) dans le document.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#host-selector', ':host')}}{{Spec2('CSS Scope')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.host")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_host/index.md b/files/fr/web/css/_colon_host/index.md new file mode 100644 index 0000000000..e8a2a7a89f --- /dev/null +++ b/files/fr/web/css/_colon_host/index.md @@ -0,0 +1,84 @@ +--- +title: ':host' +slug: 'Web/CSS/:host' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:host' +--- +
{{CSSRef}}
+ +

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.

+
+ +
/* Cible la racine d'un hôte de shadow DOM */
+:host {
+  font-weight: bold;
+}
+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Les fragments de code qui suivent sont extraits du dépôt d'exemple host-selectors (voir le résultat live).

+ +

Dans cet exemple, on dispose d'un élément personnalisé <context-span>  qui peut contenir du texte :

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

Pour le constructeur de cet élément, on crée des éléments style et span : l'élément span recevra le contenu de l'élément personnalisé et style recevra quelques règles CSS :

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

La règle :host { background: rgba(0,0,0,0.1); padding: 2px 5px; } permet de cibler l'ensemble des instances de <context-span> (qui est l'hôte ici) dans le document.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#host-selector', ':host')}}{{Spec2('CSS Scope')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.host")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_hover/index.html b/files/fr/web/css/_colon_hover/index.html deleted file mode 100644 index 3871067514..0000000000 --- a/files/fr/web/css/_colon_hover/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: ':hover' -slug: Web/CSS/:hover -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: Web/CSS/:hover ---- -
{{CSSRef}}
- -

La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.

- -
/* Cible n'importe quel élément <a> lorsque  */
-/* celui-ci est survolé */
-a:hover {
-  background-color: gold;
-}
- -

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}}

- -
-

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

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
a:hover {
-  background-color: gold;
-}
- -

HTML

- -
<p>
-  <a href="#">Ce lien sera écrit sur un fond doré lors du survol.</a>
-</p>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -
-

Note : On peut utiliser la pseudo-classe :checked dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationCommentairesRetours
{{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}} Issues GitHub du WHATWG HTML (en anglais)
{{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}}Permet d'appliquer :hover à n'importe quel pseudo-élément.Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}}  
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}}Définition initiale. 
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.hover")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_hover/index.md b/files/fr/web/css/_colon_hover/index.md new file mode 100644 index 0000000000..3871067514 --- /dev/null +++ b/files/fr/web/css/_colon_hover/index.md @@ -0,0 +1,97 @@ +--- +title: ':hover' +slug: Web/CSS/:hover +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:hover +--- +
{{CSSRef}}
+ +

La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.

+ +
/* Cible n'importe quel élément <a> lorsque  */
+/* celui-ci est survolé */
+a:hover {
+  background-color: gold;
+}
+ +

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}}

+ +
+

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

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
a:hover {
+  background-color: gold;
+}
+ +

HTML

+ +
<p>
+  <a href="#">Ce lien sera écrit sur un fond doré lors du survol.</a>
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +
+

Note : On peut utiliser la pseudo-classe :checked dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationCommentairesRetours
{{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}} Issues GitHub du WHATWG HTML (en anglais)
{{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}}Permet d'appliquer :hover à n'importe quel pseudo-élément.Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}}  
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}}Définition initiale. 
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.hover")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_in-range/index.html b/files/fr/web/css/_colon_in-range/index.html deleted file mode 100644 index b8c69639c9..0000000000 --- a/files/fr/web/css/_colon_in-range/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: ':in-range' -slug: Web/CSS/:in-range -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: Web/CSS/:in-range ---- -
{{CSSRef}}
- -

La pseudo-classe :in-range cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.

- -
/* Cible n'importe quel élément <input>   */
-/* qui possède un intervalle et pour le-  */
-/* quel la valeur est dans cet intervalle */
-input:in-range {
-  background-color: rgba(0, 255, 0, 0.25);
-}
- -

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.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
li {
-  list-style: none;
-  margin-bottom: 1em;
-}
-input {
-  border: 1px solid black;
-}
-input:in-range {
-  background-color: rgba(0, 255, 0, 0.25);
-}
-input:out-of-range {
-  background-color: rgba(255, 0, 0, 0.25);
-  border: 2px solid red;
-}
-input:in-range + label::after {
-  content:' OK';
-}
-input:out-of-range + label::after {
-  content:' non autorisée !';
-}
- -

HTML

- -
<form action="" id="form1">
-  <ul>Les valeurs entre 1 et 10 sont valides.
-    <li>
-      <input id="valeur1" name="valeur1" type="number" placeholder="de 1 à 10" min="1" max="10" value="12">
-      <label for="valeur1">Votre valeur est </label>
-    </li>
-  </ul>
-</form>
- -

Résultat

- -
{{EmbedLiveSample('Exemples',600,140)}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationEtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Définition de la correspondance entre :in-range et les éléments HTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.in-range")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_in-range/index.md b/files/fr/web/css/_colon_in-range/index.md new file mode 100644 index 0000000000..b8c69639c9 --- /dev/null +++ b/files/fr/web/css/_colon_in-range/index.md @@ -0,0 +1,104 @@ +--- +title: ':in-range' +slug: Web/CSS/:in-range +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:in-range +--- +
{{CSSRef}}
+ +

La pseudo-classe :in-range cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.

+ +
/* Cible n'importe quel élément <input>   */
+/* qui possède un intervalle et pour le-  */
+/* quel la valeur est dans cet intervalle */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

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.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+input {
+  border: 1px solid black;
+}
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+input:in-range + label::after {
+  content:' OK';
+}
+input:out-of-range + label::after {
+  content:' non autorisée !';
+}
+ +

HTML

+ +
<form action="" id="form1">
+  <ul>Les valeurs entre 1 et 10 sont valides.
+    <li>
+      <input id="valeur1" name="valeur1" type="number" placeholder="de 1 à 10" min="1" max="10" value="12">
+      <label for="valeur1">Votre valeur est </label>
+    </li>
+  </ul>
+</form>
+ +

Résultat

+ +
{{EmbedLiveSample('Exemples',600,140)}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Définition de la correspondance entre :in-range et les éléments HTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.in-range")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_indeterminate/index.html b/files/fr/web/css/_colon_indeterminate/index.html deleted file mode 100644 index a94a588e4b..0000000000 --- a/files/fr/web/css/_colon_indeterminate/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: ':indeterminate' -slug: Web/CSS/:indeterminate -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: Web/CSS/:indeterminate ---- -
{{CSSRef}}
- -

La pseudo-classe :indeterminate permet de cibler un élément de formulaire dont l'état est indéterminé.

- -
/* Cible n'importe quel élément <input> */
-/* dans un état indéterminé */
-input:indeterminate {
-  background: lime;
-}
- -

Cela inclut :

- - - -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Case à cocher et bouton radio

- -

CSS

- -
input, span {
-  background: red;
-}
-
-:indeterminate, :indeterminate + label {
-  background: lime;
-}
-
- -

HTML

- -
<div>
-  <input type="checkbox" id="checkbox">
-  <label for="checkbox">L'arrière-plan devrait être vert.</label>
-</div>
-<div>
-  <input type="radio" id="radio">
-  <label for="radio">L'arrière-plan devrait être vert.</label>
-</div>
- -

JavaScript

- -
var inputs = document.getElementsByTagName("input");
-for(var i = 0; i < inputs.length; i++) {
-  inputs[i].indeterminate = true;
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Case_à_cocher_et_bouton_radio', '100%', 50)}}

- -

Élément progress

- -

CSS

- -
progress:indeterminate {
-  opacity: 0.5;
-  box-shadow: 0 0 2px 1px red;
-}
-
- -

HTML

- -
<progress/>
-
- -

Résultat

- -

{{EmbedLiveSample('Élément_progress', '100%', 30)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et des contraintes de validation associées.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Définition de la pseudo-classe, sans notion de sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.indeterminate")}}

diff --git a/files/fr/web/css/_colon_indeterminate/index.md b/files/fr/web/css/_colon_indeterminate/index.md new file mode 100644 index 0000000000..a94a588e4b --- /dev/null +++ b/files/fr/web/css/_colon_indeterminate/index.md @@ -0,0 +1,125 @@ +--- +title: ':indeterminate' +slug: Web/CSS/:indeterminate +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:indeterminate +--- +
{{CSSRef}}
+ +

La pseudo-classe :indeterminate permet de cibler un élément de formulaire dont l'état est indéterminé.

+ +
/* Cible n'importe quel élément <input> */
+/* dans un état indéterminé */
+input:indeterminate {
+  background: lime;
+}
+ +

Cela inclut :

+ + + +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Case à cocher et bouton radio

+ +

CSS

+ +
input, span {
+  background: red;
+}
+
+:indeterminate, :indeterminate + label {
+  background: lime;
+}
+
+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">L'arrière-plan devrait être vert.</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">L'arrière-plan devrait être vert.</label>
+</div>
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+for(var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Case_à_cocher_et_bouton_radio', '100%', 50)}}

+ +

Élément progress

+ +

CSS

+ +
progress:indeterminate {
+  opacity: 0.5;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

HTML

+ +
<progress/>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Élément_progress', '100%', 30)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et des contraintes de validation associées.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Définition de la pseudo-classe, sans notion de sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.indeterminate")}}

diff --git a/files/fr/web/css/_colon_invalid/index.html b/files/fr/web/css/_colon_invalid/index.html deleted file mode 100644 index 37ae6658b6..0000000000 --- a/files/fr/web/css/_colon_invalid/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: ':invalid' -slug: 'Web/CSS/:invalid' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:invalid' ---- -
{{CSSRef}}
- -

La pseudo-classe :invalid cible tout élément {{HTMLElement("input")}} pour lequel la validation du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.

- -
/* Cible n'importe quel élément input  */
-/* dont la valeur ne satisfait pas aux */
-/* critères de validation */
-input:invalid {
-  background-color: pink;
-}
- -

Syntaxe

- -{{csssyntax}} - -

Exemple

- -

Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.

- -

CSS

- -
label {
-  display: block;
-  margin: 1px;
-  padding: 1px;
-}
-
-.field {
-  margin: 1px;
-  padding: 1px;
-}
-
-input:invalid {
-  background-color: #ffdddd;
-}
-
-form:invalid {
-  border: 5px solid #ffdddd;
-}
-
-input:valid {
-  background-color: #ddffdd;
-}
-
-form:valid {
-  border: 5px solid #ddffdd;
-}
-
-input:required {
-  border-color: #800000;
-  border-width: 3px;
-}
-
-input:required:invalid {
-  border-color: #c00000;
-}
-
- -

HTML

- -
<form>
-  <div class="field">
-    <label for="url_input">Veuillez saisir une URL :</label>
-    <input type="url" id="url_input">
-  </div>
-
-  <div class="field">
-    <label for="email_input">Veuillez saisir une adresse électronique :</label>
-    <input type="email" id="email_input" required>
-  </div>
-</form>
- -

Résultat

- -

{{EmbedLiveSample('Exemple','600',120)}}

- -

Accessibilité

- -

La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.

- - - -

Notes

- -

Boutons radio

- -

Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut name) possède l'attribut required , la pseudo-classe :invalid est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.

- -

Gestion dans Gecko

- -

Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe :invalid . Toutefois un style différent est appliqué (un halo rouge utilisant la propriété {{cssxref("box-shadow")}}) via la pseudo-classe {{cssxref(":-moz-ui-invalid")}}, qui s'applique dans un sous-ensemble des cas de :invalid.

- -

Ce halo peut être désactivé avec les règles suivantes :

- -
:invalid {
-  box-shadow: none;
-}
-
-:-moz-submit-invalid {
-  box-shadow: none;
-}
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.invalid")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_invalid/index.md b/files/fr/web/css/_colon_invalid/index.md new file mode 100644 index 0000000000..37ae6658b6 --- /dev/null +++ b/files/fr/web/css/_colon_invalid/index.md @@ -0,0 +1,161 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:invalid' +--- +
{{CSSRef}}
+ +

La pseudo-classe :invalid cible tout élément {{HTMLElement("input")}} pour lequel la validation du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.

+ +
/* Cible n'importe quel élément input  */
+/* dont la valeur ne satisfait pas aux */
+/* critères de validation */
+input:invalid {
+  background-color: pink;
+}
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemple

+ +

Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.

+ +

CSS

+ +
label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #c00000;
+}
+
+ +

HTML

+ +
<form>
+  <div class="field">
+    <label for="url_input">Veuillez saisir une URL :</label>
+    <input type="url" id="url_input">
+  </div>
+
+  <div class="field">
+    <label for="email_input">Veuillez saisir une adresse électronique :</label>
+    <input type="email" id="email_input" required>
+  </div>
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple','600',120)}}

+ +

Accessibilité

+ +

La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.

+ + + +

Notes

+ +

Boutons radio

+ +

Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut name) possède l'attribut required , la pseudo-classe :invalid est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.

+ +

Gestion dans Gecko

+ +

Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe :invalid . Toutefois un style différent est appliqué (un halo rouge utilisant la propriété {{cssxref("box-shadow")}}) via la pseudo-classe {{cssxref(":-moz-ui-invalid")}}, qui s'applique dans un sous-ensemble des cas de :invalid.

+ +

Ce halo peut être désactivé avec les règles suivantes :

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.invalid")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_is/index.html b/files/fr/web/css/_colon_is/index.html deleted file mode 100644 index 3268425e30..0000000000 --- a/files/fr/web/css/_colon_is/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: ':is() (:matches(), :any())' -slug: Web/CSS/:is -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference - - Web -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.

- -
-

Note : :matches() a été renommé en is() d'après l'issue 3258 du CSSWG.

-
- -
/* Sélectionne n'importe quel paragraphe survolé
-   qui se trouve au sein d'un header, main, ou
-   footer */
-:is(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
-/* La notation précédente est équivalente à */
-header p:hover,
-main p:hover,
-footer p:hover {
-  color: red;
-  cursor: pointer;
-}
-
-
-/* La version rétro-compatible avec :-*-any()  */
-:-moz-any(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-:-webkit-any(header, main, footer) p:hover{
-  color: red;
-  cursor: pointer;
-}
-:matches(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Exemple fonctionnant pour les différents navigateurs

- -

HTML

- -
<header>
-  <p>Voici un paragraphe dans un en-tête.</p>
-</header>
-
-<main>
-  <ul>
-    <li><p>Mon premier élément de</p><p>liste</p></li>
-    <li><p>Mon deuxième élément de</p><p>liste</p></li>
-  </ul>
-</main>
-
-<footer>
-  <p>Et un paragraphe de pied de page</p>
-</footer>
- -

CSS

- -
:-webkit-any(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-
-:-moz-any(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
-:is(header, main, footer) p:hover {
-  color: red;
-  cursor: pointer;
-}
- -

JavaScript

- -
let matchedItems;
-
-try {
-  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
-} catch(e) {
-  try {
-    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
-  } catch(e) {
-    try {
-      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
-    } catch(e) {
-      try {
-        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
-      } catch(e) {
-        console.log('Votre navigateur ne prend pas en charge :is(), :matches() ou :any()');
-      }
-    }
-  }
-}
-
-for(let i = 0; i < matchedItems.length; i++) {
-  applyHandler(matchedItems[i]);
-}
-
-function applyHandler(elem) {
-  elem.addEventListener('click', function(e) {
-    alert('Ce paragraphe est à l\'intérieur d\'un élément ' + e.target.parentNode.nodeName);
-  });
-}
- -

{{EmbedLiveSample('Exemple_fonctionnant_pour_les_différents_navigateurs', '100%', '300')}}

- -

Simplifier les listes de sélecteurs

- -

La pseudo-classe :matches() permet de simplifier largement les sélecteurs CSS. Ainsi, la règle suivante :

- -
/* les listes non ordonnées sur 3 niveaux ou plus */
-/* utilisent un carré comme puce */
-ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
-ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
-ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
-ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
-ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
-ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
-menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
-menu ol menu, menu ul menu, menu menu menu, menu dir menu,
-menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
-dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
-dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
-dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
-  list-style-type: square;
-}
-
- -

pourra être remplacée par :

- -
/* les listes non ordonnées sur 3 niveaux ou plus */
-/* utilisent un carré comme puce */
-:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
-:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
-:matches(ol, ul, menu, dir) :matches(ol, ul, menu, 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) :

- -
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
-  list-style-type: square;
-}
- -

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é.

- -

Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser :matches(), on obtient ces règles plutôt compliquées :

- -
/* Niveau 0 */
-h1 {
-  font-size: 30px;
-}
-/* Niveau 1 */
-section h1, article h1, aside h1, nav h1 {
-  font-size: 25px;
-}
-/* Niveau 2 */
-section section h1, section article h1, section aside h1, section nav h1,
-article section h1, article article h1, article aside h1, article nav h1,
-aside section h1, aside article h1, aside aside h1, aside nav h1,
-nav section h1, nav article h1, nav aside h1, nav nav h1 {
-  font-size: 20px;
-}
-/* Niveau 3 */
-/* … j'ai abandonné */
-
- -

Avec :is(), c'est plus simple :

- -
/* Niveau 0 */
-h1 {
-  font-size: 30px;
-}
-/* Niveau 1 */
-:is(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-/* Niveau 2 */
-:is(section, article, aside, nav)
-:is(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-/* Niveau 3 */
-:is(section, article, aside, nav)
-:is(section, article, aside, nav)
-:is(section, article, aside, nav) h1 {
-  font-size: 15px;
-}
- -

Éviter l'invalidation d'une liste de sélecteur

- -

À la différence des listes de sélecteurs, la pseudo-classe :is() ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur.

- -
:is(:valid, :incompatible) {
-  ...
-}
-
- -

Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler :valid même si les navigateurs ne prennent pas en charge le sélecteur :incompatible. En revanche :

- -
:valid, :incompatible {
-  ...
-}
- -

L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge :incompatible, même si :valid est bien pris en charge.

- -

Notes

- -

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.

- -

Ainsi :

- -
.a > :-moz-any(.b, .c)
-
- -

sera plus lent que

- -
.a > .b, .a > .c
-
- -

et cette dernière version sera plus rapide :

- -
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
- -

:is() doit permettre de corriger de tels problèmes.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}{{Spec2('CSS4 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.is")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_is/index.md b/files/fr/web/css/_colon_is/index.md new file mode 100644 index 0000000000..3268425e30 --- /dev/null +++ b/files/fr/web/css/_colon_is/index.md @@ -0,0 +1,281 @@ +--- +title: ':is() (:matches(), :any())' +slug: Web/CSS/:is +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference + - Web +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.

+ +
+

Note : :matches() a été renommé en is() d'après l'issue 3258 du CSSWG.

+
+ +
/* Sélectionne n'importe quel paragraphe survolé
+   qui se trouve au sein d'un header, main, ou
+   footer */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* La notation précédente est équivalente à */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+
+/* La version rétro-compatible avec :-*-any()  */
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-webkit-any(header, main, footer) p:hover{
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Exemple fonctionnant pour les différents navigateurs

+ +

HTML

+ +
<header>
+  <p>Voici un paragraphe dans un en-tête.</p>
+</header>
+
+<main>
+  <ul>
+    <li><p>Mon premier élément de</p><p>liste</p></li>
+    <li><p>Mon deuxième élément de</p><p>liste</p></li>
+  </ul>
+</main>
+
+<footer>
+  <p>Et un paragraphe de pied de page</p>
+</footer>
+ +

CSS

+ +
:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+ +

JavaScript

+ +
let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Votre navigateur ne prend pas en charge :is(), :matches() ou :any()');
+      }
+    }
+  }
+}
+
+for(let i = 0; i < matchedItems.length; i++) {
+  applyHandler(matchedItems[i]);
+}
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('Ce paragraphe est à l\'intérieur d\'un élément ' + e.target.parentNode.nodeName);
+  });
+}
+ +

{{EmbedLiveSample('Exemple_fonctionnant_pour_les_différents_navigateurs', '100%', '300')}}

+ +

Simplifier les listes de sélecteurs

+ +

La pseudo-classe :matches() permet de simplifier largement les sélecteurs CSS. Ainsi, la règle suivante :

+ +
/* les listes non ordonnées sur 3 niveaux ou plus */
+/* utilisent un carré comme puce */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

pourra être remplacée par :

+ +
/* les listes non ordonnées sur 3 niveaux ou plus */
+/* utilisent un carré comme puce */
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, 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) :

+ +
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

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é.

+ +

Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser :matches(), on obtient ces règles plutôt compliquées :

+ +
/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Niveau 3 */
+/* … j'ai abandonné */
+
+ +

Avec :is(), c'est plus simple :

+ +
/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Niveau 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Éviter l'invalidation d'une liste de sélecteur

+ +

À la différence des listes de sélecteurs, la pseudo-classe :is() ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur.

+ +
:is(:valid, :incompatible) {
+  ...
+}
+
+ +

Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler :valid même si les navigateurs ne prennent pas en charge le sélecteur :incompatible. En revanche :

+ +
:valid, :incompatible {
+  ...
+}
+ +

L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge :incompatible, même si :valid est bien pris en charge.

+ +

Notes

+ +

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.

+ +

Ainsi :

+ +
.a > :-moz-any(.b, .c)
+
+ +

sera plus lent que

+ +
.a > .b, .a > .c
+
+ +

et cette dernière version sera plus rapide :

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+ +

:is() doit permettre de corriger de tels problèmes.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}{{Spec2('CSS4 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.is")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_lang/index.html b/files/fr/web/css/_colon_lang/index.html deleted file mode 100644 index b564018c4e..0000000000 --- a/files/fr/web/css/_colon_lang/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: ':lang' -slug: 'Web/CSS/:lang' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:lang' ---- -
{{CSSRef}}
- -

La pseudo-classe :lang permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.

- -
/* Correspond aux paragraphes, uniquement si ceux-ci */
-/* sont indiqués comme étant en anglais (en) */
-p:lang(en) {
-  quotes: '\201C' '\201D' '\2018' '\2019';
-}
- -
-

Note : En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.

- -

Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.

-
- -

Syntaxe

- -

Syntaxe formelle

- -{{csssyntax}} - -

Paramètre

- -
-
language-code
-
La chaîne de caractères ({{cssxref("<string>")}}) qui définit la langue des éléments qu'on veut sélectionner.
-
- -

Exemples

- -

Dans cet exemple, la pseudo-classe :lang est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":first-child")}}. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.

- -

CSS

- -
:lang(fr) > Q {
-  quotes: '« ' ' »';
-}
-
-:lang(de) > Q {
-  quotes: '»' '«' '\2039' '\203A';
-}
-
-:lang(en) > Q {
-  quotes: '\201C' '\201D' '\2018' '\2019';
-}
-
- -

HTML

- -
<div lang="fr">
-  <q>
-    Cette citation française a
-      <q>une citation</q>
-    imbriquée.
-  </q>
-</div>
-
-<div lang="de">
-  <q>
-    Cette citation allemande a
-      <q>une citation</q>
-    imbriquée.
-  </q>
-</div>
-
-<div lang="en">
-  <q>
-    Cette citation anglaise a
-      <q>une citation</q>
-    imbriquée.
-  </q>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple', '350')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Ajout du joker pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Aucune modification significative.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.lang")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_lang/index.md b/files/fr/web/css/_colon_lang/index.md new file mode 100644 index 0000000000..b564018c4e --- /dev/null +++ b/files/fr/web/css/_colon_lang/index.md @@ -0,0 +1,131 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

La pseudo-classe :lang permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.

+ +
/* Correspond aux paragraphes, uniquement si ceux-ci */
+/* sont indiqués comme étant en anglais (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

Note : En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.

+ +

Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.

+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Paramètre

+ +
+
language-code
+
La chaîne de caractères ({{cssxref("<string>")}}) qui définit la langue des éléments qu'on veut sélectionner.
+
+ +

Exemples

+ +

Dans cet exemple, la pseudo-classe :lang est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":first-child")}}. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.

+ +

CSS

+ +
:lang(fr) > Q {
+  quotes: '« ' ' »';
+}
+
+:lang(de) > Q {
+  quotes: '»' '«' '\2039' '\203A';
+}
+
+:lang(en) > Q {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+
+ +

HTML

+ +
<div lang="fr">
+  <q>
+    Cette citation française a
+      <q>une citation</q>
+    imbriquée.
+  </q>
+</div>
+
+<div lang="de">
+  <q>
+    Cette citation allemande a
+      <q>une citation</q>
+    imbriquée.
+  </q>
+</div>
+
+<div lang="en">
+  <q>
+    Cette citation anglaise a
+      <q>une citation</q>
+    imbriquée.
+  </q>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple', '350')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Ajout du joker pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Aucune modification significative.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.lang")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_last-child/index.html b/files/fr/web/css/_colon_last-child/index.html deleted file mode 100644 index 26b3e6dc6d..0000000000 --- a/files/fr/web/css/_colon_last-child/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: ':last-child' -slug: 'Web/CSS/:last-child' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:last-child' ---- -
{{CSSRef}}
- -

La pseudo-classe :last-child permet de cibler un élément qui est le dernier enfant de son parent.

- -
/* Cible n'importe quel élément <li> tant que    */
-/* celui-ci est le dernier enfant de son élément */
-/* parent */
-li:last-child {
-  background-color: lime;
-}
- -
-

Note : En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
li:last-child {
-  background-color: lime;
-}
-
- -

HTML

- -
<ul>
-   <li>Cet élément n'est pas vert !</li>
-   <li>Celui-ci est vert.</li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '100%', 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Il n'est plus obligatoire que l'élément ciblé ait un parent.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.last-child")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_last-child/index.md b/files/fr/web/css/_colon_last-child/index.md new file mode 100644 index 0000000000..26b3e6dc6d --- /dev/null +++ b/files/fr/web/css/_colon_last-child/index.md @@ -0,0 +1,85 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

La pseudo-classe :last-child permet de cibler un élément qui est le dernier enfant de son parent.

+ +
/* Cible n'importe quel élément <li> tant que    */
+/* celui-ci est le dernier enfant de son élément */
+/* parent */
+li:last-child {
+  background-color: lime;
+}
+ +
+

Note : En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
li:last-child {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<ul>
+   <li>Cet élément n'est pas vert !</li>
+   <li>Celui-ci est vert.</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Il n'est plus obligatoire que l'élément ciblé ait un parent.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.last-child")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_last-of-type/index.html b/files/fr/web/css/_colon_last-of-type/index.html deleted file mode 100644 index 8feeeed2f2..0000000000 --- a/files/fr/web/css/_colon_last-of-type/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ':last-of-type' -slug: 'Web/CSS/:last-of-type' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:last-of-type' ---- -
{{CSSRef}}
- -

La pseudo-classe :last-of-type cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.

- -
/* Cible n'importe quel paragraphe qui est     */
-/* le dernier paragraphe de son élément parent */
-p:last-of-type {
-  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).

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Pour cibler le dernier élément {{HTMLElement("em")}} au sein d'un élément {{HTMLElement("p")}}, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).

- -

CSS

- -
p em:last-of-type {
-  color: lime;
-}
-
- -

HTML

- -
<p>
-  <em>Je ne suis pas vert :(</em>
-  <strong>Je ne suis pas vert :(</strong>
-  <em>Je suis vert :D</em>
-  <strong>Je ne suis pas vert non plus :(</strong>
-</p>
-
-<p>
-  <em>Je ne suis pas vert :(</em>
-  <span>
-    <em>Je suis vert !</em>
-  </span>
-  <strong>Je ne suis pas vert :(</strong>
-  <em>Je suis vert :D</em>
-  <span>
-    <em>Je suis aussi vert !</em>
-    <strike>Je ne suis pas vert</strike>
-  </span>
-  <strong>Je ne suis pas vert non plus :(</strong>
-</p>
- -

Résultat

- -
{{EmbedLiveSample('Exemples','100%', '120')}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}L'élément ciblé ne doit pas nécessairement avoir un élément parent.
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.last-of-type")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_last-of-type/index.md b/files/fr/web/css/_colon_last-of-type/index.md new file mode 100644 index 0000000000..8feeeed2f2 --- /dev/null +++ b/files/fr/web/css/_colon_last-of-type/index.md @@ -0,0 +1,100 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-classe :last-of-type cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.

+ +
/* Cible n'importe quel paragraphe qui est     */
+/* le dernier paragraphe de son élément parent */
+p:last-of-type {
+  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).

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Pour cibler le dernier élément {{HTMLElement("em")}} au sein d'un élément {{HTMLElement("p")}}, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).

+ +

CSS

+ +
p em:last-of-type {
+  color: lime;
+}
+
+ +

HTML

+ +
<p>
+  <em>Je ne suis pas vert :(</em>
+  <strong>Je ne suis pas vert :(</strong>
+  <em>Je suis vert :D</em>
+  <strong>Je ne suis pas vert non plus :(</strong>
+</p>
+
+<p>
+  <em>Je ne suis pas vert :(</em>
+  <span>
+    <em>Je suis vert !</em>
+  </span>
+  <strong>Je ne suis pas vert :(</strong>
+  <em>Je suis vert :D</em>
+  <span>
+    <em>Je suis aussi vert !</em>
+    <strike>Je ne suis pas vert</strike>
+  </span>
+  <strong>Je ne suis pas vert non plus :(</strong>
+</p>
+ +

Résultat

+ +
{{EmbedLiveSample('Exemples','100%', '120')}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}L'élément ciblé ne doit pas nécessairement avoir un élément parent.
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.last-of-type")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_left/index.html b/files/fr/web/css/_colon_left/index.html deleted file mode 100644 index 545f6f24f1..0000000000 --- a/files/fr/web/css/_colon_left/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: ':left' -slug: 'Web/CSS/:left' -tags: - - CSS - - Pseudo-classe - - Reference - - Web -translation_of: 'Web/CSS/:left' ---- -
{{CSSRef}}
- -

La pseudo-classe :left, liée à la règle {{cssxref("@page")}}, permet de cibler les pages de gauche lors d'une impression. Ceci permet de mettre en forme spécifiquement les pages de gauche.

- -
/* Sélectionne le contenu des pages gauches */
-/* lors de l'impression */
-@page :left {
-  margin: 2in 3in;
-}
- -

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é.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -
@page :left {
-  margin: 2cm 3cm;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#left-right-first', ':left')}}{{Spec2('CSS3 Paged Media')}}Aucune modification.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':left')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.left")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_left/index.md b/files/fr/web/css/_colon_left/index.md new file mode 100644 index 0000000000..545f6f24f1 --- /dev/null +++ b/files/fr/web/css/_colon_left/index.md @@ -0,0 +1,72 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - CSS + - Pseudo-classe + - Reference + - Web +translation_of: 'Web/CSS/:left' +--- +
{{CSSRef}}
+ +

La pseudo-classe :left, liée à la règle {{cssxref("@page")}}, permet de cibler les pages de gauche lors d'une impression. Ceci permet de mettre en forme spécifiquement les pages de gauche.

+ +
/* Sélectionne le contenu des pages gauches */
+/* lors de l'impression */
+@page :left {
+  margin: 2in 3in;
+}
+ +

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é.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +
@page :left {
+  margin: 2cm 3cm;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#left-right-first', ':left')}}{{Spec2('CSS3 Paged Media')}}Aucune modification.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':left')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.left")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_link/index.html b/files/fr/web/css/_colon_link/index.html deleted file mode 100644 index a429ffe7e9..0000000000 --- a/files/fr/web/css/_colon_link/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: ':link' -slug: 'Web/CSS/:link' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:link' ---- -
{{CSSRef}}
- -

La pseudo-classe :link permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme {{cssxref(":hover")}}, {{cssxref(":active")}} ou {{cssxref(":visited")}}.

- -
/* Cible les liens qui n'ont pas encore */
-/* été visités */
-a:link {
-  color: red;
-}
- -

Afin que la mise en forme s'applique au mieux, la règle :link doit être placée avant les autres : :link — :visited — :hover — :active. La pseudo-classe {{cssxref(":focus")}} est habituellement placée juste avant ou juste après :hover, en fonction de l'effet désiré.

- -
-

Note : On utilisera {{cssxref("any-link")}} pour sélectionner un élément qu'il ait été visité ou non.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
a:link {
-  color: red;
-}
-
-.external:link {
-  background-color: lightblue;
-}
-
- -

HTML

- -
<p>Et si on allait voir
-  <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/">
-  un peu de JavaScript ?
-  </a>
-</p>
-<p>Sinon, on peut continuer à se cultiver sur CSS autre part
-  <a class="external" href="https://css-tricks.com/">
-  comme CSS Tricks.
-  </a>
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","100%","200")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#link', ':link')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#link', ':link')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}}{{Spec2('CSS2.1')}}Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':link')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.link")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_link/index.md b/files/fr/web/css/_colon_link/index.md new file mode 100644 index 0000000000..a429ffe7e9 --- /dev/null +++ b/files/fr/web/css/_colon_link/index.md @@ -0,0 +1,110 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:link' +--- +
{{CSSRef}}
+ +

La pseudo-classe :link permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme {{cssxref(":hover")}}, {{cssxref(":active")}} ou {{cssxref(":visited")}}.

+ +
/* Cible les liens qui n'ont pas encore */
+/* été visités */
+a:link {
+  color: red;
+}
+ +

Afin que la mise en forme s'applique au mieux, la règle :link doit être placée avant les autres : :link — :visited — :hover — :active. La pseudo-classe {{cssxref(":focus")}} est habituellement placée juste avant ou juste après :hover, en fonction de l'effet désiré.

+ +
+

Note : On utilisera {{cssxref("any-link")}} pour sélectionner un élément qu'il ait été visité ou non.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
a:link {
+  color: red;
+}
+
+.external:link {
+  background-color: lightblue;
+}
+
+ +

HTML

+ +
<p>Et si on allait voir
+  <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/">
+  un peu de JavaScript ?
+  </a>
+</p>
+<p>Sinon, on peut continuer à se cultiver sur CSS autre part
+  <a class="external" href="https://css-tricks.com/">
+  comme CSS Tricks.
+  </a>
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","100%","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#link', ':link')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#link', ':link')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}}{{Spec2('CSS2.1')}}Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':link')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.link")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_local-link/index.html b/files/fr/web/css/_colon_local-link/index.html deleted file mode 100644 index 9f86e4fbd7..0000000000 --- a/files/fr/web/css/_colon_local-link/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: ':local-link' -slug: 'Web/CSS/:local-link' -browser-compat: css.selectors.local-link -translation_of: Web/CSS/:local-link ---- -

{{CSSRef}}

- -

La pseudo-classe CSS :local-link représente un lien vers le même document. Il s'agit donc d'un élément qui est l'ancre source d'un lien hypertexte dont la cible est une URL absolue correspondant à l'URL du document contenant l'élément.

- -
/* Sélectionne n'importe quel <a> ciblant le document courant */
-a:local-link {
-  color: green;
-}
-
- -

Syntaxe

- -

{{csssyntax}}

- -

Exemples

- -

HTML

- -
<a href="#target">Voici un lien vers la page courante.</a><br>
-<a href="https://example.com">Voici un lien externe</a><br>
-
- -

CSS

- -
a:local-link {
-  color: green;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Examples")}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_local-link/index.md b/files/fr/web/css/_colon_local-link/index.md new file mode 100644 index 0000000000..9f86e4fbd7 --- /dev/null +++ b/files/fr/web/css/_colon_local-link/index.md @@ -0,0 +1,52 @@ +--- +title: ':local-link' +slug: 'Web/CSS/:local-link' +browser-compat: css.selectors.local-link +translation_of: Web/CSS/:local-link +--- +

{{CSSRef}}

+ +

La pseudo-classe CSS :local-link représente un lien vers le même document. Il s'agit donc d'un élément qui est l'ancre source d'un lien hypertexte dont la cible est une URL absolue correspondant à l'URL du document contenant l'élément.

+ +
/* Sélectionne n'importe quel <a> ciblant le document courant */
+a:local-link {
+  color: green;
+}
+
+ +

Syntaxe

+ +

{{csssyntax}}

+ +

Exemples

+ +

HTML

+ +
<a href="#target">Voici un lien vers la page courante.</a><br>
+<a href="https://example.com">Voici un lien externe</a><br>
+
+ +

CSS

+ +
a:local-link {
+  color: green;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Examples")}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_not/index.html b/files/fr/web/css/_colon_not/index.html deleted file mode 100644 index 8cf347c1fc..0000000000 --- a/files/fr/web/css/_colon_not/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: ':not' -slug: Web/CSS/:not -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: Web/CSS/:not ---- -
{{CSSRef}}
- -

La pseudo-classe de négation, :not(), est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.

- -
/* Sélectionne n'importe quel élément qui n'est */
-/* pas un paragraphe */
-:not(p) {
-  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.

- -
-

Note : -

-

-
- -

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.

- -
-

Attention : la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.

-
- -{{csssyntax}} - -

Exemples

- -

CSS

- -
/* Contient tous les paragraphes (p) sauf
-   ceux avec le sélecteur de class "classy" */
-p:not(.classy) {
-  color: red;
-}
-
-/* Les balises p sont exclues */
-/* Attention, il est nécessaire d'avoir un      */
-/* combinateur. On ne peut pas écrire ':not(p)' */
-*:not(p) {
-  color: green;
-}
-
-/* Les éléments qui ne sont pas des paragraphes */
-/* et qui n'ont pas la classe "classy" */
-/* Note : cette syntaxe n'est pas bien supportée */
-body :not(.classy, p) {
-  font-family: sans-serif;
-}
- -

HTML

- -
<p>
-  Un peu de texte.
-</p>
-<p class="classy">
-  Encore du texte.
-</p>
-<span>
-  Et toujours du texte.
-<span>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}La définition de l'argument est étendue afin d'autoriser les sélecteurs complexes.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.not")}}

diff --git a/files/fr/web/css/_colon_not/index.md b/files/fr/web/css/_colon_not/index.md new file mode 100644 index 0000000000..8cf347c1fc --- /dev/null +++ b/files/fr/web/css/_colon_not/index.md @@ -0,0 +1,110 @@ +--- +title: ':not' +slug: Web/CSS/:not +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:not +--- +
{{CSSRef}}
+ +

La pseudo-classe de négation, :not(), est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.

+ +
/* Sélectionne n'importe quel élément qui n'est */
+/* pas un paragraphe */
+:not(p) {
+  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.

+ +
+

Note : +

+

+
+ +

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.

+ +
+

Attention : la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.

+
+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
/* Contient tous les paragraphes (p) sauf
+   ceux avec le sélecteur de class "classy" */
+p:not(.classy) {
+  color: red;
+}
+
+/* Les balises p sont exclues */
+/* Attention, il est nécessaire d'avoir un      */
+/* combinateur. On ne peut pas écrire ':not(p)' */
+*:not(p) {
+  color: green;
+}
+
+/* Les éléments qui ne sont pas des paragraphes */
+/* et qui n'ont pas la classe "classy" */
+/* Note : cette syntaxe n'est pas bien supportée */
+body :not(.classy, p) {
+  font-family: sans-serif;
+}
+ +

HTML

+ +
<p>
+  Un peu de texte.
+</p>
+<p class="classy">
+  Encore du texte.
+</p>
+<span>
+  Et toujours du texte.
+<span>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}La définition de l'argument est étendue afin d'autoriser les sélecteurs complexes.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.not")}}

diff --git a/files/fr/web/css/_colon_nth-child/index.html b/files/fr/web/css/_colon_nth-child/index.html deleted file mode 100644 index 0e9b1efcac..0000000000 --- a/files/fr/web/css/_colon_nth-child/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: ':nth-child' -slug: 'Web/CSS/:nth-child' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:nth-child' ---- -
{{CSSRef}}
- -

La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède an+b-1 éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.

- -
/* Cible les éléments en fonction de leur position dans */
-/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
-/* soit le type de l'élément */
-body :nth-child(4n) {
-  background-color: lime;
-}
- -
-

Note : Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.

-
- -

Illustrons cela avec quelques exemples :

- - - -

Les valeurs des coefficients a et b doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble { an + b; n = 0, 1, 2, ... }.

- -

Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.

- -

Syntaxe

- -

La pseudo-classe nth-child prend un seul argument qui représente le motif de répétition des éléments ciblés.

- -

Valeurs avec un mot-clé

- -
-
odd
-
Représente les éléments dont la position est impaire par rapport à leurs voisins.
-
even
-
Représente les éléments dont la position est paire par rapport à leurs voisins.
-
- -

Notation fonctionnelle

- -
-
<An+B>
-
Représente les éléments dont la position est la An+B-ième avec n qui parcourt les entiers à partir de 0. Les valeurs fournies pour A et B doivent être des entiers ({{cssxref("<integer>")}}).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Exemples de sélecteurs

- -
-
tr:nth-child(2n+1)
-
Permettra de cibler les lignes impaires d'un tableau.
-
tr:nth-child(odd)
-
Permettra de cibler les lignes impaires d'un tableau.
-
tr:nth-child(2n)
-
Permettra de cibler les lignes paires d'un tableau.
-
tr:nth-child(even)
-
Permettra de cibler les lignes paires d'un tableau.
-
span:nth-child(0n+1)
-
Permettra de cibler un élément {{HTMLElement("span")}} qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe {{cssxref(":first-child")}}.
-
span:nth-child(1)
-
Synonyme à l'exemple précédent.
-
span:nth-child(-n+3)
-
Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément span.
-
- -

Exemple démonstratif

- -

CSS

- -
html {
-  font-family: sans-serif;
-}
-
-span, div em {
-  padding: 10px;
-  border: 1px solid green;
-  display: inline-block;
-  margin-bottom: 3px;
-}
-
-.premier span:nth-child(2n+1),
-.deuxieme span:nth-child(2n+1),
-.troisieme span:nth-of-type(2n+1) {
-  background-color: lime;
-}
- -

HTML

- -
<p>
-  <code>span:nth-child(2n+1)</code>,
-  <em>sans</em> un <code>&lt;em&gt;</code>
-  parmi les éléments. Les éléments fils 1, 3,
-  5 et 7 sont sélectionnés.
-</p>
-
-<div class="premier">
-  <span>Ce span est sélectionné !</span>
-  <span>Pas ce span ci. :(</span>
-  <span>Celui-ci ?</span>
-  <span>Celui-là ?</span>
-  <span>Un autre exemple</span>
-  <span>Et encore un</span>
-  <span>Puis un dernier</span>
-</div>
-
-<p>
-  <code>span:nth-child(2n+1)</code>,
-  <em>avec</em> un élément <code>&lt;em&gt;</code>
-  parmi les fils. Les éléments fils 1, 5,
-  et 7 sont sélectionnés. 3 est compté
-  mais n'est pas ciblé car ce n'est pas
-  <code>&lt;span&gt;</code>.
-</p>
-
-<div class="deuxieme">
-  <span>Ce span est sélectionné !</span>
-  <span>Pas ce span ci. :(</span>
-  <em>Ici on a un em.</em>
-  <span>Qu'en est-il de celui-ci ?</span>
-  <span>De celui-là ?</span>
-  <span>Voici un autre exemple</span>
-  <span>Et encore un</span>
-  <span>Puis un dernier</span>
-</div>
-
-<p>
-  <code>span:nth-of-type(2n+1)</code>,
-  <em>avec</em> un <code>&lt;em&gt;</code>
-  parmi les éléments fils. Les éléments fils
-  1, 4, 6 et 8 sont sélectionnés. 3 n'est pas
-  compté ni ciblé car c'est un <code>&lt;em&gt;</code>,
-  et pas un <code>&lt;span&gt;</code> et
-  <code>nth-of-type</code> ne sélectionne que les
-  fils de ce type. Ce <code>&lt;em&gt;</code> est
-  sauté et est ignoré.
-</p>
-
-<div class="troisieme">
-  <span>Ce span est sélectionné !</span>
-  <span>Pas ce span ci. :(</span>
-  <em>Ici on a un em.</em>
-  <span>Qu'en est-il de celui-ci ?</span>
-  <span>De celui-là ?</span>
-  <span>Voici un autre exemple</span>
-  <span>Et encore un</span>
-  <span>Puis un dernier</span>
-</div>
-
- -

Résultat

- -
{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Ajout de la syntaxe <selector>. Les éléments ciblés peuvent ne pas avoir d'élément parent.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.nth-child")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_nth-child/index.md b/files/fr/web/css/_colon_nth-child/index.md new file mode 100644 index 0000000000..0e9b1efcac --- /dev/null +++ b/files/fr/web/css/_colon_nth-child/index.md @@ -0,0 +1,206 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède an+b-1 éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.

+ +
/* Cible les éléments en fonction de leur position dans */
+/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
+/* soit le type de l'élément */
+body :nth-child(4n) {
+  background-color: lime;
+}
+ +
+

Note : Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.

+
+ +

Illustrons cela avec quelques exemples :

+ + + +

Les valeurs des coefficients a et b doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble { an + b; n = 0, 1, 2, ... }.

+ +

Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.

+ +

Syntaxe

+ +

La pseudo-classe nth-child prend un seul argument qui représente le motif de répétition des éléments ciblés.

+ +

Valeurs avec un mot-clé

+ +
+
odd
+
Représente les éléments dont la position est impaire par rapport à leurs voisins.
+
even
+
Représente les éléments dont la position est paire par rapport à leurs voisins.
+
+ +

Notation fonctionnelle

+ +
+
<An+B>
+
Représente les éléments dont la position est la An+B-ième avec n qui parcourt les entiers à partir de 0. Les valeurs fournies pour A et B doivent être des entiers ({{cssxref("<integer>")}}).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Exemples de sélecteurs

+ +
+
tr:nth-child(2n+1)
+
Permettra de cibler les lignes impaires d'un tableau.
+
tr:nth-child(odd)
+
Permettra de cibler les lignes impaires d'un tableau.
+
tr:nth-child(2n)
+
Permettra de cibler les lignes paires d'un tableau.
+
tr:nth-child(even)
+
Permettra de cibler les lignes paires d'un tableau.
+
span:nth-child(0n+1)
+
Permettra de cibler un élément {{HTMLElement("span")}} qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe {{cssxref(":first-child")}}.
+
span:nth-child(1)
+
Synonyme à l'exemple précédent.
+
span:nth-child(-n+3)
+
Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément span.
+
+ +

Exemple démonstratif

+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span, div em {
+  padding: 10px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.premier span:nth-child(2n+1),
+.deuxieme span:nth-child(2n+1),
+.troisieme span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

HTML

+ +
<p>
+  <code>span:nth-child(2n+1)</code>,
+  <em>sans</em> un <code>&lt;em&gt;</code>
+  parmi les éléments. Les éléments fils 1, 3,
+  5 et 7 sont sélectionnés.
+</p>
+
+<div class="premier">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <span>Celui-ci ?</span>
+  <span>Celui-là ?</span>
+  <span>Un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+
+<p>
+  <code>span:nth-child(2n+1)</code>,
+  <em>avec</em> un élément <code>&lt;em&gt;</code>
+  parmi les fils. Les éléments fils 1, 5,
+  et 7 sont sélectionnés. 3 est compté
+  mais n'est pas ciblé car ce n'est pas
+  <code>&lt;span&gt;</code>.
+</p>
+
+<div class="deuxieme">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <em>Ici on a un em.</em>
+  <span>Qu'en est-il de celui-ci ?</span>
+  <span>De celui-là ?</span>
+  <span>Voici un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+
+<p>
+  <code>span:nth-of-type(2n+1)</code>,
+  <em>avec</em> un <code>&lt;em&gt;</code>
+  parmi les éléments fils. Les éléments fils
+  1, 4, 6 et 8 sont sélectionnés. 3 n'est pas
+  compté ni ciblé car c'est un <code>&lt;em&gt;</code>,
+  et pas un <code>&lt;span&gt;</code> et
+  <code>nth-of-type</code> ne sélectionne que les
+  fils de ce type. Ce <code>&lt;em&gt;</code> est
+  sauté et est ignoré.
+</p>
+
+<div class="troisieme">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <em>Ici on a un em.</em>
+  <span>Qu'en est-il de celui-ci ?</span>
+  <span>De celui-là ?</span>
+  <span>Voici un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+
+ +

Résultat

+ +
{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Ajout de la syntaxe <selector>. Les éléments ciblés peuvent ne pas avoir d'élément parent.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.nth-child")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_nth-col/index.html b/files/fr/web/css/_colon_nth-col/index.html deleted file mode 100644 index d8ff143e54..0000000000 --- a/files/fr/web/css/_colon_nth-col/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: ':nth-col' -slug: 'Web/CSS/:nth-col' -browser-compat: css.selectors.nth-col -translation_of: 'Web/CSS/:nth-col' ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La pseudo-classe CSS :nth-col() est conçue pour les tableaux et les grilles. Elle accepte les notations de type An+B telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler un jeu de colonnes. Les valeurs odd et even sont aussi valides.

- -
/* Sélectionne toutes les valeurs impaires du tableau */
-:nth-col(odd) {
-  background-color: pink;
-}
- -

Syntaxe

- -

La pseudo-classe nth-col est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.

- -

Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Exemple basique

- -

HTML

- -
<table>
-  <tr>
-    <td>un</td>
-    <td>deux</td>
-    <td>trois</td>
-    <td>quatre</td>
-  </tr>
-  <tr>
-  <td>un</td>
-    <td>deux</td>
-    <td>trois</td>
-    <td>quatre</td>
-  </tr>
-</table>
- -

CSS

- -
td {
-  border: 1px solid #ccc;
-  padding: .2em;
-}
-
-/* Colonnes impaires */
-:nth-col(2n+1) {
-  background-color: pink;
-}
-
- -

Résultat

- -

{{EmbedLiveSample('basic_example', 250, 200)}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_nth-col/index.md b/files/fr/web/css/_colon_nth-col/index.md new file mode 100644 index 0000000000..d8ff143e54 --- /dev/null +++ b/files/fr/web/css/_colon_nth-col/index.md @@ -0,0 +1,76 @@ +--- +title: ':nth-col' +slug: 'Web/CSS/:nth-col' +browser-compat: css.selectors.nth-col +translation_of: 'Web/CSS/:nth-col' +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La pseudo-classe CSS :nth-col() est conçue pour les tableaux et les grilles. Elle accepte les notations de type An+B telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler un jeu de colonnes. Les valeurs odd et even sont aussi valides.

+ +
/* Sélectionne toutes les valeurs impaires du tableau */
+:nth-col(odd) {
+  background-color: pink;
+}
+ +

Syntaxe

+ +

La pseudo-classe nth-col est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.

+ +

Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Exemple basique

+ +

HTML

+ +
<table>
+  <tr>
+    <td>un</td>
+    <td>deux</td>
+    <td>trois</td>
+    <td>quatre</td>
+  </tr>
+  <tr>
+  <td>un</td>
+    <td>deux</td>
+    <td>trois</td>
+    <td>quatre</td>
+  </tr>
+</table>
+ +

CSS

+ +
td {
+  border: 1px solid #ccc;
+  padding: .2em;
+}
+
+/* Colonnes impaires */
+:nth-col(2n+1) {
+  background-color: pink;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('basic_example', 250, 200)}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_nth-last-child/index.html b/files/fr/web/css/_colon_nth-last-child/index.html deleted file mode 100644 index d99871fa8a..0000000000 --- a/files/fr/web/css/_colon_nth-last-child/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: ':nth-last-child' -slug: 'Web/CSS/:nth-last-child' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:nth-last-child' ---- -
{{CSSRef}}
- -

La pseudo-classe :nth-last-child permet de cibler les éléments qui possèdent an+b-1 nœud frères qui les suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.

- -
/* Cible les éléments qui sont les 4e, 8e, 16e     */
-/* 20e à partir de la fin, quel que soit leur type */
-body: nth-last-child(4n) {
-  background-color: lime;
-}
- -

Cette pseudo-classe fonctionne comme {{cssxref(":nth-child")}} mais cette fois-ci, le comptage s'effectue depuis la fin. Pour plus d'informations sur la syntaxe des arguments, voir {{cssxref(":nth-child")}}.

- -

Syntaxe

- -

La pseudo-classe nth-last-child prend un seul argument qui représente le motif de répétition des éléments ciblés, compté à partir de la fin.

- -

Valeurs avec un mot-clé

- -
-
odd
-
Représente les éléments dont la position est impaire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.
-
even
-
Représente les éléments dont la position est paire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.
-
- -

Notation fonctionnelle

- -
-
<An+B>
-
Représente les éléments dont la position, à partir de la fin, est la An+B-ième avec n qui parcourt les entiers à partir de 0. Les valeurs fournies pour A et B doivent être des entiers {{cssxref("<integer>")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Exemples

- -
-
tr:nth-last-child(-n+4)
-
Permettra de cibler les quatre dernières lignes d'un tableau.
-
span:nth-last-child(even) ou span:nth-last-child(2n)
-
Permettra de cibler tous les éléments {{HTMLElement("span")}} pairs en partant de la fin.
-
- -

Exemple appliqué

- -

CSS

- -
table {
-  border:1px solid blue;
-}
-tr:nth-last-child(-n+3) { /* les trois derniers enfants */
-  background-color: lime;
-}
-
- -

HTML

- -
<table>
-  <tbody>
-    <tr>
-      <td>Première ligne</td>
-    </tr>
-    <tr>
-       <td>Deuxième ligne</td>
-    </tr>
-    <tr>
-       <td>Troisième ligne</td>
-    </tr>
-    <tr>
-       <td>Quatrième ligne</td>
-    </tr>
-    <tr>
-       <td>Sixième ligne</td>
-    </tr>
-  </tbody>
-</table>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple_appliqué', '100%', 150)}}

- -

Cas aux limites

- -

n commence à zéro et le dernier élément commence à un, n et n+1 sélectionnent donc les mêmes éléments.

- -

HTML

- -
<table>
-  <tbody>
-    <tr>
-      <td>Première ligne</td>
-    </tr>
-    <tr>
-      <td>Deuxième ligne</td>
-    </tr>
-    <tr>
-      <td>Troisième ligne</td>
-    </tr>
-  </tbody>
-</table>
- -

CSS

- -
tr:nth-last-child(n) {
-  background-color: lightgray;
-}
-
-tr:nth-last-child(n+1){
-  font-weight: 600;
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Cas_aux_limites')}}

- -

Mise en forme selon le nombre d’éléments

- -

Il est possible d'utiliser les compteurs pour mettre en forme une liste selon le nombre d'éléments qu'elle contient. Dans l'exemple qui suit, on met les éléments de la liste en rouge si celle-ci contient au moins trois éléments. Pour cela, on combine la pseudo-classe nth-last-child et le sélecteur de voisins généraux (general sibling combinator).

- -

HTML

- -
<h4>Une liste avec quatre éléments :</h4>
-<ol>
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-</ol>
-
-<h4>Une liste avec deux éléments :</h4>
-<ol>
-  <li>Un</li>
-  <li>Deux</li>
-</ol>
- -

CSS

- -
li:nth-last-child(n+3),
-li:nth-last-child(n+3) ~ li {
-  color: red;
-}
- -

Résultat

- -

{{EmbedLiveSample("Mise_en_forme_selon_le_nombre_d’éléments", '100%', 270)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}Les éléments ciblés peuvent ne pas avoir d'élément parent.
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.nth-last-child")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_nth-last-child/index.md b/files/fr/web/css/_colon_nth-last-child/index.md new file mode 100644 index 0000000000..d99871fa8a --- /dev/null +++ b/files/fr/web/css/_colon_nth-last-child/index.md @@ -0,0 +1,195 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

La pseudo-classe :nth-last-child permet de cibler les éléments qui possèdent an+b-1 nœud frères qui les suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.

+ +
/* Cible les éléments qui sont les 4e, 8e, 16e     */
+/* 20e à partir de la fin, quel que soit leur type */
+body: nth-last-child(4n) {
+  background-color: lime;
+}
+ +

Cette pseudo-classe fonctionne comme {{cssxref(":nth-child")}} mais cette fois-ci, le comptage s'effectue depuis la fin. Pour plus d'informations sur la syntaxe des arguments, voir {{cssxref(":nth-child")}}.

+ +

Syntaxe

+ +

La pseudo-classe nth-last-child prend un seul argument qui représente le motif de répétition des éléments ciblés, compté à partir de la fin.

+ +

Valeurs avec un mot-clé

+ +
+
odd
+
Représente les éléments dont la position est impaire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.
+
even
+
Représente les éléments dont la position est paire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.
+
+ +

Notation fonctionnelle

+ +
+
<An+B>
+
Représente les éléments dont la position, à partir de la fin, est la An+B-ième avec n qui parcourt les entiers à partir de 0. Les valeurs fournies pour A et B doivent être des entiers {{cssxref("<integer>")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Exemples

+ +
+
tr:nth-last-child(-n+4)
+
Permettra de cibler les quatre dernières lignes d'un tableau.
+
span:nth-last-child(even) ou span:nth-last-child(2n)
+
Permettra de cibler tous les éléments {{HTMLElement("span")}} pairs en partant de la fin.
+
+ +

Exemple appliqué

+ +

CSS

+ +
table {
+  border:1px solid blue;
+}
+tr:nth-last-child(-n+3) { /* les trois derniers enfants */
+  background-color: lime;
+}
+
+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>Première ligne</td>
+    </tr>
+    <tr>
+       <td>Deuxième ligne</td>
+    </tr>
+    <tr>
+       <td>Troisième ligne</td>
+    </tr>
+    <tr>
+       <td>Quatrième ligne</td>
+    </tr>
+    <tr>
+       <td>Sixième ligne</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_appliqué', '100%', 150)}}

+ +

Cas aux limites

+ +

n commence à zéro et le dernier élément commence à un, n et n+1 sélectionnent donc les mêmes éléments.

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>Première ligne</td>
+    </tr>
+    <tr>
+      <td>Deuxième ligne</td>
+    </tr>
+    <tr>
+      <td>Troisième ligne</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
tr:nth-last-child(n) {
+  background-color: lightgray;
+}
+
+tr:nth-last-child(n+1){
+  font-weight: 600;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Cas_aux_limites')}}

+ +

Mise en forme selon le nombre d’éléments

+ +

Il est possible d'utiliser les compteurs pour mettre en forme une liste selon le nombre d'éléments qu'elle contient. Dans l'exemple qui suit, on met les éléments de la liste en rouge si celle-ci contient au moins trois éléments. Pour cela, on combine la pseudo-classe nth-last-child et le sélecteur de voisins généraux (general sibling combinator).

+ +

HTML

+ +
<h4>Une liste avec quatre éléments :</h4>
+<ol>
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+</ol>
+
+<h4>Une liste avec deux éléments :</h4>
+<ol>
+  <li>Un</li>
+  <li>Deux</li>
+</ol>
+ +

CSS

+ +
li:nth-last-child(n+3),
+li:nth-last-child(n+3) ~ li {
+  color: red;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Mise_en_forme_selon_le_nombre_d’éléments", '100%', 270)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}Les éléments ciblés peuvent ne pas avoir d'élément parent.
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.nth-last-child")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_nth-last-col/index.html b/files/fr/web/css/_colon_nth-last-col/index.html deleted file mode 100644 index 767e6afc0b..0000000000 --- a/files/fr/web/css/_colon_nth-last-col/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: ':nth-last-col' -slug: 'Web/CSS/:nth-last-col' -browser-compat: css.selectors.nth-last-col -translation_of: 'Web/CSS/:nth-last-col' ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La pseudo-classe CSS :nth-last-col() est conçue pour les tableaux et les grilles. Elle accepte les notations de type An+B telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler plusieurs colonnes en comptant à partir de la fin du jeu de colonnes. Les valeurs odd et even sont aussi valides.

- -
/* Sélectionne toutes les valeurs impaires du tableau */
-:nth-last-col(odd) {
-  background-color: pink;
-}
- -

Syntaxe

- -

La pseudo-classe nth-last-col est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.

- -

Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Exemple basique

- -

HTML

- -
<table>
-  <tr>
-    <td>un</td>
-    <td>deux</td>
-    <td>trois</td>
-    <td>quatre</td>
-  </tr>
-  <tr>
-    <td>un</td>
-    <td>deux</td>
-    <td>trois</td>
-    <td>quatre</td>
-  </tr>
-</table>
- -

CSS

- -
td {
-  border: 1px solid #ccc;
-  padding: .2em;
-}
-
-/* Colonnes impaires, en commençant par la colonne finale du tableau */
-:nth-last-col(2n+1) {
-  background-color: pink;
-}
-
- -

Résultat

- -

{{EmbedLiveSample('basic_example', 250, 200)}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_nth-last-col/index.md b/files/fr/web/css/_colon_nth-last-col/index.md new file mode 100644 index 0000000000..767e6afc0b --- /dev/null +++ b/files/fr/web/css/_colon_nth-last-col/index.md @@ -0,0 +1,76 @@ +--- +title: ':nth-last-col' +slug: 'Web/CSS/:nth-last-col' +browser-compat: css.selectors.nth-last-col +translation_of: 'Web/CSS/:nth-last-col' +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La pseudo-classe CSS :nth-last-col() est conçue pour les tableaux et les grilles. Elle accepte les notations de type An+B telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler plusieurs colonnes en comptant à partir de la fin du jeu de colonnes. Les valeurs odd et even sont aussi valides.

+ +
/* Sélectionne toutes les valeurs impaires du tableau */
+:nth-last-col(odd) {
+  background-color: pink;
+}
+ +

Syntaxe

+ +

La pseudo-classe nth-last-col est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.

+ +

Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Exemple basique

+ +

HTML

+ +
<table>
+  <tr>
+    <td>un</td>
+    <td>deux</td>
+    <td>trois</td>
+    <td>quatre</td>
+  </tr>
+  <tr>
+    <td>un</td>
+    <td>deux</td>
+    <td>trois</td>
+    <td>quatre</td>
+  </tr>
+</table>
+ +

CSS

+ +
td {
+  border: 1px solid #ccc;
+  padding: .2em;
+}
+
+/* Colonnes impaires, en commençant par la colonne finale du tableau */
+:nth-last-col(2n+1) {
+  background-color: pink;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('basic_example', 250, 200)}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_nth-last-of-type/index.html b/files/fr/web/css/_colon_nth-last-of-type/index.html deleted file mode 100644 index 21460cfb7e..0000000000 --- a/files/fr/web/css/_colon_nth-last-of-type/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: ':nth-last-of-type' -slug: 'Web/CSS/:nth-last-of-type' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:nth-last-of-type' ---- -
{{CSSRef}}
- -

La pseudo-classe :nth-last-of-type permet de cibler des éléments qui possèdent an+b-1 nœud frères étant les mêmes éléments à partir de la fin de l'arbre et qui ont le même élément parent (l'indice n sera incrémenté à partir de 0). Autrement dit, la pseudo-classe parcourra les éléments d'un type donné en partant de la fin de l'élément parent, selon le motif passé en argument.

- -
/* Cible les éléments <div> qui sont les 4e */
-/* 8e, 16e, 20e, à partir du dernier élément */
-/* <div> d'un élément parent */
-div:nth-last-of-type(4n) {
-  background-color: lime;
-}
- -

Pour plus de détails sur les arguments passés à cette pseudo-classe, voir {{cssxref(":nth-child")}}.

- -

Syntaxe

- -

La pseudo-classe nth-last-of-type prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin :

- -

CSS

- -
span:nth-last-of-type(2) {
-  background-color: lime;
-}
-
- -

HTML

- -
<div>
-  <span>Ce span est le premier !</span>
-  <span>Ce span ne l'est pas. :(</span>
-  <em>Celui-ci est bizarre.</em>
-  <span>Celui-ci l'est !</span>
-  <strike>C'est un autre type</strike>
-  <span>Malheureusement, celui-ci ne l'est pas.</span>
-</div>
-
- -

Résultat

- -
{{EmbedLiveSample('Exemples')}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}L'élément ciblé ne doit pas nécessairement avoir un élément parent.
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.nth-last-of-type")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_nth-last-of-type/index.md b/files/fr/web/css/_colon_nth-last-of-type/index.md new file mode 100644 index 0000000000..21460cfb7e --- /dev/null +++ b/files/fr/web/css/_colon_nth-last-of-type/index.md @@ -0,0 +1,91 @@ +--- +title: ':nth-last-of-type' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-classe :nth-last-of-type permet de cibler des éléments qui possèdent an+b-1 nœud frères étant les mêmes éléments à partir de la fin de l'arbre et qui ont le même élément parent (l'indice n sera incrémenté à partir de 0). Autrement dit, la pseudo-classe parcourra les éléments d'un type donné en partant de la fin de l'élément parent, selon le motif passé en argument.

+ +
/* Cible les éléments <div> qui sont les 4e */
+/* 8e, 16e, 20e, à partir du dernier élément */
+/* <div> d'un élément parent */
+div:nth-last-of-type(4n) {
+  background-color: lime;
+}
+ +

Pour plus de détails sur les arguments passés à cette pseudo-classe, voir {{cssxref(":nth-child")}}.

+ +

Syntaxe

+ +

La pseudo-classe nth-last-of-type prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin :

+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>Ce span est le premier !</span>
+  <span>Ce span ne l'est pas. :(</span>
+  <em>Celui-ci est bizarre.</em>
+  <span>Celui-ci l'est !</span>
+  <strike>C'est un autre type</strike>
+  <span>Malheureusement, celui-ci ne l'est pas.</span>
+</div>
+
+ +

Résultat

+ +
{{EmbedLiveSample('Exemples')}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}L'élément ciblé ne doit pas nécessairement avoir un élément parent.
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.nth-last-of-type")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_nth-of-type/index.html b/files/fr/web/css/_colon_nth-of-type/index.html deleted file mode 100644 index 9a64cd08c6..0000000000 --- a/files/fr/web/css/_colon_nth-of-type/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: ':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 ---- -
{{CSSRef}}
- -

La pseudo-classe :nth-of-type() correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.

- -
/* Sélectionne chaque élément de type <p> dont
-la position parmi l'ensemble des éléments de type <p>
-descendants directement du même élément parent,
-est un multiple de 4. */
-p:nth-of-type(4n) {
-  color: lime;
-}
- -

Syntaxe

- -

La pseudo-classe nth-of-type ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.

- -

Pour une explication plus détaillée de sa syntax voir {{Cssxref(":nth-child")}}

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dans cet exemple nous allons colorer un paragrapher sur deux avec des couleurs différentes et mettre le premier paragraphe en gras

- - - -

HTML

- -
<div>
-  <div>Cet élément n'est pas compté.</div>
-  <p>1er paragraphe.</p>
-  <p>2e paragraphe.</p>
-  <div>Cet élément n'est pas compté.</div>
-  <p>3e paragraphe.</p>
-  <p>4e paragraphe.</p>
-</div>
-
- -

CSS

- -
/* 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;
-}
- -

Résultat

- -
{{EmbedLiveSample('Exemples','250','200')}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}L'élément ciblé ne doit pas nécessairement avoir un élément parent.
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.nth-of-type")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_nth-of-type/index.md b/files/fr/web/css/_colon_nth-of-type/index.md new file mode 100644 index 0000000000..9a64cd08c6 --- /dev/null +++ b/files/fr/web/css/_colon_nth-of-type/index.md @@ -0,0 +1,106 @@ +--- +title: ':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 +--- +
{{CSSRef}}
+ +

La pseudo-classe :nth-of-type() correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.

+ +
/* Sélectionne chaque élément de type <p> dont
+la position parmi l'ensemble des éléments de type <p>
+descendants directement du même élément parent,
+est un multiple de 4. */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

Syntaxe

+ +

La pseudo-classe nth-of-type ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.

+ +

Pour une explication plus détaillée de sa syntax voir {{Cssxref(":nth-child")}}

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dans cet exemple nous allons colorer un paragrapher sur deux avec des couleurs différentes et mettre le premier paragraphe en gras

+ + + +

HTML

+ +
<div>
+  <div>Cet élément n'est pas compté.</div>
+  <p>1er paragraphe.</p>
+  <p>2e paragraphe.</p>
+  <div>Cet élément n'est pas compté.</div>
+  <p>3e paragraphe.</p>
+  <p>4e paragraphe.</p>
+</div>
+
+ +

CSS

+ +
/* 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;
+}
+ +

Résultat

+ +
{{EmbedLiveSample('Exemples','250','200')}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}L'élément ciblé ne doit pas nécessairement avoir un élément parent.
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.nth-of-type")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_only-child/index.html b/files/fr/web/css/_colon_only-child/index.html deleted file mode 100644 index 0f992ae22e..0000000000 --- a/files/fr/web/css/_colon_only-child/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: ':only-child' -slug: 'Web/CSS/:only-child' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:only-child' ---- -
{{CSSRef}}
- -

La pseudo-classe :only-child représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que :first-child:last-child ou :nth-child(1):nth-last-child(1), mais avec une spécificité inférieure.

- -
/* Cible chaque élément <p> si celui-ci   */
-/* est le seul élément fils de son parent */
-p:only-child {
-  background-color: lime;
-}
- -
-

Note : En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Exemple simple

- -

CSS

- -
span:only-child {
-  color:red;
-}
-
- -

HTML

- -
<div>
-  <span>
-    Ce span est l'unique enfant
-    de son parent
-  </span>
-</div>
-
-<div>
-  <span>
-    Ce span est l'un des deux
-    enfants de son parent
-  </span>
-  <span>
-    Ce span est l'un des deux
-    enfants de son parent
-  </span>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple_simple', '100%', 150)}}

- -

Exemple avec une liste

- -

CSS

- -
li li {
-  list-style-type : disc;
-}
-
-li:only-child {
-  color: #6699ff;
-  font-style: italic;
-  list-style-type: square;
-}
- -

HTML

- -
<ol>
-  <li>Premier
-    <ul>
-      <li>Ceci est l'unique élément enfant</li>
-    </ul>
-  </li>
-  <li>Deuxième
-    <ul>
-      <li>Cette liste a deux éléments</li>
-      <li>Cette liste a deux éléments</li>
-    </ul>
-  </li>
-  <li>Troisième
-    <ul>
-      <li>Cette liste a trois éléments</li>
-      <li>Cette liste a trois éléments</li>
-      <li>Cette liste a trois éléments</li>
-    </ul>
-  </li>
-</ol>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.only-child")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_only-child/index.md b/files/fr/web/css/_colon_only-child/index.md new file mode 100644 index 0000000000..0f992ae22e --- /dev/null +++ b/files/fr/web/css/_colon_only-child/index.md @@ -0,0 +1,141 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

La pseudo-classe :only-child représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que :first-child:last-child ou :nth-child(1):nth-last-child(1), mais avec une spécificité inférieure.

+ +
/* Cible chaque élément <p> si celui-ci   */
+/* est le seul élément fils de son parent */
+p:only-child {
+  background-color: lime;
+}
+ +
+

Note : En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Exemple simple

+ +

CSS

+ +
span:only-child {
+  color:red;
+}
+
+ +

HTML

+ +
<div>
+  <span>
+    Ce span est l'unique enfant
+    de son parent
+  </span>
+</div>
+
+<div>
+  <span>
+    Ce span est l'un des deux
+    enfants de son parent
+  </span>
+  <span>
+    Ce span est l'un des deux
+    enfants de son parent
+  </span>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_simple', '100%', 150)}}

+ +

Exemple avec une liste

+ +

CSS

+ +
li li {
+  list-style-type : disc;
+}
+
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}
+ +

HTML

+ +
<ol>
+  <li>Premier
+    <ul>
+      <li>Ceci est l'unique élément enfant</li>
+    </ul>
+  </li>
+  <li>Deuxième
+    <ul>
+      <li>Cette liste a deux éléments</li>
+      <li>Cette liste a deux éléments</li>
+    </ul>
+  </li>
+  <li>Troisième
+    <ul>
+      <li>Cette liste a trois éléments</li>
+      <li>Cette liste a trois éléments</li>
+      <li>Cette liste a trois éléments</li>
+    </ul>
+  </li>
+</ol>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.only-child")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_only-of-type/index.html b/files/fr/web/css/_colon_only-of-type/index.html deleted file mode 100644 index 4c1042a821..0000000000 --- a/files/fr/web/css/_colon_only-of-type/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ':only-of-type' -slug: 'Web/CSS/:only-of-type' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:only-of-type' ---- -
{{CSSRef}}
- -

La pseudo-classe :only-of-type CSS permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément {{HTMLElement("em")}} d'un {{HTMLElement("dd")}}).

- -
/* Cible un élément <p> si celui-ci est le */
-/* seul paragraphe de son élément parent   */
-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).

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
li li {
-  list-style-type : disc;
-}
-
-li:only-of-type {
-  color: #6699ff;
-  font-style: italic;
-  list-style-type: square;
-}
- -

HTML

- -
<ol>
-  <li>Premier
-    <ul>
-      <li>Ceci est l'unique li</li>
-    </ul>
-  </li>
-  <li>Deuxième
-    <ul>
-      <li>Cette liste a deux éléments</li>
-      <li>Cette liste a deux éléments</li>
-    </ul>
-  </li>
-  <li>Troisième
-    <ul>
-      <li>Cette liste a trois éléments</li>
-      <li>Cette liste a trois éléments</li>
-      <li>Cette liste a trois éléments</li>
-    </ul>
-  </li>
-</ol>
-<ol>
-  <li>Une seule liste imbriquée
-    <ul>Avec
-      <li>Un seul item</li>
-    </ul>
-  </li>
-</ol>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '100%', 150)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}L'élément ciblé ne doit pas nécessairement avoir un élément parent.
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.only-of-type")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_only-of-type/index.md b/files/fr/web/css/_colon_only-of-type/index.md new file mode 100644 index 0000000000..4c1042a821 --- /dev/null +++ b/files/fr/web/css/_colon_only-of-type/index.md @@ -0,0 +1,112 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-classe :only-of-type CSS permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément {{HTMLElement("em")}} d'un {{HTMLElement("dd")}}).

+ +
/* Cible un élément <p> si celui-ci est le */
+/* seul paragraphe de son élément parent   */
+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).

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
li li {
+  list-style-type : disc;
+}
+
+li:only-of-type {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}
+ +

HTML

+ +
<ol>
+  <li>Premier
+    <ul>
+      <li>Ceci est l'unique li</li>
+    </ul>
+  </li>
+  <li>Deuxième
+    <ul>
+      <li>Cette liste a deux éléments</li>
+      <li>Cette liste a deux éléments</li>
+    </ul>
+  </li>
+  <li>Troisième
+    <ul>
+      <li>Cette liste a trois éléments</li>
+      <li>Cette liste a trois éléments</li>
+      <li>Cette liste a trois éléments</li>
+    </ul>
+  </li>
+</ol>
+<ol>
+  <li>Une seule liste imbriquée
+    <ul>Avec
+      <li>Un seul item</li>
+    </ul>
+  </li>
+</ol>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', 150)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}L'élément ciblé ne doit pas nécessairement avoir un élément parent.
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.only-of-type")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_optional/index.html b/files/fr/web/css/_colon_optional/index.html deleted file mode 100644 index f37ff60318..0000000000 --- a/files/fr/web/css/_colon_optional/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: ':optional' -slug: 'Web/CSS/:optional' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:optional' ---- -
{{CSSRef}}
- -

La pseudo-classe :optional permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}  pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.

- -
/* Cible les élméents <input> qui sont optionnels */
-/* c'est-à-dire qui n'ont pas d'attribut required */
-input:optional {
-  border: 1px dashed black;
-}
- -
-

Note : Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input {
-  border-width: 3px;
-}
-input:optional {
-  border-color: #008000;
-}
-input:required {
-  border-color: #800000;
-}
- -

HTML

- -
<form>
-  <label for="url-input">Tapez une URL :</label>
-  <input type="url" id="url-input">
-  <br>
-  <br>
-  <label for="email-input">Tapez une adresse électronique :</label>
-  <input type="email" id="email-input" required>
-</form>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples','100%',150)}}

- -

Accessibilité

- -

Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.

- -

Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional')}}{{Spec2('CSS3 Basic UI')}}Définition de la pseudo-classe mais sans la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.optional")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_optional/index.md b/files/fr/web/css/_colon_optional/index.md new file mode 100644 index 0000000000..f37ff60318 --- /dev/null +++ b/files/fr/web/css/_colon_optional/index.md @@ -0,0 +1,114 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:optional' +--- +
{{CSSRef}}
+ +

La pseudo-classe :optional permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}  pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.

+ +
/* Cible les élméents <input> qui sont optionnels */
+/* c'est-à-dire qui n'ont pas d'attribut required */
+input:optional {
+  border: 1px dashed black;
+}
+ +
+

Note : Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input {
+  border-width: 3px;
+}
+input:optional {
+  border-color: #008000;
+}
+input:required {
+  border-color: #800000;
+}
+ +

HTML

+ +
<form>
+  <label for="url-input">Tapez une URL :</label>
+  <input type="url" id="url-input">
+  <br>
+  <br>
+  <label for="email-input">Tapez une adresse électronique :</label>
+  <input type="email" id="email-input" required>
+</form>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','100%',150)}}

+ +

Accessibilité

+ +

Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.

+ +

Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional')}}{{Spec2('CSS3 Basic UI')}}Définition de la pseudo-classe mais sans la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.optional")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_out-of-range/index.html b/files/fr/web/css/_colon_out-of-range/index.html deleted file mode 100644 index 44486cf80d..0000000000 --- a/files/fr/web/css/_colon_out-of-range/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: ':out-of-range' -slug: Web/CSS/:out-of-range -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: Web/CSS/:out-of-range ---- -
{{CSSRef}}
- -

La pseudo-classe :out-of-range cible un élément {{HTMLElement("input")}} lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}} attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.

- -
/* Cible n'importe quel élément <input> qui possède un */
-/* attribut range et que la valeur associée est en     */
-/* dehors de cet intervalle */
-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.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<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">
-      <label for="valeur1">Votre valeur est </label>
-    </li>
-  </ul>
-</form>
- -

CSS

- -
li {
-  list-style: none;
-  margin-bottom: 1em;
-}
-
-input {
-  border: 1px solid black;
-}
-
-input:in-range {
-  background-color: rgba(0, 255, 0, 0.25);
-}
-
-input:out-of-range {
-  background-color: rgba(255, 0, 0, 0.25);
-  border: 2px solid red;
-}
-
-input:in-range + label::after {
-  content:' OK';
-}
-
-input:out-of-range + label::after {
-    content:'hors des limites !';
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples',600,140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}Définition de la correspondance entre :out-of-range et les éléments HTML.
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.out-of-range")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_out-of-range/index.md b/files/fr/web/css/_colon_out-of-range/index.md new file mode 100644 index 0000000000..44486cf80d --- /dev/null +++ b/files/fr/web/css/_colon_out-of-range/index.md @@ -0,0 +1,107 @@ +--- +title: ':out-of-range' +slug: Web/CSS/:out-of-range +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:out-of-range +--- +
{{CSSRef}}
+ +

La pseudo-classe :out-of-range cible un élément {{HTMLElement("input")}} lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}} attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.

+ +
/* Cible n'importe quel élément <input> qui possède un */
+/* attribut range et que la valeur associée est en     */
+/* dehors de cet intervalle */
+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.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<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">
+      <label for="valeur1">Votre valeur est </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content:' OK';
+}
+
+input:out-of-range + label::after {
+    content:'hors des limites !';
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples',600,140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}Définition de la correspondance entre :out-of-range et les éléments HTML.
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.out-of-range")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_past/index.html b/files/fr/web/css/_colon_past/index.html deleted file mode 100644 index cc8a1a3cae..0000000000 --- a/files/fr/web/css/_colon_past/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: ':past' -slug: 'Web/CSS/:past' -browser-compat: css.selectors.past -translation_of: Web/CSS/:past ---- -

{{CSSRef}}

- -

Le sélecteur de pseudo-classe CSS :past est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement avant un élément correspondant à {{cssxref(":current")}}. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.

- -
:past(p, span) {
-  display: none;
-}
- -

Syntaxe

- -

{{csssyntax}}

- -

Exemples

- -

CSS

- -
:past(p, span) {
-  display: none;
-}
- -

HTML

- -
<video controls preload="metadata">
-  <source src="video.mp4" type="video/mp4" />
-  <source src="video.webm" type="video/webm" />
-  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
-</video>
- -

WebVTT

- -
FICHIER WEBVTT
-
-1
-00:00:03.500 --> 00:00:05.000
-Voici le premier sous-titre
-
-2
-00:00:06.000 --> 00:00:09.000
-Voici le second sous-titre
-
-3
-00:00:11.000 --> 00:00:19.000
-Voici le troisième sous-titre
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_past/index.md b/files/fr/web/css/_colon_past/index.md new file mode 100644 index 0000000000..cc8a1a3cae --- /dev/null +++ b/files/fr/web/css/_colon_past/index.md @@ -0,0 +1,66 @@ +--- +title: ':past' +slug: 'Web/CSS/:past' +browser-compat: css.selectors.past +translation_of: Web/CSS/:past +--- +

{{CSSRef}}

+ +

Le sélecteur de pseudo-classe CSS :past est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement avant un élément correspondant à {{cssxref(":current")}}. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.

+ +
:past(p, span) {
+  display: none;
+}
+ +

Syntaxe

+ +

{{csssyntax}}

+ +

Exemples

+ +

CSS

+ +
:past(p, span) {
+  display: none;
+}
+ +

HTML

+ +
<video controls preload="metadata">
+  <source src="video.mp4" type="video/mp4" />
+  <source src="video.webm" type="video/webm" />
+  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
+</video>
+ +

WebVTT

+ +
FICHIER WEBVTT
+
+1
+00:00:03.500 --> 00:00:05.000
+Voici le premier sous-titre
+
+2
+00:00:06.000 --> 00:00:09.000
+Voici le second sous-titre
+
+3
+00:00:11.000 --> 00:00:19.000
+Voici le troisième sous-titre
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_placeholder-shown/index.html b/files/fr/web/css/_colon_placeholder-shown/index.html deleted file mode 100644 index 93f571be8a..0000000000 --- a/files/fr/web/css/_colon_placeholder-shown/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: ':placeholder-shown' -slug: 'Web/CSS/:placeholder-shown' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:placeholder-shown' ---- -
{{CSSRef}}
- -

La pseudo-classe :placeholder-shown permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant un texte de substitution.

- -
/* Cible tout élément <input> ou <textarea> avec un */
-/* attribut placeholder actuellement affiché        */
-:placeholder-shown {
-  border: 2px solid silver;
-}
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Exemple simple

- -

CSS

- - - -
input {
-  border: 2px solid black;
-  padding: 3px;
-}
-
-:placeholder-shown {
-  border-color: silver;
-}
- -

HTML

- -
<input placeholder="Saisir quelque chose ici">
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 200, 60)}}

- -

Dépassement du texte

- -

Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utiliser {{cssxref("text-overflow")}} pour gérer cela gracieusement.

- -

HTML

- -
<input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !">
- -

CSS

- - - - -
input:placeholder-shown {
-  text-overflow: ellipsis;
-}
- -

Résultat

- -

{{EmbedLiveSample("Dépassement_du_texte", 200, 60)}}

- -

Texte coloré

- -

HTML

- -
<input placeholder="Saisir quelque chose ici">
- -

CSS

- - - -
input:placeholder-shown {
-  color: red;
-  font-style: italic;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Texte_coloré")}}

- -

Champ de saisie personnalisé

- -

HTML

- -
<form id="test">
-  <p>
-    <label for="name">Enter Student Name:</label>
-    <input id="name" placeholder="Student Name"/>
-  </p>
-  <p>
-    <label for="branch">Enter Student Branch:</label>
-    <input id="branch" placeholder="Student Branch"/>
-  </p>
-  <p>
-    <label for="sid">Enter Student ID:</label>
-    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
-  </p>
-  <input type="submit"/>
-</form>
- -

CSS

- - - -
input {
-  background-color: #E8E8E8;
-  color: black;
-}
-
-input.studentid:placeholder-shown {
-  background-color: yellow;
-  color: red;
-  font-style: italic;
-}
- -

Résultat

- -

{{EmbedLiveSample("Champ_de_saisie_personnalisé", 200, 180)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.placeholder-shown")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_placeholder-shown/index.md b/files/fr/web/css/_colon_placeholder-shown/index.md new file mode 100644 index 0000000000..93f571be8a --- /dev/null +++ b/files/fr/web/css/_colon_placeholder-shown/index.md @@ -0,0 +1,190 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}
+ +

La pseudo-classe :placeholder-shown permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant un texte de substitution.

+ +
/* Cible tout élément <input> ou <textarea> avec un */
+/* attribut placeholder actuellement affiché        */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Exemple simple

+ +

CSS

+ + + +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+:placeholder-shown {
+  border-color: silver;
+}
+ +

HTML

+ +
<input placeholder="Saisir quelque chose ici">
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 200, 60)}}

+ +

Dépassement du texte

+ +

Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utiliser {{cssxref("text-overflow")}} pour gérer cela gracieusement.

+ +

HTML

+ +
<input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !">
+ +

CSS

+ + + + +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Dépassement_du_texte", 200, 60)}}

+ +

Texte coloré

+ +

HTML

+ +
<input placeholder="Saisir quelque chose ici">
+ +

CSS

+ + + +
input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Texte_coloré")}}

+ +

Champ de saisie personnalisé

+ +

HTML

+ +
<form id="test">
+  <p>
+    <label for="name">Enter Student Name:</label>
+    <input id="name" placeholder="Student Name"/>
+  </p>
+  <p>
+    <label for="branch">Enter Student Branch:</label>
+    <input id="branch" placeholder="Student Branch"/>
+  </p>
+  <p>
+    <label for="sid">Enter Student ID:</label>
+    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
+  </p>
+  <input type="submit"/>
+</form>
+ +

CSS

+ + + +
input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Champ_de_saisie_personnalisé", 200, 180)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.placeholder-shown")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_read-only/index.html b/files/fr/web/css/_colon_read-only/index.html deleted file mode 100644 index 41a0a4a663..0000000000 --- a/files/fr/web/css/_colon_read-only/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ':read-only' -slug: 'Web/CSS/:read-only' -tags: - - CSS - - Pseudo-classe - - Refrence -translation_of: 'Web/CSS/:read-only' ---- -
{{CSSRef}}
- -

La pseudo-classe :read-only permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).

- -
/* Cible n'importe quel élément <input> */
-/* en lecture seule */
-
-/* Firefox utilise un préfixe */
-input:-moz-read-only {
-  background-color: #ccc;
-}
-
-/* Blink/WebKit/Edge n'ont pas de préfixe */
-input:read-only {
-  background-color: #ccc;
-}
- -
-

Note : Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input { min-width: 25em; }
-input:-moz-read-only { background: cyan; }
-input:read-only { background: cyan; }
-
-p:-moz-read-only { background: lightgray; }
-p:read-only { background: lightgray; }
-p[contenteditable="true"] { color: blue; }
-
- -

HTML

- -
<input type="text" value="Un champ en lecture seule" readonly />
-<p contenteditable="true">
-  Essayez un peu d'éditer ce paragraphe.
-</p>
-<p>
-  Bonne chance pour celui-là !
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-read-only', ':read-only')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-read-only', ':read-only')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only')}}{{Spec2('CSS4 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.read-only")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_read-only/index.md b/files/fr/web/css/_colon_read-only/index.md new file mode 100644 index 0000000000..41a0a4a663 --- /dev/null +++ b/files/fr/web/css/_colon_read-only/index.md @@ -0,0 +1,100 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Pseudo-classe + - Refrence +translation_of: 'Web/CSS/:read-only' +--- +
{{CSSRef}}
+ +

La pseudo-classe :read-only permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).

+ +
/* Cible n'importe quel élément <input> */
+/* en lecture seule */
+
+/* Firefox utilise un préfixe */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* Blink/WebKit/Edge n'ont pas de préfixe */
+input:read-only {
+  background-color: #ccc;
+}
+ +
+

Note : Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

HTML

+ +
<input type="text" value="Un champ en lecture seule" readonly />
+<p contenteditable="true">
+  Essayez un peu d'éditer ce paragraphe.
+</p>
+<p>
+  Bonne chance pour celui-là !
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-read-only', ':read-only')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-read-only', ':read-only')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only')}}{{Spec2('CSS4 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.read-only")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_read-write/index.html b/files/fr/web/css/_colon_read-write/index.html deleted file mode 100644 index 9dc879a98d..0000000000 --- a/files/fr/web/css/_colon_read-write/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ':read-write' -slug: 'Web/CSS/:read-write' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:read-write' ---- -
{{CSSRef}}
- -

La pseudo-classe :read-write permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire ou les éléments {{HTMLElement("textarea")}}).

- -
/* Cible tout élément éditable */
-/* Pris en charge dans Firefox avec un préfixe */
-input:-moz-read-write {
-  background-color: #ccc;
-}
-
-/* Pris en charge sans préfixe pour Blink/WebKit/Edge */
-input:read-write {
-  background-color: #ccc;
-}
- -
-

Note : Ce sélecteur ne sélectionne pas que les champs de saisie textuels ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément {{htmlelement("p")}} avec un attribut {{htmlattrxref("contenteditable")}}).

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input { min-width: 25em; }
-input:-moz-read-write { background: cyan; }
-input:read-write { background: cyan; }
-
-p:-moz-read-write { background: lightgray; }
-p:read-write { background: lightgray; }
-p[contenteditable="true"] { color: blue; }
-
- -

HTML

- -
<input type="text" value="Un champ en lecture seule"/>
-<p contenteditable>Essayez un peu d'éditer ce paragraphe.</p>
-<p>Bonne chance pour celui-là !</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-read-write', ':read-write')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-read-write', ':read-write')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write')}}{{Spec2('CSS4 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.read-write")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_read-write/index.md b/files/fr/web/css/_colon_read-write/index.md new file mode 100644 index 0000000000..9dc879a98d --- /dev/null +++ b/files/fr/web/css/_colon_read-write/index.md @@ -0,0 +1,94 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:read-write' +--- +
{{CSSRef}}
+ +

La pseudo-classe :read-write permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire ou les éléments {{HTMLElement("textarea")}}).

+ +
/* Cible tout élément éditable */
+/* Pris en charge dans Firefox avec un préfixe */
+input:-moz-read-write {
+  background-color: #ccc;
+}
+
+/* Pris en charge sans préfixe pour Blink/WebKit/Edge */
+input:read-write {
+  background-color: #ccc;
+}
+ +
+

Note : Ce sélecteur ne sélectionne pas que les champs de saisie textuels ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément {{htmlelement("p")}} avec un attribut {{htmlattrxref("contenteditable")}}).

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

HTML

+ +
<input type="text" value="Un champ en lecture seule"/>
+<p contenteditable>Essayez un peu d'éditer ce paragraphe.</p>
+<p>Bonne chance pour celui-là !</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-read-write', ':read-write')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-read-write', ':read-write')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write')}}{{Spec2('CSS4 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.read-write")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_required/index.html b/files/fr/web/css/_colon_required/index.html deleted file mode 100644 index 2768e83a6f..0000000000 --- a/files/fr/web/css/_colon_required/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: ':required' -slug: 'Web/CSS/:required' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:required' ---- -
{{CSSRef}}
- -

La pseudo-classe :required permet de cibler un élément {{HTMLElement("input")}} pour lequel l'attribut {{htmlattrxref("required", "input")}} est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.

- -
/* Cible les éléments <input> qui ont */
-/* l'attribut required */
-input:required {
-  border: 1px dashed red;
-}
- -
-

Note : La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input {
-  border-width: 3px;
-}
-input:optional {
-  border-color: #008000;
-}
-input:required {
-  border-color: #800000;
-}
- -

HTML

- -
<form>
-  <label for="url-input">Tapez une URL :</label>
-  <input type="url" id="url-input">
-  <br>
-  <br>
-  <label for="email-input">Tapez une adresse courriel :</label>
-  <input type="email" id="email-input" required>
-</form>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples','100%',150)}}

- -

 

- -

Accessibilité

- -

Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.

- -

Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.

- - - -

 

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-required', ':required')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-required', ':required')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}{{Spec2('CSS3 Basic UI')}}Définition de la pseudo-classe mais pas de la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.required")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_required/index.md b/files/fr/web/css/_colon_required/index.md new file mode 100644 index 0000000000..2768e83a6f --- /dev/null +++ b/files/fr/web/css/_colon_required/index.md @@ -0,0 +1,118 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:required' +--- +
{{CSSRef}}
+ +

La pseudo-classe :required permet de cibler un élément {{HTMLElement("input")}} pour lequel l'attribut {{htmlattrxref("required", "input")}} est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.

+ +
/* Cible les éléments <input> qui ont */
+/* l'attribut required */
+input:required {
+  border: 1px dashed red;
+}
+ +
+

Note : La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input {
+  border-width: 3px;
+}
+input:optional {
+  border-color: #008000;
+}
+input:required {
+  border-color: #800000;
+}
+ +

HTML

+ +
<form>
+  <label for="url-input">Tapez une URL :</label>
+  <input type="url" id="url-input">
+  <br>
+  <br>
+  <label for="email-input">Tapez une adresse courriel :</label>
+  <input type="email" id="email-input" required>
+</form>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','100%',150)}}

+ +

 

+ +

Accessibilité

+ +

Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.

+ +

Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.

+ + + +

 

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-required', ':required')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-required', ':required')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}{{Spec2('CSS3 Basic UI')}}Définition de la pseudo-classe mais pas de la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.required")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_right/index.html b/files/fr/web/css/_colon_right/index.html deleted file mode 100644 index ecaaba1862..0000000000 --- a/files/fr/web/css/_colon_right/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: ':right' -slug: 'Web/CSS/:right' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:right' ---- -
{{CSSRef}}
- -

La pseudo-classe :right, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite.

- -
/* Sélectionne le contenu des pages droites */
-/* lorsqu'on imprime le document */
-@page :right {
-  margin: 2in 3in;
-}
- -

La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).

- -
-

Note : Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} de la boîte correspondant à la page peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -
@page :right {
-  margin: 2cm 3cm;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#left-right-first', ':right')}}{{Spec2('CSS3 Paged Media')}}Aucune modification.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':right')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.right")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_right/index.md b/files/fr/web/css/_colon_right/index.md new file mode 100644 index 0000000000..ecaaba1862 --- /dev/null +++ b/files/fr/web/css/_colon_right/index.md @@ -0,0 +1,71 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:right' +--- +
{{CSSRef}}
+ +

La pseudo-classe :right, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite.

+ +
/* Sélectionne le contenu des pages droites */
+/* lorsqu'on imprime le document */
+@page :right {
+  margin: 2in 3in;
+}
+ +

La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).

+ +
+

Note : Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} de la boîte correspondant à la page peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +
@page :right {
+  margin: 2cm 3cm;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#left-right-first', ':right')}}{{Spec2('CSS3 Paged Media')}}Aucune modification.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':right')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.right")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_root/index.html b/files/fr/web/css/_colon_root/index.html deleted file mode 100644 index c570e7fd8e..0000000000 --- a/files/fr/web/css/_colon_root/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ':root' -slug: 'Web/CSS/:root' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:root' ---- -
{{CSSRef}}
- -

La pseudo-classe :root permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, :root ciblera donc l'élément {{HTMLElement("html")}} et aura le même comportement que le sélecteur html mais sa spécificité sera plus forte.

- -
/* Sélectionne l'élément racine du document */
-/* Pour un document HTML, c'est <html> */
-:root {
-  background: yellow;
-}
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

:root peut être utile lorsqu'on déclare des propriétés CSS personnalisées globales :

- -
:root {
-  --main-color: hotpink;
-  --pane-padding: 5px 42px;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.root")}}

diff --git a/files/fr/web/css/_colon_root/index.md b/files/fr/web/css/_colon_root/index.md new file mode 100644 index 0000000000..c570e7fd8e --- /dev/null +++ b/files/fr/web/css/_colon_root/index.md @@ -0,0 +1,60 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

La pseudo-classe :root permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, :root ciblera donc l'élément {{HTMLElement("html")}} et aura le même comportement que le sélecteur html mais sa spécificité sera plus forte.

+ +
/* Sélectionne l'élément racine du document */
+/* Pour un document HTML, c'est <html> */
+:root {
+  background: yellow;
+}
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

:root peut être utile lorsqu'on déclare des propriétés CSS personnalisées globales :

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.root")}}

diff --git a/files/fr/web/css/_colon_scope/index.html b/files/fr/web/css/_colon_scope/index.html deleted file mode 100644 index 3b260fd2a9..0000000000 --- a/files/fr/web/css/_colon_scope/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: ':scope' -slug: 'Web/CSS/:scope' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:scope' ---- -
{{CSSRef}}
- -

La pseudo-classe :scope correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.

- -
/* Sélectionne un élément dans la portée */
-:scope {
-  background-color: lime;
-}
- -

À l'heure actuelle, lorsqu'elle est utilisée dans une feuille de style, :scope est identique à {{cssxref(":root")}} car il n'existe pas de moyen pour identifier un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} ou {{domxref("Element.closest()")}}, :scope correspond à l'élément sur lequel la méthode est appelée.

- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Dans cet exemple, on voit comment utiliser :scope via la méthode {{domxref("Element.matches()")}}.

- -

JavaScript

- -
let paragraphe = document.getElementById("para");
-let output = document.getElementById("output");
-
-if (paragraphe.matches(":scope")) {
-  output.innerText = "Oui l'élément est dans sa propre portée, comme attendu !";
-}
- -

HTML

- -
<p id="para">
-  Voici un paragraphe, pas vraiment intéressant mais bon.
-</p>
-<p id="output"></p>
- -

Résultat

- -
{{EmbedLiveSample('Exemples')}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.scope")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_scope/index.md b/files/fr/web/css/_colon_scope/index.md new file mode 100644 index 0000000000..3b260fd2a9 --- /dev/null +++ b/files/fr/web/css/_colon_scope/index.md @@ -0,0 +1,82 @@ +--- +title: ':scope' +slug: 'Web/CSS/:scope' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:scope' +--- +
{{CSSRef}}
+ +

La pseudo-classe :scope correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.

+ +
/* Sélectionne un élément dans la portée */
+:scope {
+  background-color: lime;
+}
+ +

À l'heure actuelle, lorsqu'elle est utilisée dans une feuille de style, :scope est identique à {{cssxref(":root")}} car il n'existe pas de moyen pour identifier un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} ou {{domxref("Element.closest()")}}, :scope correspond à l'élément sur lequel la méthode est appelée.

+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Dans cet exemple, on voit comment utiliser :scope via la méthode {{domxref("Element.matches()")}}.

+ +

JavaScript

+ +
let paragraphe = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraphe.matches(":scope")) {
+  output.innerText = "Oui l'élément est dans sa propre portée, comme attendu !";
+}
+ +

HTML

+ +
<p id="para">
+  Voici un paragraphe, pas vraiment intéressant mais bon.
+</p>
+<p id="output"></p>
+ +

Résultat

+ +
{{EmbedLiveSample('Exemples')}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.scope")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_target-within/index.html b/files/fr/web/css/_colon_target-within/index.html deleted file mode 100644 index 6da19d0862..0000000000 --- a/files/fr/web/css/_colon_target-within/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: ':target-within' -slug: Web/CSS/:target-within -browser-compat: css.selectors.target-within -translation_of: 'Web/CSS/:target-within' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe CSS :target-within représente un élément ciblé ou qui contient un élément ciblé. Un élément ciblé est un élément unique disposant d'un id correspondant au fragment de l'URL. En d'autres termes, il représente un élément qui correspond lui-même à la pseudo-classe {{CSSxRef(":target")}} ou qui a un descendant correspondant à :target (cela inclut les descendants des arbres fantômes).

- -
/* Sélectionne une <div> lorsqu'un de ses descendants est une cible */
-div:target-within {
-  background: cyan;
-}
-
- -

Syntaxe

- -

{{CSSSyntax}}

- -

Exemples

- -

Mise en avant d'un article

- -

La pseudo-classe :target-within peut être utilisée pour mettre en avant un article si quoi que ce soit dans son contenu a été mis en lien. La pseudo-classe :target est aussi utilisée pour montrer l'élément qui a été ciblé.

- -

HTML

- -
<h3>Table des matières</h3>
-<ol>
- <li><a href="#p1">Aller au premier paragraphe !</a></li>
- <li><a href="#p2">Aller au second paragraphe !</a></li>
-</ol>
-
-<article>
-  <h3>Mon bel article</h3>
-  <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p>
-  <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p>
-</article>
-
- -

CSS

- -
article:target-within {
-  background-color: gold;
-}
-
-/* Ajout d'un pseudo élément à l'intérieur de l'élément cible */
-p:target::before {
-  font: 70% sans-serif;
-  content: "►";
-  color: limegreen;
-  margin-right: .25em;
-}
-
-/* Style des éléments en italique à l'intérieur de l'élément cible */
-p:target i {
-  color: red;
-}
- -

Résultat

- -
{{EmbedLiveSample('examples', 500, 300)}}
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_target-within/index.md b/files/fr/web/css/_colon_target-within/index.md new file mode 100644 index 0000000000..6da19d0862 --- /dev/null +++ b/files/fr/web/css/_colon_target-within/index.md @@ -0,0 +1,77 @@ +--- +title: ':target-within' +slug: Web/CSS/:target-within +browser-compat: css.selectors.target-within +translation_of: 'Web/CSS/:target-within' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe CSS :target-within représente un élément ciblé ou qui contient un élément ciblé. Un élément ciblé est un élément unique disposant d'un id correspondant au fragment de l'URL. En d'autres termes, il représente un élément qui correspond lui-même à la pseudo-classe {{CSSxRef(":target")}} ou qui a un descendant correspondant à :target (cela inclut les descendants des arbres fantômes).

+ +
/* Sélectionne une <div> lorsqu'un de ses descendants est une cible */
+div:target-within {
+  background: cyan;
+}
+
+ +

Syntaxe

+ +

{{CSSSyntax}}

+ +

Exemples

+ +

Mise en avant d'un article

+ +

La pseudo-classe :target-within peut être utilisée pour mettre en avant un article si quoi que ce soit dans son contenu a été mis en lien. La pseudo-classe :target est aussi utilisée pour montrer l'élément qui a été ciblé.

+ +

HTML

+ +
<h3>Table des matières</h3>
+<ol>
+ <li><a href="#p1">Aller au premier paragraphe !</a></li>
+ <li><a href="#p2">Aller au second paragraphe !</a></li>
+</ol>
+
+<article>
+  <h3>Mon bel article</h3>
+  <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p>
+  <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p>
+</article>
+
+ +

CSS

+ +
article:target-within {
+  background-color: gold;
+}
+
+/* Ajout d'un pseudo élément à l'intérieur de l'élément cible */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Style des éléments en italique à l'intérieur de l'élément cible */
+p:target i {
+  color: red;
+}
+ +

Résultat

+ +
{{EmbedLiveSample('examples', 500, 300)}}
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_target/index.html b/files/fr/web/css/_colon_target/index.html deleted file mode 100644 index 183349cc73..0000000000 --- a/files/fr/web/css/_colon_target/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: ':target' -slug: 'Web/CSS/:target' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:target' ---- -
{{CSSRef}}
- -

La pseudo-classe :target permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document.

- -
/* Cible un élément dont l'identifiant      */
-/* correspond au fragment de l'URL courante */
-:target {
-  border: 2px solid black;
-}
- -

Les URI comportant des fragments d'identifiant peuvent être utilisées pour créer des liens vers un élément donné d'un document qu'on appellera l'élément cible (target element). Voici un exemple d'URI qui pointe vers une ancre intitulée section2 :

- -
http://exemple.com/chemin/document.html#section2
- -

L'élément suivant sera donc ciblé par le sélecteur :target avec l'URL précédente :

- -
<section id="section2">Exemple</section>
- -
-

Note : L'attribut id a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <a> était nécessairement l'élément cible. La pseudo-classe :target permet également de gérer ces cibles.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Exemples simples

- -
/* Exemple de code pouvant être utilisé dans une feuille
-   de style utilisateur. Une flèche rouge/jaune indique
-   l'élément cible. */
-
-:target {
-  box-shadow: 0.2em 0.2em 0.3em #888;
-}
-
-:target:before {
-  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
-  content:        "\25ba";  /* ► */
-  color:          red;
-  background:     gold;
-  border:         solid thin;
-  padding-left:   1px;
-  display:        inline-block;
-  margin-right:   0.13em;
-  vertical-align: 20%;
-}
-
- -

Manipuler les éléments avec display: none

- -

La pseudo-classe :target s'accommode également des éléments qui ne sont pas affichés.

- -

CSS

- -
#newcomment {
-  display: none;
-}
-
-#newcomment:target {
-  display: block;
-}
- -

HTML

- -
<p><a href="#newcomment">Ajouter un commentaire</a></p>
-<div id="newcomment">
-  <form>
-  <p>Saisir un commentaire :<br />
-  <textarea></textarea></p>
-  </form>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Manipuler_les_éléments_avec_display:_none")}}

- -

Révéler des éléments

- -

:target peut être utile afin de révéler/masquer certains éléments invisibles.

- -

CSS

- -
div.lightbox {
-  display: none;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-div.lightbox:target {
-  display: table;
-}
-
-div.lightbox figure {
-  display: table-cell;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  vertical-align: middle;
-}
-
-div.lightbox figure figcaption {
-  display: block;
-  margin: auto;
-  padding: 8px;
-  background-color: #ddbbff;
-  height: 250px;
-  position: relative;
-  overflow: auto;
-  border: 1px #000000 solid;
-  border-radius: 10px;
-  text-align: justify;
-  font-size: 14px;
-}
-
-div.lightbox figure .closemsg {
-  display: block;
-  margin: auto;
-  height: 0;
-  overflow: visible;
-  text-align: right;
-  z-index: 2;
-  cursor: default;
-}
-
-div.lightbox figure .closemsg, div.lightbox figure figcaption {
-  width: 300px;
-}
-
-.closemsg::after {
-  content: "\00D7";
-  display: inline-block;
-  position: relative;
-  right: -20px;
-  top: -10px;
-  z-index: 3;
-  color: #ffffff;
-  border: 1px #ffffff solid;
-  border-radius: 10px;
-  width: 20px;
-  height: 20px;
-  line-height: 18px;
-  text-align: center;
-  margin: 0;
-  background-color: #000000;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.closemsg::before {
-  content: "";
-  display: block;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000000;
-  opacity: 0.85;
-}
- -

HTML

- -
<p>Un texte pour l'exemple&hellip;</p>
-<p>[ <a href="#exemple1">Ouvrir l'exemple n°1</a> | <a href="#exemple2"> Ouvrir l'exemple n°2</a> ]</p>
-<p>Un autre texte pour l'exemple&hellip;</p>
-<div class="lightbox" id="exemple1">
-  <figure>
-    <a href="#" class="closemsg"></a>
-    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.<br />
-    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.</figcaption>
-  </figure>
-</div>
-
-<div class="lightbox" id="exemple2">
-  <figure>
-    <a href="#" class="closemsg"></a>
-    <figcaption>Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.</figcaption>
-  </figure>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Révéler_des_éléments")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Définition de la sémantique relative à HTML.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Aucune modification.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.target")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_target/index.md b/files/fr/web/css/_colon_target/index.md new file mode 100644 index 0000000000..183349cc73 --- /dev/null +++ b/files/fr/web/css/_colon_target/index.md @@ -0,0 +1,240 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

La pseudo-classe :target permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document.

+ +
/* Cible un élément dont l'identifiant      */
+/* correspond au fragment de l'URL courante */
+:target {
+  border: 2px solid black;
+}
+ +

Les URI comportant des fragments d'identifiant peuvent être utilisées pour créer des liens vers un élément donné d'un document qu'on appellera l'élément cible (target element). Voici un exemple d'URI qui pointe vers une ancre intitulée section2 :

+ +
http://exemple.com/chemin/document.html#section2
+ +

L'élément suivant sera donc ciblé par le sélecteur :target avec l'URL précédente :

+ +
<section id="section2">Exemple</section>
+ +
+

Note : L'attribut id a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <a> était nécessairement l'élément cible. La pseudo-classe :target permet également de gérer ces cibles.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Exemples simples

+ +
/* Exemple de code pouvant être utilisé dans une feuille
+   de style utilisateur. Une flèche rouge/jaune indique
+   l'élément cible. */
+
+:target {
+  box-shadow: 0.2em 0.2em 0.3em #888;
+}
+
+:target:before {
+  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
+  content:        "\25ba";  /* ► */
+  color:          red;
+  background:     gold;
+  border:         solid thin;
+  padding-left:   1px;
+  display:        inline-block;
+  margin-right:   0.13em;
+  vertical-align: 20%;
+}
+
+ +

Manipuler les éléments avec display: none

+ +

La pseudo-classe :target s'accommode également des éléments qui ne sont pas affichés.

+ +

CSS

+ +
#newcomment {
+  display: none;
+}
+
+#newcomment:target {
+  display: block;
+}
+ +

HTML

+ +
<p><a href="#newcomment">Ajouter un commentaire</a></p>
+<div id="newcomment">
+  <form>
+  <p>Saisir un commentaire :<br />
+  <textarea></textarea></p>
+  </form>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Manipuler_les_éléments_avec_display:_none")}}

+ +

Révéler des éléments

+ +

:target peut être utile afin de révéler/masquer certains éléments invisibles.

+ +

CSS

+ +
div.lightbox {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+div.lightbox:target {
+  display: table;
+}
+
+div.lightbox figure {
+  display: table-cell;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+div.lightbox figure figcaption {
+  display: block;
+  margin: auto;
+  padding: 8px;
+  background-color: #ddbbff;
+  height: 250px;
+  position: relative;
+  overflow: auto;
+  border: 1px #000000 solid;
+  border-radius: 10px;
+  text-align: justify;
+  font-size: 14px;
+}
+
+div.lightbox figure .closemsg {
+  display: block;
+  margin: auto;
+  height: 0;
+  overflow: visible;
+  text-align: right;
+  z-index: 2;
+  cursor: default;
+}
+
+div.lightbox figure .closemsg, div.lightbox figure figcaption {
+  width: 300px;
+}
+
+.closemsg::after {
+  content: "\00D7";
+  display: inline-block;
+  position: relative;
+  right: -20px;
+  top: -10px;
+  z-index: 3;
+  color: #ffffff;
+  border: 1px #ffffff solid;
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  margin: 0;
+  background-color: #000000;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.closemsg::before {
+  content: "";
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.85;
+}
+ +

HTML

+ +
<p>Un texte pour l'exemple&hellip;</p>
+<p>[ <a href="#exemple1">Ouvrir l'exemple n°1</a> | <a href="#exemple2"> Ouvrir l'exemple n°2</a> ]</p>
+<p>Un autre texte pour l'exemple&hellip;</p>
+<div class="lightbox" id="exemple1">
+  <figure>
+    <a href="#" class="closemsg"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.<br />
+    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="exemple2">
+  <figure>
+    <a href="#" class="closemsg"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.</figcaption>
+  </figure>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Révéler_des_éléments")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Définition de la sémantique relative à HTML.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Aucune modification.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.target")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_user-invalid/index.html b/files/fr/web/css/_colon_user-invalid/index.html deleted file mode 100644 index 4fe074a4d4..0000000000 --- a/files/fr/web/css/_colon_user-invalid/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: ':-moz-ui-invalid' -slug: Web/CSS/:user-invalid -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: Web/CSS/:user-invalid -original_slug: Web/CSS/:-moz-ui-invalid ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La pseudo-classe :-moz-ui-invalid représente n'importe quel élément de formulaire dont la valeur est invalide selon ses contraintes de validation.

- -

Cette pseudo-classe est appliquée d'après les règles suivantes :

- - - -

Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.

- -

Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.

- -

Syntaxe

- -{{CSSSyntax}} - -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-ui-invalid")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_user-invalid/index.md b/files/fr/web/css/_colon_user-invalid/index.md new file mode 100644 index 0000000000..4fe074a4d4 --- /dev/null +++ b/files/fr/web/css/_colon_user-invalid/index.md @@ -0,0 +1,49 @@ +--- +title: ':-moz-ui-invalid' +slug: Web/CSS/:user-invalid +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: Web/CSS/:user-invalid +original_slug: Web/CSS/:-moz-ui-invalid +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-ui-invalid représente n'importe quel élément de formulaire dont la valeur est invalide selon ses contraintes de validation.

+ +

Cette pseudo-classe est appliquée d'après les règles suivantes :

+ + + +

Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.

+ +

Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-ui-invalid")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_valid/index.html b/files/fr/web/css/_colon_valid/index.html deleted file mode 100644 index 31ab4fd0a7..0000000000 --- a/files/fr/web/css/_colon_valid/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: ':valid' -slug: 'Web/CSS/:valid' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:valid' ---- -
{{CSSRef}}
- -

La pseudo-classe :valid permet de cibler tout élément {{HTMLElement("input")}} ou {{HTMLElement("form")}} dont la validation du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.

- -
input:valid {
-  background-color: #ddffdd;
-}
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.

- -

CSS

- -
input:invalid {
-  background-color: #ffdddd;
-}
-
-form:invalid {
-  border: 5px solid #ffdddd;
-}
-
-input:valid {
-  background-color: #ddffdd;
-}
-
-form:valid {
-  border: 5px solid #ddffdd;
-}
-
-input:required {
-  border-color: #800000;
-  border-width: 3px;
-}
-
-input:required:valid {
-  border-color: #008000;
-}
- -

HTML

- -
<form>
-  <label>Veuillez saisir une URL :</label>
-  <input type="url">
-  <br>
-  <br>
-  <label>Veuillez saisir une adresse électronique :</label>
-  <input type="email" required>
-</form>
- -

Résultat

- -

{{EmbedLiveSample('Exemples',600,150)}}

- -

Accessibilité

- -

La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.valid")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_valid/index.md b/files/fr/web/css/_colon_valid/index.md new file mode 100644 index 0000000000..31ab4fd0a7 --- /dev/null +++ b/files/fr/web/css/_colon_valid/index.md @@ -0,0 +1,118 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:valid' +--- +
{{CSSRef}}
+ +

La pseudo-classe :valid permet de cibler tout élément {{HTMLElement("input")}} ou {{HTMLElement("form")}} dont la validation du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.

+ +
input:valid {
+  background-color: #ddffdd;
+}
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.

+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:valid {
+  border-color: #008000;
+}
+ +

HTML

+ +
<form>
+  <label>Veuillez saisir une URL :</label>
+  <input type="url">
+  <br>
+  <br>
+  <label>Veuillez saisir une adresse électronique :</label>
+  <input type="email" required>
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples',600,150)}}

+ +

Accessibilité

+ +

La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.valid")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_visited/index.html b/files/fr/web/css/_colon_visited/index.html deleted file mode 100644 index 4bb1cd4122..0000000000 --- a/files/fr/web/css/_colon_visited/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: ':visited' -slug: 'Web/CSS/:visited' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:visited' ---- -
{{CSSRef}}
- -

La pseudo-classe :visited permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.

- -
a:visited {
-  color: #4b2f89;
-}
- -

Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : :visited doit être utilisée après une règle basée sur :link, mais avant les autres  (:link — :visited — :hover — :active).

- -

Restrictions

- -

Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe :

- - - -

Pour d'autres informations sur ces limitations et leurs raisons d'être, se référer à l 'article Vie privée et le sélecteur :visited.

- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
a:visited { color: #00ff00; }
- -

HTML

- -
<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited">
-  Cette page est visitée
-</a></p>
-<p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/">
-  Essayez celle-ci peut-être ?
-</a></p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#link', ':visited')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#link', ':visited')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited')}}{{Spec2('CSS2.1')}}Suppression de la restriction limitant son usage à l'élément {{HTMLElement("a")}}. Permission donnée aux navigateurs de limiter le comportement de cette pseudo-classe pour des questions de vie privée.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':visited')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.visited")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_visited/index.md b/files/fr/web/css/_colon_visited/index.md new file mode 100644 index 0000000000..4bb1cd4122 --- /dev/null +++ b/files/fr/web/css/_colon_visited/index.md @@ -0,0 +1,111 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:visited' +--- +
{{CSSRef}}
+ +

La pseudo-classe :visited permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.

+ +
a:visited {
+  color: #4b2f89;
+}
+ +

Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : :visited doit être utilisée après une règle basée sur :link, mais avant les autres  (:link — :visited — :hover — :active).

+ +

Restrictions

+ +

Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe :

+ + + +

Pour d'autres informations sur ces limitations et leurs raisons d'être, se référer à l 'article Vie privée et le sélecteur :visited.

+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
a:visited { color: #00ff00; }
+ +

HTML

+ +
<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited">
+  Cette page est visitée
+</a></p>
+<p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/">
+  Essayez celle-ci peut-être ?
+</a></p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#link', ':visited')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#link', ':visited')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited')}}{{Spec2('CSS2.1')}}Suppression de la restriction limitant son usage à l'élément {{HTMLElement("a")}}. Permission donnée aux navigateurs de limiter le comportement de cette pseudo-classe pour des questions de vie privée.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':visited')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.visited")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_where/index.html b/files/fr/web/css/_colon_where/index.html deleted file mode 100644 index 3e9f501aba..0000000000 --- a/files/fr/web/css/_colon_where/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: ':where()' -slug: 'Web/CSS/:where' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference - - Sélecteur -translation_of: 'Web/CSS/:where' ---- -
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
- -

La pseudo-classe fonctionnelle :where() prend comme argument une liste de sélecteurs et cible tout élément qui peut être sélectionné par l'un des sélecteurs de la liste.

- -

La différence entre :where() et {{CSSxRef(":is", ":is()")}} est la suivante : :where() aura toujours une spécificité nulle tandis que :is() prend la spécificité du sélecteur passé en argument le plus spécifique.

- -

Syntaxe

- -{{CSSSyntax}} - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.where")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_where/index.md b/files/fr/web/css/_colon_where/index.md new file mode 100644 index 0000000000..3e9f501aba --- /dev/null +++ b/files/fr/web/css/_colon_where/index.md @@ -0,0 +1,50 @@ +--- +title: ':where()' +slug: 'Web/CSS/:where' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference + - Sélecteur +translation_of: 'Web/CSS/:where' +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

La pseudo-classe fonctionnelle :where() prend comme argument une liste de sélecteurs et cible tout élément qui peut être sélectionné par l'un des sélecteurs de la liste.

+ +

La différence entre :where() et {{CSSxRef(":is", ":is()")}} est la suivante : :where() aura toujours une spécificité nulle tandis que :is() prend la spécificité du sélecteur passé en argument le plus spécifique.

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.where")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html deleted file mode 100644 index c99555216a..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: '::-moz-color-swatch' -slug: 'Web/CSS/::-moz-color-swatch' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-moz-color-swatch' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-moz-color-swatch est un pseudo-élément spécifique à Mozilla qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec type="color".

- -
-

Note : Utiliser ::-moz-color-swatch sur tout autre élément qu'un  <input type="color"> n'aura aucun effet.

-
- -

Syntax

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<input type="color" value="#de2020"/>
-
- -

CSS

- -
input[type=color]::-moz-color-swatch {
-  border-radius: 10px;
-  border-style: none;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 300, 50)}}

- -

Specifications

- -

Ce pseudo-élément est spécifique à Gecko et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-color-swatch")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md new file mode 100644 index 0000000000..c99555216a --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md @@ -0,0 +1,58 @@ +--- +title: '::-moz-color-swatch' +slug: 'Web/CSS/::-moz-color-swatch' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-color-swatch' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-moz-color-swatch est un pseudo-élément spécifique à Mozilla qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec type="color".

+ +
+

Note : Utiliser ::-moz-color-swatch sur tout autre élément qu'un  <input type="color"> n'aura aucun effet.

+
+ +

Syntax

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<input type="color" value="#de2020"/>
+
+ +

CSS

+ +
input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 300, 50)}}

+ +

Specifications

+ +

Ce pseudo-élément est spécifique à Gecko et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-color-swatch")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html deleted file mode 100644 index 908a8e6ed7..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: '::-moz-page-sequence' -slug: 'Web/CSS/::-moz-page-sequence' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-moz-page-sequence' ---- -
{{CSSRef}}{{non-standard_header}}
- -

Le pseudo-élément ::-moz-page-sequence, spécifique à Mozilla, représente l'arrière-plan du document lors de la prévisualisation avant une impression.

- -

Syntaxe

- -{{CSSSyntax}} - -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-page-sequence")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-page-sequence/index.md b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.md new file mode 100644 index 0000000000..908a8e6ed7 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.md @@ -0,0 +1,32 @@ +--- +title: '::-moz-page-sequence' +slug: 'Web/CSS/::-moz-page-sequence' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-page-sequence' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Le pseudo-élément ::-moz-page-sequence, spécifique à Mozilla, représente l'arrière-plan du document lors de la prévisualisation avant une impression.

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-page-sequence")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-moz-page/index.html b/files/fr/web/css/_doublecolon_-moz-page/index.html deleted file mode 100644 index 3cd419c099..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-page/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: '::-moz-page' -slug: 'Web/CSS/::-moz-page' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-moz-page' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément CSS ::-moz-page, spécifique à Mozilla, est appliqué aux pages individuelles dans les impressions ou les aperçus avant impression.

- -

Syntaxe

- -{{CSSSyntax}} - -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-page")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-page/index.md b/files/fr/web/css/_doublecolon_-moz-page/index.md new file mode 100644 index 0000000000..3cd419c099 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-page/index.md @@ -0,0 +1,32 @@ +--- +title: '::-moz-page' +slug: 'Web/CSS/::-moz-page' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-page' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément CSS ::-moz-page, spécifique à Mozilla, est appliqué aux pages individuelles dans les impressions ou les aperçus avant impression.

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-page")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html deleted file mode 100644 index 51dc574676..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: '::-moz-progress-bar' -slug: 'Web/CSS/::-moz-progress-bar' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-moz-progress-bar' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément ::-moz-progress-bar s'appliquant à la zone d'élément HTML {{HTMLElement("progress")}} représente la valeur de la progression effectuée jusqu'à présent. Vous pourrez par exemple, modifier la couleur de la barre de progression.

- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
#redbar::-moz-progress-bar {
-  background-color: red;
-}
- -

HTML

- -
<progress id="redbar" value="30" max="100">30 %</progress>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.md b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.md new file mode 100644 index 0000000000..51dc574676 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.md @@ -0,0 +1,47 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément ::-moz-progress-bar s'appliquant à la zone d'élément HTML {{HTMLElement("progress")}} représente la valeur de la progression effectuée jusqu'à présent. Vous pourrez par exemple, modifier la couleur de la barre de progression.

+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#redbar::-moz-progress-bar {
+  background-color: red;
+}
+ +

HTML

+ +
<progress id="redbar" value="30" max="100">30 %</progress>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.html b/files/fr/web/css/_doublecolon_-moz-range-progress/index.html deleted file mode 100644 index b4f123f2fb..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-range-progress/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: '::-moz-range-progress' -slug: 'Web/CSS/::-moz-range-progress' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-moz-range-progress' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-moz-range-progress représente la portion de la piste d'un élément {{HTMLElement("input")}} de type range, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.

- -
-

Note : Si ::-moz-range-progress est utilisé sur autre chose qu'un élément <input type="range">, il n'aura aucun effet.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input[type=range]::-moz-range-progress {
-  background-color: green;
-  height: 1em;
-}
-
- -

HTML

- -
<input type="range" min="0" max="100" step="5" value="50"/>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 300, 50)}}

- -

Une barre de progression mise en forme avec cette déclaration devrait ressembler à :

- -

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-range-progress")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md new file mode 100644 index 0000000000..b4f123f2fb --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md @@ -0,0 +1,67 @@ +--- +title: '::-moz-range-progress' +slug: 'Web/CSS/::-moz-range-progress' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-progress' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-moz-range-progress représente la portion de la piste d'un élément {{HTMLElement("input")}} de type range, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.

+ +
+

Note : Si ::-moz-range-progress est utilisé sur autre chose qu'un élément <input type="range">, il n'aura aucun effet.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+
+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 300, 50)}}

+ +

Une barre de progression mise en forme avec cette déclaration devrait ressembler à :

+ +

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-range-progress")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html deleted file mode 100644 index 2b64feb5a9..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: '::-moz-range-thumb' -slug: 'Web/CSS/::-moz-range-thumb' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-moz-range-thumb' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-moz-range-thumb représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type range et qui permet de modifier la valeur numérique associée.

- -
-

Note : Utiliser ::-moz-range-thumb avec un autre élément que  <input type="range"> n'aura aucun effet.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input[type=range]::-moz-range-thumb {
-  background-color: green;
-}
-
- -

HTML

- -
<input type="range" min="0" max="100" step="5" value="50"/>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 300, 50)}}

- -

Une barre de progression mise en forme avec ces règles devrait ressembler à :

- -

The thumb of the <input type=right> styled in green

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-range-thumb")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md new file mode 100644 index 0000000000..2b64feb5a9 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md @@ -0,0 +1,71 @@ +--- +title: '::-moz-range-thumb' +slug: 'Web/CSS/::-moz-range-thumb' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-moz-range-thumb représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type range et qui permet de modifier la valeur numérique associée.

+ +
+

Note : Utiliser ::-moz-range-thumb avec un autre élément que  <input type="range"> n'aura aucun effet.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input[type=range]::-moz-range-thumb {
+  background-color: green;
+}
+
+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 300, 50)}}

+ +

Une barre de progression mise en forme avec ces règles devrait ressembler à :

+ +

The thumb of the <input type=right> styled in green

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-range-thumb")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-moz-range-track/index.html b/files/fr/web/css/_doublecolon_-moz-range-track/index.html deleted file mode 100644 index f8fd1cce12..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-range-track/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: '::-moz-range-track' -slug: 'Web/CSS/::-moz-range-track' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-moz-range-track' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-moz-range-track est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type range.

- -
-

Note : ::-moz-range-track n'aura aucun effet s'il est utilisé sur autre chose qu'un élément <input type="range">.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input[type=range]::-moz-range-track {
-  background-color: green;
-}
-
- -

HTML

- -
<input type="range" min="0" max="100" step="5" value="50"/>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 300, 50)}}

- -

Une barre de progression mise en forme de cette façon devrait ressembler à :

- -

A range with the track green.

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-range-track")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-range-track/index.md b/files/fr/web/css/_doublecolon_-moz-range-track/index.md new file mode 100644 index 0000000000..f8fd1cce12 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-range-track/index.md @@ -0,0 +1,70 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-moz-range-track est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type range.

+ +
+

Note : ::-moz-range-track n'aura aucun effet s'il est utilisé sur autre chose qu'un élément <input type="range">.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input[type=range]::-moz-range-track {
+  background-color: green;
+}
+
+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 300, 50)}}

+ +

Une barre de progression mise en forme de cette façon devrait ressembler à :

+ +

A range with the track green.

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-range-track")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html deleted file mode 100644 index 7fea3ec964..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: '::-moz-scrolled-page-sequence' -slug: 'Web/CSS/::-moz-scrolled-page-sequence' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-moz-scrolled-page-sequence' ---- -
{{CSSRef}}{{non-standard_header}}
- -

Le pseudo-élément ::-moz-scrolled-page-sequence est un pseudo-élément spécifique à Mozilla et représente l'arrière-plan de la prévisualisation de l'impression.

- -

Syntaxe

- -{{CSSSyntax}} - -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-moz-scrolled-page-sequence")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md new file mode 100644 index 0000000000..7fea3ec964 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md @@ -0,0 +1,32 @@ +--- +title: '::-moz-scrolled-page-sequence' +slug: 'Web/CSS/::-moz-scrolled-page-sequence' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-scrolled-page-sequence' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Le pseudo-élément ::-moz-scrolled-page-sequence est un pseudo-élément spécifique à Mozilla et représente l'arrière-plan de la prévisualisation de l'impression.

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-moz-scrolled-page-sequence")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html deleted file mode 100644 index e8230dce99..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: '::-webkit-inner-spin-button' -slug: 'Web/CSS/::-webkit-inner-spin-button' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-inner-spin-button' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-inner-spin-button permet de mettre en forme la partie intérieure de la roulette qui permet de choisir la valeur d'un élément {{HTMLElement("input")}} de type number.

- -

Exemples

- -

CSS

- -
input[type=number]::-webkit-inner-spin-button {
-  cursor: pointer;
-}
- -

HTML

- -
<input type="number">
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 200, 30)}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-inner-spin-button")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md new file mode 100644 index 0000000000..e8230dce99 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md @@ -0,0 +1,46 @@ +--- +title: '::-webkit-inner-spin-button' +slug: 'Web/CSS/::-webkit-inner-spin-button' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-inner-spin-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-inner-spin-button permet de mettre en forme la partie intérieure de la roulette qui permet de choisir la valeur d'un élément {{HTMLElement("input")}} de type number.

+ +

Exemples

+ +

CSS

+ +
input[type=number]::-webkit-inner-spin-button {
+  cursor: pointer;
+}
+ +

HTML

+ +
<input type="number">
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 200, 30)}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-inner-spin-button")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html deleted file mode 100644 index 0700be99b5..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: '::-webkit-meter-bar' -slug: 'Web/CSS/::-webkit-meter-bar' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-meter-bar' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-meter-bar est un pseudo-élément spécifique à WebKit et permet de mettre en forme l'arrière-plan d'un élément {{HTMLElement("meter")}}.

- -

Exemples

- -

CSS

- -
meter {
-   /* On réinitialise l'apparence par défaut */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-meter::-webkit-meter-bar  {
-  background: #eee;
-  box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
-  border-radius: 3px;
-}
- -

HTML

- -
<meter min="0" max="10" value="6">Score sur 10</meter>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -
-

Note : Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.

-
- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-meter-bar")}}

- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md new file mode 100644 index 0000000000..0700be99b5 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md @@ -0,0 +1,66 @@ +--- +title: '::-webkit-meter-bar' +slug: 'Web/CSS/::-webkit-meter-bar' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-meter-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-meter-bar est un pseudo-élément spécifique à WebKit et permet de mettre en forme l'arrière-plan d'un élément {{HTMLElement("meter")}}.

+ +

Exemples

+ +

CSS

+ +
meter {
+   /* On réinitialise l'apparence par défaut */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-bar  {
+  background: #eee;
+  box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
+  border-radius: 3px;
+}
+ +

HTML

+ +
<meter min="0" max="10" value="6">Score sur 10</meter>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +
+

Note : Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.

+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-meter-bar")}}

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html deleted file mode 100644 index e9736324a9..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: '::-webkit-meter-even-less-good-value' -slug: 'Web/CSS/::-webkit-meter-even-less-good-value' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-meter-even-less-good-value donne une couleur rouge à l'élément {{HTMLElement("meter")}} lorsque les valeurs de value et d'optimum sont dans des intervalles opposés (par exemple : value < low < high < optimum ou value > high > low > optimum).

- -

Exemples

- -

CSS

- -
meter::-webkit-meter-even-less-good-value {
-  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
-  height: 100%;
-  box-sizing: border-box;
-}
- -

HTML

- -
<meter min="0" max="10" value="6">Score out of 10</meter>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '100%', 50)}}

- -
-

Note : Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.

-
- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-meter-even-less-good-value")}}

- -

Voir aussi

- -

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md new file mode 100644 index 0000000000..e9736324a9 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md @@ -0,0 +1,54 @@ +--- +title: '::-webkit-meter-even-less-good-value' +slug: 'Web/CSS/::-webkit-meter-even-less-good-value' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-meter-even-less-good-value donne une couleur rouge à l'élément {{HTMLElement("meter")}} lorsque les valeurs de value et d'optimum sont dans des intervalles opposés (par exemple : value < low < high < optimum ou value > high > low > optimum).

+ +

Exemples

+ +

CSS

+ +
meter::-webkit-meter-even-less-good-value {
+  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
+  height: 100%;
+  box-sizing: border-box;
+}
+ +

HTML

+ +
<meter min="0" max="10" value="6">Score out of 10</meter>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', 50)}}

+ +
+

Note : Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.

+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-meter-even-less-good-value")}}

+ +

Voir aussi

+ +

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html deleted file mode 100644 index 3ae9405761..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: '::-webkit-meter-inner-element' -slug: 'Web/CSS/::-webkit-meter-inner-element' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-meter-inner-element' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-meter-inner-element est un pseudo-élément qui permet de sélectionner et d'appliquer des styles au conteneur d'un élément {{htmlelement("meter")}}.

- -

Exemples

- -

CSS

- -
meter {
-  /* Réinitialise l'apparence par défaut */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-meter::-webkit-meter-inner-element {
-  -webkit-appearance: inherit;
-  box-sizing: inherit;
-  border: 1px solid #aaa;
-}
- -

HTML

- -
<meter min="0" max="10" value="6">Score out of 10</meter>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '100%', 50)}}

- -
-

Note : Cela ne fonctionne que pour les navigateurs Webkit/Blink.

-
- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-meter-inner-element")}}

- -

Voir aussi

- -

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md new file mode 100644 index 0000000000..3ae9405761 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md @@ -0,0 +1,61 @@ +--- +title: '::-webkit-meter-inner-element' +slug: 'Web/CSS/::-webkit-meter-inner-element' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-meter-inner-element' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-meter-inner-element est un pseudo-élément qui permet de sélectionner et d'appliquer des styles au conteneur d'un élément {{htmlelement("meter")}}.

+ +

Exemples

+ +

CSS

+ +
meter {
+  /* Réinitialise l'apparence par défaut */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-inner-element {
+  -webkit-appearance: inherit;
+  box-sizing: inherit;
+  border: 1px solid #aaa;
+}
+ +

HTML

+ +
<meter min="0" max="10" value="6">Score out of 10</meter>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', 50)}}

+ +
+

Note : Cela ne fonctionne que pour les navigateurs Webkit/Blink.

+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-meter-inner-element")}}

+ +

Voir aussi

+ +

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html deleted file mode 100644 index e8f23f94e6..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: '::-webkit-meter-optimum-value' -slug: 'Web/CSS/::-webkit-meter-optimum-value' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-meter-optimum-value' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-meter-optimum-value permet de mettre en forme l'élément {{HTMLElement("meter")}} lorsque la valeur de son attribut tombe dans l'intervalle haut. La couleur appliquée par défaut est le vert.

- -

Exemples

- -

CSS

- -
meter::-webkit-meter-bar {
-  background : none;
-  background-color : whiteSmoke;
-  box-shadow : 0 5px 5px -5px #333 inset;
-}
-
-meter::-webkit-meter-optimum-value {
-  box-shadow: 0 5px 5px -5px #999 inset;
-}
- -

HTML

- -
<meter min="0" max="10" value="6">Score out of 10</meter>
- -

Résultat

- -

{{EmbedLiveSample('Examples', '100%', 50)}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-meter-optimum-value")}}

- -

Voir aussi

- -

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md new file mode 100644 index 0000000000..e8f23f94e6 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md @@ -0,0 +1,54 @@ +--- +title: '::-webkit-meter-optimum-value' +slug: 'Web/CSS/::-webkit-meter-optimum-value' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-meter-optimum-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-meter-optimum-value permet de mettre en forme l'élément {{HTMLElement("meter")}} lorsque la valeur de son attribut tombe dans l'intervalle haut. La couleur appliquée par défaut est le vert.

+ +

Exemples

+ +

CSS

+ +
meter::-webkit-meter-bar {
+  background : none;
+  background-color : whiteSmoke;
+  box-shadow : 0 5px 5px -5px #333 inset;
+}
+
+meter::-webkit-meter-optimum-value {
+  box-shadow: 0 5px 5px -5px #999 inset;
+}
+ +

HTML

+ +
<meter min="0" max="10" value="6">Score out of 10</meter>
+ +

Résultat

+ +

{{EmbedLiveSample('Examples', '100%', 50)}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-meter-optimum-value")}}

+ +

Voir aussi

+ +

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html deleted file mode 100644 index 3700e1e859..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: '::-webkit-meter-suboptimum-value' -slug: 'Web/CSS/::-webkit-meter-suboptimum-value' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-meter-suboptimum-value donne une couleur jaune à l'élément {{HTMLElement("meter")}} lorsque la valeur de l'attribut est en dehors de l'intervalle haut des valeurs.

- -

Exemples

- -

CSS

- -
meter::-webkit-meter-suboptimum-value {
-  background: -webkit-gradient linear, left top, left bottom;
-  height: 100%;
-  box-sizing: border-box;
-}
- -

HTML

- -
<meter min="0" max="10" value="6">Score sur 10</meter>
- -

Résultat

- -

{{EmbedLiveSample('Examples', '100%', 50)}}

- -
-

Note : Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink.

-
- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-meter-suboptimum-value")}}

- -

Voir aussi

- -

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md new file mode 100644 index 0000000000..3700e1e859 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md @@ -0,0 +1,54 @@ +--- +title: '::-webkit-meter-suboptimum-value' +slug: 'Web/CSS/::-webkit-meter-suboptimum-value' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-meter-suboptimum-value donne une couleur jaune à l'élément {{HTMLElement("meter")}} lorsque la valeur de l'attribut est en dehors de l'intervalle haut des valeurs.

+ +

Exemples

+ +

CSS

+ +
meter::-webkit-meter-suboptimum-value {
+  background: -webkit-gradient linear, left top, left bottom;
+  height: 100%;
+  box-sizing: border-box;
+}
+ +

HTML

+ +
<meter min="0" max="10" value="6">Score sur 10</meter>
+ +

Résultat

+ +

{{EmbedLiveSample('Examples', '100%', 50)}}

+ +
+

Note : Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink.

+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-meter-suboptimum-value")}}

+ +

Voir aussi

+ +

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html deleted file mode 100644 index 58b369dfdf..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: '::-webkit-outer-spin-button' -slug: 'Web/CSS/::-webkit-outer-spin-button' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-outer-spin-button' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-outer-spin-button peut être utilisé afin de mettre en forme la partie extérieure du sélecteur numérique utilisé pour les éléments {{HTMLElement("input")}} de type number.

- -

Exemples

- -

CSS

- -
input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
- -

HTML

- -
<input type="number">
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 200, 30)}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink, il ne fait partie d'aucune spécification standard.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-outer-spin-button")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.md b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.md new file mode 100644 index 0000000000..58b369dfdf --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.md @@ -0,0 +1,46 @@ +--- +title: '::-webkit-outer-spin-button' +slug: 'Web/CSS/::-webkit-outer-spin-button' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-outer-spin-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-outer-spin-button peut être utilisé afin de mettre en forme la partie extérieure du sélecteur numérique utilisé pour les éléments {{HTMLElement("input")}} de type number.

+ +

Exemples

+ +

CSS

+ +
input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+ +

HTML

+ +
<input type="number">
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 200, 30)}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink, il ne fait partie d'aucune spécification standard.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-outer-spin-button")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html deleted file mode 100644 index 9fc489d9c2..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: '::-webkit-progress-bar' -slug: Web/CSS/::-webkit-progress-bar -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: Web/CSS/::-webkit-progress-bar ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-progress-bar représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}.

- -
-

Note : Afin que ::-webkit-progress-value ait un effet, il faut que {{cssxref("appearance")}} vaille none sur l'élément <progress>.

-
- -

Exemples

- -

CSS

- -
progress {
-  -webkit-appearance: none;
-}
-
-::-webkit-progress-bar {
-   background-color: orange;
-}
-
- -

HTML

- -
<progress value="10" max="50">
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 200, 50)}}

- -

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

- -

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-progress-bar")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md new file mode 100644 index 0000000000..9fc489d9c2 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md @@ -0,0 +1,64 @@ +--- +title: '::-webkit-progress-bar' +slug: Web/CSS/::-webkit-progress-bar +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: Web/CSS/::-webkit-progress-bar +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-progress-bar représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}.

+ +
+

Note : Afin que ::-webkit-progress-value ait un effet, il faut que {{cssxref("appearance")}} vaille none sur l'élément <progress>.

+
+ +

Exemples

+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+
+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 200, 50)}}

+ +

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

+ +

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-progress-bar")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html deleted file mode 100644 index cfe8be136c..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: '::-webkit-progress-inner-element' -slug: 'Web/CSS/::-webkit-progress-inner-element' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-progress-inner-element' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-progress-inner-element représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.

- -
-

Note : Afin que ::-webkit-progress-value ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille none sur l'élément <progress>.

-
- -

Exemples

- -

CSS

- -
progress {
-  -webkit-appearance: none;
-}
-
-::-webkit-progress-inner-element {
-  border: 2px solid black;
-}
-
- -

HTML

- -
<progress value="10" max="50">
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 200, 50)}}

- -

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

- -

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-progress-inner-element")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md new file mode 100644 index 0000000000..cfe8be136c --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md @@ -0,0 +1,64 @@ +--- +title: '::-webkit-progress-inner-element' +slug: 'Web/CSS/::-webkit-progress-inner-element' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-progress-inner-element' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-progress-inner-element représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.

+ +
+

Note : Afin que ::-webkit-progress-value ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille none sur l'élément <progress>.

+
+ +

Exemples

+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-inner-element {
+  border: 2px solid black;
+}
+
+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 200, 50)}}

+ +

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

+ +

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-progress-inner-element")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html deleted file mode 100644 index 91a831dcef..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: '::-webkit-progress-value' -slug: Web/CSS/::-webkit-progress-value -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: Web/CSS/::-webkit-progress-value ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-progress-value permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.

- -
-

Note : Afin que ::-webkit-progress-value ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille none sur l'élément <progress>.

-
- -

Exemples

- -

CSS

- -
progress {
-  -webkit-appearance: none;
-}
-
-::-webkit-progress-value {
-  background-color: orange;
-}
- -

HTML

- -
<progress value="10" max="50">
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 200, 50)}}

- -

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

- -

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-progress-value")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md new file mode 100644 index 0000000000..91a831dcef --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md @@ -0,0 +1,63 @@ +--- +title: '::-webkit-progress-value' +slug: Web/CSS/::-webkit-progress-value +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: Web/CSS/::-webkit-progress-value +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-progress-value permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.

+ +
+

Note : Afin que ::-webkit-progress-value ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille none sur l'élément <progress>.

+
+ +

Exemples

+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 200, 50)}}

+ +

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

+ +

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-progress-value")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html deleted file mode 100644 index 27ce824819..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: '::-webkit-scrollbar' -slug: 'Web/CSS/::-webkit-scrollbar' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-scrollbar' ---- -
{{Draft}}{{CSSRef}}{{Non-standard_header}}
- -
Le pseudo-élément ::-webkit-scrollbar permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.
- -

Syntaxe

- -{{CSSSyntax}} - -

Sélecteurs de scrollbars

- -

You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:

- - - -

Exemples

- -
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
-  display: block;
-  width: 10em;
-  overflow: auto;
-  height: 2em;
-}
-.invisible-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Demonstrate a "mostly customized" scrollbar
- * (won't be visible otherwise if width/height is specified) */
-.mostly-customized-scrollbar::-webkit-scrollbar {
-  width: 5px;
-  height: 8px;
-  background-color: #aaa; /* or add it to the track */
-}
-/* Add a thumb */
-.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
-    background: #000;
-}
-
- -
<div class="visible-scrollbar">
-  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
-  Proin at nulla elementum, consectetur ex eget, commodo ante.
-  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
-  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
-  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
-  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
-  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
-  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
-  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
-  mattis cursus dolor. Pellentesque id pretium est. Quisque
-  convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
-</div>
-<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
-<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
-And pretty tall<br>
-thing with weird scrollbars.<br>
-Who thought scrollbars could be made weeeeird?</div>
-
- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

::-webkit-scrollbar

- -

{{Compat("css.selectors.-webkit-scrollbar")}}

- -

::-webkit-scrollbar-button

- -

{{Compat("css.selectors.-webkit-scrollbar-button")}}

- -

::-webkit-scrollbar-thumb

- -

{{Compat("css.selectors.-webkit-scrollbar-thumb")}}

- -

::-webkit-scrollbar-track

- -

{{Compat("css.selectors.-webkit-scrollbar-track")}}

- -

::-webkit-scrollbar-track-piece

- -

{{Compat("css.selectors.-webkit-scrollbar-track-piece")}}

- -

::-webkit-scrollbar-corner

- -

{{Compat("css.selectors.-webkit-scrollbar-corner")}}

- -

::-webkit-resizer

- -

{{Compat("css.selectors.-webkit-resizer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.md b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.md new file mode 100644 index 0000000000..27ce824819 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.md @@ -0,0 +1,120 @@ +--- +title: '::-webkit-scrollbar' +slug: 'Web/CSS/::-webkit-scrollbar' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-scrollbar' +--- +
{{Draft}}{{CSSRef}}{{Non-standard_header}}
+ +
Le pseudo-élément ::-webkit-scrollbar permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.
+ +

Syntaxe

+ +{{CSSSyntax}} + +

Sélecteurs de scrollbars

+ +

You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:

+ + + +

Exemples

+ +
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
+  display: block;
+  width: 10em;
+  overflow: auto;
+  height: 2em;
+}
+.invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Demonstrate a "mostly customized" scrollbar
+ * (won't be visible otherwise if width/height is specified) */
+.mostly-customized-scrollbar::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background-color: #aaa; /* or add it to the track */
+}
+/* Add a thumb */
+.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
+    background: #000;
+}
+
+ +
<div class="visible-scrollbar">
+  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
+  Proin at nulla elementum, consectetur ex eget, commodo ante.
+  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
+  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
+  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
+  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
+  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
+  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
+  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
+  mattis cursus dolor. Pellentesque id pretium est. Quisque
+  convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
+</div>
+<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
+<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
+And pretty tall<br>
+thing with weird scrollbars.<br>
+Who thought scrollbars could be made weeeeird?</div>
+
+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

::-webkit-scrollbar

+ +

{{Compat("css.selectors.-webkit-scrollbar")}}

+ +

::-webkit-scrollbar-button

+ +

{{Compat("css.selectors.-webkit-scrollbar-button")}}

+ +

::-webkit-scrollbar-thumb

+ +

{{Compat("css.selectors.-webkit-scrollbar-thumb")}}

+ +

::-webkit-scrollbar-track

+ +

{{Compat("css.selectors.-webkit-scrollbar-track")}}

+ +

::-webkit-scrollbar-track-piece

+ +

{{Compat("css.selectors.-webkit-scrollbar-track-piece")}}

+ +

::-webkit-scrollbar-corner

+ +

{{Compat("css.selectors.-webkit-scrollbar-corner")}}

+ +

::-webkit-resizer

+ +

{{Compat("css.selectors.-webkit-resizer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html deleted file mode 100644 index 7859eca19f..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: '::-webkit-search-cancel-button' -slug: 'Web/CSS/::-webkit-search-cancel-button' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-search-cancel-button' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-search-cancel-button représente le bouton d'annulation présenté au bout d'un champ {{HTMLElement("input")}} de type search et qui permet d'effacer la valeur actuellement saisie dans l'élément {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et ne sont pris en charge que par WebKit et Blink. Ce bouton est uniquement affiché pour les éléments {{HTMLElement("input")}} qui ne sont pas vides.

- -

Syntaxe

- -
 selecteur::-webkit-search-cancel-button
- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-search-cancel-button")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.md b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.md new file mode 100644 index 0000000000..7859eca19f --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.md @@ -0,0 +1,32 @@ +--- +title: '::-webkit-search-cancel-button' +slug: 'Web/CSS/::-webkit-search-cancel-button' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-search-cancel-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-search-cancel-button représente le bouton d'annulation présenté au bout d'un champ {{HTMLElement("input")}} de type search et qui permet d'effacer la valeur actuellement saisie dans l'élément {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et ne sont pris en charge que par WebKit et Blink. Ce bouton est uniquement affiché pour les éléments {{HTMLElement("input")}} qui ne sont pas vides.

+ +

Syntaxe

+ +
 selecteur::-webkit-search-cancel-button
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-search-cancel-button")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html deleted file mode 100644 index 4dc067866c..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: '::-webkit-search-results-button' -slug: 'Web/CSS/::-webkit-search-results-button' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-search-results-button' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-search-results-button représente le bouton affiché sur le bord gauche d'un élément {{HTMLElement("input")}} de type "search" qui affiche un menu proposant les dernières recherches effectuées à l'utilisateur. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par WebKit/Blink. Le bouton des résultats de recherche est uniquement affiché pour les éléments {{HTMLElement("input")}} qui possèdent un attribut results.

- -

Syntaxe

- -
 selecteur::-webkit-search-results-button
- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-search-results-button")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.md b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.md new file mode 100644 index 0000000000..4dc067866c --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.md @@ -0,0 +1,31 @@ +--- +title: '::-webkit-search-results-button' +slug: 'Web/CSS/::-webkit-search-results-button' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-search-results-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-search-results-button représente le bouton affiché sur le bord gauche d'un élément {{HTMLElement("input")}} de type "search" qui affiche un menu proposant les dernières recherches effectuées à l'utilisateur. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par WebKit/Blink. Le bouton des résultats de recherche est uniquement affiché pour les éléments {{HTMLElement("input")}} qui possèdent un attribut results.

+ +

Syntaxe

+ +
 selecteur::-webkit-search-results-button
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-search-results-button")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html deleted file mode 100644 index 288756a23b..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: '::-webkit-slider-runnable-track' -slug: 'Web/CSS/::-webkit-slider-runnable-track' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-slider-runnable-track' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-slider-runnable-track représente la piste utilisée par un élément {{HTMLElement("input")}} de type "range" (cf. {{HTMLElement("input/range", '<input type="range">')}}).

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

-

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-slider-runnable-track")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.md b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.md new file mode 100644 index 0000000000..288756a23b --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.md @@ -0,0 +1,33 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-slider-runnable-track représente la piste utilisée par un élément {{HTMLElement("input")}} de type "range" (cf. {{HTMLElement("input/range", '<input type="range">')}}).

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-slider-runnable-track")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html deleted file mode 100644 index 2af11cb873..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: '::-webkit-slider-thumb' -slug: 'Web/CSS/::-webkit-slider-thumb' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::-webkit-slider-thumb' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-slider-thumb représente le curseur que peut déplacer l'utilisateur le long de la piste d'un élément {{HTMLElement("input")}} de type "range" afin de modifier la valeur numérique associée.

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-slider-thumb")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.md b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.md new file mode 100644 index 0000000000..2af11cb873 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.md @@ -0,0 +1,34 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-slider-thumb représente le curseur que peut déplacer l'utilisateur le long de la piste d'un élément {{HTMLElement("input")}} de type "range" afin de modifier la valeur numérique associée.

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-slider-thumb")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_after/index.html b/files/fr/web/css/_doublecolon_after/index.html deleted file mode 100644 index 5b7aa71588..0000000000 --- a/files/fr/web/css/_doublecolon_after/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: '::after (:after)' -slug: 'Web/CSS/::after' -tags: - - CSS - - Disposition - - Pseudo-element - - Reference - - Web -translation_of: 'Web/CSS/::after' ---- -
{{CSSRef}}
- -

En CSS, ::after crée un pseudo-élément qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « en ligne ».

- -
/* Ajoute une flèche après les liens */
-a:after {
-  content: "→";
-}
- -
-

Note : les pseudo-éléments générés par ::before et ::after sont contenus dans la boîte de mise en forme de l'élément. Aussi, ::before et ::after ne s'appliquent pas aux éléments remplacés tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}.

-
- -

Syntaxe

- -{{csssyntax}} - -
-

Note : CSS3 a introduit la notation ::after  (avec deux deux-points) pour distinguer les pseudo-classes des pseudo-éléments. Les navigateurs acceptent aussi:after, introduite dans CSS2.

-
- -

Exemples

- -

Utilisation simple

- -

Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux.

- -

HTML

- -
<p class="texte-ennuyeux">Voici un peu de vieux texte ennuyeux ordinaire.</p>
-<p>Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.</p>
-<p class="texte-interessant">Contribuer à MDN est facile et amusant.
-  Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.</p>
- -

CSS

- -
.texte-interessant::after {
-  content: "<- maintenant, cela *est* intéressant !";
-  color: green;
-}
-
-.texte-ennuyeux::after {
-  content: "<- ENNUYEUX !";
-  color: red;
-}
- -

Résultat

- -

{{EmbedLiveSample('Utilisation_simple', '100%', 170)}}

- -

Exemple décoratif

- -

On peut mettre en forme du texte ou des images avec la propriété {{cssxref("content")}} à peu près de quelque manière que nous le voulions :

- -

HTML

- -
<span class="ruban">Observez où se trouve la boîte orange.</span>
-
- -

CSS

- -
.ruban {
-  background-color: #5BC8F7;
-}
-
-.ruban::after {
-  content: "Voyez cette boîte orange.";
-  background-color: #FFBA10;
-  border-color: black;
-  border-style: dotted;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemple_décoratif', '100%', 60)}}

- -

Bulles d’information

- -

Dans l'exemple suivant, on illustre le pseudo-élément ::after avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé data-descr afin de créer une bulle d'information de type glossaire en CSS pur.

- -

On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un tabindex de 0 pour faire un span focusable, et en utilisant la sélection :focus. Cela montre à quel point les options ::before and ::after peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié..

- -

HTML

- -
<p>Voici l’exemple en action du code ci-dessus.<br />
-  Nous avons un peu de <span data-descr="collection de mots et de ponctuation">texte</span>
-  ici avec quelques <span data-descr="petites fenêtres surgissantes qui se cachent aussi">
-  bulles d’information</span>.<br />
-  Ne soyez pas timide, survolez le texte pour jeter un <span data-descr="à ne pas prendre au sens littéral">œil</span>.
-</p>
- -

CSS

- -
span[data-descr] {
-  position: relative;
-  text-decoration: underline;
-  color: #00F;
-  cursor: help;
-}
-
-span[data-descr]:hover::after {
-  content: attr(data-descr);
-  position: absolute;
-  left: 0;
-  top: 24px;
-  min-width: 200px;
-  border: 1px #aaaaaa solid;
-  border-radius: 10px;
-  background-color: #ffffcc;
-  padding: 12px;
-  color: #000000;
-  font-size: 14px;
-  z-index: 1;
-}
- -

Résultat

- -

{{EmbedLiveSample("Bulles_d’information", '100%', 150)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaire
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}Pas de changement significatif depuis la spécification précédente.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Permet les transitions sur les propriétés définies sur les pseudo-éléments.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Permet les animations sur les propriétés définies sur les pseudo-éléments.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Introduit la syntaxe à deux deux-points.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Définition initiale, utilisant la syntaxe à un deux-points.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.after")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_after/index.md b/files/fr/web/css/_doublecolon_after/index.md new file mode 100644 index 0000000000..5b7aa71588 --- /dev/null +++ b/files/fr/web/css/_doublecolon_after/index.md @@ -0,0 +1,179 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Disposition + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

En CSS, ::after crée un pseudo-élément qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « en ligne ».

+ +
/* Ajoute une flèche après les liens */
+a:after {
+  content: "→";
+}
+ +
+

Note : les pseudo-éléments générés par ::before et ::after sont contenus dans la boîte de mise en forme de l'élément. Aussi, ::before et ::after ne s'appliquent pas aux éléments remplacés tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}.

+
+ +

Syntaxe

+ +{{csssyntax}} + +
+

Note : CSS3 a introduit la notation ::after  (avec deux deux-points) pour distinguer les pseudo-classes des pseudo-éléments. Les navigateurs acceptent aussi:after, introduite dans CSS2.

+
+ +

Exemples

+ +

Utilisation simple

+ +

Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux.

+ +

HTML

+ +
<p class="texte-ennuyeux">Voici un peu de vieux texte ennuyeux ordinaire.</p>
+<p>Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.</p>
+<p class="texte-interessant">Contribuer à MDN est facile et amusant.
+  Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.</p>
+ +

CSS

+ +
.texte-interessant::after {
+  content: "<- maintenant, cela *est* intéressant !";
+  color: green;
+}
+
+.texte-ennuyeux::after {
+  content: "<- ENNUYEUX !";
+  color: red;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_simple', '100%', 170)}}

+ +

Exemple décoratif

+ +

On peut mettre en forme du texte ou des images avec la propriété {{cssxref("content")}} à peu près de quelque manière que nous le voulions :

+ +

HTML

+ +
<span class="ruban">Observez où se trouve la boîte orange.</span>
+
+ +

CSS

+ +
.ruban {
+  background-color: #5BC8F7;
+}
+
+.ruban::after {
+  content: "Voyez cette boîte orange.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_décoratif', '100%', 60)}}

+ +

Bulles d’information

+ +

Dans l'exemple suivant, on illustre le pseudo-élément ::after avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé data-descr afin de créer une bulle d'information de type glossaire en CSS pur.

+ +

On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un tabindex de 0 pour faire un span focusable, et en utilisant la sélection :focus. Cela montre à quel point les options ::before and ::after peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié..

+ +

HTML

+ +
<p>Voici l’exemple en action du code ci-dessus.<br />
+  Nous avons un peu de <span data-descr="collection de mots et de ponctuation">texte</span>
+  ici avec quelques <span data-descr="petites fenêtres surgissantes qui se cachent aussi">
+  bulles d’information</span>.<br />
+  Ne soyez pas timide, survolez le texte pour jeter un <span data-descr="à ne pas prendre au sens littéral">œil</span>.
+</p>
+ +

CSS

+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Bulles_d’information", '100%', 150)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaire
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}Pas de changement significatif depuis la spécification précédente.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Permet les transitions sur les propriétés définies sur les pseudo-éléments.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Permet les animations sur les propriétés définies sur les pseudo-éléments.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Introduit la syntaxe à deux deux-points.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Définition initiale, utilisant la syntaxe à un deux-points.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.after")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_backdrop/index.html b/files/fr/web/css/_doublecolon_backdrop/index.html deleted file mode 100644 index 4a5d8fae17..0000000000 --- a/files/fr/web/css/_doublecolon_backdrop/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: '::backdrop' -slug: Web/CSS/::backdrop -tags: - - CSS - - Pseudo-element - - Reference -translation_of: Web/CSS/::backdrop ---- -
{{CSSRef}}
- -

Le pseudo-élément ::backdrop est une boîte de la taille de la zone d'affichage (viewport) qui est affichée immédiatement sous un élément lorsque ce dernier est affiché en plein écran. Cela correspond aux éléments passés en plein écran via l'API Fullscreen et aux éléments {{HTMLElement("dialog")}}.

- -

Lorsque plusieurs éléments sont en plein écran, ce pseudo-élément est dessiné derrière l'élément qui est le plus en avant et par dessus les autres éléments.

- -
// Cette ombre n'est affichée que lorsque la boîte de dialogue
-// est ouverte avec dialog.showModal()
-dialog::backdrop {
-  background: rgba(255,0,0,.25);
-}
- -
-

Note : L'élément ::backdrop peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.

-
- -

Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.

- -

Syntaxe

- -{{CSSSyntax}} - -

Exemples

- -

Dans cet exemple, on indique que l'ombre derrière la vidéo en plein écran doit être bleu-gris plutôt que noire.

- -
video::backdrop {
-  background-color: #448;
-}
-
- -

Voici le résultat obtenu :

- -

- -

On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.

- -

Vous pouvez voir cette démonstration en live ou voir et modifier le code sur Glitch.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.backdrop")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_backdrop/index.md b/files/fr/web/css/_doublecolon_backdrop/index.md new file mode 100644 index 0000000000..4a5d8fae17 --- /dev/null +++ b/files/fr/web/css/_doublecolon_backdrop/index.md @@ -0,0 +1,78 @@ +--- +title: '::backdrop' +slug: Web/CSS/::backdrop +tags: + - CSS + - Pseudo-element + - Reference +translation_of: Web/CSS/::backdrop +--- +
{{CSSRef}}
+ +

Le pseudo-élément ::backdrop est une boîte de la taille de la zone d'affichage (viewport) qui est affichée immédiatement sous un élément lorsque ce dernier est affiché en plein écran. Cela correspond aux éléments passés en plein écran via l'API Fullscreen et aux éléments {{HTMLElement("dialog")}}.

+ +

Lorsque plusieurs éléments sont en plein écran, ce pseudo-élément est dessiné derrière l'élément qui est le plus en avant et par dessus les autres éléments.

+ +
// Cette ombre n'est affichée que lorsque la boîte de dialogue
+// est ouverte avec dialog.showModal()
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}
+ +
+

Note : L'élément ::backdrop peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.

+
+ +

Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Exemples

+ +

Dans cet exemple, on indique que l'ombre derrière la vidéo en plein écran doit être bleu-gris plutôt que noire.

+ +
video::backdrop {
+  background-color: #448;
+}
+
+ +

Voici le résultat obtenu :

+ +

+ +

On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.

+ +

Vous pouvez voir cette démonstration en live ou voir et modifier le code sur Glitch.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.backdrop")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_before/index.html b/files/fr/web/css/_doublecolon_before/index.html deleted file mode 100644 index 51d962fb43..0000000000 --- a/files/fr/web/css/_doublecolon_before/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: '::before (:before)' -slug: 'Web/CSS/::before' -tags: - - CSS - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::before' ---- -
{{CSSRef}}
- -

::before crée un pseudo-élément qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (inline).

- -
/* On ajoute un coeur avant les liens */
-a::before {
-  content: "♥";
-}
-
- -
-

Note : Les pseudo-éléments générés par ::before et ::after sont contenus dans la boîte de mise en forme de l'élément. Aussi, ::before et ::after ne s'appliquent pas aux éléments remplacés tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.

-
- -

Syntaxe

- -{{csssyntax}} - -

La notation ::before a été introduite par CSS 3 pour différencier les pseudo-classes et les pseudo-éléments. Les navigateurs acceptent aussi la notation :before introduite par CSS 2.

- -

Exemples

- -

Ajouter des guillemets

- -

Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons ::before et {{cssxref("::after")}} pour effectuer l'insertion.

- -

HTML

- -
<q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q>
- -

CSS

- -
q::before {
-  content: "«";
-  color: blue;
-}
-q::after {
-  content: '»';
-  color: red;
-}
- -

Résultat

- -

{{EmbedLiveSample('Ajouter_des_guillemets', '500', '50', '')}}

- -

Exemple décoratif

- -

Il est possible de mettre du style à du texte ou des images, dans la propriété {{cssxref("content")}} , quasiment de n'importe quelle manière.

- -

HTML

- -
<span class="ribbon">Observez où est placée la boite orange.</span>
- -

CSS

- -
.ribbon {
-  background-color: #5BC8F7;
-}
-
-.ribbon::before {
-  content: "Regardez cette boite orange.";
-  background-color: #FFBA10;
-  border-color: black;
-  border-style: dotted;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemple_décoratif', 450, 60)}}

- -

Liste de choses à faire

- -

Dans cet exemple, nous allons créer une simple liste de choses à faire en utilisant les pseudo-éléments. Cette méthode peut être utilisée pour ajouter une petite touche à l'interface utilisateur et améliorer l'expérience utilisateur.

- -

HTML

- -
<ul>
-  <li>Acheter du lait</li>
-  <li>Promener le chien</li>
-  <li>Faire de l'exercice</li>
-  <li>Coder</li>
-  <li>Jouer de la musique</li>
-  <li>Se reposer</li>
-</ul>
-
- -

CSS

- -
li {
-  list-style-type: none;
-  position: relative;
-  margin: 1px;
-  padding: 0.5em 0.5em 0.5em 2em;
-  background: lightgrey;
-  font-family: sans-serif;
-}
-
-li.done {
-  background: #CCFF99;
-}
-
-li.done::before {
-  content: '';
-  position: absolute;
-  border-color: #009933;
-  border-style: solid;
-  border-width: 0 0.3em 0.25em 0;
-  height: 1em;
-  top: 1.3em;
-  left: 0.6em;
-  margin-top: -1em;
-  transform: rotate(45deg);
-  width: 0.5em;
-}
- -

JavaScript

- -
var list = document.querySelector('ul');
-list.addEventListener('click', function(ev) {
-  if( ev.target.tagName === 'LI') {
-     ev.target.classList.toggle('done');
-  }
-}, false);
-
- -

Résultat

- -

{{EmbedLiveSample('Liste_de_choses_à_faire', '400', '300', '')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}Pas de modification significative depuis la spécification précédente.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introduction de la syntaxe avec les deux deux-points.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Définition initiale avec une seule fois le caractère deux-points.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.before")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_before/index.md b/files/fr/web/css/_doublecolon_before/index.md new file mode 100644 index 0000000000..51d962fb43 --- /dev/null +++ b/files/fr/web/css/_doublecolon_before/index.md @@ -0,0 +1,187 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

::before crée un pseudo-élément qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (inline).

+ +
/* On ajoute un coeur avant les liens */
+a::before {
+  content: "♥";
+}
+
+ +
+

Note : Les pseudo-éléments générés par ::before et ::after sont contenus dans la boîte de mise en forme de l'élément. Aussi, ::before et ::after ne s'appliquent pas aux éléments remplacés tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

La notation ::before a été introduite par CSS 3 pour différencier les pseudo-classes et les pseudo-éléments. Les navigateurs acceptent aussi la notation :before introduite par CSS 2.

+ +

Exemples

+ +

Ajouter des guillemets

+ +

Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons ::before et {{cssxref("::after")}} pour effectuer l'insertion.

+ +

HTML

+ +
<q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q>
+ +

CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: '»';
+  color: red;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Ajouter_des_guillemets', '500', '50', '')}}

+ +

Exemple décoratif

+ +

Il est possible de mettre du style à du texte ou des images, dans la propriété {{cssxref("content")}} , quasiment de n'importe quelle manière.

+ +

HTML

+ +
<span class="ribbon">Observez où est placée la boite orange.</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Regardez cette boite orange.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_décoratif', 450, 60)}}

+ +

Liste de choses à faire

+ +

Dans cet exemple, nous allons créer une simple liste de choses à faire en utilisant les pseudo-éléments. Cette méthode peut être utilisée pour ajouter une petite touche à l'interface utilisateur et améliorer l'expérience utilisateur.

+ +

HTML

+ +
<ul>
+  <li>Acheter du lait</li>
+  <li>Promener le chien</li>
+  <li>Faire de l'exercice</li>
+  <li>Coder</li>
+  <li>Jouer de la musique</li>
+  <li>Se reposer</li>
+</ul>
+
+ +

CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 1px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Résultat

+ +

{{EmbedLiveSample('Liste_de_choses_à_faire', '400', '300', '')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}Pas de modification significative depuis la spécification précédente.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introduction de la syntaxe avec les deux deux-points.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Définition initiale avec une seule fois le caractère deux-points.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.before")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_cue-region/index.html b/files/fr/web/css/_doublecolon_cue-region/index.html deleted file mode 100644 index 4386cd36f5..0000000000 --- a/files/fr/web/css/_doublecolon_cue-region/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '::cue-region' -slug: 'Web/CSS/::cue-region' -tags: - - CSS - - Media - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::cue-region' ---- -

{{CSSRef}}{{Draft}}{{SeeCompatTable}}

- -

Le pseudo-élément CSS ::cue-region correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de mettre en forme des sous-titres et autres indications textuelles de pistes VTT.

- -
::cue-region {
-  color: yellow;
-  font-weight: bold;
-}
- -

Propriétés autorisées

- -

Les règles utilisant ::cue-region sont limitées aux propriétés CSS suivantes :

- - - -

Les propriétés sont appliquées à l'intégralité des indications textuelles comme si celles-ci formaient une seule unité. La seulle exception à ce comportement est l'application de background (et/ou des propriétés détaillées correspondantes) : cette propriété s'applique distinctement à chaque partie du texte séparément afin d'éviter de masquer ou d'obscurcir de grandes zones de texte sur le média.

- -

Syntaxe

- -{{CSSSyntax}} - -

Exemples

- -
-

Note : Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("WebVTT", "#the-cue-region-pseudo-element", "the ::cue-region pseudo-element")}}{{Spec2("WebVTT")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.cue-region")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_cue-region/index.md b/files/fr/web/css/_doublecolon_cue-region/index.md new file mode 100644 index 0000000000..4386cd36f5 --- /dev/null +++ b/files/fr/web/css/_doublecolon_cue-region/index.md @@ -0,0 +1,82 @@ +--- +title: '::cue-region' +slug: 'Web/CSS/::cue-region' +tags: + - CSS + - Media + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::cue-region' +--- +

{{CSSRef}}{{Draft}}{{SeeCompatTable}}

+ +

Le pseudo-élément CSS ::cue-region correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de mettre en forme des sous-titres et autres indications textuelles de pistes VTT.

+ +
::cue-region {
+  color: yellow;
+  font-weight: bold;
+}
+ +

Propriétés autorisées

+ +

Les règles utilisant ::cue-region sont limitées aux propriétés CSS suivantes :

+ + + +

Les propriétés sont appliquées à l'intégralité des indications textuelles comme si celles-ci formaient une seule unité. La seulle exception à ce comportement est l'application de background (et/ou des propriétés détaillées correspondantes) : cette propriété s'applique distinctement à chaque partie du texte séparément afin d'éviter de masquer ou d'obscurcir de grandes zones de texte sur le média.

+ +

Syntaxe

+ +{{CSSSyntax}} + +

Exemples

+ +
+

Note : Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("WebVTT", "#the-cue-region-pseudo-element", "the ::cue-region pseudo-element")}}{{Spec2("WebVTT")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.cue-region")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_cue/index.html b/files/fr/web/css/_doublecolon_cue/index.html deleted file mode 100644 index 01ab9c8284..0000000000 --- a/files/fr/web/css/_doublecolon_cue/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: '::cue' -slug: 'Web/CSS/::cue' -tags: - - CSS - - Pseudo-element - - Reference - - WebVTT -translation_of: 'Web/CSS/::cue' ---- -
{{CSSRef}}
- -

Le pseudo-élément CSS ::cue permet de cibler les indications textuelles WebVTT d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme les légendes et autres indications textuelles pour les médias avec des pistes VTT.

- -
::cue {
-  color: yellow;
-  font-weight: bold;
-}
- -

Propriétés autorisées

- -

Seul un sous-ensemble des propriétés CSS peut être utilisé avec le pseudo-élément ::cue :

- - - -

Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule background (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).

- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

La règle CSS suivante permet d'avoir les indications textuelles dans un texte blanc et sur un arrière-plan qui est une boîte noire transparent.

- -
::cue {
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.6);
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.cue")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_cue/index.md b/files/fr/web/css/_doublecolon_cue/index.md new file mode 100644 index 0000000000..01ab9c8284 --- /dev/null +++ b/files/fr/web/css/_doublecolon_cue/index.md @@ -0,0 +1,79 @@ +--- +title: '::cue' +slug: 'Web/CSS/::cue' +tags: + - CSS + - Pseudo-element + - Reference + - WebVTT +translation_of: 'Web/CSS/::cue' +--- +
{{CSSRef}}
+ +

Le pseudo-élément CSS ::cue permet de cibler les indications textuelles WebVTT d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme les légendes et autres indications textuelles pour les médias avec des pistes VTT.

+ +
::cue {
+  color: yellow;
+  font-weight: bold;
+}
+ +

Propriétés autorisées

+ +

Seul un sous-ensemble des propriétés CSS peut être utilisé avec le pseudo-élément ::cue :

+ + + +

Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule background (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).

+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

La règle CSS suivante permet d'avoir les indications textuelles dans un texte blanc et sur un arrière-plan qui est une boîte noire transparent.

+ +
::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.cue")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_file-selector-button/index.html b/files/fr/web/css/_doublecolon_file-selector-button/index.html deleted file mode 100644 index 67030cc606..0000000000 --- a/files/fr/web/css/_doublecolon_file-selector-button/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: '::-webkit-file-upload-button' -slug: Web/CSS/::file-selector-button -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: Web/CSS/::file-selector-button -original_slug: Web/CSS/::-webkit-file-upload-button ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-file-upload-button représente le bouton d'un élément {{HTMLElement("input")}} de type file.

- -

Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.

- -

Syntaxe

- -
selecteur::-webkit-file-upload-button
-
- -

Exemples

- -

CSS

- -
input, label {
-  display: block;
-}
-
-input[type=file]::-webkit-file-upload-button {
-  border: 1px solid grey;
-  background: #FFFAAA;
-}
- -

HTML

- -
<form>
-  <label for="fileUpload">Uploader un fichier</label><br>
-  <input type="file" id="fileUpload">
-</form>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.-webkit-file-upload-button")}}

diff --git a/files/fr/web/css/_doublecolon_file-selector-button/index.md b/files/fr/web/css/_doublecolon_file-selector-button/index.md new file mode 100644 index 0000000000..67030cc606 --- /dev/null +++ b/files/fr/web/css/_doublecolon_file-selector-button/index.md @@ -0,0 +1,53 @@ +--- +title: '::-webkit-file-upload-button' +slug: Web/CSS/::file-selector-button +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: Web/CSS/::file-selector-button +original_slug: Web/CSS/::-webkit-file-upload-button +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-file-upload-button représente le bouton d'un élément {{HTMLElement("input")}} de type file.

+ +

Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.

+ +

Syntaxe

+ +
selecteur::-webkit-file-upload-button
+
+ +

Exemples

+ +

CSS

+ +
input, label {
+  display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+  border: 1px solid grey;
+  background: #FFFAAA;
+}
+ +

HTML

+ +
<form>
+  <label for="fileUpload">Uploader un fichier</label><br>
+  <input type="file" id="fileUpload">
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.-webkit-file-upload-button")}}

diff --git a/files/fr/web/css/_doublecolon_first-letter/index.html b/files/fr/web/css/_doublecolon_first-letter/index.html deleted file mode 100644 index 23d75fa8fd..0000000000 --- a/files/fr/web/css/_doublecolon_first-letter/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: '::first-letter' -slug: Web/CSS/::first-letter -tags: - - CSS - - Pseudo-element - - Reference -translation_of: Web/CSS/::first-letter ---- -
{{CSSRef}}
- -

Le pseudo-élément ::first-letter sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.

- -
/* Sélectionne la première lettre */
-/* d'un élément <p> */
-p::first-letter {
-  color: red;
-  font-size: 130%;
-}
- -

La première lettre d'un élément n'est pas forcément évidente à identifier :

- - - -

Une première ligne n'a de signification que dans une boîte englobante, ainsi le pseudo-élément ::first-letter n'a un effet que sur les éléments ayant une valeur {{cssxref("display")}} correspondant à block, inline-block, table-cell, list-item ou table-caption. Dans tous les autres cas, ::first-letter n'a pas d'effet.

- -

Propriétés utilisables

- -

Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément ::first-letter :

- - - -

Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.

- -
-

Note : Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.

-

Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.

-

Si les navigateurs anciens doivent être supportés, :first-letter est le seul choix viable. Sinon, la syntaxe ::first-letter doit être privilégiée.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Dans cet exemple, on prend la première lettre de chaque paragraphe et on l'affiche en rouge et en gros.

- -

CSS

- -
p::first-letter {
-  color: red;
-  font-size: 130%;
-}
- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
-  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.</p>
-<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
-<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
-  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
-  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
-  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
-  nulla facilisi.</p>
-<p>-The beginning of a special punctuation mark.</p>
-<p>_The beginning of a special punctuation mark.</p>
-<p>"The beginning of a special punctuation mark.</p>
-<p>'The beginning of a special punctuation mark.</p>
-<p>*The beginning of a special punctuation mark.</p>
-<p>#The beginning of a special punctuation mark.</p>
-<p>「特殊的汉字标点符号开头。</p>
-<p>《特殊的汉字标点符号开头。</p>
-<p>“特殊的汉字标点符号开头。</p>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '80%', 420)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{Spec2('CSS4 Pseudo-Elements')}}Généralisation des propriétés permises pour la mise en forme du texte et des popriétés de mise en page en-ligne, {{cssxref("opacity")}} et {{cssxref("box-shadow")}}.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow avec ::first-letter')}}{{Spec2('CSS3 Text Decoration')}}Autorise l'usage de {{cssxref("text-shadow")}} avec ::first-letter.
{{SpecName('CSS3 Selectors', '#first-letter', '::first-letter')}}{{Spec2('CSS3 Selectors')}}Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais IJ).
{{SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter')}}{{Spec2('CSS1')}}La définition initiale utilisait la syntaxe à un caractère deux-points.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.first-letter")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_first-letter/index.md b/files/fr/web/css/_doublecolon_first-letter/index.md new file mode 100644 index 0000000000..23d75fa8fd --- /dev/null +++ b/files/fr/web/css/_doublecolon_first-letter/index.md @@ -0,0 +1,141 @@ +--- +title: '::first-letter' +slug: Web/CSS/::first-letter +tags: + - CSS + - Pseudo-element + - Reference +translation_of: Web/CSS/::first-letter +--- +
{{CSSRef}}
+ +

Le pseudo-élément ::first-letter sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.

+ +
/* Sélectionne la première lettre */
+/* d'un élément <p> */
+p::first-letter {
+  color: red;
+  font-size: 130%;
+}
+ +

La première lettre d'un élément n'est pas forcément évidente à identifier :

+ + + +

Une première ligne n'a de signification que dans une boîte englobante, ainsi le pseudo-élément ::first-letter n'a un effet que sur les éléments ayant une valeur {{cssxref("display")}} correspondant à block, inline-block, table-cell, list-item ou table-caption. Dans tous les autres cas, ::first-letter n'a pas d'effet.

+ +

Propriétés utilisables

+ +

Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément ::first-letter :

+ + + +

Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.

+ +
+

Note : Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.

+

Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.

+

Si les navigateurs anciens doivent être supportés, :first-letter est le seul choix viable. Sinon, la syntaxe ::first-letter doit être privilégiée.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Dans cet exemple, on prend la première lettre de chaque paragraphe et on l'affiche en rouge et en gros.

+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 130%;
+}
+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
+  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
+  nulla facilisi.</p>
+<p>-The beginning of a special punctuation mark.</p>
+<p>_The beginning of a special punctuation mark.</p>
+<p>"The beginning of a special punctuation mark.</p>
+<p>'The beginning of a special punctuation mark.</p>
+<p>*The beginning of a special punctuation mark.</p>
+<p>#The beginning of a special punctuation mark.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '80%', 420)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{Spec2('CSS4 Pseudo-Elements')}}Généralisation des propriétés permises pour la mise en forme du texte et des popriétés de mise en page en-ligne, {{cssxref("opacity")}} et {{cssxref("box-shadow")}}.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow avec ::first-letter')}}{{Spec2('CSS3 Text Decoration')}}Autorise l'usage de {{cssxref("text-shadow")}} avec ::first-letter.
{{SpecName('CSS3 Selectors', '#first-letter', '::first-letter')}}{{Spec2('CSS3 Selectors')}}Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais IJ).
{{SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter')}}{{Spec2('CSS1')}}La définition initiale utilisait la syntaxe à un caractère deux-points.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.first-letter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_first-line/index.html b/files/fr/web/css/_doublecolon_first-line/index.html deleted file mode 100644 index 11f165eae1..0000000000 --- a/files/fr/web/css/_doublecolon_first-line/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: '::first-line (:first-line)' -slug: Web/CSS/::first-line -tags: - - CSS - - Pseudo-element - - Reference -translation_of: Web/CSS/::first-line ---- -
{{CSSRef}}
- -

Le pseudo-élément ::first-line applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant ::first-line ne ciblent pas un élément HTML réel.

- -
/* Sélectionne la première ligne */
-/*  d'un élément <p> */
-::first-line {
-  color: red;
-  text-transform: uppercase;
-}
- -

Une première ligne n'a de sens que dans une boîte de type bloc, et ainsi le pseudo-élément ::first-line n'a d'effet que sur les éléments dont {{cssxref("display")}} à une valeur de block, inline-block, table-cell ou table-caption. Dans tous les autres cas, ::first-line n'a pas d'effet.

- -

Propriétés utilisables

- -

Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de déclaration contenant un sélecteur CSS utilisant le pseudo-élément ::first-line :

- - - -

Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.

- -
-

Note : Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.

-

Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.

-

Si les navigateurs anciens doivent être supportés, :first-line est le seul choix viable ; sinon,::first-line est préféré.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

text-transform

- -

Toutes les lettres de la première ligne de chaque paragraphe sont en majuscules.

- -

CSS

- -
p::first-line {
-  text-transform: uppercase;
-}
- -

HTML

- -
<p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore.
-</p>
- -

Résultat

- -

{{EmbedLiveSample('text-transform', 250, 100)}}

- -

margin-left

- -

Ici, l'effet est nul car margin-left ne peut pas être appliquée sur ce pseudo-élément.

- -

CSS

- -
p::first-line {
-  margin-left: 20px;
-}
- -

HTML

- -
<p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore.
-</p>
- -

Résultat

- -

{{EmbedLiveSample('margin-left', 250, 100)}}

- -

text-indent

- -

Là encore, l'effet est nul, text-indent ne peut pas être appliqué sur ce pseudo-élément.

- -

CSS

- -
p::first-line {
-  text-indent: 20px;
-}
- -

HTML

- -
<p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore.
-</p>
- -

Résultat

- -

{{EmbedLiveSample('text-indent', 250, 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}}La définition est affinée pour indiquer où ce pseudo-élément peut correspondre. Les propriétés possibles sont généralisées (fontes, décoration, disposition en ligne et {{cssxref("opacity")}}). Définit l'héritage de ::first-letter.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}La propriété {{cssxref("text-shadow")}} peut être utilisée avec ::first-letter.
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}La définition de « première ligne » a été reformulée. La syntaxe utilise désormais deux fois le caractère deux-points.
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}La définition initiale qui utilise la syntaxe avec un seul caractère deux-points.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.first-line")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_first-line/index.md b/files/fr/web/css/_doublecolon_first-line/index.md new file mode 100644 index 0000000000..11f165eae1 --- /dev/null +++ b/files/fr/web/css/_doublecolon_first-line/index.md @@ -0,0 +1,159 @@ +--- +title: '::first-line (:first-line)' +slug: Web/CSS/::first-line +tags: + - CSS + - Pseudo-element + - Reference +translation_of: Web/CSS/::first-line +--- +
{{CSSRef}}
+ +

Le pseudo-élément ::first-line applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant ::first-line ne ciblent pas un élément HTML réel.

+ +
/* Sélectionne la première ligne */
+/*  d'un élément <p> */
+::first-line {
+  color: red;
+  text-transform: uppercase;
+}
+ +

Une première ligne n'a de sens que dans une boîte de type bloc, et ainsi le pseudo-élément ::first-line n'a d'effet que sur les éléments dont {{cssxref("display")}} à une valeur de block, inline-block, table-cell ou table-caption. Dans tous les autres cas, ::first-line n'a pas d'effet.

+ +

Propriétés utilisables

+ +

Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de déclaration contenant un sélecteur CSS utilisant le pseudo-élément ::first-line :

+ + + +

Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.

+ +
+

Note : Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.

+

Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.

+

Si les navigateurs anciens doivent être supportés, :first-line est le seul choix viable ; sinon,::first-line est préféré.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

text-transform

+ +

Toutes les lettres de la première ligne de chaque paragraphe sont en majuscules.

+ +

CSS

+ +
p::first-line {
+  text-transform: uppercase;
+}
+ +

HTML

+ +
<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('text-transform', 250, 100)}}

+ +

margin-left

+ +

Ici, l'effet est nul car margin-left ne peut pas être appliquée sur ce pseudo-élément.

+ +

CSS

+ +
p::first-line {
+  margin-left: 20px;
+}
+ +

HTML

+ +
<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('margin-left', 250, 100)}}

+ +

text-indent

+ +

Là encore, l'effet est nul, text-indent ne peut pas être appliqué sur ce pseudo-élément.

+ +

CSS

+ +
p::first-line {
+  text-indent: 20px;
+}
+ +

HTML

+ +
<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('text-indent', 250, 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}}La définition est affinée pour indiquer où ce pseudo-élément peut correspondre. Les propriétés possibles sont généralisées (fontes, décoration, disposition en ligne et {{cssxref("opacity")}}). Définit l'héritage de ::first-letter.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}La propriété {{cssxref("text-shadow")}} peut être utilisée avec ::first-letter.
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}La définition de « première ligne » a été reformulée. La syntaxe utilise désormais deux fois le caractère deux-points.
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}La définition initiale qui utilise la syntaxe avec un seul caractère deux-points.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.first-line")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_grammar-error/index.html b/files/fr/web/css/_doublecolon_grammar-error/index.html deleted file mode 100644 index 6d55d7ab01..0000000000 --- a/files/fr/web/css/_doublecolon_grammar-error/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '::grammar-error' -slug: 'Web/CSS/::grammar-error' -tags: - - CSS - - Experimental - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::grammar-error' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Le pseudo-élément CSS ::grammar-error représente une portion de texte que le navigateur signale comme contenant une ou plusieurs erreurs de grammaire.

- -
::grammar-error {
-  color: green;
-}
- -

Propriétés autorisées

- -

Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle contenant ::grammar-error :

- - - -

Syntaxe

- -
::grammar-error
- -

Exemples

- -

CSS

- -
p::grammar-error { color:red }
- -

HTML

- -
<p>
-  Alice devina tout de suite qu’il chercher l’éventail
-  et la paire de gants.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","250","100")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.grammar-error")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_grammar-error/index.md b/files/fr/web/css/_doublecolon_grammar-error/index.md new file mode 100644 index 0000000000..6d55d7ab01 --- /dev/null +++ b/files/fr/web/css/_doublecolon_grammar-error/index.md @@ -0,0 +1,82 @@ +--- +title: '::grammar-error' +slug: 'Web/CSS/::grammar-error' +tags: + - CSS + - Experimental + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::grammar-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le pseudo-élément CSS ::grammar-error représente une portion de texte que le navigateur signale comme contenant une ou plusieurs erreurs de grammaire.

+ +
::grammar-error {
+  color: green;
+}
+ +

Propriétés autorisées

+ +

Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle contenant ::grammar-error :

+ + + +

Syntaxe

+ +
::grammar-error
+ +

Exemples

+ +

CSS

+ +
p::grammar-error { color:red }
+ +

HTML

+ +
<p>
+  Alice devina tout de suite qu’il chercher l’éventail
+  et la paire de gants.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","250","100")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.grammar-error")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_marker/index.html b/files/fr/web/css/_doublecolon_marker/index.html deleted file mode 100644 index d4f4c6f0dc..0000000000 --- a/files/fr/web/css/_doublecolon_marker/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: '::marker' -slug: 'Web/CSS/::marker' -tags: - - CSS - - Experimental - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::marker' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Le pseudo-élément ::marker représente le marqueur d'un élément d'une liste (par exemple la puce ou le numéro de l'élément d'un élément {{HTMLElement("li")}}). Ce pseudo-élément ne fonctionne que pour les éléments ou pseudo-éléments pour lesquels {{cssxref("display")}} vaut list-item (par défaut c'est le cas des éléments {{htmlelement("li")}} et {{htmlelement("summary")}}).

- -
::marker {
-  color: red;
-  font-size: 1.5em;
-}
- -

Propriétés autorisées

- -

Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règle qui utilise ::marker :

- - - -
-

Note : La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.

-
- -

Syntaxe

- -{{CSSSyntax}} - -

Exemples

- -

CSS

- -
li::marker {
-  color:red;
-}
- -

HTML

- -
<ol>
- <li>Savoir lacer ses chaussures</li>
- <li>Et compter deux par deux.</li>
-</ol>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","150")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}Aucune modification significative.
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.marker")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_marker/index.md b/files/fr/web/css/_doublecolon_marker/index.md new file mode 100644 index 0000000000..d4f4c6f0dc --- /dev/null +++ b/files/fr/web/css/_doublecolon_marker/index.md @@ -0,0 +1,97 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +tags: + - CSS + - Experimental + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::marker' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le pseudo-élément ::marker représente le marqueur d'un élément d'une liste (par exemple la puce ou le numéro de l'élément d'un élément {{HTMLElement("li")}}). Ce pseudo-élément ne fonctionne que pour les éléments ou pseudo-éléments pour lesquels {{cssxref("display")}} vaut list-item (par défaut c'est le cas des éléments {{htmlelement("li")}} et {{htmlelement("summary")}}).

+ +
::marker {
+  color: red;
+  font-size: 1.5em;
+}
+ +

Propriétés autorisées

+ +

Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règle qui utilise ::marker :

+ + + +
+

Note : La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.

+
+ +

Syntaxe

+ +{{CSSSyntax}} + +

Exemples

+ +

CSS

+ +
li::marker {
+  color:red;
+}
+ +

HTML

+ +
<ol>
+ <li>Savoir lacer ses chaussures</li>
+ <li>Et compter deux par deux.</li>
+</ol>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","150")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}Aucune modification significative.
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.marker")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_part/index.html b/files/fr/web/css/_doublecolon_part/index.html deleted file mode 100644 index 98bb333590..0000000000 --- a/files/fr/web/css/_doublecolon_part/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: '::part()' -slug: 'Web/CSS/::part' -tags: - - '::part' - - CSS - - Draft - - Exp - - NeedsBrowserCompatibility - - NeedsExample - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::part' ---- -
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
- -

Le pseudo-élément CSS ::part représente n’importe quel élément dans un arbre fantôme qui a un attribut {{HTMLAttrxRef("part")}} correspondant.

- -
custom-element::part(foo) {
-  /* Styles à appliquer à la partie `foo` */
-}
-
- -

Syntaxe

- -{{CSSSyntax}} - -

Exemples

- -

<tabbed-custom-element>

- -

Arbre fantôme <tabbed-custom-element>

- -
<style type="text/css">
-  *, ::before, ::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: flex;
-  }
-</style>
-<div part="tab active">
-  Tab 1
-</div>
-<div part="tab">
-  Tab 2
-</div>
-<div part="tab">
-  Tab 3
-</div>
-
- -

Feuille de style chargée dans un arbre léger

- -
-tabbed-custom-element::part(tab) {
-  color: #0c0c0dcc;
-  border-bottom: transparent solid 2px;
-}
-
-tabbed-custom-element::part(tab):hover {
-  background-color: #0c0c0d19;
-  border-color: #0c0c0d33;
-}
-
-tabbed-custom-element::part(tab):hover:active {
-  background-color: #0c0c0d33;
-}
-
-tabbed-custom-element::part(tab):focus {
-  box-shadow:
-    0 0 0 1px #0a84ff inset,
-    0 0 0 1px #0a84ff,
-    0 0 0 4px rgba(10, 132, 255, 0.3);
-}
-
-tabbed-custom-element::part(active tab) {
-  color: #0060df;
-  border-color: #0a84ff !important;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
Spécification­ÉtatCommentaires
{{SpecName("CSS Shadow Parts", "#part", "::part")}}{{Spec2("CSS Shadow Parts")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.part")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_part/index.md b/files/fr/web/css/_doublecolon_part/index.md new file mode 100644 index 0000000000..98bb333590 --- /dev/null +++ b/files/fr/web/css/_doublecolon_part/index.md @@ -0,0 +1,111 @@ +--- +title: '::part()' +slug: 'Web/CSS/::part' +tags: + - '::part' + - CSS + - Draft + - Exp + - NeedsBrowserCompatibility + - NeedsExample + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::part' +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

Le pseudo-élément CSS ::part représente n’importe quel élément dans un arbre fantôme qui a un attribut {{HTMLAttrxRef("part")}} correspondant.

+ +
custom-element::part(foo) {
+  /* Styles à appliquer à la partie `foo` */
+}
+
+ +

Syntaxe

+ +{{CSSSyntax}} + +

Exemples

+ +

<tabbed-custom-element>

+ +

Arbre fantôme <tabbed-custom-element>

+ +
<style type="text/css">
+  *, ::before, ::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: flex;
+  }
+</style>
+<div part="tab active">
+  Tab 1
+</div>
+<div part="tab">
+  Tab 2
+</div>
+<div part="tab">
+  Tab 3
+</div>
+
+ +

Feuille de style chargée dans un arbre léger

+ +
+tabbed-custom-element::part(tab) {
+  color: #0c0c0dcc;
+  border-bottom: transparent solid 2px;
+}
+
+tabbed-custom-element::part(tab):hover {
+  background-color: #0c0c0d19;
+  border-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):hover:active {
+  background-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):focus {
+  box-shadow:
+    0 0 0 1px #0a84ff inset,
+    0 0 0 1px #0a84ff,
+    0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+tabbed-custom-element::part(active tab) {
+  color: #0060df;
+  border-color: #0a84ff !important;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
Spécification­ÉtatCommentaires
{{SpecName("CSS Shadow Parts", "#part", "::part")}}{{Spec2("CSS Shadow Parts")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.part")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_placeholder/index.html b/files/fr/web/css/_doublecolon_placeholder/index.html deleted file mode 100644 index 54944043c7..0000000000 --- a/files/fr/web/css/_doublecolon_placeholder/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: '::placeholder' -slug: Web/CSS/::placeholder -tags: - - CSS - - Pseudo-element - - Reference -translation_of: Web/CSS/::placeholder ---- -
{{CSSRef}}
- -

Le pseudo-élément ::placeholder représente le texte de substitution pour un élément {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}. Cela permet aux développeurs web de personnaliser l'apparence de ce texte.

- -
::placeholder {
-  color: blue;
-  font-size: 1.5em;
-}
- -

Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteur respectant ce pseudo-élément :

- - - -
-

Note : Par défaut, dans la plupart des navigateurs, le texte de substitution est écrit en gris clair.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input::placeholder {
-  color: red;
-}
- -

HTML

- -
<input type="email" placeholder="toto@exemple.com">
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","150")}}

- -

Accessibilité

- -

Contraste

- -

Taux de contraste

- -

Le texte de substitution est généralement représenté avec une couleur plus claire afin d'indiquer qu'il s'agit d'un suggestion et que ce contenu n'a pas été saisi par l'utilisateur ou par le site même.

- -

Il est important de vérifier que le contraste entre la couleur de ce texte et celle de l'arrière-plan est suffisament élevé afin que les personnes avec des conditions de vision faibles puissent les lire.

- -

La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : Web Content Accessibility Guidelines (WCAG), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :

- - - -

Autres ressources :

- - - -

Utilisabilité

- -

Les textes de substitution avec un contraste suffisamment élevé peuvent être pris pour des textes saisis par l'utilisateur. De plus, les textes de substituion disparaissent lorsqu'une personne saisit du contenu dans l'élément {{htmlelement("input")}}. Pour ces deux raisons, les textes de subsitution peuvent gêner la complétion du formulaire, notamment pour les personnes souffrant de troubles cognitifs.

- -

Une autre méthode consiste à fournir cette information en l'incluant à proximité du champ mais en dehors et d'utiliser l'attribut aria-describedby afin de relier l'élément {{HTMLElement("input")}} à l'indication associée.

- -

Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront aria-describedby afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.

- -
<label for="user-email">Votre adresse mail</label>
-<span id="user-email-hint" class="input-hint">Exemple : johndoe@example.com</span>
-<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
-
- - - -

Mode « contraste élevé » de Windows

- -

Lorsque le mode de contraste élevé de Windows est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.

- - - -

Libellés ({{HTMLElement("<label>")}})

- -

Les textes de substitution ne doivent pas remplacer les éléments {{htmlelement("label")}}. Sans libellé associé grâce à {{htmlattrxref("for", "label")}} et à {{htmlattrxref("id")}}, les outils d'assistance tels que les lecteurs d'écran ne peuvent pas correctement analyser les éléments {{htmlelement("input")}}.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Définitions initiales.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.placeholder")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_placeholder/index.md b/files/fr/web/css/_doublecolon_placeholder/index.md new file mode 100644 index 0000000000..54944043c7 --- /dev/null +++ b/files/fr/web/css/_doublecolon_placeholder/index.md @@ -0,0 +1,154 @@ +--- +title: '::placeholder' +slug: Web/CSS/::placeholder +tags: + - CSS + - Pseudo-element + - Reference +translation_of: Web/CSS/::placeholder +--- +
{{CSSRef}}
+ +

Le pseudo-élément ::placeholder représente le texte de substitution pour un élément {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}. Cela permet aux développeurs web de personnaliser l'apparence de ce texte.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteur respectant ce pseudo-élément :

+ + + +
+

Note : Par défaut, dans la plupart des navigateurs, le texte de substitution est écrit en gris clair.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
input::placeholder {
+  color: red;
+}
+ +

HTML

+ +
<input type="email" placeholder="toto@exemple.com">
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","150")}}

+ +

Accessibilité

+ +

Contraste

+ +

Taux de contraste

+ +

Le texte de substitution est généralement représenté avec une couleur plus claire afin d'indiquer qu'il s'agit d'un suggestion et que ce contenu n'a pas été saisi par l'utilisateur ou par le site même.

+ +

Il est important de vérifier que le contraste entre la couleur de ce texte et celle de l'arrière-plan est suffisament élevé afin que les personnes avec des conditions de vision faibles puissent les lire.

+ +

La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : Web Content Accessibility Guidelines (WCAG), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :

+ + + +

Autres ressources :

+ + + +

Utilisabilité

+ +

Les textes de substitution avec un contraste suffisamment élevé peuvent être pris pour des textes saisis par l'utilisateur. De plus, les textes de substituion disparaissent lorsqu'une personne saisit du contenu dans l'élément {{htmlelement("input")}}. Pour ces deux raisons, les textes de subsitution peuvent gêner la complétion du formulaire, notamment pour les personnes souffrant de troubles cognitifs.

+ +

Une autre méthode consiste à fournir cette information en l'incluant à proximité du champ mais en dehors et d'utiliser l'attribut aria-describedby afin de relier l'élément {{HTMLElement("input")}} à l'indication associée.

+ +

Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront aria-describedby afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.

+ +
<label for="user-email">Votre adresse mail</label>
+<span id="user-email-hint" class="input-hint">Exemple : johndoe@example.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Mode « contraste élevé » de Windows

+ +

Lorsque le mode de contraste élevé de Windows est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.

+ + + +

Libellés ({{HTMLElement("<label>")}})

+ +

Les textes de substitution ne doivent pas remplacer les éléments {{htmlelement("label")}}. Sans libellé associé grâce à {{htmlattrxref("for", "label")}} et à {{htmlattrxref("id")}}, les outils d'assistance tels que les lecteurs d'écran ne peuvent pas correctement analyser les éléments {{htmlelement("input")}}.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Définitions initiales.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.placeholder")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_selection/index.html b/files/fr/web/css/_doublecolon_selection/index.html deleted file mode 100644 index 2072d308a1..0000000000 --- a/files/fr/web/css/_doublecolon_selection/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: '::selection' -slug: Web/CSS/::selection -tags: - - CSS - - Pseudo-element - - Reference -translation_of: Web/CSS/::selection ---- -
{{CSSRef}}
- -

Le pseudo-élément ::selection permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).

- -
::selection {
-  background-color: cyan;
-}
- -

Propriétés autorisées

- -

Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient ::selection :

- - - -

On notera que {{cssxref("background-image")}} est ignorée, comme les autres propriétés.

- -

Syntaxe

- -
/*Syntaxe propre à Firefox (61 et antérieur) */
-::-moz-selection
-{{csssyntax}}
-
- -

Exemples

- -

CSS

- -
/* du texte sélectionné sera jaune sur fond rouge */
-::-moz-selection {
-  color: gold;
-  background-color: red;
-}
-
-::selection {
-  color: gold;
-  background-color: red;
-}
-
-/* le texte sélectionné dans un paragraphe */
-/* sera blanc sur noir                     */
-p::-moz-selection {
-  color: white;
-  background-color: black;
-}
-
-p::selection {
-  color: white;
-  background-color: black;
-}
- -

HTML

- -
<div>Un peu de texte pour tester ::selection.</div>
-<p>Essayez également de sélectionner du texte dans ce &lt;p&gt;</p>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Accessibilité

- -

Il est recommandé de ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.

- -

Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.

- -

La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : Web Content Accessibility Guidelines (WCAG), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :

- - - -

Quelques ressources :

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Définition initiale.
- -
-

Note : Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie (selon une discussion de la liste de diffusion W3C Style).

-

Le pseudo-élément ::selection a de nouveau été ajouté dans la spécification pour les pseudo-éléments de niveau 4.

-
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.selection")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_selection/index.md b/files/fr/web/css/_doublecolon_selection/index.md new file mode 100644 index 0000000000..2072d308a1 --- /dev/null +++ b/files/fr/web/css/_doublecolon_selection/index.md @@ -0,0 +1,131 @@ +--- +title: '::selection' +slug: Web/CSS/::selection +tags: + - CSS + - Pseudo-element + - Reference +translation_of: Web/CSS/::selection +--- +
{{CSSRef}}
+ +

Le pseudo-élément ::selection permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).

+ +
::selection {
+  background-color: cyan;
+}
+ +

Propriétés autorisées

+ +

Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient ::selection :

+ + + +

On notera que {{cssxref("background-image")}} est ignorée, comme les autres propriétés.

+ +

Syntaxe

+ +
/*Syntaxe propre à Firefox (61 et antérieur) */
+::-moz-selection
+{{csssyntax}}
+
+ +

Exemples

+ +

CSS

+ +
/* du texte sélectionné sera jaune sur fond rouge */
+::-moz-selection {
+  color: gold;
+  background-color: red;
+}
+
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/* le texte sélectionné dans un paragraphe */
+/* sera blanc sur noir                     */
+p::-moz-selection {
+  color: white;
+  background-color: black;
+}
+
+p::selection {
+  color: white;
+  background-color: black;
+}
+ +

HTML

+ +
<div>Un peu de texte pour tester ::selection.</div>
+<p>Essayez également de sélectionner du texte dans ce &lt;p&gt;</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Accessibilité

+ +

Il est recommandé de ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.

+ +

Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.

+ +

La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : Web Content Accessibility Guidelines (WCAG), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :

+ + + +

Quelques ressources :

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Définition initiale.
+ +
+

Note : Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie (selon une discussion de la liste de diffusion W3C Style).

+

Le pseudo-élément ::selection a de nouveau été ajouté dans la spécification pour les pseudo-éléments de niveau 4.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.selection")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_slotted/index.html b/files/fr/web/css/_doublecolon_slotted/index.html deleted file mode 100644 index 0737e7ba63..0000000000 --- a/files/fr/web/css/_doublecolon_slotted/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: '::slotted()' -slug: 'Web/CSS/::slotted' -tags: - - CSS - - Pseudo-element - - Reference - - Web -translation_of: 'Web/CSS/::slotted' ---- -
{{CSSRef}}
- -

Le pseudo-élément CSS ::slotted() représente n'importe quel élément ayant été placé à l'intérieur d'un emplacement (slot) au sein d'un gabarit (template) HTML (cf. Utiliser les gabarits et les emplacements pour plus d'informations).

- -

Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmlelement("template")}} et/ou dans le shadow DOM. On notera également que ce sélecteur ne sélectionnera pas les noeuds texte placés dans les emplacements, il ne cible que les éléments.

- -
/* Cible n'importe quel élément placé dans un emplacement */
-::slotted(*) {
-  font-weight: bold;
-}
-
-/* Cible n'importe quel élément <span> placé dans un emplacement */
-::slotted(span) {
-  font-weight: bold;
-}
-
- -

Syntax

- -{{csssyntax}} - -

Exemples

- -

Les fragments de code suivants sont tirés du dépôt slotted-pseudo-element (voir le résultat en live).

- -

Dans cette démonstration, on utilise un gabarit avec trois emplacements :

- -
<template id="person-template">
-  <div>
-    <h2>Carte d'identité d'une personne</h2>
-    <slot name="person-name">NOM ABSENT</slot>
-    <ul>
-      <li><slot name="person-age">AGE ABSENT</slot></li>
-      <li><slot name="person-occupation">POSTE ABSENT</slot></li>
-    </ul>
-  </div>
-</template>
- -

Un élément personnalisé — <person-details> — est défini de la façon suivante :

- -
customElements.define('person-details',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      let template = document.getElementById('person-template');
-      let templateContent = template.content;
-
-      const shadowRoot = this.attachShadow({mode: 'open'});
-
-      let style = document.createElement('style');
-      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
-                           'h2 { margin: 0 0 10px; }' +
-                           'ul { margin: 0; }' +
-                           'p { margin: 10px 0; }' +
-                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
-
-      shadowRoot.appendChild(style);
-      shadowRoot.appendChild(templateContent.cloneNode(true));
-  }
-})
- -

On voit ici que, lorsqu'on renseigne le style de l'élément, on sélectionne tous les éléments présents dans les emplacements (::slotted(*)) afin de leur fournir différentes polices et couleurs. Cela permet d'avoir une meilleur vision des emplacements qui ne sont pas encore occupés.

- -

Voici ce à quoi ressemblera l'élément lorsqu'il sera inséré dans la page :

- -
<person-details>
-  <p slot="person-name">Dr. Shazaam</p>
-  <span slot="person-age">Immortel</span>
-  <span slot="person-occupation">Super-héros</span>
-</person-details>
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#slotted-pseudo', '::slotted')}}{{Spec2('CSS Scope')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.slotted")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_slotted/index.md b/files/fr/web/css/_doublecolon_slotted/index.md new file mode 100644 index 0000000000..0737e7ba63 --- /dev/null +++ b/files/fr/web/css/_doublecolon_slotted/index.md @@ -0,0 +1,109 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +tags: + - CSS + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::slotted' +--- +
{{CSSRef}}
+ +

Le pseudo-élément CSS ::slotted() représente n'importe quel élément ayant été placé à l'intérieur d'un emplacement (slot) au sein d'un gabarit (template) HTML (cf. Utiliser les gabarits et les emplacements pour plus d'informations).

+ +

Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmlelement("template")}} et/ou dans le shadow DOM. On notera également que ce sélecteur ne sélectionnera pas les noeuds texte placés dans les emplacements, il ne cible que les éléments.

+ +
/* Cible n'importe quel élément placé dans un emplacement */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Cible n'importe quel élément <span> placé dans un emplacement */
+::slotted(span) {
+  font-weight: bold;
+}
+
+ +

Syntax

+ +{{csssyntax}} + +

Exemples

+ +

Les fragments de code suivants sont tirés du dépôt slotted-pseudo-element (voir le résultat en live).

+ +

Dans cette démonstration, on utilise un gabarit avec trois emplacements :

+ +
<template id="person-template">
+  <div>
+    <h2>Carte d'identité d'une personne</h2>
+    <slot name="person-name">NOM ABSENT</slot>
+    <ul>
+      <li><slot name="person-age">AGE ABSENT</slot></li>
+      <li><slot name="person-occupation">POSTE ABSENT</slot></li>
+    </ul>
+  </div>
+</template>
+ +

Un élément personnalisé — <person-details> — est défini de la façon suivante :

+ +
customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})
+ +

On voit ici que, lorsqu'on renseigne le style de l'élément, on sélectionne tous les éléments présents dans les emplacements (::slotted(*)) afin de leur fournir différentes polices et couleurs. Cela permet d'avoir une meilleur vision des emplacements qui ne sont pas encore occupés.

+ +

Voici ce à quoi ressemblera l'élément lorsqu'il sera inséré dans la page :

+ +
<person-details>
+  <p slot="person-name">Dr. Shazaam</p>
+  <span slot="person-age">Immortel</span>
+  <span slot="person-occupation">Super-héros</span>
+</person-details>
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Scope', '#slotted-pseudo', '::slotted')}}{{Spec2('CSS Scope')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.slotted")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_spelling-error/index.html b/files/fr/web/css/_doublecolon_spelling-error/index.html deleted file mode 100644 index 5fc89ba317..0000000000 --- a/files/fr/web/css/_doublecolon_spelling-error/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '::spelling-error' -slug: 'Web/CSS/::spelling-error' -tags: - - CSS - - Experimental - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::spelling-error' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Le pseudo-élément ::spelling-error représente une portion de texte que le navigateur signale comme étant mal orthographiée.

- -
::spelling-error {
-  color: red;
-}
- -

Propriétés autoriséees

- -

Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle dont le sélecteur contient ::spelling-error :

- - - -

Syntaxe

- -
::spelling-error
- -

Exemples

- -

CSS

- -
p::spelling-error { color:red }
- -

HTML

- -
<p>
-  Alice devina tout de suite qu’il cherch l’éventail
-  et la paire de gants.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","250","100")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.spelling-error")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_spelling-error/index.md b/files/fr/web/css/_doublecolon_spelling-error/index.md new file mode 100644 index 0000000000..5fc89ba317 --- /dev/null +++ b/files/fr/web/css/_doublecolon_spelling-error/index.md @@ -0,0 +1,82 @@ +--- +title: '::spelling-error' +slug: 'Web/CSS/::spelling-error' +tags: + - CSS + - Experimental + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::spelling-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le pseudo-élément ::spelling-error représente une portion de texte que le navigateur signale comme étant mal orthographiée.

+ +
::spelling-error {
+  color: red;
+}
+ +

Propriétés autoriséees

+ +

Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle dont le sélecteur contient ::spelling-error :

+ + + +

Syntaxe

+ +
::spelling-error
+ +

Exemples

+ +

CSS

+ +
p::spelling-error { color:red }
+ +

HTML

+ +
<p>
+  Alice devina tout de suite qu’il cherch l’éventail
+  et la paire de gants.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","250","100")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.spelling-error")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_target-text/index.html b/files/fr/web/css/_doublecolon_target-text/index.html deleted file mode 100644 index b576694e50..0000000000 --- a/files/fr/web/css/_doublecolon_target-text/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: '::target-text' -slug: 'Web/CSS/::target-text' -browser-compat: css.selectors.target-text -translation_of: 'Web/CSS/::target-text' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Le pseudo-élément CSS ::target-text représente le texte vers lequel l'écran vient de défiler, dans le cas où le navigateur prend en charge les fragments scroll-to-text. Il permet aux auteurs de mettre en valeur cette section de texte.

- -
::target-text {
-  background-color: pink;
-}
- -

Syntaxe

- -

{{csssyntax}}

- -

Exemples

- -

Mise en valeur de scroll-to-text

- -
::target-text {
-  background-color: rebeccapurple;
-  color: white;
-  font-weight: bold;
-}
- -

Pour voir ce code CSS en action, suivez ce lien vers la démonstration de scroll-to-text.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_target-text/index.md b/files/fr/web/css/_doublecolon_target-text/index.md new file mode 100644 index 0000000000..b576694e50 --- /dev/null +++ b/files/fr/web/css/_doublecolon_target-text/index.md @@ -0,0 +1,43 @@ +--- +title: '::target-text' +slug: 'Web/CSS/::target-text' +browser-compat: css.selectors.target-text +translation_of: 'Web/CSS/::target-text' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le pseudo-élément CSS ::target-text représente le texte vers lequel l'écran vient de défiler, dans le cas où le navigateur prend en charge les fragments scroll-to-text. Il permet aux auteurs de mettre en valeur cette section de texte.

+ +
::target-text {
+  background-color: pink;
+}
+ +

Syntaxe

+ +

{{csssyntax}}

+ +

Exemples

+ +

Mise en valeur de scroll-to-text

+ +
::target-text {
+  background-color: rebeccapurple;
+  color: white;
+  font-weight: bold;
+}
+ +

Pour voir ce code CSS en action, suivez ce lien vers la démonstration de scroll-to-text.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/accent-color/index.html b/files/fr/web/css/accent-color/index.html deleted file mode 100644 index 99717b6404..0000000000 --- a/files/fr/web/css/accent-color/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: accent-color -slug: Web/CSS/accent-color -browser-compat: css.properties.accent-color -translation_of: Web/CSS/accent-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété CSS accent-color définit la couleur d'accentuation ({{Glossary("accent")}}) des éléments. Une accentuation est présente sur des éléments HTML tels que des {{HTMLElement("input")}} de type checkbox ou radio.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-accent-color: auto;
-
-/* Valeurs de <color> */
-accent-color: red;
-accent-color: #5729e9;
-accent-color: rgb(0, 200, 0);
-accent-color: hsl(228, 4%, 24%);
-
-/* Valeurs globales */
-accent-color: inherit;
-accent-color: initial;
-accent-color: revert;
-accent-color: unset;
- -

Valeurs

- -
-
auto
-
Représente une couleur déterminée par l'agent utilisateur, qui devrait correspondre à la couleur d'accentuation de la plateforme, s'il y en a une. -
-
{{cssxref("<color>")}}
-
Spécifie la couleur à utiliser en tant que couleur d'accentuation.
-
- -

Définition formelle

- -

{{cssinfo}}

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Définir une couleur d'accentuation personnalisée

- -

HTML

- -
<input type="checkbox" checked />
-<input type="checkbox" class="custom" checked />
- -

CSS

- -
input {
-  accent-color: auto;
-  display: block;
-  width: 30px;
-  height: 30px;
-}
-
-input.custom {
-  accent-color: rebeccapurple;
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Setting_a_custom_accent_color', 500, 200)}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/accent-color/index.md b/files/fr/web/css/accent-color/index.md new file mode 100644 index 0000000000..99717b6404 --- /dev/null +++ b/files/fr/web/css/accent-color/index.md @@ -0,0 +1,88 @@ +--- +title: accent-color +slug: Web/CSS/accent-color +browser-compat: css.properties.accent-color +translation_of: Web/CSS/accent-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS accent-color définit la couleur d'accentuation ({{Glossary("accent")}}) des éléments. Une accentuation est présente sur des éléments HTML tels que des {{HTMLElement("input")}} de type checkbox ou radio.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+accent-color: auto;
+
+/* Valeurs de <color> */
+accent-color: red;
+accent-color: #5729e9;
+accent-color: rgb(0, 200, 0);
+accent-color: hsl(228, 4%, 24%);
+
+/* Valeurs globales */
+accent-color: inherit;
+accent-color: initial;
+accent-color: revert;
+accent-color: unset;
+ +

Valeurs

+ +
+
auto
+
Représente une couleur déterminée par l'agent utilisateur, qui devrait correspondre à la couleur d'accentuation de la plateforme, s'il y en a une. +
+
{{cssxref("<color>")}}
+
Spécifie la couleur à utiliser en tant que couleur d'accentuation.
+
+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Définir une couleur d'accentuation personnalisée

+ +

HTML

+ +
<input type="checkbox" checked />
+<input type="checkbox" class="custom" checked />
+ +

CSS

+ +
input {
+  accent-color: auto;
+  display: block;
+  width: 30px;
+  height: 30px;
+}
+
+input.custom {
+  accent-color: rebeccapurple;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Setting_a_custom_accent_color', 500, 200)}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/actual_value/index.html b/files/fr/web/css/actual_value/index.html deleted file mode 100644 index c0d975771f..0000000000 --- a/files/fr/web/css/actual_value/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Valeur réelle -slug: Web/CSS/actual_value -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/actual_value -original_slug: Web/CSS/valeur_reelle ---- -
{{CSSRef}}
- -

La valeur réelle d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer la valeur calculée pour l'épaisseur de la bordure.

- -

Calculer la valeur réelle d'une propriété

- -

La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :

- -
    -
  1. La valeur initiale (indiquée par la spécification).
    2. -
  2. La valeur définie qui résulte de l'héritage et de la cascade.
    3. -
  3. La valeur calculée est calculée selon la spécification.
    4. -
  4. La disposition est calculée, fournissant ainsi la valeur utilisée.
    5. -
  5. La valeur réelle
    6. -
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/actual_value/index.md b/files/fr/web/css/actual_value/index.md new file mode 100644 index 0000000000..c0d975771f --- /dev/null +++ b/files/fr/web/css/actual_value/index.md @@ -0,0 +1,53 @@ +--- +title: Valeur réelle +slug: Web/CSS/actual_value +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/actual_value +original_slug: Web/CSS/valeur_reelle +--- +
{{CSSRef}}
+ +

La valeur réelle d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer la valeur calculée pour l'épaisseur de la bordure.

+ +

Calculer la valeur réelle d'une propriété

+ +

La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :

+ +
    +
  1. La valeur initiale (indiquée par la spécification).
    2. +
  2. La valeur définie qui résulte de l'héritage et de la cascade.
    3. +
  3. La valeur calculée est calculée selon la spécification.
    4. +
  4. La disposition est calculée, fournissant ainsi la valeur utilisée.
    5. +
  5. La valeur réelle
    6. +
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.html b/files/fr/web/css/adjacent_sibling_combinator/index.html deleted file mode 100644 index c6100f0b8e..0000000000 --- a/files/fr/web/css/adjacent_sibling_combinator/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Combinateur de voisin direct -slug: Web/CSS/Adjacent_sibling_combinator -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Adjacent_sibling_combinator -original_slug: Web/CSS/Combinateur_de_voisin_direct ---- -
{{CSSRef("Selectors")}}
- -

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.

- -
/* Ne cible que les paragraphes situé directement après une image */
-img + p {
-  font-style: bold;
-}
- -

Syntaxe

- -
premier_element + element_cible { styles }
-
- -

Exemples

- -

CSS

- -
li:first-of-type + li {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 200, 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Renomme ce sélecteur en « next-sibling combinator ».
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.adjacent_sibling")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.md b/files/fr/web/css/adjacent_sibling_combinator/index.md new file mode 100644 index 0000000000..c6100f0b8e --- /dev/null +++ b/files/fr/web/css/adjacent_sibling_combinator/index.md @@ -0,0 +1,83 @@ +--- +title: Combinateur de voisin direct +slug: Web/CSS/Adjacent_sibling_combinator +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Adjacent_sibling_combinator +original_slug: Web/CSS/Combinateur_de_voisin_direct +--- +
{{CSSRef("Selectors")}}
+ +

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.

+ +
/* Ne cible que les paragraphes situé directement après une image */
+img + p {
+  font-style: bold;
+}
+ +

Syntaxe

+ +
premier_element + element_cible { styles }
+
+ +

Exemples

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 200, 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Renomme ce sélecteur en « next-sibling combinator ».
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.adjacent_sibling")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/align-content/index.html b/files/fr/web/css/align-content/index.html deleted file mode 100644 index 014928628a..0000000000 --- a/files/fr/web/css/align-content/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: align-content -slug: Web/CSS/align-content -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/align-content ---- -
{{CSSRef}}
- -

La propriété CSS align-content définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est un conteneur de boîte flexible et le long de l'axe principal lorsque le conteneur est une grille.

- -

L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.

- -
{{EmbedInteractiveExample("pages/css/align-content.html")}}
- -

Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec flex-wrap: nowrap par exemple).

- -

Syntaxe

- -
/* Alignement le long de l'axe */
-/* Note : align-content ne prend pas en charge les valeurs left et right */
-align-content: center;     /* Les éléments sont groupés au centre */
-align-content: start;      /* Les éléments sont groupés au début  */
-align-content: end;        /* Les éléments sont groupés à la fin */
-align-content: flex-start; /* Les éléments flexibles sont groupés au début */
-align-content: flex-end;   /* Les éléments flexibles sont groupés à la fin */
-
-/* Alignement normal */
-align-content: normal;
-
-/* Alignement sur la ligne de base */
-align-content: baseline;
-align-content: first baseline;
-align-content: last baseline;
-
-/* Répartition de l'espace */
-align-content: space-between; /* L'espace est réparti entre
-                                 les éléments, le premier est
-                                 accolé au bord et le dernier
-                                 également. */
-align-content: space-around;  /* L'espace est réparti entre les
-                                 éléments avec un demi-espace
-                                 au début et à la fin */
-align-content: space-evenly;  /* L'espace est réparti entre les
-                                 éléments et autour */
-align-content: stretch;       /* Les éléments dimensionnés avec
-                                 auto sont étirés également
-                                 afin de remplir le conteneur*/
-
-/* Gestion du dépassement */
-align-content: safe center;
-align-content: unsafe center;
-
-/* Valeurs globales */
-align-content: inherit;
-align-content: initial;
-align-content: unset;
- -

Valeurs

- -
-
start
-
Les éléments sont regroupés vers le bord au début de l'axe de bloc.
-
end
-
Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.
-
flex-start
-
Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de start.
-
flex-end
-
Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de end.
-
center
-
Les éléments sont regroupés au centre de l'axe de bloc.
-
normal
-
Les éléments sont groupés sur leur position par défaut, comme si align-content n'avait pas été défini.
-
baseline
- first baseline
- last baseline
-
La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend.Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
- Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
-
space-between
-
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.
-
space-around
-
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur
-
space-evenly
-
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.
-
stretch
-
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
-
safe
-
Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur start.
-
unsafe
-
Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
#container {
-  height:200px;
-  width: 240px;
-  align-content: center; /* Cette valeur peut être changée dans la démonstration */
-  background-color: #8c8c8c;
-}
-
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 50px);
-}
-
-div > div {
-  box-sizing: border-box;
-  border: 2px solid #8c8c8c;
-  width: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#item1 {
-  background-color: #8cffa0;
-  min-height: 30px;
-}
-
-#item2 {
-  background-color: #a0c8ff;
-  min-height: 50px;
-}
-
-#item3 {
-  background-color: #ffa08c;
-  min-height: 40px;
-}
-
-#item4 {
-  background-color: #ffff8c;
-  min-height: 60px;
-}
-
-#item5 {
-  background-color: #ff8cff;
-  min-height: 70px;
-}
-
-#item6 {
-  background-color: #8cffff;
-  min-height: 50px;
-  font-size: 30px;
-}
-
-select {
-  font-size: 16px;
-}
-
-.row {
-  margin-top: 10px;
-}
-
- -

HTML

- -
<div id="container" class="flex">
-  <div id="item1">1</div>
-  <div id="item2">2</div>
-  <div id="item3">3</div>
-  <div id="item4">4</div>
-  <div id="item5">5</div>
-  <div id="item6">6</div>
-</div>
-
-<div class="row">
-  <label for="display">display: </label>
-  <select id="display">
-    <option value="flex">flex</option>
-    <option value="grid">grid</option>
-  </select>
-</div>
-
-<div class="row">
-  <label for="values">align-content: </label>
-  <select id="values">
-    <option value="normal">normal</option>
-    <option value="stretch">stretch</option>
-    <option value="flex-start">flex-start</option>
-    <option value="flex-end">flex-end</option>
-    <option value="center" selected>center</option>
-    <option value="space-between">space-between</option>
-    <option value="space-around">space-around</option>
-    <option value="space-evenly">space-evenly</option>
-
-    <option value="start">start</option>
-    <option value="end">end</option>
-    <option value="left">left</option>
-    <option value="right">right</option>
-
-    <option value="baseline">baseline</option>
-    <option value="first baseline">first baseline</option>
-    <option value="last baseline">last baseline</option>
-
-    <option value="safe center">safe center</option>
-    <option value="unsafe center">unsafe center</option>
-    <option value="safe right">safe right</option>
-    <option value="unsafe right">unsafe right</option>
-    <option value="safe end">safe end</option>
-    <option value="unsafe end">unsafe end</option>
-    <option value="safe flex-end">safe flex-end</option>
-    <option value="unsafe flex-end">unsafe flex-end</option>
-  </select>
-</div>
-
- - - -

Résultat

- -

{{EmbedLiveSample("Exemples", 260, 290)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}{{Spec2("CSS3 Box Alignment")}}Ajout des valeurs [ first | last ]? baseline, start, end, left, right et unsafe | safe.
{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}{{Spec2("CSS3 Flexbox")}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.align-content")}}

- -

Prise en charge pour les dispositions flexibles (Flexbox)

- -

{{Compat("css.properties.align-content.flex_context")}}

- -

Prise en charge pour les dispositions avec les grilles CSS

- -

{{Compat("css.properties.align-content.grid_context")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/align-content/index.md b/files/fr/web/css/align-content/index.md new file mode 100644 index 0000000000..014928628a --- /dev/null +++ b/files/fr/web/css/align-content/index.md @@ -0,0 +1,284 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/align-content +--- +
{{CSSRef}}
+ +

La propriété CSS align-content définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est un conteneur de boîte flexible et le long de l'axe principal lorsque le conteneur est une grille.

+ +

L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.

+ +
{{EmbedInteractiveExample("pages/css/align-content.html")}}
+ +

Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec flex-wrap: nowrap par exemple).

+ +

Syntaxe

+ +
/* Alignement le long de l'axe */
+/* Note : align-content ne prend pas en charge les valeurs left et right */
+align-content: center;     /* Les éléments sont groupés au centre */
+align-content: start;      /* Les éléments sont groupés au début  */
+align-content: end;        /* Les éléments sont groupés à la fin */
+align-content: flex-start; /* Les éléments flexibles sont groupés au début */
+align-content: flex-end;   /* Les éléments flexibles sont groupés à la fin */
+
+/* Alignement normal */
+align-content: normal;
+
+/* Alignement sur la ligne de base */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Répartition de l'espace */
+align-content: space-between; /* L'espace est réparti entre
+                                 les éléments, le premier est
+                                 accolé au bord et le dernier
+                                 également. */
+align-content: space-around;  /* L'espace est réparti entre les
+                                 éléments avec un demi-espace
+                                 au début et à la fin */
+align-content: space-evenly;  /* L'espace est réparti entre les
+                                 éléments et autour */
+align-content: stretch;       /* Les éléments dimensionnés avec
+                                 auto sont étirés également
+                                 afin de remplir le conteneur*/
+
+/* Gestion du dépassement */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Valeurs globales */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+ +

Valeurs

+ +
+
start
+
Les éléments sont regroupés vers le bord au début de l'axe de bloc.
+
end
+
Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.
+
flex-start
+
Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de start.
+
flex-end
+
Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de end.
+
center
+
Les éléments sont regroupés au centre de l'axe de bloc.
+
normal
+
Les éléments sont groupés sur leur position par défaut, comme si align-content n'avait pas été défini.
+
baseline
+ first baseline
+ last baseline
+
La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend.Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
+ Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
+
space-between
+
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.
+
space-around
+
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur
+
space-evenly
+
Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.
+
stretch
+
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
+
safe
+
Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur start.
+
unsafe
+
Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Cette valeur peut être changée dans la démonstration */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-content: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="stretch">stretch</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="space-between">space-between</option>
+    <option value="space-around">space-around</option>
+    <option value="space-evenly">space-evenly</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="baseline">baseline</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

Résultat

+ +

{{EmbedLiveSample("Exemples", 260, 290)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}{{Spec2("CSS3 Box Alignment")}}Ajout des valeurs [ first | last ]? baseline, start, end, left, right et unsafe | safe.
{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}{{Spec2("CSS3 Flexbox")}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.align-content")}}

+ +

Prise en charge pour les dispositions flexibles (Flexbox)

+ +

{{Compat("css.properties.align-content.flex_context")}}

+ +

Prise en charge pour les dispositions avec les grilles CSS

+ +

{{Compat("css.properties.align-content.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/align-items/index.html b/files/fr/web/css/align-items/index.html deleted file mode 100644 index 69e1fcd440..0000000000 --- a/files/fr/web/css/align-items/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: align-items -slug: Web/CSS/align-items -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/align-items ---- -
{{CSSRef}}
- -

La propriété CSS align-items définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.

- -

La propriété align-self définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (cross axis). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de la zone de grille correspondante.

- -

L'exemple qui suit illustre le fonctionnement des différentes valeurs de align-items au sein d'une grile.

- -
{{EmbedInteractiveExample("pages/css/align-items.html")}}
- -

À l'heure actuelle, cette propriété est prise en charge pour les dispositions Flexbox et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.

- -

Syntaxe

- -
/* Mots-clés de base */
-align-items: normal;
-align-items: stretch;
-
-/* Alignement géométrique */
-/* align-items ne gère pas les valeurs left et right */
-align-items: center; /* Les éléments sont regroupés au centre */
-align-items: start;  /* Les éléments sont regroupés au début */
-align-items: end;    /* Les éléments sont regroupés à la fin */
-align-items: flex-start; /* Les éléments flexibles sont regroupés au début */
-align-items: flex-end;   /* Les éléments flexibles sont regroupés à la fin */
-align-items: self-start;
-align-items: self-end;
-
-/* Alignement par rapport à la ligne de base */
-align-items: first;
-align-items: first baseline;
-align-items: last baseline;
-
-/* Gestion du dépassement */
-align-items: safe center;
-align-items: unsafe center;
-
-/* Valeurs globales */
-align-items: inherit;
-align-items: initial;
-align-items: unset;
-
- -

Valeurs

- -
-
normal
-
L'effet obtenu avec ce mot-clé dépend du mode de disposition utilisé : -
    -
  • Pour les éléments positionnés de façon absolue, ce mot-clé est synonyme de start pour les éléments remplacés, pour les autres éléments positionnés de façon absolue, il est synonyme de stretch.
    • -
  • Pour les éléments avec une position statique sur une disposition absolue, ce mot-clé se comporte comme stretch.
    • -
  • Pour les éléments flexibles, ce mot-clé est synonyme de stretch.
    • -
  • Pour les éléments d'une grille, ce mot-clé se comportera comme stretch sauf pour les boîtes ayant des dimensions intrinsèques où il se comporte comme start.
    • -
  • Cette propriété ne s'applique pas aux boîtes en bloc ou aux cellules de tableaux.
    • -
-
-
flex-start
-
Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne au début de l'axe en bloc.
-
flex-end
-
Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne à la fin de l'axe en bloc.
-
center
-
Les éléments flexibles sont centrés sur l'axe en bloc au sein de la ligne. Si ces éléments sont plus grands que la ligne, ils dépasseront également de chaque côté.
-
start
-
Les éléments sont alignés sur le bord au début du conteneur selon l'axe de bloc.
-
end
-
Les éléments sont alignés sur le bord à la fin du conteneur selon l'axe de bloc
-
center
-
Les éléments sont centrés sur l'axe en bloc du conteneur.
-
self-start
-
Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.
-
self-end
-
Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.
-
baseline
-
first baseline
- last baseline
-
Tous les éléments flexibles sont alignés afin que leurs différentes lignes de base soient alignées. L'élément pour lequel on a la plus grande distance entre la marge et la ligne de base est aligné sur le bord de la ligne courante.
-
stretch
-
Les éléments flexibles sont étirés afin que la taille de la boîte de marge sur l'axe en bloc est la même que celle de la ligne sur laquelle l'élément se trouve, tout en respectant les contraintes de hauteur et de largeur.
-
safe
-
Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur start à la place.
-
unsafe
-
Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.
-
- -

Syntaxe formelle

-{{csssyntax}} - -

Exemples

- -

CSS

- -
#container {
-  height:200px;
-  width: 240px;
-  align-items: center; /* Cette valeur peut être modifiée dans l'exemple */
-  background-color: #8c8c8c;
-}
-
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 50px);
-}
-
-div > div {
-  box-sizing: border-box;
-  border: 2px solid #8c8c8c;
-  width: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#item1 {
-  background-color: #8cffa0;
-  min-height: 30px;
-}
-
-#item2 {
-  background-color: #a0c8ff;
-  min-height: 50px;
-}
-
-#item3 {
-  background-color: #ffa08c;
-  min-height: 40px;
-}
-
-#item4 {
-  background-color: #ffff8c;
-  min-height: 60px;
-}
-
-#item5 {
-  background-color: #ff8cff;
-  min-height: 70px;
-}
-
-#item6 {
-  background-color: #8cffff;
-  min-height: 50px;
-  font-size: 30px;
-}
-
-select {
-  font-size: 16px;
-}
-
-.row {
-  margin-top: 10px;
-}
- -

HTML

- -
<div id="container" class="flex">
-  <div id="item1">1</div>
-  <div id="item2">2</div>
-  <div id="item3">3</div>
-  <div id="item4">4</div>
-  <div id="item5">5</div>
-  <div id="item6">6</div>
-</div>
-
-<div class="row">
-  <label for="display">display: </label>
-  <select id="display">
-    <option value="flex">flex</option>
-    <option value="grid">grid</option>
-  </select>
-</div>
-
-<div class="row">
-  <label for="values">align-items: </label>
-  <select id="values">
-    <option value="normal">normal</option>
-    <option value="flex-start">flex-start</option>
-    <option value="flex-end">flex-end</option>
-    <option value="center" selected>center</option>
-    <option value="baseline">baseline</option>
-    <option value="stretch">stretch</option>
-
-    <option value="start">start</option>
-    <option value="end">end</option>
-    <option value="self-start">self-start</option>
-    <option value="self-end">self-end</option>
-    <option value="first baseline">first baseline</option>
-    <option value="last baseline">last baseline</option>
-
-    <option value="safe center">safe center</option>
-    <option value="unsafe center">unsafe center</option>
-    <option value="safe right">safe right</option>
-    <option value="unsafe right">unsafe right</option>
-    <option value="safe end">safe end</option>
-    <option value="unsafe end">unsafe end</option>
-    <option value="safe self-end">safe self-end</option>
-    <option value="unsafe self-end">unsafe self-end</option>
-    <option value="safe flex-end">safe flex-end</option>
-    <option value="unsafe flex-end">unsafe flex-end</option>
-  </select>
-</div>
-
- - - -

Résultat

- -

{{EmbedLiveSample("Exemples", "260px", "290px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}{{Spec2("CSS3 Box Alignment")}} 
{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

Prise en charge pour les dispositions flexibles

- -

{{Compat("css.properties.align-items.flex_context")}}

- -

Prise en charge pour les dispositions en grille

- -

{{Compat("css.properties.align-items.grid_context")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/align-items/index.md b/files/fr/web/css/align-items/index.md new file mode 100644 index 0000000000..69e1fcd440 --- /dev/null +++ b/files/fr/web/css/align-items/index.md @@ -0,0 +1,278 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/align-items +--- +
{{CSSRef}}
+ +

La propriété CSS align-items définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.

+ +

La propriété align-self définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (cross axis). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de la zone de grille correspondante.

+ +

L'exemple qui suit illustre le fonctionnement des différentes valeurs de align-items au sein d'une grile.

+ +
{{EmbedInteractiveExample("pages/css/align-items.html")}}
+ +

À l'heure actuelle, cette propriété est prise en charge pour les dispositions Flexbox et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.

+ +

Syntaxe

+ +
/* Mots-clés de base */
+align-items: normal;
+align-items: stretch;
+
+/* Alignement géométrique */
+/* align-items ne gère pas les valeurs left et right */
+align-items: center; /* Les éléments sont regroupés au centre */
+align-items: start;  /* Les éléments sont regroupés au début */
+align-items: end;    /* Les éléments sont regroupés à la fin */
+align-items: flex-start; /* Les éléments flexibles sont regroupés au début */
+align-items: flex-end;   /* Les éléments flexibles sont regroupés à la fin */
+align-items: self-start;
+align-items: self-end;
+
+/* Alignement par rapport à la ligne de base */
+align-items: first;
+align-items: first baseline;
+align-items: last baseline;
+
+/* Gestion du dépassement */
+align-items: safe center;
+align-items: unsafe center;
+
+/* Valeurs globales */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+
+ +

Valeurs

+ +
+
normal
+
L'effet obtenu avec ce mot-clé dépend du mode de disposition utilisé : +
    +
  • Pour les éléments positionnés de façon absolue, ce mot-clé est synonyme de start pour les éléments remplacés, pour les autres éléments positionnés de façon absolue, il est synonyme de stretch.
    • +
  • Pour les éléments avec une position statique sur une disposition absolue, ce mot-clé se comporte comme stretch.
    • +
  • Pour les éléments flexibles, ce mot-clé est synonyme de stretch.
    • +
  • Pour les éléments d'une grille, ce mot-clé se comportera comme stretch sauf pour les boîtes ayant des dimensions intrinsèques où il se comporte comme start.
    • +
  • Cette propriété ne s'applique pas aux boîtes en bloc ou aux cellules de tableaux.
    • +
+
+
flex-start
+
Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne au début de l'axe en bloc.
+
flex-end
+
Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne à la fin de l'axe en bloc.
+
center
+
Les éléments flexibles sont centrés sur l'axe en bloc au sein de la ligne. Si ces éléments sont plus grands que la ligne, ils dépasseront également de chaque côté.
+
start
+
Les éléments sont alignés sur le bord au début du conteneur selon l'axe de bloc.
+
end
+
Les éléments sont alignés sur le bord à la fin du conteneur selon l'axe de bloc
+
center
+
Les éléments sont centrés sur l'axe en bloc du conteneur.
+
self-start
+
Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.
+
self-end
+
Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.
+
baseline
+
first baseline
+ last baseline
+
Tous les éléments flexibles sont alignés afin que leurs différentes lignes de base soient alignées. L'élément pour lequel on a la plus grande distance entre la marge et la ligne de base est aligné sur le bord de la ligne courante.
+
stretch
+
Les éléments flexibles sont étirés afin que la taille de la boîte de marge sur l'axe en bloc est la même que celle de la ligne sur laquelle l'élément se trouve, tout en respectant les contraintes de hauteur et de largeur.
+
safe
+
Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur start à la place.
+
unsafe
+
Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.
+
+ +

Syntaxe formelle

+{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-items: center; /* Cette valeur peut être modifiée dans l'exemple */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-items: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="baseline">baseline</option>
+    <option value="stretch">stretch</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="self-start">self-start</option>
+    <option value="self-end">self-end</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe self-end">safe self-end</option>
+    <option value="unsafe self-end">unsafe self-end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

Résultat

+ +

{{EmbedLiveSample("Exemples", "260px", "290px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}{{Spec2("CSS3 Box Alignment")}} 
{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.align-items.flex_context")}}

+ +

Prise en charge pour les dispositions en grille

+ +

{{Compat("css.properties.align-items.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/align-self/index.html b/files/fr/web/css/align-self/index.html deleted file mode 100644 index 02b2574984..0000000000 --- a/files/fr/web/css/align-self/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: align-self -slug: Web/CSS/align-self -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/align-self ---- -
{{CSSRef}}
- -

La propriété CSS align-self permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.

- -

Si l'un des objet a une marge automatique (auto) pour l'axe perpendiculaire à l'axe principal, align-self sera ignoré. Lorsque le conteneur est une grille, align-self permet d'aligner l'élément au sein de la zone de grille. Si le conteneur est une boîte flexible, l'alignement se fait selon l'axe secondaire.

- -
{{EmbedInteractiveExample("pages/css/align-self.html")}}
- -

Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-align-self: auto;
-align-self: normal;
-
-/* Alignement géométrique */
-/* align-self ne gère pas les valeurs left et right */
-align-self: center; /* Les éléments sont alignés sur le centre */
-align-self: start; /* Les éléments sont alignés au début de l'axe */
-align-self: end; /* Les éléments sont alignés à la fin de l'axe */
-align-self: self-start; /* Les éléments sont alignés par rapport à leur début */
-align-self: self-end; /* Les éléments sont alignés par rapport à leur fin */
-align-self: flex-start; /* Les éléments flexibles sont alignés au début */
-align-self: flex-end; /* Les éléments flexibles sont alignés à la fin */
-
-/* Alignement selon la ligne de base */
-align-self: baseline;
-align-self: first baseline;
-align-self: last baseline;
-align-self: stretch; /* Les objets dimensionnés avec 'auto' sont */
-                     /* étirés pour remplir le conteneur */
-
-/* Alignement avec gestion du dépassement */
-align-self: safe center;
-align-self: unsafe center;
-
-/* Valeurs globales */
-align-self: inherit;
-align-self: initial;
-align-self: unset;
- -

Valeurs

- -
-
auto
-
La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.
-
normal
-
L'effet de ce mot-clé dépend du mode de disposition utilisé : -
    -
  • Pour une disposition absolue, ce mot-clé est synonyme de start pour les boîtes remplacées positionnées de façon absolue, il est synonyme de stretch pour les autres boîtes positionnées de façon absolue.
    • -
  • Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de stretch.
    • -
  • Pour les éléments flexibles, ce mot-clé est synonyme de stretch.
    • -
  • Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de stretch, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme start.
    • -
  • Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.
    • -
-
-
self-start
-
Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.
-
self-end
-
Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.
-
flex-start
-
Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.
-
flex-end
-
Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.
-
center
-
La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.
-
baseline
- first baseline
- last baseline
-
Indique l'alignement par rapport à la ligne de base.
- Si besoin, la valeur first baseline est remplacée par start et last baseline est remplacée par end.
-
stretch
-
Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.
-
safe
-
Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur start avait été utilisée.
-
unsafe
-
Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

CSS

- -
.flex-container {
-  height: 250px;
-  display: flex;
-}
-
-.element-flex {
-  background: palegreen;
-  width: 100px;
-  padding: 5px;
-  margin: 5px;
-  line-height: 50px;
-  font-size: 2em;
-}
-
-.center {
-  -webkit-align-self: center;
-  align-self: center;
-}
-
-.baseline {
-  -webkit-align-self: baseline;
-  align-self: baseline;
-}
-
-.stretch {
-  -webkit-align-self: stretch;
-  align-self: stretch;
-}
-
- -

HTML

- -
<div class="flex-container">
-  <p class="element-flex center">Milieu</p>
-  <p class="element-flex baseline">Base</p>
-  <p class="element-flex stretch">Étiré</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Box Alignment")}} 
{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Flexbox")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

Prise en charge pour les dispositions avec les boîtes flexibles (Flexbox)

- -

{{Compat("css.properties.align-self.flex_context")}}

- -

Prise en charge pour les dispositions avec les grilles CSS

- -

{{Compat("css.properties.align-self.grid_context")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md new file mode 100644 index 0000000000..02b2574984 --- /dev/null +++ b/files/fr/web/css/align-self/index.md @@ -0,0 +1,183 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/align-self +--- +
{{CSSRef}}
+ +

La propriété CSS align-self permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.

+ +

Si l'un des objet a une marge automatique (auto) pour l'axe perpendiculaire à l'axe principal, align-self sera ignoré. Lorsque le conteneur est une grille, align-self permet d'aligner l'élément au sein de la zone de grille. Si le conteneur est une boîte flexible, l'alignement se fait selon l'axe secondaire.

+ +
{{EmbedInteractiveExample("pages/css/align-self.html")}}
+ +

Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+align-self: auto;
+align-self: normal;
+
+/* Alignement géométrique */
+/* align-self ne gère pas les valeurs left et right */
+align-self: center; /* Les éléments sont alignés sur le centre */
+align-self: start; /* Les éléments sont alignés au début de l'axe */
+align-self: end; /* Les éléments sont alignés à la fin de l'axe */
+align-self: self-start; /* Les éléments sont alignés par rapport à leur début */
+align-self: self-end; /* Les éléments sont alignés par rapport à leur fin */
+align-self: flex-start; /* Les éléments flexibles sont alignés au début */
+align-self: flex-end; /* Les éléments flexibles sont alignés à la fin */
+
+/* Alignement selon la ligne de base */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* Les objets dimensionnés avec 'auto' sont */
+                     /* étirés pour remplir le conteneur */
+
+/* Alignement avec gestion du dépassement */
+align-self: safe center;
+align-self: unsafe center;
+
+/* Valeurs globales */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+ +

Valeurs

+ +
+
auto
+
La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.
+
normal
+
L'effet de ce mot-clé dépend du mode de disposition utilisé : +
    +
  • Pour une disposition absolue, ce mot-clé est synonyme de start pour les boîtes remplacées positionnées de façon absolue, il est synonyme de stretch pour les autres boîtes positionnées de façon absolue.
    • +
  • Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de stretch.
    • +
  • Pour les éléments flexibles, ce mot-clé est synonyme de stretch.
    • +
  • Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de stretch, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme start.
    • +
  • Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.
    • +
+
+
self-start
+
Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.
+
self-end
+
Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.
+
flex-start
+
Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.
+
flex-end
+
Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.
+
center
+
La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.
+
baseline
+ first baseline
+ last baseline
+
Indique l'alignement par rapport à la ligne de base.
+ Si besoin, la valeur first baseline est remplacée par start et last baseline est remplacée par end.
+
stretch
+
Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.
+
safe
+
Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur start avait été utilisée.
+
unsafe
+
Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

CSS

+ +
.flex-container {
+  height: 250px;
+  display: flex;
+}
+
+.element-flex {
+  background: palegreen;
+  width: 100px;
+  padding: 5px;
+  margin: 5px;
+  line-height: 50px;
+  font-size: 2em;
+}
+
+.center {
+  -webkit-align-self: center;
+  align-self: center;
+}
+
+.baseline {
+  -webkit-align-self: baseline;
+  align-self: baseline;
+}
+
+.stretch {
+  -webkit-align-self: stretch;
+  align-self: stretch;
+}
+
+ +

HTML

+ +
<div class="flex-container">
+  <p class="element-flex center">Milieu</p>
+  <p class="element-flex baseline">Base</p>
+  <p class="element-flex stretch">Étiré</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Box Alignment")}} 
{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Flexbox")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

Prise en charge pour les dispositions avec les boîtes flexibles (Flexbox)

+ +

{{Compat("css.properties.align-self.flex_context")}}

+ +

Prise en charge pour les dispositions avec les grilles CSS

+ +

{{Compat("css.properties.align-self.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/all/index.html b/files/fr/web/css/all/index.html deleted file mode 100644 index 335620c2ee..0000000000 --- a/files/fr/web/css/all/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: all -slug: Web/CSS/all -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/all ---- -
{{CSSRef}}
- -

La propriété raccourcie all permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style.

- -
{{EmbedInteractiveExample("pages/css/all.html")}}
- -

Syntaxe

- -
/* Valeurs globales */
-all: initial;
-all: inherit;
-all: unset;
-
-/* Héritage et cascade CSS : Niveau 4 */
-all: revert;
-
- -

La propriété all est définie avec un des mots-clés globaux de CSS. On notera que la valeur de cette propriété n'a pas d'impact sur les propriétés {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}.

- -

Valeurs

- -
-
initial
-
Voir {{cssxref("initial")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique all (ou qu'il hérite de cette valeur via un élément parent) devront prendre leurs valeurs initiales.
-
inherit
-
Voir {{cssxref("inherit")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique all (ou qu'il hérite de cette valeur via un élément parent) devront prendre les valeurs héritées (c'est-à-dire celles définies pour le parent de l'élément).
-
unset
-
Voir {{cssxref("unset")}}. Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément ou à son parent prendront la valeur déclarée pour le parent si elles peuvent être héritées ou la valeur initiale sinon.
-
revert
-
Voir {{cssxref("revert")}}. Si la valeur obtenue dans la cascade est le mot-clé revert, le comportement obtenu sera différent selon l'origine de la déclaration : -
-
La déclaration provient de l'agent utilisateur :
-
Synonyme de unset.
-
La déclaration provient de l'utilisateur :
-
Le moteur remonte la cascade au niveau de l'agent utilisateur afin de calculer la valeur comme si aucune règle n'était appliquée par le document ou par l'utilisateur.
-
La déclaration provient de l'auteur (du document)
-
Le moteur remonte la cascade au niveau de l'utilisateur afin de calculer la valeur comme si aucune règle ne provenait du document pour cette propriété.Cette origine inclue les origines des surcharges DOM et des animations.
-
-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<blockquote id="quote">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</blockquote>
-Phasellus eget velit sagittis.
- -

CSS

- -
body {
-  font-size: small;
-  background-color: #F0F0F0;
-  color: blue;
-}
-
-blockquote {
-  background-color: skyblue;
-  color: red;
-}
-
- -

Résultat

- -

Pas de propriété all

- - - - -{{EmbedLiveSample("ex0", "200", "125")}} - -

L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.

- -

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

- - - - -{{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

- - - - -{{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

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Cascade', '#all-shorthand', 'all')}}{{Spec2('CSS4 Cascade')}}Ajout de la valeur revert.
{{SpecName('CSS3 Cascade', '#all-shorthand', 'all')}}{{Spec2('CSS3 Cascade')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.all")}}

- -

Voir aussi

- -

Les mots-clés indiquant des valeurs globales pour CSS :

- - diff --git a/files/fr/web/css/all/index.md b/files/fr/web/css/all/index.md new file mode 100644 index 0000000000..335620c2ee --- /dev/null +++ b/files/fr/web/css/all/index.md @@ -0,0 +1,162 @@ +--- +title: all +slug: Web/CSS/all +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/all +--- +
{{CSSRef}}
+ +

La propriété raccourcie all permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style.

+ +
{{EmbedInteractiveExample("pages/css/all.html")}}
+ +

Syntaxe

+ +
/* Valeurs globales */
+all: initial;
+all: inherit;
+all: unset;
+
+/* Héritage et cascade CSS : Niveau 4 */
+all: revert;
+
+ +

La propriété all est définie avec un des mots-clés globaux de CSS. On notera que la valeur de cette propriété n'a pas d'impact sur les propriétés {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}.

+ +

Valeurs

+ +
+
initial
+
Voir {{cssxref("initial")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique all (ou qu'il hérite de cette valeur via un élément parent) devront prendre leurs valeurs initiales.
+
inherit
+
Voir {{cssxref("inherit")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique all (ou qu'il hérite de cette valeur via un élément parent) devront prendre les valeurs héritées (c'est-à-dire celles définies pour le parent de l'élément).
+
unset
+
Voir {{cssxref("unset")}}. Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément ou à son parent prendront la valeur déclarée pour le parent si elles peuvent être héritées ou la valeur initiale sinon.
+
revert
+
Voir {{cssxref("revert")}}. Si la valeur obtenue dans la cascade est le mot-clé revert, le comportement obtenu sera différent selon l'origine de la déclaration : +
+
La déclaration provient de l'agent utilisateur :
+
Synonyme de unset.
+
La déclaration provient de l'utilisateur :
+
Le moteur remonte la cascade au niveau de l'agent utilisateur afin de calculer la valeur comme si aucune règle n'était appliquée par le document ou par l'utilisateur.
+
La déclaration provient de l'auteur (du document)
+
Le moteur remonte la cascade au niveau de l'utilisateur afin de calculer la valeur comme si aucune règle ne provenait du document pour cette propriété.Cette origine inclue les origines des surcharges DOM et des animations.
+
+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<blockquote id="quote">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</blockquote>
+Phasellus eget velit sagittis.
+ +

CSS

+ +
body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

Résultat

+ +

Pas de propriété all

+ + + + +{{EmbedLiveSample("ex0", "200", "125")}} + +

L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.

+ +

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

+ + + + +{{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

+ + + + +{{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

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Cascade', '#all-shorthand', 'all')}}{{Spec2('CSS4 Cascade')}}Ajout de la valeur revert.
{{SpecName('CSS3 Cascade', '#all-shorthand', 'all')}}{{Spec2('CSS3 Cascade')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.all")}}

+ +

Voir aussi

+ +

Les mots-clés indiquant des valeurs globales pour CSS :

+ + diff --git a/files/fr/web/css/alpha-value/index.html b/files/fr/web/css/alpha-value/index.html deleted file mode 100644 index a2736fad98..0000000000 --- a/files/fr/web/css/alpha-value/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: alpha-value -slug: Web/CSS/alpha-value -tags: - - CSS - - Reference - - Type de donnée -translation_of: Web/CSS/alpha-value ---- -

{{CSSRef}}{{draft()}}

- -

Le type de donnée CSS <alpha-value> représente une valeur qui peut être un nombre ({{cssxref("<number>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) et qui indique le canal alpha ou l'opacité d'une couleur.

- -

Syntaxe

- -

Si la valeur est fournie comme un nombre, la valeur peut être comprise entre 0 (complètement transparent) et 1 (complètement opaque). Il est possible d'utiliser des valeurs décimales comprises entre ces valeurs. Les valeurs à l'extérieur de cet intervalle sont valides mais elles sont écrétées à 0 ou 1.

- -

Lorsque la valeur est fournie en pourcentage 0% correspond à une transparence complète tandis que 100% correspond à une opacité totale.

- -

Interpolation

- -

Lorsqu'une animation fait évoluer une valeur de type <alpha-value>, les valeurs sont interpolées comme des nombres réels à point flottant. La vitesse de l'interpolation est déterminée par la fonction de temporisation associée à l'animation.

- -

Exemples

- -

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;
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#type-def-alpha-value', '<alpha-value>')}}{{Spec2('CSS4 Colors')}}Aucune modification significative.
{{SpecName('CSS3 Colors', '#alphavaluedt', '<alpha-value>')}}{{Spec2('CSS3 Colors')}}Introduit le type <alpha-value> ainsi que les notations fonctionnelles rgba() et hsla().
diff --git a/files/fr/web/css/alpha-value/index.md b/files/fr/web/css/alpha-value/index.md new file mode 100644 index 0000000000..a2736fad98 --- /dev/null +++ b/files/fr/web/css/alpha-value/index.md @@ -0,0 +1,62 @@ +--- +title: alpha-value +slug: Web/CSS/alpha-value +tags: + - CSS + - Reference + - Type de donnée +translation_of: Web/CSS/alpha-value +--- +

{{CSSRef}}{{draft()}}

+ +

Le type de donnée CSS <alpha-value> représente une valeur qui peut être un nombre ({{cssxref("<number>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) et qui indique le canal alpha ou l'opacité d'une couleur.

+ +

Syntaxe

+ +

Si la valeur est fournie comme un nombre, la valeur peut être comprise entre 0 (complètement transparent) et 1 (complètement opaque). Il est possible d'utiliser des valeurs décimales comprises entre ces valeurs. Les valeurs à l'extérieur de cet intervalle sont valides mais elles sont écrétées à 0 ou 1.

+ +

Lorsque la valeur est fournie en pourcentage 0% correspond à une transparence complète tandis que 100% correspond à une opacité totale.

+ +

Interpolation

+ +

Lorsqu'une animation fait évoluer une valeur de type <alpha-value>, les valeurs sont interpolées comme des nombres réels à point flottant. La vitesse de l'interpolation est déterminée par la fonction de temporisation associée à l'animation.

+ +

Exemples

+ +

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;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#type-def-alpha-value', '<alpha-value>')}}{{Spec2('CSS4 Colors')}}Aucune modification significative.
{{SpecName('CSS3 Colors', '#alphavaluedt', '<alpha-value>')}}{{Spec2('CSS3 Colors')}}Introduit le type <alpha-value> ainsi que les notations fonctionnelles rgba() et hsla().
diff --git a/files/fr/web/css/alternative_style_sheets/index.html b/files/fr/web/css/alternative_style_sheets/index.html deleted file mode 100644 index 5bb6c9afdd..0000000000 --- a/files/fr/web/css/alternative_style_sheets/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Feuilles de style alternatives -slug: Web/CSS/Alternative_style_sheets -tags: - - CSS - - NeedsCompatTable - - Reference -translation_of: Web/CSS/Alternative_style_sheets -original_slug: Web/CSS/Feuilles_de_style_alternatives ---- -
{{CSSRef}}
- -

En proposant des feuilles de style alternatives, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.

- -

Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage > Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage > Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.

- -

Exemple d'application : définir des feuilles de style alternatives

- -

Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs rel="stylesheet alternate" et title="...". Ainsi :

- -
<link href="reset.css" rel="stylesheet" type="text/css">
-
-<link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut">
-<link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli">
-<link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique">
-
- -

Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante alternate pour l'attribut rel) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.

- -

Quel que soit la mise en forme choisie, les règles provenant de la feuille reset.css seront toujours appliquées.

- -

Détails

- -

Une feuille de style fera partie d'une de ces trois catégories :

- - - -

Lorsqu'une feuille de style contient un attribut title sur l'élément {{HTMLElement("link", "<link rel=\"stylesheet\">")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (title a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut title seront toujours appliquées.

- -

On utilisera rel="stylesheet" pour pointer vers la feuille de style par défaut et rel="alternate stylesheet" pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}La spécification CSS OM définit les concepts de nom d'ensemble de feuilles de style, le marqueur « désactivé » et le nom d'ensemble de feuilles de style CSS préférées.
- Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir quand est créée une feuille de style CSS.
-

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
- {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
- {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

- 		{{Spec2('HTML WHATWG')}}La spécification HTML définit quand et comment créer un algorithme déterminant la feuille de style CSS et qui gère les éléments <link> et <style>. Elle définit également le comportement de <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}La spécification HTML définit le concept de feuilles de style préférées et alternatives.
diff --git a/files/fr/web/css/alternative_style_sheets/index.md b/files/fr/web/css/alternative_style_sheets/index.md new file mode 100644 index 0000000000..5bb6c9afdd --- /dev/null +++ b/files/fr/web/css/alternative_style_sheets/index.md @@ -0,0 +1,78 @@ +--- +title: Feuilles de style alternatives +slug: Web/CSS/Alternative_style_sheets +tags: + - CSS + - NeedsCompatTable + - Reference +translation_of: Web/CSS/Alternative_style_sheets +original_slug: Web/CSS/Feuilles_de_style_alternatives +--- +
{{CSSRef}}
+ +

En proposant des feuilles de style alternatives, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.

+ +

Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage > Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage > Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.

+ +

Exemple d'application : définir des feuilles de style alternatives

+ +

Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs rel="stylesheet alternate" et title="...". Ainsi :

+ +
<link href="reset.css" rel="stylesheet" type="text/css">
+
+<link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut">
+<link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli">
+<link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique">
+
+ +

Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante alternate pour l'attribut rel) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.

+ +

Quel que soit la mise en forme choisie, les règles provenant de la feuille reset.css seront toujours appliquées.

+ +

Détails

+ +

Une feuille de style fera partie d'une de ces trois catégories :

+ + + +

Lorsqu'une feuille de style contient un attribut title sur l'élément {{HTMLElement("link", "<link rel=\"stylesheet\">")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (title a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut title seront toujours appliquées.

+ +

On utilisera rel="stylesheet" pour pointer vers la feuille de style par défaut et rel="alternate stylesheet" pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}La spécification CSS OM définit les concepts de nom d'ensemble de feuilles de style, le marqueur « désactivé » et le nom d'ensemble de feuilles de style CSS préférées.
+ Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir quand est créée une feuille de style CSS.
+

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

+ 		{{Spec2('HTML WHATWG')}}La spécification HTML définit quand et comment créer un algorithme déterminant la feuille de style CSS et qui gère les éléments <link> et <style>. Elle définit également le comportement de <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}La spécification HTML définit le concept de feuilles de style préférées et alternatives.
diff --git a/files/fr/web/css/angle-percentage/index.html b/files/fr/web/css/angle-percentage/index.html deleted file mode 100644 index 528f08969a..0000000000 --- a/files/fr/web/css/angle-percentage/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: -slug: Web/CSS/angle-percentage -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/angle-percentage ---- -
{{CSSRef}}
- -

Le type de donnée <angle-percentage> représente une valeur qui peut être une valeur de type {{cssxref("angle")}} ou une valeur de type {{cssxref("percentage")}}.

- -

Syntaxe

- -

Voir la documentation des types {{cssxref("angle")}} et {{cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.

- -

Utilisation avec calc()

- -

Lorsqu'il est possible d'utiliser une valeur de type <angle-percentage> dans une déclaration, cela signifie que le pourcentage sera résolu avec une valeur angulaire et qu'il peut être utilisé dans une expression {{Cssxref("calc()")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}Définition du type <angle-percentage>. Ajout de calc()
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.angle-percentage")}}

diff --git a/files/fr/web/css/angle-percentage/index.md b/files/fr/web/css/angle-percentage/index.md new file mode 100644 index 0000000000..528f08969a --- /dev/null +++ b/files/fr/web/css/angle-percentage/index.md @@ -0,0 +1,48 @@ +--- +title: +slug: Web/CSS/angle-percentage +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/angle-percentage +--- +
{{CSSRef}}
+ +

Le type de donnée <angle-percentage> représente une valeur qui peut être une valeur de type {{cssxref("angle")}} ou une valeur de type {{cssxref("percentage")}}.

+ +

Syntaxe

+ +

Voir la documentation des types {{cssxref("angle")}} et {{cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.

+ +

Utilisation avec calc()

+ +

Lorsqu'il est possible d'utiliser une valeur de type <angle-percentage> dans une déclaration, cela signifie que le pourcentage sera résolu avec une valeur angulaire et qu'il peut être utilisé dans une expression {{Cssxref("calc()")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}Définition du type <angle-percentage>. Ajout de calc()
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.angle-percentage")}}

diff --git a/files/fr/web/css/angle/index.html b/files/fr/web/css/angle/index.html deleted file mode 100644 index f020237b66..0000000000 --- a/files/fr/web/css/angle/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: -slug: Web/CSS/angle -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/angle ---- -
{{CSSRef}}
- -

Le type de données CSS <angle> permet de représenter des angles exprimés en degrés, radians, grades ou tours. Les angles positifs sont des angles allant dans le sens horaire et les valeurs négatives sont des angles allant dans le sens anti-horaire. Les angles sont par exemples utilisés pour les transformations CSS ({{cssxref("transform")}}) ou les dégradés ({{cssxref("<gradient>")}}).

- -
{{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.

- -

Pour les propriétés statiques et pour une unité donnée, un même angle pourra être représenté par plusieurs valeurs, ainsi 90deg, -270deg, 1turn et 4turn représentent le même angle. En revanche, pour les propriétés dynamiques (par exemple {{cssxref("transition")}} sur {{cssxref("transform")}}), l'effet obtenu sera différent.

- -

Unités

- -

Pour représenter une valeur dans le type <angle>, on pourra utiliser les unités suivantes :

- -
-
deg
-
Cette unité permet de représenter un angle exprimé en degrés. Un cercle complet correspondra à 360deg. Voici des valeurs pour l'exemple : 0deg, 90deg, 360deg.
-
grad
-
Cette unité permet de représenter un angle exprimé en grades. Un cercle complet correspondra à 400grad. Voici des valeurs pour l'exemple : 0grad, 100grad, 400grad.
-
rad
-
Cette unité permet de représenter un angle exprimé en radians. Un cercle complet correspondra à 2π radians (soit environ 6.2832rad). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : 0rad, 1.0708rad, 6.2832rad.
-
turn
-
Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à 1turn. Voici des valeurs pour l'exemple : 0turn, 0.25turn, 1turn.
-
- -

Même si toutes les unités exprimeront une valeur nulle identique, l'unité doit être indiquée afin de lever l'ambiguïté entre un angle et une valeur de longueur (type {{cssxref("<length>")}}).

- -

Exemples

- - - - - - - - - - - - - - - - - - - - -
-

Un angle droit orienté dans le sens horaire : 90deg = 100grad = 0.25turn ≈ 1.5708rad

-
Un angle plat orienté dans le sens horaire : 180deg = 200grad = 0.5turn ≈ 3.1416rad
Un angle droit orienté dans le sens anti-horaire : -90deg = -100grad = -0.25turn ≈ -1.5708rad
-

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.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#angles', '<angle>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#angles', '<angle>')}}{{Spec2('CSS3 Values')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.angle")}}

diff --git a/files/fr/web/css/angle/index.md b/files/fr/web/css/angle/index.md new file mode 100644 index 0000000000..f020237b66 --- /dev/null +++ b/files/fr/web/css/angle/index.md @@ -0,0 +1,94 @@ +--- +title: +slug: Web/CSS/angle +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/angle +--- +
{{CSSRef}}
+ +

Le type de données CSS <angle> permet de représenter des angles exprimés en degrés, radians, grades ou tours. Les angles positifs sont des angles allant dans le sens horaire et les valeurs négatives sont des angles allant dans le sens anti-horaire. Les angles sont par exemples utilisés pour les transformations CSS ({{cssxref("transform")}}) ou les dégradés ({{cssxref("<gradient>")}}).

+ +
{{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.

+ +

Pour les propriétés statiques et pour une unité donnée, un même angle pourra être représenté par plusieurs valeurs, ainsi 90deg, -270deg, 1turn et 4turn représentent le même angle. En revanche, pour les propriétés dynamiques (par exemple {{cssxref("transition")}} sur {{cssxref("transform")}}), l'effet obtenu sera différent.

+ +

Unités

+ +

Pour représenter une valeur dans le type <angle>, on pourra utiliser les unités suivantes :

+ +
+
deg
+
Cette unité permet de représenter un angle exprimé en degrés. Un cercle complet correspondra à 360deg. Voici des valeurs pour l'exemple : 0deg, 90deg, 360deg.
+
grad
+
Cette unité permet de représenter un angle exprimé en grades. Un cercle complet correspondra à 400grad. Voici des valeurs pour l'exemple : 0grad, 100grad, 400grad.
+
rad
+
Cette unité permet de représenter un angle exprimé en radians. Un cercle complet correspondra à 2π radians (soit environ 6.2832rad). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : 0rad, 1.0708rad, 6.2832rad.
+
turn
+
Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à 1turn. Voici des valeurs pour l'exemple : 0turn, 0.25turn, 1turn.
+
+ +

Même si toutes les unités exprimeront une valeur nulle identique, l'unité doit être indiquée afin de lever l'ambiguïté entre un angle et une valeur de longueur (type {{cssxref("<length>")}}).

+ +

Exemples

+ + + + + + + + + + + + + + + + + + + + +
+

Un angle droit orienté dans le sens horaire : 90deg = 100grad = 0.25turn ≈ 1.5708rad

+
Un angle plat orienté dans le sens horaire : 180deg = 200grad = 0.5turn ≈ 3.1416rad
Un angle droit orienté dans le sens anti-horaire : -90deg = -100grad = -0.25turn ≈ -1.5708rad
+

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.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#angles', '<angle>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#angles', '<angle>')}}{{Spec2('CSS3 Values')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.angle")}}

diff --git a/files/fr/web/css/animation-delay/index.html b/files/fr/web/css/animation-delay/index.html deleted file mode 100644 index 733ba4d654..0000000000 --- a/files/fr/web/css/animation-delay/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: animation-delay -slug: Web/CSS/animation-delay -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation-delay ---- -
{{CSSRef}}
- -

La propriété animation-delay définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.

- -
{{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.

- -

Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir l'ensemble des propriétés liées aux animations en une seule fois.

- -

Syntaxe

- -
animation-delay: 3s;
-animation-delay: 2s, 4ms;
-
- -

Valeurs

- -
-
<time>
-
La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (s comme suffixe) ou en millisecondes (ms comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
-
- -
-

Note : Lorsqu'on utilise 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

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  animation-duration: 3s;
-  animation-delay: 15s;
-  animation-name: glissement;
-  animation-iteration-count: infinite;
-}
-@keyframes glissement {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -

HTML

- -
<p>
-  La Chenille et Alice se considérèrent un instant en silence.
-  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
-  la parole d’une voix endormie et traînante.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","200")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-delay")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-delay/index.md b/files/fr/web/css/animation-delay/index.md new file mode 100644 index 0000000000..733ba4d654 --- /dev/null +++ b/files/fr/web/css/animation-delay/index.md @@ -0,0 +1,107 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}
+ +

La propriété animation-delay définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.

+ +
{{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.

+ +

Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir l'ensemble des propriétés liées aux animations en une seule fois.

+ +

Syntaxe

+ +
animation-delay: 3s;
+animation-delay: 2s, 4ms;
+
+ +

Valeurs

+ +
+
<time>
+
La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (s comme suffixe) ou en millisecondes (ms comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
+
+ +
+

Note : Lorsqu'on utilise 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

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  animation-duration: 3s;
+  animation-delay: 15s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

HTML

+ +
<p>
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-delay")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/animation-direction/index.html b/files/fr/web/css/animation-direction/index.html deleted file mode 100644 index 45fa6dbf7b..0000000000 --- a/files/fr/web/css/animation-direction/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: animation-direction -slug: Web/CSS/animation-direction -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation-direction ---- -
{{CSSRef}}
- -

La propriété animation-direction indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.

- -
{{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

- -
/* Valeurs avec un mot-clé */
-animation-direction: normal;
-animation-direction: reverse;
-animation-direction: alternate;
-animation-direction: alternate-reverse;
-
-/* Gestion de plusieurs animations */
-animation-direction: normal, reverse;
-animation-direction: alternate, reverse, normal;
-
-/* Valeurs globales */
-animation-direction: inherit;
-animation-direction: initial;
-animation-direction: unset;
-
- -

Valeurs

- -
-
normal
-
L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut.
-
reverse
-
L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin.
-
alternate
-
La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (timing functions) sont également inversées (ease-in sera ainsi remplacée par ease-out). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.
-
alternate-reverse
-
La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.
-
- -
-

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

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  animation-duration: 5s;
-  animation-name: glissement;
-  animation-iteration-count: infinite;
-}
-
-.aller {
-  animation-direction: normal;
-}
-
-.retour {
-  animation-direction: reverse;
-}
-@keyframes glissement {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -

HTML

- -
<p class="aller">
-  La Chenille et Alice se considérèrent un instant en silence.
-  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
-  la parole d’une voix endormie et traînante.
-</p>
-
-<p class="retour">
-  « Revenez, » lui cria la Chenille. « J’ai quelque chose
-  d’important à vous dire ! »
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","200")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-direction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-direction/index.md b/files/fr/web/css/animation-direction/index.md new file mode 100644 index 0000000000..45fa6dbf7b --- /dev/null +++ b/files/fr/web/css/animation-direction/index.md @@ -0,0 +1,133 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-direction +--- +
{{CSSRef}}
+ +

La propriété animation-direction indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.

+ +
{{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

+ +
/* Valeurs avec un mot-clé */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Gestion de plusieurs animations */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Valeurs globales */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+
+ +

Valeurs

+ +
+
normal
+
L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut.
+
reverse
+
L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin.
+
alternate
+
La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (timing functions) sont également inversées (ease-in sera ainsi remplacée par ease-out). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.
+
alternate-reverse
+
La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.
+
+ +
+

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

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  animation-duration: 5s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.aller {
+  animation-direction: normal;
+}
+
+.retour {
+  animation-direction: reverse;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

HTML

+ +
<p class="aller">
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+</p>
+
+<p class="retour">
+  « Revenez, » lui cria la Chenille. « J’ai quelque chose
+  d’important à vous dire ! »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-direction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/animation-duration/index.html b/files/fr/web/css/animation-duration/index.html deleted file mode 100644 index 766d826733..0000000000 --- a/files/fr/web/css/animation-duration/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: animation-duration -slug: Web/CSS/animation-duration -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation-duration ---- -
{{CSSRef}}
- -

La propriété animation-duration définit la durée d'une animation pour parcourir un cycle.

- -
{{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.

- -

Syntaxe

- -
animation-duration: 6s;
-animation-duration: 120ms;
-animation-duration: 1s, 15s;
-animation-duration: 10s, 30s, 230ms;
-
- -

Valeurs

- -
-
<time>
-
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 : 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

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  animation-duration: 15s;
-  animation-name: glissement;
-  animation-iteration-count: infinite;
-}
-@keyframes glissement {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -

HTML

- -
<p>
-  La Chenille et Alice se considérèrent un instant en silence.
-  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
-  la parole d’une voix endormie et traînante.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","200")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-duration', 'animation-duration')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-duration")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-duration/index.md b/files/fr/web/css/animation-duration/index.md new file mode 100644 index 0000000000..766d826733 --- /dev/null +++ b/files/fr/web/css/animation-duration/index.md @@ -0,0 +1,110 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}}
+ +

La propriété animation-duration définit la durée d'une animation pour parcourir un cycle.

+ +
{{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.

+ +

Syntaxe

+ +
animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+
+ +

Valeurs

+ +
+
<time>
+
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 : 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

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  animation-duration: 15s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

HTML

+ +
<p>
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-duration', 'animation-duration')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-duration")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/animation-fill-mode/index.html b/files/fr/web/css/animation-fill-mode/index.html deleted file mode 100644 index 01b33f2513..0000000000 --- a/files/fr/web/css/animation-fill-mode/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: animation-fill-mode -slug: Web/CSS/animation-fill-mode -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation-fill-mode ---- -
{{CSSRef}}
- -

La propriété animation-fill-mode indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.

- -
{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-animation-fill-mode: none;
-animation-fill-mode: forwards;
-animation-fill-mode: backwards;
-animation-fill-mode: both;
-
-/* Gestion de plusieurs animations */
-animation-fill-mode: none, backwards;
-animation-fill-mode: both, forwards, none;
-
- -

Valeurs

- -
-
none
-
L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.
-
forwards
-
La cible retiendra les valeurs calculées définies lors de la dernière étape (keyframe). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
animation-directionanimation-iteration-countdernière keyframe
normalpair ou impair100% ou to
reversepair ou impair0% ou from
alternatepair0% ou from
alternateimpair100% ou to
alternate-reversepair100% ou to
alternate-reverseimpair0% ou from
-
-
backwards
-
L'animation appliquera les valeur définies par la première keyframe pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première keyframe pertinente dépend de la valeur de {{cssxref("animation-direction")}} : - - - - - - - - - - - - - - - - - -
animation-directionpremière keyframe
normal ou alternate0% ou from
reverse ou alternate-reverse100% ou to
-
-
both
-
L'animation respectera les règles qui s'appliquent à forwards et backwards, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.
-
- -
-

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

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.demo {
-  border-top: 100px solid #ccc;
-  height: 300px;
-  font-family: sans-serif;
-}
-@keyframes grow {
-    0% { font-size: 0 }
-    100% { font-size: 40px }
-}
-@-webkit-keyframes grow {
-    0% { font-size: 0 }
-    100% { font-size: 40px }
-}
-.demo:hover .grows {
-    animation-name: grow;
-    animation-duration: 3s;
-    -webkit-animation-name: grow;
-    -webkit-animation-duration: 3s;
-}
-.demo:hover .growsandstays {
-    animation-name: grow;
-    animation-duration: 3s;
-    animation-fill-mode: forwards;
-    -webkit-animation-name: grow;
-    -webkit-animation-duration: 3s;
-    -webkit-animation-fill-mode: forwards;
-}
- -

HTML

- -
<p>Déplacez votre souris sur la boîte grise.</p>
-<div class="demo">
-  <div class="growsandstays">La boîte grandit et s'arrête</div>
-  <div class="grows">La boîte grandit</div>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples',700,300)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-fill-mode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-fill-mode/index.md b/files/fr/web/css/animation-fill-mode/index.md new file mode 100644 index 0000000000..01b33f2513 --- /dev/null +++ b/files/fr/web/css/animation-fill-mode/index.md @@ -0,0 +1,185 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}
+ +

La propriété animation-fill-mode indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.

+ +
{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Gestion de plusieurs animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

Valeurs

+ +
+
none
+
L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.
+
forwards
+
La cible retiendra les valeurs calculées définies lors de la dernière étape (keyframe). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countdernière keyframe
normalpair ou impair100% ou to
reversepair ou impair0% ou from
alternatepair0% ou from
alternateimpair100% ou to
alternate-reversepair100% ou to
alternate-reverseimpair0% ou from
+
+
backwards
+
L'animation appliquera les valeur définies par la première keyframe pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première keyframe pertinente dépend de la valeur de {{cssxref("animation-direction")}} : + + + + + + + + + + + + + + + + + +
animation-directionpremière keyframe
normal ou alternate0% ou from
reverse ou alternate-reverse100% ou to
+
+
both
+
L'animation respectera les règles qui s'appliquent à forwards et backwards, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.
+
+ +
+

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

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}
+ +

HTML

+ +
<p>Déplacez votre souris sur la boîte grise.</p>
+<div class="demo">
+  <div class="growsandstays">La boîte grandit et s'arrête</div>
+  <div class="grows">La boîte grandit</div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples',700,300)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-fill-mode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/animation-iteration-count/index.html b/files/fr/web/css/animation-iteration-count/index.html deleted file mode 100644 index 7291b39c13..0000000000 --- a/files/fr/web/css/animation-iteration-count/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: animation-iteration-count -slug: Web/CSS/animation-iteration-count -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation-iteration-count ---- -
{{CSSRef}}
- -

La propriété animation-iteration-count indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.

- -

Si plusieurs valeurs sont indiquées, à chaque lancement de l'animation, c'est la valeur suivante de la liste qui est utilisée. Lorsqu'on arrive à la fin de la liste, on reprend avec la première valeur de la liste.

- -
{{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

- -
/* Valeur avec un mot-clé */
-animation-iteration-count: infinite;
-
-/* Valeur avec une quantité */
-/* Type <number>            */
-animation-iteration-count: 3;
-animation-iteration-count: 2.3;
-
-/* Gestion de plusieurs animations */
-animation-iteration-count: 2, 0, infinite;
-
- -

La propriété animation-iteration-count est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.

- -

Valeurs

- -
-
infinite
-
L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété animation-direction.
-
<number>
-
Le nombre de répétitions pour l'animation. La valeur par défaut est 1 (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi 0.5 indiquera une moitié du cycle de l'animation).
-
- -
-

Note : Lorsqu'on utilise 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

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  animation-duration: 3s;
-  animation-name: glissement;
-  animation-iteration-count: infinite;
-}
-
-.infini {
-  animation-iteration-count: infinite;
-}
-
-.dix {
-  animation-iteration-count: 10;
-}
-
-@keyframes glissement {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -

HTML

- -
<p class="infini">
-  La Chenille et Alice se considérèrent un instant en silence.
-  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
-  la parole d’une voix endormie et traînante.
-</p>
-
-<p class="dix">
-  Voyons si je me souviendrai de tout ce que je savais : quatre fois
-  cinq font douze, quatre fois six font treize, quatre fois sept font
-  — je n’arriverai jamais à vingt de ce train-là.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-iteration-count")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-iteration-count/index.md b/files/fr/web/css/animation-iteration-count/index.md new file mode 100644 index 0000000000..7291b39c13 --- /dev/null +++ b/files/fr/web/css/animation-iteration-count/index.md @@ -0,0 +1,131 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-iteration-count +--- +
{{CSSRef}}
+ +

La propriété animation-iteration-count indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.

+ +

Si plusieurs valeurs sont indiquées, à chaque lancement de l'animation, c'est la valeur suivante de la liste qui est utilisée. Lorsqu'on arrive à la fin de la liste, on reprend avec la première valeur de la liste.

+ +
{{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

+ +
/* Valeur avec un mot-clé */
+animation-iteration-count: infinite;
+
+/* Valeur avec une quantité */
+/* Type <number>            */
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+/* Gestion de plusieurs animations */
+animation-iteration-count: 2, 0, infinite;
+
+ +

La propriété animation-iteration-count est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.

+ +

Valeurs

+ +
+
infinite
+
L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété animation-direction.
+
<number>
+
Le nombre de répétitions pour l'animation. La valeur par défaut est 1 (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi 0.5 indiquera une moitié du cycle de l'animation).
+
+ +
+

Note : Lorsqu'on utilise 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

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.infini {
+  animation-iteration-count: infinite;
+}
+
+.dix {
+  animation-iteration-count: 10;
+}
+
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

HTML

+ +
<p class="infini">
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+</p>
+
+<p class="dix">
+  Voyons si je me souviendrai de tout ce que je savais : quatre fois
+  cinq font douze, quatre fois six font treize, quatre fois sept font
+  — je n’arriverai jamais à vingt de ce train-là.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-iteration-count")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/animation-name/index.html b/files/fr/web/css/animation-name/index.html deleted file mode 100644 index 107ab29d0c..0000000000 --- a/files/fr/web/css/animation-name/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: animation-name -slug: Web/CSS/animation-name -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation-name ---- -
{{CSSRef}}
- -

La propriété animation-name définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ {{cssxref("@keyframes")}} qui définit les valeurs des propriétés pour la séquence.

- -
{{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

- -
/* Valeur avec un mot-clé */
-animation-name: none;
-
-/* Valeur utilisant un identifiant */
-animation-name: test_05;
-
-/* Gestion de plusieurs animations */
-animation-name: test1, animation4;
-
-/*  Valeurs globales * /
-animation-name: initial
-animation-name: inherit
-animation-name: unset
-
- -

Valeurs

- -
-
none
-
Un mot-clé qui indique qu'aucune étape (keyframe) ne sera utilisée. Il peut être utilisée pour désactiver une animation sans changer l'ordre des autres identifiants ou afin de désactiver les animations provenant de la cascade.
-
{{cssxref("custom-ident","<custom-ident>")}}
-
Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre a et z, de nombres entre 0 et 9, de tirets bas (_) et/ou de tirets (-). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être unset, initial, inherit ou une combinaison analogue avec une casse différente.
-
- -
-

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

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  animation-duration: 3s;
-  animation-name: glissement;
-  animation-iteration-count: infinite;
-}
-@keyframes glissement {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -

HTML

- -
<p>
-  La Chenille et Alice se considérèrent un instant en silence.
-  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
-  la parole d’une voix endormie et traînante.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","200")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-name")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-name/index.md b/files/fr/web/css/animation-name/index.md new file mode 100644 index 0000000000..107ab29d0c --- /dev/null +++ b/files/fr/web/css/animation-name/index.md @@ -0,0 +1,115 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +

La propriété animation-name définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ {{cssxref("@keyframes")}} qui définit les valeurs des propriétés pour la séquence.

+ +
{{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

+ +
/* Valeur avec un mot-clé */
+animation-name: none;
+
+/* Valeur utilisant un identifiant */
+animation-name: test_05;
+
+/* Gestion de plusieurs animations */
+animation-name: test1, animation4;
+
+/*  Valeurs globales * /
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+
+ +

Valeurs

+ +
+
none
+
Un mot-clé qui indique qu'aucune étape (keyframe) ne sera utilisée. Il peut être utilisée pour désactiver une animation sans changer l'ordre des autres identifiants ou afin de désactiver les animations provenant de la cascade.
+
{{cssxref("custom-ident","<custom-ident>")}}
+
Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre a et z, de nombres entre 0 et 9, de tirets bas (_) et/ou de tirets (-). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être unset, initial, inherit ou une combinaison analogue avec une casse différente.
+
+ +
+

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

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

HTML

+ +
<p>
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-name")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/animation-play-state/index.html b/files/fr/web/css/animation-play-state/index.html deleted file mode 100644 index c0dcf45efb..0000000000 --- a/files/fr/web/css/animation-play-state/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: animation-play-state -slug: Web/CSS/animation-play-state -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation-play-state ---- -
{{CSSRef}}
- -

La propriété animation-play-state définit si une animation est en cours d'exécution ou si elle est en pause.

- -
{{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

- -
/* On a une seule animation */
-animation-play-state: running;
-animation-play-state: paused;
-
-/* On gère plusieurs animations */
-/* avec des valeurs respectives */
-animation-play-state: paused, running, running;
-
-/* Valeurs globales */
-animation-play-state: inherit;
-animation-play-state: initial;
-animation-play-state: unset;
-
- -

Valeurs

- -
-
running
-
L'animation est en cours.
-
paused
-
L'animation est en pause.
-
- -
-

Note : Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété animation-*, elles seront respectivement 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

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  animation-duration: 3s;
-  animation-name: glissement;
-  animation-iteration-count: infinite;
-}
-
-.arret {
-  animation-play-state: paused;
-}
-
-.encours {
-  animation-play-state: running;
-}
-
-@keyframes glissement {
-  from {
-    margin-left: 100%;
-    width: 200%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -

HTML

- -
<p class="arret">
-  La Chenille et Alice se considérèrent un instant en silence.
-  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
-  la parole d’une voix endormie et traînante.
-</p>
-
-<p class="encours">
-  Alice, un peu irritée du parler bref de la Chenille, se redressa
-  de toute sa hauteur.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","200")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-play-state")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-play-state/index.md b/files/fr/web/css/animation-play-state/index.md new file mode 100644 index 0000000000..c0dcf45efb --- /dev/null +++ b/files/fr/web/css/animation-play-state/index.md @@ -0,0 +1,128 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}
+ +

La propriété animation-play-state définit si une animation est en cours d'exécution ou si elle est en pause.

+ +
{{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

+ +
/* On a une seule animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* On gère plusieurs animations */
+/* avec des valeurs respectives */
+animation-play-state: paused, running, running;
+
+/* Valeurs globales */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

Valeurs

+ +
+
running
+
L'animation est en cours.
+
paused
+
L'animation est en pause.
+
+ +
+

Note : Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété animation-*, elles seront respectivement 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

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.arret {
+  animation-play-state: paused;
+}
+
+.encours {
+  animation-play-state: running;
+}
+
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 200%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

HTML

+ +
<p class="arret">
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+</p>
+
+<p class="encours">
+  Alice, un peu irritée du parler bref de la Chenille, se redressa
+  de toute sa hauteur.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-play-state")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html deleted file mode 100644 index f3b7858272..0000000000 --- a/files/fr/web/css/animation-timing-function/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: animation-timing-function -slug: Web/CSS/animation-timing-function -tags: - - CSS - - Propriété - - Reference -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("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

- -
/* Valeurs avec un mot-clé */
-animation-timing-function: ease;
-animation-timing-function: ease-in;
-animation-timing-function: ease-out;
-animation-timing-function: ease-in-out;
-animation-timing-function: linear;
-animation-timing-function: step-start;
-animation-timing-function: step-end;
-
-/* Valeurs fonctionnelles */
-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
-animation-timing-function: steps(4, end);
-
-/* Valeurs avec une fonction en escalier */
-animation-timing-function: steps(4, jump-start);
-animation-timing-function: steps(10, jump-end);
-animation-timing-function: steps(20, jump-none);
-animation-timing-function: steps(5, jump-both);
-animation-timing-function: steps(6, start);
-animation-timing-function: steps(8, end);
-
-/* Définition de temporisations pour plusieurs animations */
-animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
-
-/* Valeurs globales */
-animation-timing-function: inherit;
-animation-timing-function: initial;
-animation-timing-function: unset;
-
- -

Pour les animations cadencées (keyframed), la fonction s'applique entre chaque étape (ou keyframes) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de timing est appliquée au début et à la fin de l'étape de l'animation.

- -

Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.

- -

Valeurs

- -
-
<timing-function>
-
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.

- -
-
ease
-
Correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0) : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.
-
linear
-
Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : l'animation s'effectue à vitesse constante.
-
ease-in
-
Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
-
ease-out
-
Correspond à cubic-bezier(0, 0, 0.58, 1.0) : l'animation commence rapidement puis ralentit jusqu'à la fin.
-
ease-in-out
-
Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.
-
cubic-bezier(p1, p2, p3, p4)
-
Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.
-
steps( n, <jumpterm>)
-
L'animation s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre jumpterm, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) : -
-
jump-start
-
La fonction est continue à gauche et le premier saut se produit au début de l'animation.
-
jump-end
-
La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.
-
jump-none
-
Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).
-
jump-both
-
Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.
-
start
-
Identique à jump-start.
-
end
-
Identique à jump-end.
-
-
-
step-start
-
Synonyme de steps(1, jump-start)
-
step-end
-
Synonyme de steps(1, jump-end)
-
-
-
- -
-

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

- -{{csssyntax}} - -

Exemples

- -
-

Courbes de Bézier cubiques

- - - - - -
.ease {
-   animation-timing-function: ease;
-}
-.easein {
-   animation-timing-function: ease-in;
-}
-.easeout {
-   animation-timing-function: ease-out;
-}
-.easeinout {
-   animation-timing-function: ease-in-out;
-}
-.linear {
-   animation-timing-function: linear;
-}
-.cb {
-   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}
- -
{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}
-
- -
-

Fonctions en escalier

- - - - - -
.jump-start {
-   animation-timing-function: steps(5, jump-start);
-}
-.jump-end {
-   animation-timing-function: steps(5, jump-end);
-}
-.jump-none {
-   animation-timing-function: steps(5, jump-none);
-}
-.jump-both {
-   animation-timing-function: steps(5, jump-both);
-}
-.start {
-   animation-timing-function: steps(5, start);
-}
-.end {
-   animation-timing-function: steps(5, end);
-}
-.step-start {
-   animation-timing-function: step-start;
-}
-.step-end {
-   animation-timing-function: step-end;
-}
- -
{{EmbedLiveSample("Fonctions_en_escalier")}}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Définition initiale..
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation-timing-function")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/animation-timing-function/index.md b/files/fr/web/css/animation-timing-function/index.md new file mode 100644 index 0000000000..f3b7858272 --- /dev/null +++ b/files/fr/web/css/animation-timing-function/index.md @@ -0,0 +1,264 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - CSS + - Propriété + - Reference +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("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

+ +
/* Valeurs avec un mot-clé */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Valeurs fonctionnelles */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Valeurs avec une fonction en escalier */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* Définition de temporisations pour plusieurs animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Valeurs globales */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

Pour les animations cadencées (keyframed), la fonction s'applique entre chaque étape (ou keyframes) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de timing est appliquée au début et à la fin de l'étape de l'animation.

+ +

Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.

+ +

Valeurs

+ +
+
<timing-function>
+
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.

+ +
+
ease
+
Correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0) : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.
+
linear
+
Correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0) : l'animation s'effectue à vitesse constante.
+
ease-in
+
Correspond à cubic-bezier(0.42, 0, 1.0, 1.0) : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
+
ease-out
+
Correspond à cubic-bezier(0, 0, 0.58, 1.0) : l'animation commence rapidement puis ralentit jusqu'à la fin.
+
ease-in-out
+
Correspond à cubic-bezier(0.42, 0, 0.58, 1.0) : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.
+
cubic-bezier(p1, p2, p3, p4)
+
Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.
+
steps( n, <jumpterm>)
+
L'animation s'effectue selon n étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre jumpterm, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) : +
+
jump-start
+
La fonction est continue à gauche et le premier saut se produit au début de l'animation.
+
jump-end
+
La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.
+
jump-none
+
Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).
+
jump-both
+
Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.
+
start
+
Identique à jump-start.
+
end
+
Identique à jump-end.
+
+
+
step-start
+
Synonyme de steps(1, jump-start)
+
step-end
+
Synonyme de steps(1, jump-end)
+
+
+
+ +
+

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

+ +{{csssyntax}} + +

Exemples

+ +
+

Courbes de Bézier cubiques

+ + + + + +
.ease {
+   animation-timing-function: ease;
+}
+.easein {
+   animation-timing-function: ease-in;
+}
+.easeout {
+   animation-timing-function: ease-out;
+}
+.easeinout {
+   animation-timing-function: ease-in-out;
+}
+.linear {
+   animation-timing-function: linear;
+}
+.cb {
+   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}
+ +
{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}
+
+ +
+

Fonctions en escalier

+ + + + + +
.jump-start {
+   animation-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   animation-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   animation-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   animation-timing-function: steps(5, jump-both);
+}
+.start {
+   animation-timing-function: steps(5, start);
+}
+.end {
+   animation-timing-function: steps(5, end);
+}
+.step-start {
+   animation-timing-function: step-start;
+}
+.step-end {
+   animation-timing-function: step-end;
+}
+ +
{{EmbedLiveSample("Fonctions_en_escalier")}}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Définition initiale..
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/animation/index.html b/files/fr/web/css/animation/index.html deleted file mode 100644 index fd5be78c0d..0000000000 --- a/files/fr/web/css/animation/index.html +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: animation -slug: Web/CSS/animation -tags: - - Animations - - CSS - - Propriété - - Reference -translation_of: Web/CSS/animation ---- -
{{CSSRef}}
- -

La propriété animation est une propriété raccourcie qui permet de d'appliquer une animation entre des styles.

- -

C'est une propriété qui synthétise les propriétés suivantes :

- -
    -
  • {{cssxref("animation-name")}},
    • -
  • {{cssxref("animation-duration")}},
    • -
  • {{cssxref("animation-timing-function")}},
    • -
  • {{cssxref("animation-delay")}},
    • -
  • {{cssxref("animation-iteration-count")}},
    • -
  • {{cssxref("animation-direction")}},
    • -
  • {{cssxref("animation-fill-mode")}},
    • -
  • {{cssxref("animation-play-state")}}.
    • -
- -
{{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;
-
-/* @keyframes duration | timing-function | delay | name */
-  animation: 3s linear 1s slidein;
-
-/* @keyframes duration | name */
-  animation: 3s slidein;
-
- -

Exemple d'animation

- - - - - - -

{{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.

- -

Syntaxe

- -

La propriété animation se définit grâce à une ou plusieurs animations, séparées par des virgules.

- -

Chaque animation se définit comme :

- -
    -
  • zéro ou une valeur du type : -
      -
    • {{cssxref("<single-transition-timing-function>")}}
      • -
    • {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}}
      • -
    • {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}}
      • -
    • {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}}
      • -
    • {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}} 
      • -
    -
    • -
  • un nom optionnel pour l'animation ; celui-ci peut être le mot-clé none, un identifiant ({{cssxref("<custom-ident>")}}) ou une chaîne de caractères ({{cssxref("<string>")}})
    • -
  • zéro, une ou deux valeurs de type {{cssxref("<time>")}}
    • -
- -

L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type {{cssxref("<time>")}} sera affectée à {{cssxref("animation-duration")}} et la deuxième à {{cssxref("animation-delay")}}.

- -

L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur de {{cssxref("animation-name")}} parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés que {{cssxref("animation-name")}} et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non à {{cssxref("animation-name")}}. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pour {{cssxref("animation-name")}} qui pourrait être une valeur pour une autre propriété.

- -

Valeurs

- -
-
<single-animation-iteration-count>
-
Le nombre de fois où l'animation est jouée, cf.  {{cssxref("animation-iteration-count")}}.
-
<single-animation-direction>
-
La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}.
-
<single-animation-fill-mode>
-
La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf. {{cssxref("animation-fill-mode")}}.
-
<single-animation-play-state>
-
Si l'animation est lancée ou non, cf. {{cssxref("animation-play-state")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
-

Note : D'autres exemples sont disponibles sur la page Manipuler les animations CSS.

-
- -

Vue laser

- -

HTML

- -
<div class="view_port">
-  <div class="polling_message">
-    En attente
-  </div>
-  <div class="cylon_eye"></div>
-</div>
-
- -

CSS

- -
.polling_message {
-  color: white;
-  float: left;
-  margin-right: 2%;
-}
-
-.view_port {
-  background-color: black;
-  height: 25px;
-  width: 100%;
-  overflow: hidden;
-}
-
-.cylon_eye {
-  background-color: red;
-  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
-  color: white;
-  height: 100%;
-  width: 20%;
-
-  -webkit-animation: 4s linear 0s infinite alternate move_eye;
-          animation: 4s linear 0s infinite alternate move_eye;
-}
-
-@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
-        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
-
- -

Résultat

- -

{{EmbedLiveSample('Vue_laser')}}

- -

Accessibilité

- -

Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.

- -

Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliser une requête média avec prefers-reduced-motion pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.animation")}}

- -

Notes relatives à Quantum (Firefox)

- -
    -
  • Gecko possède un bug qui fait que lorsqu'on anime un élément en dehors de l'écran pour le faire apparaître à l'écran après une durée donnée, il n'effectue pas de repaint sur certaines plateformes (par exemple Windows, cf. ({{bug(1383239)}})). Ce problème a été corrigé avec le nouveau moteur de rendu CSS, Stylo, prévu pour Firefox 57.
    • -
  • Un autre bug empêche d'ouvrir les éléments {{htmlelement("details")}} par défaut avec l'attribut open si ceux-ci sont animés (cf. {{bug(1382124)}}). Cet autre point est également résolu avec Stylo.
    • -
  • Un autre bug ne répercute pas les modifications de {{cssxref("font-size")}} sur les animations qui utilisent l'unité em pour l'élément parent (cf. {{bug(1254424)}}). Stylo règle ce problème.
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/css/animation/index.md b/files/fr/web/css/animation/index.md new file mode 100644 index 0000000000..fd5be78c0d --- /dev/null +++ b/files/fr/web/css/animation/index.md @@ -0,0 +1,362 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - Animations + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

La propriété animation est une propriété raccourcie qui permet de d'appliquer une animation entre des styles.

+ +

C'est une propriété qui synthétise les propriétés suivantes :

+ +
    +
  • {{cssxref("animation-name")}},
    • +
  • {{cssxref("animation-duration")}},
    • +
  • {{cssxref("animation-timing-function")}},
    • +
  • {{cssxref("animation-delay")}},
    • +
  • {{cssxref("animation-iteration-count")}},
    • +
  • {{cssxref("animation-direction")}},
    • +
  • {{cssxref("animation-fill-mode")}},
    • +
  • {{cssxref("animation-play-state")}}.
    • +
+ +
{{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;
+
+/* @keyframes duration | timing-function | delay | name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+  animation: 3s slidein;
+
+ +

Exemple d'animation

+ + + + + + +

{{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.

+ +

Syntaxe

+ +

La propriété animation se définit grâce à une ou plusieurs animations, séparées par des virgules.

+ +

Chaque animation se définit comme :

+ +
    +
  • zéro ou une valeur du type : +
      +
    • {{cssxref("<single-transition-timing-function>")}}
      • +
    • {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}}
      • +
    • {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}}
      • +
    • {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}}
      • +
    • {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}} 
      • +
    +
    • +
  • un nom optionnel pour l'animation ; celui-ci peut être le mot-clé none, un identifiant ({{cssxref("<custom-ident>")}}) ou une chaîne de caractères ({{cssxref("<string>")}})
    • +
  • zéro, une ou deux valeurs de type {{cssxref("<time>")}}
    • +
+ +

L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type {{cssxref("<time>")}} sera affectée à {{cssxref("animation-duration")}} et la deuxième à {{cssxref("animation-delay")}}.

+ +

L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur de {{cssxref("animation-name")}} parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés que {{cssxref("animation-name")}} et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non à {{cssxref("animation-name")}}. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pour {{cssxref("animation-name")}} qui pourrait être une valeur pour une autre propriété.

+ +

Valeurs

+ +
+
<single-animation-iteration-count>
+
Le nombre de fois où l'animation est jouée, cf.  {{cssxref("animation-iteration-count")}}.
+
<single-animation-direction>
+
La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}.
+
<single-animation-fill-mode>
+
La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf. {{cssxref("animation-fill-mode")}}.
+
<single-animation-play-state>
+
Si l'animation est lancée ou non, cf. {{cssxref("animation-play-state")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
+

Note : D'autres exemples sont disponibles sur la page Manipuler les animations CSS.

+
+ +

Vue laser

+ +

HTML

+ +
<div class="view_port">
+  <div class="polling_message">
+    En attente
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +

CSS

+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+
+ +

Résultat

+ +

{{EmbedLiveSample('Vue_laser')}}

+ +

Accessibilité

+ +

Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.

+ +

Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliser une requête média avec prefers-reduced-motion pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.animation")}}

+ +

Notes relatives à Quantum (Firefox)

+ +
    +
  • Gecko possède un bug qui fait que lorsqu'on anime un élément en dehors de l'écran pour le faire apparaître à l'écran après une durée donnée, il n'effectue pas de repaint sur certaines plateformes (par exemple Windows, cf. ({{bug(1383239)}})). Ce problème a été corrigé avec le nouveau moteur de rendu CSS, Stylo, prévu pour Firefox 57.
    • +
  • Un autre bug empêche d'ouvrir les éléments {{htmlelement("details")}} par défaut avec l'attribut open si ceux-ci sont animés (cf. {{bug(1382124)}}). Cet autre point est également résolu avec Stylo.
    • +
  • Un autre bug ne répercute pas les modifications de {{cssxref("font-size")}} sur les animations qui utilisent l'unité em pour l'élément parent (cf. {{bug(1254424)}}). Stylo règle ce problème.
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html deleted file mode 100644 index 3f709c1ac5..0000000000 --- a/files/fr/web/css/appearance/index.html +++ /dev/null @@ -1,584 +0,0 @@ ---- -title: appearance (-moz-appearance, -webkit-appearance) -slug: Web/CSS/appearance -tags: - - '-moz-appearance' - - '-webkit-appearance' - - CSS - - CSS Basic User Interface - - CSS Property - - Reference - - appearance - - recipe:css-property -translation_of: Web/CSS/appearance -browser-compat: css.properties.appearance ---- -
{{CSSRef}}
- -

La propriété -moz-appearance est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.

- -

La propriété -webkit-appearance est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.

- -
{{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.

- -
-

Note : Cette propriété doit être utilisée avec beaucoup d'attention sur les sites web. Son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé none peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.

-
- -

Syntaxe

- -
/* Valeurs spécifiées par le module CSS Basic User Interface de niveau 4 */
-appearance: none;
-appearance: auto;
-appearance: menulist-button;
-appearance: textfield;
-
-/* Valeurs ayant le même effet que 'auto' */
-appearance: button;
-appearance: searchfield;
-appearance: textarea;
-appearance: push-button;
-appearance: slider-horizontal;
-appearance: checkbox;
-appearance: radio;
-appearance: square-button;
-appearance: menulist;
-appearance: listbox;
-appearance: meter;
-appearance: progress-bar;
-
-/* Liste partielle des valeurs disponibles pour Gecko */
--moz-appearance: scrollbarbutton-up;
--moz-appearance: button-bevel;
-
-/* Liste partielle des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
--webkit-appearance: media-mute-button;
--webkit-appearance: caret;
-
- -

Valeurs

- -

Mots-clés standard

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurNavigateurDescription
noneFirefox Chrome Safari EdgeAucune mise en forme particulière n'est appliquée. C'est la valeur par défaut.
autoFirefox ChromeL'agent utilisateur sélectionne la mise en forme spécifique appropriée en fonction de l'élément. Cette valeur agira comme none pour les éléments sans mise en forme spéciale.
menulist-buttonFirefox Chrome Safari EdgeL'élément est mis en forme comme un bouton qui indiquerait qu'un menu pourrait être ouvert.
textfieldFirefox Chrome Safari Edge
Les valeurs suivantes sont traitées de façon équivalente à auto:
buttonFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton.
checkboxFirefox Chrome Safari EdgeL'élément est dessiné comme une case à cocher (et n'inclut que la case à cocher).
listboxFirefox Chrome Safari Edge
menulistFirefox Chrome Safari Edge
meterChrome Safari Firefox
progress-barChrome Safari Firefox
push-buttonChrome Safari Edge
radioFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton radio (et n'inclut que la portion liée au « bouton radio »).
searchfieldFirefox Chrome Safari Edge
slider-horizontalChrome Safari Edge
square-buttonChrome Safari Edge
textareaFirefox Chrome Safari Edge
- -

Mots-clés non-standards

- -

Les valeurs suivantes sont uniquement implémentées pour l'une ou l'autre des propriétés préfixées mais pas pour la propriété standard appearance.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurNavigateurDescription
attachmentSafari
borderless-attachmentSafari
button-bevelFirefox Chrome Safari Edge
caps-lock-indicatorSafari Edge
caretFirefox Chrome Safari Edge
checkbox-containerFirefoxL'élément est dessiné comme le conteneur d'une case à cocher. Il pourra inclure un effet d'arrière-plan sur certaines plateformes. Normalement, il devrait contenir un libellé et une case à cocher.
checkbox-labelFirefox
checkmenuitemFirefox
color-wellSafariinput type=color
continuous-capacity-level-indicatorSafari
default-buttonSafari Edge
discrete-capacity-level-indicatorSafari
inner-spin-buttonFirefox Chrome Safari
image-controls-buttonSafari
list-buttonSafaridatalist
listitemFirefox Chrome Safari Edge
media-enter-fullscreen-buttonChrome Safari
media-exit-fullscreen-buttonChrome Safari
media-fullscreen-volume-sliderSafari
media-fullscreen-volume-slider-thumbSafari
media-mute-buttonChrome Safari Edge
media-play-buttonChrome Safari Edge
media-overlay-play-buttonChrome Safari
media-return-to-realtime-buttonSafari
media-rewind-buttonSafari
media-seek-back-buttonSafari Edge
media-seek-forward-buttonSafari Edge
media-toggle-closed-captions-buttonChrome Safari
media-sliderChrome Safari Edge
media-sliderthumbChrome Safari Edge
media-volume-slider-containerChrome Safari
media-volume-slider-mute-buttonSafari
media-volume-sliderChrome Safari
media-volume-sliderthumbChrome Safari
media-controls-backgroundChrome Safari
media-controls-dark-bar-backgroundSafari
media-controls-fullscreen-backgroundChrome Safari
media-controls-light-bar-backgroundSafari
media-current-time-displayChrome Safari
media-time-remaining-displayChrome Safari
menulist-textFirefox Chrome Safari Edge
menulist-textfieldFirefox Chrome Safari EdgeL'élément est mis en forme comme le champ texte d'une liste de menu (non implémenté sur Windows).
meterbarFirefoxOn utilisera meter à la place.
number-inputFirefox
progress-bar-valueChrome Safari
progressbarFirefoxCet élément est mis en forme comme une barre de progression, aussi, on utilisera progress-bar à la place.
progressbar-verticalFirefox
rangeFirefox
range-thumbFirefox
rating-level-indicatorSafari
relevancy-level-indicatorSafari
scale-horizontalFirefox
scalethumbendFirefox
scalethumb-horizontalFirefox
scalethumbstartFirefox
scalethumbtickFirefox
scalethumb-verticalFirefox
scale-verticalFirefox
scrollbarthumb-horizontalFirefox
scrollbarthumb-verticalFirefox
scrollbartrack-horizontalFirefox
scrollbartrack-verticalFirefox
searchfield-decorationSafari Edge
searchfield-results-decorationChrome Safari Edge(Fonctionne sur Chrome 51 sur Windows 7)
searchfield-results-buttonSafari Edge
searchfield-cancel-buttonChrome Safari Edge
snapshotted-plugin-overlaySafari
sheetNone
slider-verticalChrome Safari Edge
sliderthumb-horizontalChrome Safari Edge
sliderthumb-verticalChrome Safari Edge
textfield-multilineFirefoxOn utilisera textarea à la place.
-apple-pay-buttonSafariiOS et macOS uniquement. Disponible pour le Web à partir de iOS 10.1 et macOS 10.12.1
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :

- -
.exempleun {
-  appearance: toolbarbutton;
-  -moz-appearance: toolbarbutton;
-  -webkit-appearance: toolbarbutton;
-}
-
- -

Voir également cet exemple JSFiddle qui illustre comment utiliser appearance: none afin d'appliquer une mise en forme spécifique aux boutons radio et aux cases à cocher.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/appearance/index.md b/files/fr/web/css/appearance/index.md new file mode 100644 index 0000000000..3f709c1ac5 --- /dev/null +++ b/files/fr/web/css/appearance/index.md @@ -0,0 +1,584 @@ +--- +title: appearance (-moz-appearance, -webkit-appearance) +slug: Web/CSS/appearance +tags: + - '-moz-appearance' + - '-webkit-appearance' + - CSS + - CSS Basic User Interface + - CSS Property + - Reference + - appearance + - recipe:css-property +translation_of: Web/CSS/appearance +browser-compat: css.properties.appearance +--- +
{{CSSRef}}
+ +

La propriété -moz-appearance est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.

+ +

La propriété -webkit-appearance est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.

+ +
{{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.

+ +
+

Note : Cette propriété doit être utilisée avec beaucoup d'attention sur les sites web. Son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé none peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.

+
+ +

Syntaxe

+ +
/* Valeurs spécifiées par le module CSS Basic User Interface de niveau 4 */
+appearance: none;
+appearance: auto;
+appearance: menulist-button;
+appearance: textfield;
+
+/* Valeurs ayant le même effet que 'auto' */
+appearance: button;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Liste partielle des valeurs disponibles pour Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: button-bevel;
+
+/* Liste partielle des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
+-webkit-appearance: media-mute-button;
+-webkit-appearance: caret;
+
+ +

Valeurs

+ +

Mots-clés standard

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurNavigateurDescription
noneFirefox Chrome Safari EdgeAucune mise en forme particulière n'est appliquée. C'est la valeur par défaut.
autoFirefox ChromeL'agent utilisateur sélectionne la mise en forme spécifique appropriée en fonction de l'élément. Cette valeur agira comme none pour les éléments sans mise en forme spéciale.
menulist-buttonFirefox Chrome Safari EdgeL'élément est mis en forme comme un bouton qui indiquerait qu'un menu pourrait être ouvert.
textfieldFirefox Chrome Safari Edge
Les valeurs suivantes sont traitées de façon équivalente à auto:
buttonFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton.
checkboxFirefox Chrome Safari EdgeL'élément est dessiné comme une case à cocher (et n'inclut que la case à cocher).
listboxFirefox Chrome Safari Edge
menulistFirefox Chrome Safari Edge
meterChrome Safari Firefox
progress-barChrome Safari Firefox
push-buttonChrome Safari Edge
radioFirefox Chrome Safari EdgeL'élément est dessiné comme un bouton radio (et n'inclut que la portion liée au « bouton radio »).
searchfieldFirefox Chrome Safari Edge
slider-horizontalChrome Safari Edge
square-buttonChrome Safari Edge
textareaFirefox Chrome Safari Edge
+ +

Mots-clés non-standards

+ +

Les valeurs suivantes sont uniquement implémentées pour l'une ou l'autre des propriétés préfixées mais pas pour la propriété standard appearance.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurNavigateurDescription
attachmentSafari
borderless-attachmentSafari
button-bevelFirefox Chrome Safari Edge
caps-lock-indicatorSafari Edge
caretFirefox Chrome Safari Edge
checkbox-containerFirefoxL'élément est dessiné comme le conteneur d'une case à cocher. Il pourra inclure un effet d'arrière-plan sur certaines plateformes. Normalement, il devrait contenir un libellé et une case à cocher.
checkbox-labelFirefox
checkmenuitemFirefox
color-wellSafariinput type=color
continuous-capacity-level-indicatorSafari
default-buttonSafari Edge
discrete-capacity-level-indicatorSafari
inner-spin-buttonFirefox Chrome Safari
image-controls-buttonSafari
list-buttonSafaridatalist
listitemFirefox Chrome Safari Edge
media-enter-fullscreen-buttonChrome Safari
media-exit-fullscreen-buttonChrome Safari
media-fullscreen-volume-sliderSafari
media-fullscreen-volume-slider-thumbSafari
media-mute-buttonChrome Safari Edge
media-play-buttonChrome Safari Edge
media-overlay-play-buttonChrome Safari
media-return-to-realtime-buttonSafari
media-rewind-buttonSafari
media-seek-back-buttonSafari Edge
media-seek-forward-buttonSafari Edge
media-toggle-closed-captions-buttonChrome Safari
media-sliderChrome Safari Edge
media-sliderthumbChrome Safari Edge
media-volume-slider-containerChrome Safari
media-volume-slider-mute-buttonSafari
media-volume-sliderChrome Safari
media-volume-sliderthumbChrome Safari
media-controls-backgroundChrome Safari
media-controls-dark-bar-backgroundSafari
media-controls-fullscreen-backgroundChrome Safari
media-controls-light-bar-backgroundSafari
media-current-time-displayChrome Safari
media-time-remaining-displayChrome Safari
menulist-textFirefox Chrome Safari Edge
menulist-textfieldFirefox Chrome Safari EdgeL'élément est mis en forme comme le champ texte d'une liste de menu (non implémenté sur Windows).
meterbarFirefoxOn utilisera meter à la place.
number-inputFirefox
progress-bar-valueChrome Safari
progressbarFirefoxCet élément est mis en forme comme une barre de progression, aussi, on utilisera progress-bar à la place.
progressbar-verticalFirefox
rangeFirefox
range-thumbFirefox
rating-level-indicatorSafari
relevancy-level-indicatorSafari
scale-horizontalFirefox
scalethumbendFirefox
scalethumb-horizontalFirefox
scalethumbstartFirefox
scalethumbtickFirefox
scalethumb-verticalFirefox
scale-verticalFirefox
scrollbarthumb-horizontalFirefox
scrollbarthumb-verticalFirefox
scrollbartrack-horizontalFirefox
scrollbartrack-verticalFirefox
searchfield-decorationSafari Edge
searchfield-results-decorationChrome Safari Edge(Fonctionne sur Chrome 51 sur Windows 7)
searchfield-results-buttonSafari Edge
searchfield-cancel-buttonChrome Safari Edge
snapshotted-plugin-overlaySafari
sheetNone
slider-verticalChrome Safari Edge
sliderthumb-horizontalChrome Safari Edge
sliderthumb-verticalChrome Safari Edge
textfield-multilineFirefoxOn utilisera textarea à la place.
-apple-pay-buttonSafariiOS et macOS uniquement. Disponible pour le Web à partir de iOS 10.1 et macOS 10.12.1
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :

+ +
.exempleun {
+  appearance: toolbarbutton;
+  -moz-appearance: toolbarbutton;
+  -webkit-appearance: toolbarbutton;
+}
+
+ +

Voir également cet exemple JSFiddle qui illustre comment utiliser appearance: none afin d'appliquer une mise en forme spécifique aux boutons radio et aux cases à cocher.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/aspect-ratio/index.html b/files/fr/web/css/aspect-ratio/index.html deleted file mode 100644 index aee0eae8a1..0000000000 --- a/files/fr/web/css/aspect-ratio/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: aspect-ratio -slug: Web/CSS/aspect-ratio -browser-compat: css.properties.aspect-ratio -translation_of: 'Web/CSS/aspect-ratio' ---- -
{{CSSRef}}
- -

La propriété CSS aspect-ratio définit un ratio d'affichage préférentiel pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page.

- -
aspect-ratio: 1 / 1;
-
-/* Valeurs globales */
-aspect-ratio: inherit;
-aspect-ratio: initial;
-aspect-ratio: revert;
-aspect-ratio: unset;
-
- -

Valeurs

- -
-
{{cssxref("<auto>")}}
-
Les éléments remplacés ayant leur propre ratio d'affichage intrinsèque, ils utilisent ce dernier. Sinon, la boîte n'a pas de ratio d'affichage préférentiel. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu.
-
{{cssxref("<ratio>")}}
-
Le ratio d'affichage préférentiel de la boîte est le ratio spécifié par width / height. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu spécifiées par box-sizing.
-
- -

Définition formelle

- -

{{cssinfo}}

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Exemples de valeurs pour aspect-ratio

- -
aspect-ratio: 1 / 1;
-aspect-ratio: 16 / 9;
-
- -

Correspondance entre largeur et hauteur avec aspect-ratio

- -

Les navigateurs ont ajouté une propriété aspect-ratio interne qui s'applique aux éléments remplacés et à d'autres éléments liés qui acceptent les attributs width et height. Cela se passe dans la feuille de styles interne du navigateur.

- -

Sur Firefox, la règle de la feuille de styles interne ressemble à cela :

- -
img, input[type="image"], video, embed, iframe, marquee, object, table {
-  aspect-ratio: attr(width) / attr(height);
-}
- -

Vous pouvez en savoir plus sur cette fonctionnalité dans l'article Setting Height And Width On Images Is Important Again (en anglais).

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/aspect-ratio/index.md b/files/fr/web/css/aspect-ratio/index.md new file mode 100644 index 0000000000..aee0eae8a1 --- /dev/null +++ b/files/fr/web/css/aspect-ratio/index.md @@ -0,0 +1,70 @@ +--- +title: aspect-ratio +slug: Web/CSS/aspect-ratio +browser-compat: css.properties.aspect-ratio +translation_of: 'Web/CSS/aspect-ratio' +--- +
{{CSSRef}}
+ +

La propriété CSS aspect-ratio définit un ratio d'affichage préférentiel pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page.

+ +
aspect-ratio: 1 / 1;
+
+/* Valeurs globales */
+aspect-ratio: inherit;
+aspect-ratio: initial;
+aspect-ratio: revert;
+aspect-ratio: unset;
+
+ +

Valeurs

+ +
+
{{cssxref("<auto>")}}
+
Les éléments remplacés ayant leur propre ratio d'affichage intrinsèque, ils utilisent ce dernier. Sinon, la boîte n'a pas de ratio d'affichage préférentiel. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu.
+
{{cssxref("<ratio>")}}
+
Le ratio d'affichage préférentiel de la boîte est le ratio spécifié par width / height. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu spécifiées par box-sizing.
+
+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Exemples de valeurs pour aspect-ratio

+ +
aspect-ratio: 1 / 1;
+aspect-ratio: 16 / 9;
+
+ +

Correspondance entre largeur et hauteur avec aspect-ratio

+ +

Les navigateurs ont ajouté une propriété aspect-ratio interne qui s'applique aux éléments remplacés et à d'autres éléments liés qui acceptent les attributs width et height. Cela se passe dans la feuille de styles interne du navigateur.

+ +

Sur Firefox, la règle de la feuille de styles interne ressemble à cela :

+ +
img, input[type="image"], video, embed, iframe, marquee, object, table {
+  aspect-ratio: attr(width) / attr(height);
+}
+ +

Vous pouvez en savoir plus sur cette fonctionnalité dans l'article Setting Height And Width On Images Is Important Again (en anglais).

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/at-rule/index.html b/files/fr/web/css/at-rule/index.html deleted file mode 100644 index b2573ba775..0000000000 --- a/files/fr/web/css/at-rule/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Règles @ -slug: Web/CSS/At-rule -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/At-rule -original_slug: Web/CSS/Règles_@ ---- -
{{cssref}}
- -

Une règle @ est une expression CSS commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain bloc CSS trouvé en premier.

- -
/* Forme générique */
-@IDENTIFIANT (RÈGLE);
-
-/* Exemple : indiquer au navigateur d'utiliser */
-/* UTF-8 comme jeu de caractères */
-@charset "utf-8";
- -

Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :

- -
    -
  • {{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.
    • -
  • {{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.
    • -
  • {{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.
    • -
  • Les règles @ imbriquées. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles : -
      -
    • {{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou media query).
      • -
    • {{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).
      • -
    • {{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée (cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)
      • -
    • {{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
      • -
    • {{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.
      • -
    • {{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
      • -
    • {{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (viewport) (cette règle est au stade du brouillon de travail).
      • -
    • {{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • -
    • {{cssxref("@font-feature-values")}} (ainsi que @swash, @ornaments, @annotation, @stylistic, @styleset et @character-variant) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • -
    -
    • -
- -

Les règles de groupe conditionnelles

- -

Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : les règles de groupe conditionnelles. Ces instructions partagent une syntaxe commune et permettent d'inclure des instructions imbriquées (soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.

- -

Les règles de groupe conditionnelles définies par la spécification de niveau 3 sur les règles CSS conditionnelles sont :

- -
    -
  • {{cssxref("@media")}},
    • -
  • {{cssxref("@supports")}},
    • -
  • {{cssxref("@document")}} (qui a été reporté à la spécification de niveau 4).
    • -
- -

Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatDéfinition
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Définition initiale.
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Standardisation de @-webkit-keyframes.
- -

Voir aussi

- - diff --git a/files/fr/web/css/at-rule/index.md b/files/fr/web/css/at-rule/index.md new file mode 100644 index 0000000000..b2573ba775 --- /dev/null +++ b/files/fr/web/css/at-rule/index.md @@ -0,0 +1,83 @@ +--- +title: Règles @ +slug: Web/CSS/At-rule +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/At-rule +original_slug: Web/CSS/Règles_@ +--- +
{{cssref}}
+ +

Une règle @ est une expression CSS commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain bloc CSS trouvé en premier.

+ +
/* Forme générique */
+@IDENTIFIANT (RÈGLE);
+
+/* Exemple : indiquer au navigateur d'utiliser */
+/* UTF-8 comme jeu de caractères */
+@charset "utf-8";
+ +

Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :

+ +
    +
  • {{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.
    • +
  • {{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.
    • +
  • {{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.
    • +
  • Les règles @ imbriquées. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles : +
      +
    • {{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou media query).
      • +
    • {{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).
      • +
    • {{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée (cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)
      • +
    • {{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
      • +
    • {{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.
      • +
    • {{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
      • +
    • {{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (viewport) (cette règle est au stade du brouillon de travail).
      • +
    • {{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • +
    • {{cssxref("@font-feature-values")}} (ainsi que @swash, @ornaments, @annotation, @stylistic, @styleset et @character-variant) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • +
    +
    • +
+ +

Les règles de groupe conditionnelles

+ +

Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : les règles de groupe conditionnelles. Ces instructions partagent une syntaxe commune et permettent d'inclure des instructions imbriquées (soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.

+ +

Les règles de groupe conditionnelles définies par la spécification de niveau 3 sur les règles CSS conditionnelles sont :

+ +
    +
  • {{cssxref("@media")}},
    • +
  • {{cssxref("@supports")}},
    • +
  • {{cssxref("@document")}} (qui a été reporté à la spécification de niveau 4).
    • +
+ +

Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatDéfinition
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Définition initiale.
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Standardisation de @-webkit-keyframes.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/attr()/index.html b/files/fr/web/css/attr()/index.html deleted file mode 100644 index 1a026e67da..0000000000 --- a/files/fr/web/css/attr()/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: attr() -slug: Web/CSS/attr() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/attr() ---- -
{{CSSRef}}
- -

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 */
-attr(data-count);
-attr(title);
-
-/* Avec un type */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
-
-/* Avec une valeur par défaut */
-attr(data-count number, 0);
-attr(src url, "");
-attr(data-width px, inherit);
-attr(data-something, "default");
-
- -
-

Note : La fonction attr() peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.

-
- -

Syntaxe

- -

Valeurs

- -
-
attribute-name
-
Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS.
-
<type-or-unit> {{experimental_inline}}
-
Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur <type-or-unit> est invalide pour l'attribut ciblé, l'expression attr() sera également considérée comme invalide. Si cette valeur est absente, elle vaudra string par défaut. La liste des valeurs valides est : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mot-cléType associéCommentairesValeur par défaut
string{{cssxref("<string>")}}La valeur de l'attribut est traitée comme une chaîne de caractères. Elle n'est pas réanalysée et les caractères sont utilisés tels quels (les échappements CSS ne sont pas transformés).Une chaîne vide.
color {{experimental_inline}}{{cssxref("<color>")}}La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres ou comme un mot-clé. Elle doit être une valeur {{cssxref("<string>")}} valide. Les blancs en début et en fin de chaîne sont supprimés.currentColor
url {{experimental_inline}}{{cssxref("<uri>")}}La valeur de l'attribut est analysée comme une chaîne, utilisée dans une fonction url().
- Une URL relative sera résolue par rapport au document original et non par rapport à la feuille de style. Les blancs en début et en fin de chaîne sont supprimés.		L'URL about:invalid qui pointe vers un document inexistant.
integer {{experimental_inline}}{{cssxref("<integer>")}}La valeur de l'attribut est analysée comme un entier ({{cssxref("<integer>")}}). Si elle n'est pas valide (si ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
- Les blancs en début et en fin de chaîne sont supprimés.		0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
number {{experimental_inline}}{{cssxref("<number>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}). Si elle n'est pas valide (si ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
- Les blancs en début et en fin de chaîne sont supprimés.		0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
length {{experimental_inline}}{{cssxref("<length>")}} -

La valeur de l'attribut est analysée comme une longueur ({{cssxref("<length>")}}) et inclut l'unité (par exemple 12.5em). Si la valeur n'est pas valide (si ce n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
- Si l'unité fournie est une unité relative, attr() calculera la valeur absolue correspondante. Les blancs en début et en fin de chaîne sont supprimés.

- 		0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) (il n'y a pas d'unité) et interprétée comme une longueur ({{cssxref("<length>")}}) grâce à l'unité passée comme argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
- Si l'unité indiquée est une unité de longueur relative, attr() calculera la valeur absolue correspondante.
- Les blancs en début et en fin de chaîne sont supprimés.		0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
angle {{experimental_inline}}{{cssxref("<angle>")}}La valeur de l'attribut est analysée comme un angle ({{cssxref("<angle>")}}) et inclut l'unité (par exemple 30.5deg). Si la valeur n'est pas valide (si ce n'est pas un angle ou si la valeur sort de l'intervalle autorisé par la propriété CSS), ce sera la valeur par défaut qui sera utilisée.
- Les blancs en début et en fin de chaîne sont supprimés.		0deg, ou, si 0deg n'est pas valide, la valeur minimale de la propriété.
deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}} -

La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) (il n'y a pas d'unité) et est interprétée comme un angle ({{cssxref("<angle>")}}) avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
- Les blancs en début et en fin de chaîne sont supprimés.

- 		0deg, ou, si 0deg n'est pas valide, la valeur minimale de la propriété.
time {{experimental_inline}}{{cssxref("<time>")}}La valeur de l'attribut est analysée comme une durée ({{cssxref("<time>")}}) et inclut l'unité (par exemple 30.5ms). Si elle n'est pas valide (la valeur n'est pas une durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la valeur par défaut qui sera utilisée.
- Les blancs en début et en fin de chaîne sont supprimés.		0s, ou, si 0s n'est pas valide, la valeur minimale de la propriété.
s, ms {{experimental_inline}}{{cssxref("<time>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple 12.5) et est interprétée comme une durée ({{cssxref("<time>")}}) grâce à l'unité passée en paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.
- Les blancs en début et en fin de chaîne sont supprimés.		0s, ou, si 0s n'est pas valide, la valeur minimale de la propriété.
frequency {{experimental_inline}}{{cssxref("<frequency>")}}La valeur de l'attribut est analysée comme une fréquence ({{cssxref("<frequency>")}}) et inclut l'unité (par exemple 30.5kHz). Si elle n'est pas valide (ce n'est pas une fréquence ou celle-ci n'est pas comprise dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en début et en fin de chaîne sont supprimés.0Hz, ou, si 0Hz n'est pas valide, la valeur minimale de la propriété.
Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple 12.5) et est interprétée comme une fréquence grâce à l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.
- Les blancs en début et en fin de chaîne sont supprimés.		0Hz, ou, si 0Hz n'est pas valide, la valeur minimale de la propriété.
% {{experimental_inline}}{{cssxref("<percentage>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple 12.5) et est interprétée comme un pourcentage ({{cssxref("<percentage>")}}). Si elle n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
- Si la valeur fournie est utilisée comme une longueur, attr() calcule la longueur absolue correspondante.
- Les blancs en début et en fin de chaîne sont supprimés.		0%, ou, si 0% n'est pas valide, la valeur minimale de la propriété.
-
-
<fallback> {{experimental_inline}}
-
La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression attr(). Si attr() n'est pas le seul composant de la valeur d'une propriété, la valeur <fallback> doit correspondre au type défini par <type-or-unit>. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par <type-or-unit>.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Utiliser la propriété content

- -

HTML

- -
<p data-toto="coucou">world</p>
- -

CSS

- -
[data-toto]::before {
-  content: attr(data-toto) " ";
-}
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}}

- -

Valeur <color>

- -

{{SeeCompatTable}}

- -

HTML

- -
<div class="background" data-background="lime"></div>
- -

CSS

- -
html,
-body,
-.background {
-  height: 100vh;
-}
- -
.background {
-  background-color: red;
-}
-
-.background[data-background] {
-  background-color: attr(data-background color, red);
-}
- -

Résultat

- -

{{EmbedLiveSample("Valeur_<color>", "100%", "50")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}Aucune modification.
{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible.
{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("<string>")}}).
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.attr")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/attr()/index.md b/files/fr/web/css/attr()/index.md new file mode 100644 index 0000000000..1a026e67da --- /dev/null +++ b/files/fr/web/css/attr()/index.md @@ -0,0 +1,250 @@ +--- +title: attr() +slug: Web/CSS/attr() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/attr() +--- +
{{CSSRef}}
+ +

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 */
+attr(data-count);
+attr(title);
+
+/* Avec un type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* Avec une valeur par défaut */
+attr(data-count number, 0);
+attr(src url, "");
+attr(data-width px, inherit);
+attr(data-something, "default");
+
+ +
+

Note : La fonction attr() peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
attribute-name
+
Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS.
+
<type-or-unit> {{experimental_inline}}
+
Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur <type-or-unit> est invalide pour l'attribut ciblé, l'expression attr() sera également considérée comme invalide. Si cette valeur est absente, elle vaudra string par défaut. La liste des valeurs valides est : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mot-cléType associéCommentairesValeur par défaut
string{{cssxref("<string>")}}La valeur de l'attribut est traitée comme une chaîne de caractères. Elle n'est pas réanalysée et les caractères sont utilisés tels quels (les échappements CSS ne sont pas transformés).Une chaîne vide.
color {{experimental_inline}}{{cssxref("<color>")}}La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres ou comme un mot-clé. Elle doit être une valeur {{cssxref("<string>")}} valide. Les blancs en début et en fin de chaîne sont supprimés.currentColor
url {{experimental_inline}}{{cssxref("<uri>")}}La valeur de l'attribut est analysée comme une chaîne, utilisée dans une fonction url().
+ Une URL relative sera résolue par rapport au document original et non par rapport à la feuille de style. Les blancs en début et en fin de chaîne sont supprimés.		L'URL about:invalid qui pointe vers un document inexistant.
integer {{experimental_inline}}{{cssxref("<integer>")}}La valeur de l'attribut est analysée comme un entier ({{cssxref("<integer>")}}). Si elle n'est pas valide (si ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
+ Les blancs en début et en fin de chaîne sont supprimés.		0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
number {{experimental_inline}}{{cssxref("<number>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}). Si elle n'est pas valide (si ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
+ Les blancs en début et en fin de chaîne sont supprimés.		0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
length {{experimental_inline}}{{cssxref("<length>")}} +

La valeur de l'attribut est analysée comme une longueur ({{cssxref("<length>")}}) et inclut l'unité (par exemple 12.5em). Si la valeur n'est pas valide (si ce n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
+ Si l'unité fournie est une unité relative, attr() calculera la valeur absolue correspondante. Les blancs en début et en fin de chaîne sont supprimés.

+ 		0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) (il n'y a pas d'unité) et interprétée comme une longueur ({{cssxref("<length>")}}) grâce à l'unité passée comme argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
+ Si l'unité indiquée est une unité de longueur relative, attr() calculera la valeur absolue correspondante.
+ Les blancs en début et en fin de chaîne sont supprimés.		0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
angle {{experimental_inline}}{{cssxref("<angle>")}}La valeur de l'attribut est analysée comme un angle ({{cssxref("<angle>")}}) et inclut l'unité (par exemple 30.5deg). Si la valeur n'est pas valide (si ce n'est pas un angle ou si la valeur sort de l'intervalle autorisé par la propriété CSS), ce sera la valeur par défaut qui sera utilisée.
+ Les blancs en début et en fin de chaîne sont supprimés.		0deg, ou, si 0deg n'est pas valide, la valeur minimale de la propriété.
deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}} +

La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) (il n'y a pas d'unité) et est interprétée comme un angle ({{cssxref("<angle>")}}) avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
+ Les blancs en début et en fin de chaîne sont supprimés.

+ 		0deg, ou, si 0deg n'est pas valide, la valeur minimale de la propriété.
time {{experimental_inline}}{{cssxref("<time>")}}La valeur de l'attribut est analysée comme une durée ({{cssxref("<time>")}}) et inclut l'unité (par exemple 30.5ms). Si elle n'est pas valide (la valeur n'est pas une durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la valeur par défaut qui sera utilisée.
+ Les blancs en début et en fin de chaîne sont supprimés.		0s, ou, si 0s n'est pas valide, la valeur minimale de la propriété.
s, ms {{experimental_inline}}{{cssxref("<time>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple 12.5) et est interprétée comme une durée ({{cssxref("<time>")}}) grâce à l'unité passée en paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.
+ Les blancs en début et en fin de chaîne sont supprimés.		0s, ou, si 0s n'est pas valide, la valeur minimale de la propriété.
frequency {{experimental_inline}}{{cssxref("<frequency>")}}La valeur de l'attribut est analysée comme une fréquence ({{cssxref("<frequency>")}}) et inclut l'unité (par exemple 30.5kHz). Si elle n'est pas valide (ce n'est pas une fréquence ou celle-ci n'est pas comprise dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en début et en fin de chaîne sont supprimés.0Hz, ou, si 0Hz n'est pas valide, la valeur minimale de la propriété.
Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple 12.5) et est interprétée comme une fréquence grâce à l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.
+ Les blancs en début et en fin de chaîne sont supprimés.		0Hz, ou, si 0Hz n'est pas valide, la valeur minimale de la propriété.
% {{experimental_inline}}{{cssxref("<percentage>")}}La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple 12.5) et est interprétée comme un pourcentage ({{cssxref("<percentage>")}}). Si elle n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
+ Si la valeur fournie est utilisée comme une longueur, attr() calcule la longueur absolue correspondante.
+ Les blancs en début et en fin de chaîne sont supprimés.		0%, ou, si 0% n'est pas valide, la valeur minimale de la propriété.
+
+
<fallback> {{experimental_inline}}
+
La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression attr(). Si attr() n'est pas le seul composant de la valeur d'une propriété, la valeur <fallback> doit correspondre au type défini par <type-or-unit>. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par <type-or-unit>.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Utiliser la propriété content

+ +

HTML

+ +
<p data-toto="coucou">world</p>
+ +

CSS

+ +
[data-toto]::before {
+  content: attr(data-toto) " ";
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}}

+ +

Valeur <color>

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div class="background" data-background="lime"></div>
+ +

CSS

+ +
html,
+body,
+.background {
+  height: 100vh;
+}
+ +
.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Valeur_<color>", "100%", "50")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}Aucune modification.
{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible.
{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("<string>")}}).
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.attr")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/attribute_selectors/index.html b/files/fr/web/css/attribute_selectors/index.html deleted file mode 100644 index 1c0631a784..0000000000 --- a/files/fr/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Sélecteurs d'attribut -slug: Web/CSS/Attribute_selectors -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/Attribute_selectors -original_slug: Web/CSS/Sélecteurs_d_attribut ---- -
{{CSSRef}}
- -

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

- -
/* Les éléments <a> avec un attribut title */
-a[title] {
-  color: purple;
-}
-
-/* Les éléments <a> avec un href qui correspond */
-/* à "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* Les éléments <a> dont href contient "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* Les éléments <a> dont href finit par ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
-
-/* Les éléments <a> dont l'attribut class contient le mot logo */
-/* comportement identique à a.logo */
-a[class~="logo"] {
-  padding: 2px;
-}
- -

Syntaxe

- -
-
[attr]
-
Permet de cibler un élément qui possède un attribut attr.
-
[attr=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur.
-
[attr~=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
-
[attr|=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
-
[attr^=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.
-
[attr$=valeur]
-
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]
-
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).
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

Liens

- -

CSS

- -
a {
-  color: blue;
-}
-
-/* Liens internes commençant avec "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Liens avec "example" n'importe où dans l'URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Liens avec "insensitive" n'importe où dans l'URL,
-   quelle que soit la casse */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Liens avec "cAsE" n'importe où dans l'URL,
-   et avec cette casse donnée.*/
-a[href*="cAsE" s] {
-  color: pink;
-}
-
-/* Liens qui finissent ".org" */
-a[href$=".org"] {
-  color: red;
-}
- -

HTML

- -
<ul>
-  <li><a href="#internal">Lien interne<a></li>
-  <li><a href="http://example.com">Lien d'exemple</a></li>
-  <li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
-  <li><a href="http://example.org">Lien vers example.org</a></li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample("Liens")}}

- -

Langues

- -

CSS

- -
/* Tous les éléments divs avec un attribut `lang` seront en gras. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* Tous les divs en anglais américains seront bleus. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* Tous les divs en portugais seront verts. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* Tous les divs en chinois seront rouges (chinois
-   simplifié (zh-CN) ou traditionnel (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* Tous les divs en chinois traditionnels pour l'attribut
-   `data-lang` seront violet. */
-/* Note : Les doubles quotes ne sont pas strictement nécessaires
-   ici */
-div[data-lang="zh-TW"] {
-  color: purple;
-}
-
- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">世界您好！</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Langues")}}

- -

Listes ordonnées

- -

{{SeeCompatTable}}

- -

La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.

- -

CSS

- -
/* Les types de liste devront être utilisé avec le
-   marqueur pour la casse vu les spécifications HTML */
-ol[type="a"] {
-  list-style-type: lower-alpha;
-  background: red;
-}
-
-ol[type="a" s] {
-  list-style-type: lower-alpha;
-  background: lime;
-}
-
-ol[type="A" s] {
-  list-style-type: upper-alpha;
-  background: lime;
-}
- -

HTML

- -
<ol type="A">
-  <li>Liste d'exemple</li>
-</ol>
- -

Résultat

- -

{{EmbedLiveSample("Listes_ordonnées")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.attribute")}}

- -

Voir aussi

- -
    -
  • {{CSSxRef("attr")}}
    • -
  • Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}
    • -
  • Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}
    • -
  • Ces méthodes sont implémentées sur le mixin {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
    • -
diff --git a/files/fr/web/css/attribute_selectors/index.md b/files/fr/web/css/attribute_selectors/index.md new file mode 100644 index 0000000000..1c0631a784 --- /dev/null +++ b/files/fr/web/css/attribute_selectors/index.md @@ -0,0 +1,242 @@ +--- +title: Sélecteurs d'attribut +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Attribute_selectors +original_slug: Web/CSS/Sélecteurs_d_attribut +--- +
{{CSSRef}}
+ +

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

+ +
/* Les éléments <a> avec un attribut title */
+a[title] {
+  color: purple;
+}
+
+/* Les éléments <a> avec un href qui correspond */
+/* à "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Les éléments <a> dont href contient "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Les éléments <a> dont href finit par ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Les éléments <a> dont l'attribut class contient le mot logo */
+/* comportement identique à a.logo */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

Syntaxe

+ +
+
[attr]
+
Permet de cibler un élément qui possède un attribut attr.
+
[attr=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur.
+
[attr~=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
+
[attr|=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
+
[attr^=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.
+
[attr$=valeur]
+
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]
+
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).
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

Liens

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Liens internes commençant avec "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Liens avec "example" n'importe où dans l'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Liens avec "insensitive" n'importe où dans l'URL,
+   quelle que soit la casse */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Liens avec "cAsE" n'importe où dans l'URL,
+   et avec cette casse donnée.*/
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Liens qui finissent ".org" */
+a[href$=".org"] {
+  color: red;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Lien interne<a></li>
+  <li><a href="http://example.com">Lien d'exemple</a></li>
+  <li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
+  <li><a href="http://example.org">Lien vers example.org</a></li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample("Liens")}}

+ +

Langues

+ +

CSS

+ +
/* Tous les éléments divs avec un attribut `lang` seront en gras. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tous les divs en anglais américains seront bleus. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tous les divs en portugais seront verts. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tous les divs en chinois seront rouges (chinois
+   simplifié (zh-CN) ou traditionnel (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tous les divs en chinois traditionnels pour l'attribut
+   `data-lang` seront violet. */
+/* Note : Les doubles quotes ne sont pas strictement nécessaires
+   ici */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Langues")}}

+ +

Listes ordonnées

+ +

{{SeeCompatTable}}

+ +

La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.

+ +

CSS

+ +
/* Les types de liste devront être utilisé avec le
+   marqueur pour la casse vu les spécifications HTML */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Liste d'exemple</li>
+</ol>
+ +

Résultat

+ +

{{EmbedLiveSample("Listes_ordonnées")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.attribute")}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("attr")}}
    • +
  • Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}
    • +
  • Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}
    • +
  • Ces méthodes sont implémentées sur le mixin {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
    • +
diff --git a/files/fr/web/css/backdrop-filter/index.html b/files/fr/web/css/backdrop-filter/index.html deleted file mode 100644 index 9207d87746..0000000000 --- a/files/fr/web/css/backdrop-filter/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: backdrop-filter -slug: Web/CSS/backdrop-filter -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/backdrop-filter ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété CSS backdrop-filter permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé derrière l'élément, il pourra être observé en ajustant la transparence de l'élément.

- -
/* Valeur avec un mot-clé */
-backdrop-filter: none;
-
-/* Une valeur d'URL vers un filtre SVG */
-backdrop-filter: url(commonfilters.svg#filter);
-
-/* Les notations fonctionnelles pour les filtres */
-/* Valeur de type <filter-function> */
-backdrop-filter: blur(2px);
-backdrop-filter: brightness(60%);
-backdrop-filter: contrast(40%);
-backdrop-filter: drop-shadow(4px 4px 10px blue);
-backdrop-filter: grayscale(30%);
-backdrop-filter: hue-rotate(120deg);
-backdrop-filter: invert(70%);
-backdrop-filter: opacity(20%);
-backdrop-filter: sepia(90%);
-backdrop-filter: saturate(80%);
-
-/* On enchaîne plusieurs filtres */
-backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
-
-/* Valeurs globales */
-backdrop-filter: inherit;
-backdrop-filter: initial;
-backdrop-filter: unset;
-
- -

{{cssinfo}}

- -

Syntaxe

- -

Valeurs

- -
-
none
-
Un mot-clé qui indique qu'aucun filtre n'est appliqué sur l'ombre portée.
-
<filter-function-list>
-
Une liste de fonctions de filtre (cf. {{cssxref("<filter-function>")}}), séparées par des espaces et qui seront appliquées à l'ombre. Les différentes fonctions qui peuvent être utilisées sont les mêmes que pour la propriété {{cssxref("filter")}}. On peut également utilisere un filtre SVG.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.box {
-  background-color: rgba(255, 255, 255, 0.95);
-  border-radius: 5px;
-  font-family: sans-serif;
-  text-align: center;
-  line-height: 1;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  max-width: 50%;
-  max-height: 50%;
-  padding: 20px 40px;
-}
-
-html, body {
-  height: 100%;
-  width: 100%;
-}
-
-body {
-  background-image: url('https://lorempixel.com/400/200/');
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
- -

HTML

- -
<div class="container">
-  <div class="box">
-    <p>backdrop-filter: blur(10px)</p>
-  </div>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', "600", "400")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.backdrop-filter")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/backdrop-filter/index.md b/files/fr/web/css/backdrop-filter/index.md new file mode 100644 index 0000000000..9207d87746 --- /dev/null +++ b/files/fr/web/css/backdrop-filter/index.md @@ -0,0 +1,136 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS backdrop-filter permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé derrière l'élément, il pourra être observé en ajustant la transparence de l'élément.

+ +
/* Valeur avec un mot-clé */
+backdrop-filter: none;
+
+/* Une valeur d'URL vers un filtre SVG */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* Les notations fonctionnelles pour les filtres */
+/* Valeur de type <filter-function> */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* On enchaîne plusieurs filtres */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Valeurs globales */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Un mot-clé qui indique qu'aucun filtre n'est appliqué sur l'ombre portée.
+
<filter-function-list>
+
Une liste de fonctions de filtre (cf. {{cssxref("<filter-function>")}}), séparées par des espaces et qui seront appliquées à l'ombre. Les différentes fonctions qui peuvent être utilisées sont les mêmes que pour la propriété {{cssxref("filter")}}. On peut également utilisere un filtre SVG.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://lorempixel.com/400/200/');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', "600", "400")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.backdrop-filter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/backface-visibility/index.html b/files/fr/web/css/backface-visibility/index.html deleted file mode 100644 index 510a676f14..0000000000 --- a/files/fr/web/css/backface-visibility/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: backface-visibility -slug: Web/CSS/backface-visibility -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/backface-visibility ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété backface-visibility indique si la face arrière d'un élément doit être visible lorsqu'elle est orientée vers l'utilisateur. La face arrière d'un élément est un arrière-plan transparent qui, lorsqu'il est visible, permet de voir un reflet symétrique de la face avant de l'élément.

- -
{{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.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-backface-visibility: visible;
-backface-visibility: hidden;
-
-/* Valeurs globales */
-backface-visibility: inherit;
-backface-visibility: initial;
-backface-visibility: unset;
- -

La propriété backface-visibility est définie avec l'un des mots-clés suivants.

- -

Valeurs

- -
-
visible
-
Ce mot-clé indique que la face arrière est visible lorsqu'elle est tournée vers l'utilisateur. Cela permet d'obtenir un effet miroir sur la face avant.
-
hidden
-
Ce mot-clé indique que la face arrière n'est pas visible. La face avant est donc cachée.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dans cet exemple, on dessine un cube avec des faces transparentes.

- -

CSS

- -
/* Des classes utilitaires pour afficher ou
-   masquer les faces arrières du cube */
-.hidebf div {
-  backface-visibility: hidden;
-}
-
-.showbf div {
-  backface-visibility: visible;
-}
-
-/* On définit les règles pour le conteneur, */
-/* le cube et une face quelconque */
-.container {
-  width: 150px;
-  height: 150px;
-  margin: 75px 0 0 75px;
-  border: none;
-}
-
-.cube {
-  width: 100%;
-  height: 100%;
-  perspective: 550px;
-  perspective-origin: 150% 150%;
-  transform-style: preserve-3d;
-}
-
-.face {
-  display: block;
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border: none;
-  line-height: 100px;
-  font-family: sans-serif;
-  font-size: 60px;
-  color: white;
-  text-align: center;
-}
-
-/* On définit chacune des faces */
-.front {
-  background: rgba(0, 0, 0, 0.3);
-  transform: translateZ(50px);
-}
-
-.back {
-  background: rgba(0, 255, 0, 1);
-  color: black;
-  transform: rotateY(180deg) translateZ(50px);
-}
-
-.right {
-  background: rgba(196, 0, 0, 0.7);
-  transform: rotateY(90deg) translateZ(50px);
-}
-
-.left {
-  background: rgba(0, 0, 196, 0.7);
-  transform: rotateY(-90deg) translateZ(50px);
-}
-
-.top {
-  background: rgba(196, 196, 0, 0.7);
-  transform: rotateX(90deg) translateZ(50px);
-}
-
-.bottom {
-  background: rgba(196, 0, 196, 0.7);
-  transform: rotateX(-90deg) translateZ(50px);
-}
-
-/* On améliore le rendu du tableau */
-th, p, td {
-  background-color: #EEEEEE;
-  margin: 0px;
-  padding: 6px;
-  font-family: sans-serif;
-  text-align: left;
-}
- -

HTML

- -
<table>
-  <tbody>
-    <tr>
-      <th><code>backface-visibility: visible;</code></th>
-      <th><code>backface-visibility: hidden;</code></th>
-    </tr>
-    <tr>
-      <td>
-        <div class="container">
-          <div class="cube showbf">
-            <div class="face front">1</div>
-            <div class="face back">2</div>
-            <div class="face right">3</div>
-            <div class="face left">4</div>
-            <div class="face top">5</div>
-            <div class="face bottom">6</div>
-          </div>
-        </div>
-        <p>
-          Toutes les faces sont transparentes et les trois
-          faces arrières sont visibles au travers des faces
-          avant.
-        </p>
-      </td>
-      <td>
-        <div class="container">
-          <div class="cube hidebf">
-            <div class="face front">1</div>
-            <div class="face back">2</div>
-            <div class="face right">3</div>
-            <div class="face left">4</div>
-            <div class="face top">5</div>
-            <div class="face bottom">6</div>
-          </div>
-        </div>
-        <p>
-          Aucune face n'est opaque mais les trois faces arrières
-          sont désormais cachées.
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '100%', 360)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}{{Spec2('CSS Transforms 2')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.backface-visibility")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/backface-visibility/index.md b/files/fr/web/css/backface-visibility/index.md new file mode 100644 index 0000000000..510a676f14 --- /dev/null +++ b/files/fr/web/css/backface-visibility/index.md @@ -0,0 +1,213 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/backface-visibility +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété backface-visibility indique si la face arrière d'un élément doit être visible lorsqu'elle est orientée vers l'utilisateur. La face arrière d'un élément est un arrière-plan transparent qui, lorsqu'il est visible, permet de voir un reflet symétrique de la face avant de l'élément.

+ +
{{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.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* Valeurs globales */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;
+ +

La propriété backface-visibility est définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
visible
+
Ce mot-clé indique que la face arrière est visible lorsqu'elle est tournée vers l'utilisateur. Cela permet d'obtenir un effet miroir sur la face avant.
+
hidden
+
Ce mot-clé indique que la face arrière n'est pas visible. La face avant est donc cachée.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dans cet exemple, on dessine un cube avec des faces transparentes.

+ +

CSS

+ +
/* Des classes utilitaires pour afficher ou
+   masquer les faces arrières du cube */
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+}
+
+/* On définit les règles pour le conteneur, */
+/* le cube et une face quelconque */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* On définit chacune des faces */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* On améliore le rendu du tableau */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <th><code>backface-visibility: visible;</code></th>
+      <th><code>backface-visibility: hidden;</code></th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube showbf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>
+          Toutes les faces sont transparentes et les trois
+          faces arrières sont visibles au travers des faces
+          avant.
+        </p>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube hidebf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>
+          Aucune face n'est opaque mais les trois faces arrières
+          sont désormais cachées.
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', 360)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}{{Spec2('CSS Transforms 2')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.backface-visibility")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/background-attachment/index.html b/files/fr/web/css/background-attachment/index.html deleted file mode 100644 index a047e44575..0000000000 --- a/files/fr/web/css/background-attachment/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: background-attachment -slug: Web/CSS/background-attachment -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-attachment ---- -
{{CSSRef}}
- -

La propriété background-attachment définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (viewport) ou si celle-ci défile avec le bloc englobant.

- -
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-background-attachment: scroll;
-background-attachment: fixed;
-background-attachment: local;
-
-/* Valeurs globales */
-background-attachment: inherit;
-background-attachment: initial;
-background-attachment: unset;
-
- -

La propriété background-attachment est définie avec un des mots-clés de la liste suivante.

- -

Valeurs

- -
-
fixed
-
Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (viewport). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}).
-
local
-
Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.
-
scroll
-
Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Exemple simple

- -

CSS

- -
p {
-  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
-  background-attachment: fixed;
-}
-
- -

HTML

- -
<p>
-  There were doors all round the hall, but they were all locked; and when
-  Alice had been all the way down one side and up the other, trying every
-  door, she walked sadly down the middle, wondering how she was ever to
-  get out again.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemple_simple")}}

- -

Gestion de plusieurs arrière-plans

- -

On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un background-attachment spécifique. Pour cela, on utilisera une liste, séparée par des virgules. Les images seront associées dans l'ordre à chaque propriété d'attachement.

- -

CSS

- -
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;
-}
- -

HTML

- -
<p>
-  There were doors all round the hall, but they were all locked; and when
-  Alice had been all the way down one side and up the other, trying every
-  door, she walked sadly down the middle, wondering how she was ever to
-  get out again.
-
-  Suddenly she came upon a little three-legged table, all made of solid
-  glass; there was nothing on it except a tiny golden key, and Alice's
-  first thought was that it might belong to one of the doors of the hall;
-  but, alas! either the locks were too large, or the key was too small,
-  but at any rate it would not open any of them. However, on the second
-  time round, she came upon a low curtain she had not noticed before, and
-  behind it was a little door about fifteen inches high: she tried the
-  little golden key in the lock, and to her great delight it fitted!
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur local.
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-attachment")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/background-attachment/index.md b/files/fr/web/css/background-attachment/index.md new file mode 100644 index 0000000000..a047e44575 --- /dev/null +++ b/files/fr/web/css/background-attachment/index.md @@ -0,0 +1,144 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

La propriété background-attachment définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (viewport) ou si celle-ci défile avec le bloc englobant.

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Valeurs globales */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+
+ +

La propriété background-attachment est définie avec un des mots-clés de la liste suivante.

+ +

Valeurs

+ +
+
fixed
+
Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (viewport). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}).
+
local
+
Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.
+
scroll
+
Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Exemple simple

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple")}}

+ +

Gestion de plusieurs arrière-plans

+ +

On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un background-attachment spécifique. Pour cela, on utilisera une liste, séparée par des virgules. Les images seront associées dans l'ordre à chaque propriété d'attachement.

+ +

CSS

+ +
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;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur local.
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-attachment")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/background-blend-mode/index.html b/files/fr/web/css/background-blend-mode/index.html deleted file mode 100644 index 0b8bc30a7f..0000000000 --- a/files/fr/web/css/background-blend-mode/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: background-blend-mode -slug: Web/CSS/background-blend-mode -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-blend-mode ---- -
{{CSSRef}}
- -

La propriété CSS background-blend-mode définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.

- -
{{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

- -
/* Une valeur qui s'applique à toutes les images */
-background-blend-mode: normal;
-
-/* Deux valeurs, chacune pour une image */
-background-blend-mode: darken, luminosity;
-
-/* Valeurs globales */
-background-blend-mode: initial;
-background-blend-mode: inherit;
-background-blend-mode: unset;
-
- -

Valeurs

- -
-
<blend-mode>
-
Une valeur décrivant un mode de fusion (type {{cssxref("<blend-mode>")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.
-
- -

Syntaxe formelle

- -
Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
- -

Exemples

- -

CSS

- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: screen;
-}
- -

HTML

- -
<div id="div"></div>
-
-<select id="select">
-    <option>normal</option>
-    <option>multiply</option>
-    <option selected>screen</option>
-    <option>overlay</option>
-    <option>darken</option>
-    <option>lighten</option>
-    <option>color-dodge</option>
-    <option>color-burn</option>
-    <option>hard-light</option>
-    <option>soft-light</option>
-    <option>difference</option>
-    <option>exclusion</option>
-    <option>hue</option>
-    <option>saturation</option>
-    <option>color</option>
-    <option>luminosity</option>
-</select>
- -

JavaScript

- -
document.getElementById("select").onchange = function(event) {
-    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
-}
-console.log(document.getElementById('div'));
- -

{{EmbedLiveSample('Exemples', "330", "330")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}}{{Spec2('Compositing')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-blend-mode")}}

- -

Voir aussi

- -
    -
  • {{cssxref("<blend-mode>")}}
    • -
  • {{cssxref("mix-blend-mode")}}
    • -
diff --git a/files/fr/web/css/background-blend-mode/index.md b/files/fr/web/css/background-blend-mode/index.md new file mode 100644 index 0000000000..0b8bc30a7f --- /dev/null +++ b/files/fr/web/css/background-blend-mode/index.md @@ -0,0 +1,116 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-blend-mode +--- +
{{CSSRef}}
+ +

La propriété CSS background-blend-mode définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.

+ +
{{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

+ +
/* Une valeur qui s'applique à toutes les images */
+background-blend-mode: normal;
+
+/* Deux valeurs, chacune pour une image */
+background-blend-mode: darken, luminosity;
+
+/* Valeurs globales */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+
+ +

Valeurs

+ +
+
<blend-mode>
+
Une valeur décrivant un mode de fusion (type {{cssxref("<blend-mode>")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.
+
+ +

Syntaxe formelle

+ +
Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
+ +

Exemples

+ +

CSS

+ +
#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}
+ +

HTML

+ +
<div id="div"></div>
+
+<select id="select">
+    <option>normal</option>
+    <option>multiply</option>
+    <option selected>screen</option>
+    <option>overlay</option>
+    <option>darken</option>
+    <option>lighten</option>
+    <option>color-dodge</option>
+    <option>color-burn</option>
+    <option>hard-light</option>
+    <option>soft-light</option>
+    <option>difference</option>
+    <option>exclusion</option>
+    <option>hue</option>
+    <option>saturation</option>
+    <option>color</option>
+    <option>luminosity</option>
+</select>
+ +

JavaScript

+ +
document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));
+ +

{{EmbedLiveSample('Exemples', "330", "330")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}}{{Spec2('Compositing')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-blend-mode")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
diff --git a/files/fr/web/css/background-clip/index.html b/files/fr/web/css/background-clip/index.html deleted file mode 100644 index 78a5167402..0000000000 --- a/files/fr/web/css/background-clip/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: background-clip -slug: Web/CSS/background-clip -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-clip ---- -
{{CSSRef}}
- -

La propriété background-clip définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la boîte de bordure, la boîte de remplissage (padding) ou la boîte de contenu.

- -
{{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

- -
/* Valeurs utilisant un mot-clé */
-background-clip: border-box;
-background-clip: padding-box;
-background-clip: content-box;
-background-clip: text;
-
-/* Valeurs globales */
-background-clip: inherit;
-background-clip: initial;
-background-clip: unset;
-
- -

Valeurs

- -
-
border-box
-
L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.
-
padding-box
-
Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (padding).
-
content-box
-
L'arrière-plan est limité (rogné) à la boîte de contenu.
-
text {{experimental_inline}}
-
L'arrière-plan est limité (rogné) au texte en premier plan.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
- border: 10px navy;
- border-style: dotted double;
- margin: 1em;
- padding: 2em;
- background: #F8D575;
- font: 900 1.2em sans-serif;
- text-decoration: underline;
-}
-
-.border-box {
-  background-clip: border-box;
-}
-
-.padding-box {
-  background-clip: padding-box;
-}
-
-.content-box {
-  background-clip: content-box;
-}
-
-.text {
-  background-clip: text;
-  color: rgba(0,0,0,.2);
-}
-
- -

HTML

- -
<p class="border-box">
-  L'arrière-plan s'étend sous la bordure.
-</p>
-<p class="padding-box">
-  L'arrière-plan s'étend jusqu'avant la
-  bordure.
-</p>
-<p class="content-box">
-  L'arrière-plan s'arrête à la boîte de
-  contenu.
-</p>
-<p class="text">
-  L'arrière-plan se limite au texte au
-  premier-plan.
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 600, 580)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}Ajout de la valeur text.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-clip")}}

- -

Voir aussi

- -
    -
  • {{cssxref("clip-path")}}
    • -
  • Les propriétés relatives à l'arrière-plan : -
      -
    • {{cssxref("background")}}
      • -
    • {{cssxref("background-color")}}
      • -
    • {{cssxref("background-image")}}
      • -
    • {{cssxref("background-origin")}}
      • -
    -
    • -
  • Le modèle de boîtes CSS
    • -
diff --git a/files/fr/web/css/background-clip/index.md b/files/fr/web/css/background-clip/index.md new file mode 100644 index 0000000000..78a5167402 --- /dev/null +++ b/files/fr/web/css/background-clip/index.md @@ -0,0 +1,147 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-clip +--- +
{{CSSRef}}
+ +

La propriété background-clip définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la boîte de bordure, la boîte de remplissage (padding) ou la boîte de contenu.

+ +
{{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

+ +
/* Valeurs utilisant un mot-clé */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* Valeurs globales */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+
+ +

Valeurs

+ +
+
border-box
+
L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.
+
padding-box
+
Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (padding).
+
content-box
+
L'arrière-plan est limité (rogné) à la boîte de contenu.
+
text {{experimental_inline}}
+
L'arrière-plan est limité (rogné) au texte en premier plan.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+ border: 10px navy;
+ border-style: dotted double;
+ margin: 1em;
+ padding: 2em;
+ background: #F8D575;
+ font: 900 1.2em sans-serif;
+ text-decoration: underline;
+}
+
+.border-box {
+  background-clip: border-box;
+}
+
+.padding-box {
+  background-clip: padding-box;
+}
+
+.content-box {
+  background-clip: content-box;
+}
+
+.text {
+  background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+
+ +

HTML

+ +
<p class="border-box">
+  L'arrière-plan s'étend sous la bordure.
+</p>
+<p class="padding-box">
+  L'arrière-plan s'étend jusqu'avant la
+  bordure.
+</p>
+<p class="content-box">
+  L'arrière-plan s'arrête à la boîte de
+  contenu.
+</p>
+<p class="text">
+  L'arrière-plan se limite au texte au
+  premier-plan.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 600, 580)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}Ajout de la valeur text.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-clip")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("clip-path")}}
    • +
  • Les propriétés relatives à l'arrière-plan : +
      +
    • {{cssxref("background")}}
      • +
    • {{cssxref("background-color")}}
      • +
    • {{cssxref("background-image")}}
      • +
    • {{cssxref("background-origin")}}
      • +
    +
    • +
  • Le modèle de boîtes CSS
    • +
diff --git a/files/fr/web/css/background-color/index.html b/files/fr/web/css/background-color/index.html deleted file mode 100644 index b536c82c49..0000000000 --- a/files/fr/web/css/background-color/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: background-color -slug: Web/CSS/background-color -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-color ---- -
{{CSSRef}}
- -

La propriété background-color permet de définir la couleur utilisée pour l'arrière-plan d'un élément (celle-ci peut être une couleur transparente).

- -
{{EmbedInteractiveExample("pages/css/background-color.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-background-color: red;
-
-
-/* Valeur hexadécimale */
-background-color: #bbff00;    /* Complètement opaque */
-background-color: #bf0;       /* Complètement opaque - notation raccourcie */
-background-color: #11ffee00;  /* Complètement transparent */
-background-color: #1fe0;      /* Complètement transparent - notation raccourcie */
-background-color: #11ffeeff;  /* Complètement opaque */
-background-color: #1fef;      /* Complètement opaque - notation raccourcie */
-
-/* Valeur RGB */
-background-color: rgb(255, 255, 128);
-
-/* Valeur RGBA : une valeur RGB avec un canal alpha */
-background-color: rgba(117, 190, 218, 0.0); /* 0.0 - transparent */
-background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
-background-color: rgba(117, 190, 218, 1.0); /* 1.0 - opaque */
-​​​​​​​
-/* Valeur HSLA */
-background-color: hsla(50, 33%, 25%, 0.75);
-
-/* Valeurs avec un mot-clé spécial */
-background-color: currentcolor;
-background-color: transparent;
-
-/* Valeurs globales */
-background-color: inherit;
-background-color: initial;
-background-color: unset;
- -

La propriété background-color se définit grâce à une valeur de type <color>.

- -

Valeurs

- -
-
<color>
-
Une valeur de type {{cssxref("<color>")}} qui indique la couleur uniforme de l'arrière-plan. Même si une ou plusieurs images sont définies grâce à {{cssxref("background-image")}}, la couleur peut avoir un impact en fonction de la transparence des images. De façon générale, c'est une bonne pratique que de définir une couleur malgré la présence d'image pour prévenir aux problèmes de chargement des images.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple_un {
-  background-color: teal;
-  color: white;
-}
-
-.exemple_deux {
-  background-color: rgb(153,102,153);
-  color: rgb(255,255,204);
-}
-
-.exemple_trois {
-  background-color: #777799;
-  color: #FFFFFF;
-}
-
- -

HTML

- -
<div class="exemple_un">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="exemple_deux">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="exemple_trois">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","150")}}

- -

Accessibilité

- -

Il est important de vérifier que le contraste entre la couleur d'arrière-plan et la couleur du texte est suffisamment élevé afin que le contenu de la page puisse être lu, quelles que soient les conditions de vision.

- -

Le ratio de contraste entre les couleurs est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Pour respecter les règles d'accessibilité Web Content Accessibility Guidelines (WCAG), il faut avoir un ratio de 4.5:1 pour le contenu textuel normal et un ratio de 3:1 pour les textes plus grands comme les titres (un texte sera considéré comme grand s'il est en gras et mesure au moins 18.66px ou s'il mesure au moins 24 pixels).

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationCommentairesRetours
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}Le mot-clé transparent a été retiré de la propriété pour être intégré au type de données {{cssxref("<color>")}} (dans la pratique, il n'y a aucune différence).Issues GitHub pour la spécification Background de niveau 3 (en anglais)
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}Aucune modification. 
{{SpecName('CSS1', '#background-color', 'background-color')}}Définition initiale. 
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-color")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/background-color/index.md b/files/fr/web/css/background-color/index.md new file mode 100644 index 0000000000..b536c82c49 --- /dev/null +++ b/files/fr/web/css/background-color/index.md @@ -0,0 +1,157 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

La propriété background-color permet de définir la couleur utilisée pour l'arrière-plan d'un élément (celle-ci peut être une couleur transparente).

+ +
{{EmbedInteractiveExample("pages/css/background-color.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+background-color: red;
+
+
+/* Valeur hexadécimale */
+background-color: #bbff00;    /* Complètement opaque */
+background-color: #bf0;       /* Complètement opaque - notation raccourcie */
+background-color: #11ffee00;  /* Complètement transparent */
+background-color: #1fe0;      /* Complètement transparent - notation raccourcie */
+background-color: #11ffeeff;  /* Complètement opaque */
+background-color: #1fef;      /* Complètement opaque - notation raccourcie */
+
+/* Valeur RGB */
+background-color: rgb(255, 255, 128);
+
+/* Valeur RGBA : une valeur RGB avec un canal alpha */
+background-color: rgba(117, 190, 218, 0.0); /* 0.0 - transparent */
+background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
+background-color: rgba(117, 190, 218, 1.0); /* 1.0 - opaque */
+​​​​​​​
+/* Valeur HSLA */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Valeurs avec un mot-clé spécial */
+background-color: currentcolor;
+background-color: transparent;
+
+/* Valeurs globales */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+ +

La propriété background-color se définit grâce à une valeur de type <color>.

+ +

Valeurs

+ +
+
<color>
+
Une valeur de type {{cssxref("<color>")}} qui indique la couleur uniforme de l'arrière-plan. Même si une ou plusieurs images sont définies grâce à {{cssxref("background-image")}}, la couleur peut avoir un impact en fonction de la transparence des images. De façon générale, c'est une bonne pratique que de définir une couleur malgré la présence d'image pour prévenir aux problèmes de chargement des images.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple_un {
+  background-color: teal;
+  color: white;
+}
+
+.exemple_deux {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.exemple_trois {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

HTML

+ +
<div class="exemple_un">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exemple_deux">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exemple_trois">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","150")}}

+ +

Accessibilité

+ +

Il est important de vérifier que le contraste entre la couleur d'arrière-plan et la couleur du texte est suffisamment élevé afin que le contenu de la page puisse être lu, quelles que soient les conditions de vision.

+ +

Le ratio de contraste entre les couleurs est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Pour respecter les règles d'accessibilité Web Content Accessibility Guidelines (WCAG), il faut avoir un ratio de 4.5:1 pour le contenu textuel normal et un ratio de 3:1 pour les textes plus grands comme les titres (un texte sera considéré comme grand s'il est en gras et mesure au moins 18.66px ou s'il mesure au moins 24 pixels).

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationCommentairesRetours
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}Le mot-clé transparent a été retiré de la propriété pour être intégré au type de données {{cssxref("<color>")}} (dans la pratique, il n'y a aucune différence).Issues GitHub pour la spécification Background de niveau 3 (en anglais)
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}Aucune modification. 
{{SpecName('CSS1', '#background-color', 'background-color')}}Définition initiale. 
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-color")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/background-image/index.html b/files/fr/web/css/background-image/index.html deleted file mode 100644 index 8060b3da48..0000000000 --- a/files/fr/web/css/background-image/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: background-image -slug: Web/CSS/background-image -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-image ---- -
{{CSSRef}}
- -

La propriété background-image permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeur simple */
-background-image: url('https://example.com/bck.png');
-
-/* Plusieurs valeurs */
-background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');
-
-/* Valeur avec un mot-clé */
-background-image: none;
-
-/* Valeurs globales */
-background-image: inherit;
-background-image: initial;
-background-image: unset;
-
- -

Chaque image d'arrière-plan peut être définie avec le mot-clé none ou avec une valeur de type <image>. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :

- -
background-image:
-  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
-  url("https://mdn.mozillademos.org/files/7693/catfront.png");
-
- -

Valeurs

- -
-
none
-
Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.
-
<image>
-
Une valeur {{cssxref("<image>")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes ('texte_avec_double_quotes_"_') ou des doubles quotes ("texte_avec_simple_quote_'_") pour encadrer le texte qui forme l'URL.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.

- -

HTML

- -
<div>
-  <p class="catsandstars">
-    Un paragraphe avec des chats<br/>
-    et des étoiles.
-  </p>
-  <p>Pas ici.</p>
-  <p class="catsandstars">
-    Et voilà encore des chats.<br/>
-    Et des étoiles !
-  </p>
-  <p>Puis plus rien.</p>
-</div>
- -

CSS

- -
p {
-  font-size: 1.5em;
-  color: #FE7F88;
-  background-color: transparent;
-  background-image: none;
-}
-
-div {
-  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
-}
-
-.catsandstars {
-  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
-                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
-  background-color: transparent;
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Accessibilité

- -

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("<image>")}}.
{{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.2')}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.1')}}La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-image")}}

- -

Voir aussi

- -
    -
  • Implémenter des sprites en CSS
    • -
  • {{HTMLElement("img")}},
    • -
  • {{cssxref("<image>")}},
    • -
  • {{cssxref("<gradient>")}},
    • -
  • {{cssxref("linear-gradient")}},
    • -
  • {{cssxref("radial-gradient")}},
    • -
  • {{cssxref("repeating-linear-gradient")}},
    • -
  • {{cssxref("repeating-radial-gradient")}},
    • -
  • {{cssxref("element()")}},
    • -
  • {{cssxref("_image", "image()")}},
    • -
  • {{cssxref("image-set")}},
    • -
  • {{cssxref("url","url()")}}
    • -
diff --git a/files/fr/web/css/background-image/index.md b/files/fr/web/css/background-image/index.md new file mode 100644 index 0000000000..8060b3da48 --- /dev/null +++ b/files/fr/web/css/background-image/index.md @@ -0,0 +1,170 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-image +--- +
{{CSSRef}}
+ +

La propriété background-image permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeur simple */
+background-image: url('https://example.com/bck.png');
+
+/* Plusieurs valeurs */
+background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');
+
+/* Valeur avec un mot-clé */
+background-image: none;
+
+/* Valeurs globales */
+background-image: inherit;
+background-image: initial;
+background-image: unset;
+
+ +

Chaque image d'arrière-plan peut être définie avec le mot-clé none ou avec une valeur de type <image>. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :

+ +
background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url("https://mdn.mozillademos.org/files/7693/catfront.png");
+
+ +

Valeurs

+ +
+
none
+
Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.
+
<image>
+
Une valeur {{cssxref("<image>")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes ('texte_avec_double_quotes_"_') ou des doubles quotes ("texte_avec_simple_quote_'_") pour encadrer le texte qui forme l'URL.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.

+ +

HTML

+ +
<div>
+  <p class="catsandstars">
+    Un paragraphe avec des chats<br/>
+    et des étoiles.
+  </p>
+  <p>Pas ici.</p>
+  <p class="catsandstars">
+    Et voilà encore des chats.<br/>
+    Et des étoiles !
+  </p>
+  <p>Puis plus rien.</p>
+</div>
+ +

CSS

+ +
p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-color: transparent;
+  background-image: none;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Accessibilité

+ +

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("<image>")}}.
{{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.2')}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.1')}}La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-image")}}

+ +

Voir aussi

+ +
    +
  • Implémenter des sprites en CSS
    • +
  • {{HTMLElement("img")}},
    • +
  • {{cssxref("<image>")}},
    • +
  • {{cssxref("<gradient>")}},
    • +
  • {{cssxref("linear-gradient")}},
    • +
  • {{cssxref("radial-gradient")}},
    • +
  • {{cssxref("repeating-linear-gradient")}},
    • +
  • {{cssxref("repeating-radial-gradient")}},
    • +
  • {{cssxref("element()")}},
    • +
  • {{cssxref("_image", "image()")}},
    • +
  • {{cssxref("image-set")}},
    • +
  • {{cssxref("url","url()")}}
    • +
diff --git a/files/fr/web/css/background-origin/index.html b/files/fr/web/css/background-origin/index.html deleted file mode 100644 index 30fda75135..0000000000 --- a/files/fr/web/css/background-origin/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: background-origin -slug: Web/CSS/background-origin -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-origin ---- -
{{CSSRef}}
- -

La propriété background-origin détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (padding).

- -
{{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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-background-origin: border-box;
-background-origin: padding-box;
-background-origin: content-box;
-
-/* Valeurs globales */
-background-origin: inherit;
-background-origin: initial;
-background-origin: unset;
-
- -

Valeurs

- -
-
border-box
-
L'arrière-plan est positionné relativement à la boîte de bordure.
-
padding-box
-
L'arrière-plan est positionné relativement à la boîte de remplissage (padding).
-
content-box
-
L'arrière-plan est positionné relativement à la boîte de contenu.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  width: 200px;
-  height: 100px;
-}
-
-.exemple {
-  border: 10px double;
-  padding: 10px;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-color: palegreen;
-  background-position: 0px 40px;
-  background-origin: content-box;
-  background-repeat: no-repeat;
-}
-
- -

HTML

- -
<div class="exemple"></div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","200")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-origin")}}

- -

Voir aussi

- -
    -
  • {{cssxref("background-clip")}}
    • -
diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md new file mode 100644 index 0000000000..30fda75135 --- /dev/null +++ b/files/fr/web/css/background-origin/index.md @@ -0,0 +1,107 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-origin +--- +
{{CSSRef}}
+ +

La propriété background-origin détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (padding).

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* Valeurs globales */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+
+ +

Valeurs

+ +
+
border-box
+
L'arrière-plan est positionné relativement à la boîte de bordure.
+
padding-box
+
L'arrière-plan est positionné relativement à la boîte de remplissage (padding).
+
content-box
+
L'arrière-plan est positionné relativement à la boîte de contenu.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  width: 200px;
+  height: 100px;
+}
+
+.exemple {
+  border: 10px double;
+  padding: 10px;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-color: palegreen;
+  background-position: 0px 40px;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+}
+
+ +

HTML

+ +
<div class="exemple"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-origin")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("background-clip")}}
    • +
diff --git a/files/fr/web/css/background-position-x/index.html b/files/fr/web/css/background-position-x/index.html deleted file mode 100644 index 19ef27e117..0000000000 --- a/files/fr/web/css/background-position-x/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: background-position-x -slug: Web/CSS/background-position-x -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/background-position-x ---- -
{{CSSRef}}
- -

La propriété background-position-x définit la position horizontale initiale de chaque image d'arrière-plan par rapport à l'origine, définie avec {{cssxref("background-origin")}}.

- -

Pour plus d'informations, se référer à la documentation de la propriété {{cssxref("background-position")}} qui existe depuis plus longtemps.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-background-position-x: left;
-background-position-x: right;
-background-position-x: center;
-
-/* Valeurs proportionnelles */
-/* Type <percentage>        */
-background-position-x: 25%;
-
-/* Valeurs de longueur */
-/* Type <length>       */
-background-position-x: 0px;
-background-position-x: 1cm;
-background-position-x: 8em;
-
-/* Déclaration indiquant un décalage  */
-/* relatif à un des côtés de la boîte */
-background-position-x: right 3px;
-
-/* Gestion de plusieurs valeurs */
-/* pour plusieurs arrières-plan */
-background-position-x: 0px, center;
-
-/* Valeurs globales */
-background-position-x: inherit;
-background-position-x: initial;
-background-position-x: unset;
-
- -

Valeurs

- -
-
left
-
Le bord gauche de l'image d'arrière-plan est aligné avec le bord gauche de la zone dédiée à l'arrière-plan.
-
center
-
L'image d'arrière-plan est centrée horizontalement par rapport à la zone dédiée à l'arrière-plan.
-
right
-
Le côté droit de l'image d'arrière-plan est aligné avec le côté droit de la zone dédiée à l'arrière-plan.
-
<length>
-
Une valeur de longueur (type {{cssxref("<length>")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.
-
<percentage>
-
Une valeur en pourcentages (type {{cssxref("<percentage>")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan, proportionnellement à la largeur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-position-x")}}

- -

Voir aussi

- -
    -
  • {{cssxref("background-position")}}
    • -
  • {{cssxref("background-position-y")}}
    • -
  • {{cssxref("background-position-inline")}}
    • -
  • {{cssxref("background-position-block")}}
    • -
  • Manipuler plusieurs arrière-plans
    • -
diff --git a/files/fr/web/css/background-position-x/index.md b/files/fr/web/css/background-position-x/index.md new file mode 100644 index 0000000000..19ef27e117 --- /dev/null +++ b/files/fr/web/css/background-position-x/index.md @@ -0,0 +1,106 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/background-position-x +--- +
{{CSSRef}}
+ +

La propriété background-position-x définit la position horizontale initiale de chaque image d'arrière-plan par rapport à l'origine, définie avec {{cssxref("background-origin")}}.

+ +

Pour plus d'informations, se référer à la documentation de la propriété {{cssxref("background-position")}} qui existe depuis plus longtemps.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+background-position-x: left;
+background-position-x: right;
+background-position-x: center;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+background-position-x: 25%;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Déclaration indiquant un décalage  */
+/* relatif à un des côtés de la boîte */
+background-position-x: right 3px;
+
+/* Gestion de plusieurs valeurs */
+/* pour plusieurs arrières-plan */
+background-position-x: 0px, center;
+
+/* Valeurs globales */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+
+ +

Valeurs

+ +
+
left
+
Le bord gauche de l'image d'arrière-plan est aligné avec le bord gauche de la zone dédiée à l'arrière-plan.
+
center
+
L'image d'arrière-plan est centrée horizontalement par rapport à la zone dédiée à l'arrière-plan.
+
right
+
Le côté droit de l'image d'arrière-plan est aligné avec le côté droit de la zone dédiée à l'arrière-plan.
+
<length>
+
Une valeur de longueur (type {{cssxref("<length>")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.
+
<percentage>
+
Une valeur en pourcentages (type {{cssxref("<percentage>")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan, proportionnellement à la largeur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-position-x")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • 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 deleted file mode 100644 index d6346071e7..0000000000 --- a/files/fr/web/css/background-position-y/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: background-position-y -slug: Web/CSS/background-position-y -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/background-position-y ---- -
{{CSSRef}}
- -

La propriété background-position-y définit la position verticale initiale de chaque image d'arrière-plan. La position est relative à l'origine définie par {{cssxref("background-origin")}}.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-background-position-y: top;
-background-position-y: bottom;
-background-position-y: center;
-
-/* Valeurs proportionnelles */
-/* Type <percentage>        */
-background-position-y: 25%;
-
-/* Valeurs de longueur */
-/* Type <length>       */
-background-position-y: 0px;
-background-position-y: 1cm;
-background-position-y: 8em;
-
-/* Déclaration indiquant un décalage  */
-/* relatif à un des côtés de la boîte */
-background-position-y: bottom 3px;
-background-position-y: bottom 10%;
-
-/* Gestion de plusieurs valeurs */
-/* pour plusieurs arrières-plan */
-background-position-y: 0px, center;
-
-/* Valeurs globales */
-background-position-y: inherit;
-background-position-y: initial;
-background-position-y: unset;
-
- -

Valeurs

- -
-
top
-
Le bord haut de l'image d'arrière-plan est aligné avec le bord haut de la zone dédiée à l'arrière-plan.
-
center
-
L'image d'arrière-plan est centrée verticalement par rapport à la zone dédiée à l'arrière-plan.
-
bottom
-
Le bas de l'image d'arrière-plan est aligné avec le bas de la zone dédiée à l'arrière-plan.
-
<length>
-
Une valeur de longueur (type {{cssxref("<length>")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport au bord haut de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Certains navigateurs permettent d'indiquer un décalage par rapport au côté bas.
-
<percentage>
-
Une valeur en pourcentages (type {{cssxref("<percentage>")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport à un bord horizontal de la zone d'arrière-plan, proportionnellement à la hauteur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Une valeur de 100% indique que le bas de l'image d'arrière-plan sera aligné avec le bas du conteneur et une valeur de 50% centrera l'image.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}{{Spec2('CSS4 Backgrounds')}}Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-position-y")}}

- -

Voir aussi

- -
    -
  • {{cssxref("background-position")}}
    • -
  • {{cssxref("background-position-x")}}
    • -
  • {{cssxref("background-position-inline")}}
    • -
  • {{cssxref("background-position-block")}}
    • -
  • Manipuler plusieurs arrière-plans
    • -
diff --git a/files/fr/web/css/background-position-y/index.md b/files/fr/web/css/background-position-y/index.md new file mode 100644 index 0000000000..d6346071e7 --- /dev/null +++ b/files/fr/web/css/background-position-y/index.md @@ -0,0 +1,105 @@ +--- +title: background-position-y +slug: Web/CSS/background-position-y +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/background-position-y +--- +
{{CSSRef}}
+ +

La propriété background-position-y définit la position verticale initiale de chaque image d'arrière-plan. La position est relative à l'origine définie par {{cssxref("background-origin")}}.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+background-position-y: top;
+background-position-y: bottom;
+background-position-y: center;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+background-position-y: 25%;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+background-position-y: 0px;
+background-position-y: 1cm;
+background-position-y: 8em;
+
+/* Déclaration indiquant un décalage  */
+/* relatif à un des côtés de la boîte */
+background-position-y: bottom 3px;
+background-position-y: bottom 10%;
+
+/* Gestion de plusieurs valeurs */
+/* pour plusieurs arrières-plan */
+background-position-y: 0px, center;
+
+/* Valeurs globales */
+background-position-y: inherit;
+background-position-y: initial;
+background-position-y: unset;
+
+ +

Valeurs

+ +
+
top
+
Le bord haut de l'image d'arrière-plan est aligné avec le bord haut de la zone dédiée à l'arrière-plan.
+
center
+
L'image d'arrière-plan est centrée verticalement par rapport à la zone dédiée à l'arrière-plan.
+
bottom
+
Le bas de l'image d'arrière-plan est aligné avec le bas de la zone dédiée à l'arrière-plan.
+
<length>
+
Une valeur de longueur (type {{cssxref("<length>")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport au bord haut de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Certains navigateurs permettent d'indiquer un décalage par rapport au côté bas.
+
<percentage>
+
Une valeur en pourcentages (type {{cssxref("<percentage>")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport à un bord horizontal de la zone d'arrière-plan, proportionnellement à la hauteur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Une valeur de 100% indique que le bas de l'image d'arrière-plan sera aligné avec le bas du conteneur et une valeur de 50% centrera l'image.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}{{Spec2('CSS4 Backgrounds')}}Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-position-y")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • 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 deleted file mode 100644 index 5649bec662..0000000000 --- a/files/fr/web/css/background-position/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: background-position -slug: Web/CSS/background-position -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-position ---- -
{{CSSRef}}
- -

La propriété background-position permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan.

- -
{{EmbedInteractiveExample("pages/css/background-position.html")}}
- -

Syntaxe

- -
/* Valeurs utilisant un mot-clé */
-background-position: top;
-background-position: bottom;
-background-position: left;
-background-position: right;
-background-position: center;
-
-/* Valeurs proportionnelles à la boîte */
-/* Type <percentage>                   */
-background-position: 25% 75%;
-
-/* Valeurs de longueur */
-/* Type <length>       */
-background-position: 0 0;
-background-position: 1cm 2cm;
-background-position: 10ch 8em;
-
-/* Plusieurs valeurs pour plusieurs arrières-plans */
-background-position: 0 0, center;
-
-/* Valeurs exprimant un décalage relatif aux côtés */
-background-position: bottom 10px right 20px;
-background-position: right 3em bottom 10px;
-background-position: bottom 10px right;
-background-position: top right 10px;
-
-/* Valeurs globales */
-background-position: inherit;
-background-position: initial;
-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

- -
-
<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 :

- -
    -
  • Le mot-clé center qui centre l'image.
    • -
  • Un mot-clé parmi top, left, bottom, right. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).
    • -
  • Une longeur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.
    • -
- -

Définition avec deux valeurs : la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être :

- -
    -
  • Un des mots-clés parmi top, left, bottom, right. Si left ou right est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si top ou bottom est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.
    • -
  • Une valeur de longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}). Si l'autre valeur vaut left ou right, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est top ou bottom,  cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.
    • -
- -

On notera que :

- -
    -
  • si une valeur est top ou bottom, la seconde ne peut pas être top ou bottom.
    • -
  • si une valeur est left ou right, la seconde ne peut pas être left ou right.
    • -
- -

Autrement dit "top top" ou "left right" seront considérées comme invalides.

- -

À propos des pourcentages : lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.

- -

Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante :

- -

(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)
- (hauteur conteneur - hauteur image) * (position en %) = (décalage vertical).

- -

On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour background-position n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.

-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Exemples utilisant plusieurs images

- -

Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente.

- -

CSS

- -
div {
-  background-color: #FFEE99;
-  background-repeat: no-repeat;
-  width: 300px;
-  height: 80px;
-  margin-bottom: 12px;
-}
-
-/* On utilise la propriété raccourcie background */
-.exemple_un {
-  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
-}
-.exemple_deux {
-  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
-}
-
-/*
-Plusieurs images d'arrière-plan chacune positionnée
-différemment, on voit les virgules dans les déclarations.
-L'ordre est le même entre background-image et -position.
-*/
-.exemple_trois {
-  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
-                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
-  background-position: 0px 0px,
-                       center;
-}
- -

HTML

- -
<div class="exemple_un">Premier exemple</div>
-<div class="exemple_deux">Deuxième exemple</div>
-<div class="exemple_trois">Troisième exemple</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 420, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}{{Spec2('CSS3 Backgrounds')}}La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}{{Spec2('CSS2.1')}}Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("<length>")}} et {{cssxref("<percentage>")}}.
{{SpecName('CSS1', '#background-position', 'background-position')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-position")}}

- -

Notes relatives à Quantum CSS

- -
    -
  • Un bug de Gecko empêche la transition de background-position entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("<position>")}} (par exemple background-position: 10px 10px; d'une part et background-position: 20px 20px, 30px 30px; d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé Quantum CSS ou Stylo, prévu pour Firefox 57) corrige ce problème.
    • -
- -

Voir aussi

- -
    -
  • Gérer plusieurs arrières-plans
    • -
  • {{cssxref("background-position-x")}}
    • -
  • {{cssxref("background-position-y")}}
    • -
  • {{cssxref("background-position-inline")}}
    • -
  • {{cssxref("background-position-block")}}
    • -
  • {{cssxref("transform-origin")}}
    • -
diff --git a/files/fr/web/css/background-position/index.md b/files/fr/web/css/background-position/index.md new file mode 100644 index 0000000000..5649bec662 --- /dev/null +++ b/files/fr/web/css/background-position/index.md @@ -0,0 +1,192 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-position +--- +
{{CSSRef}}
+ +

La propriété background-position permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan.

+ +
{{EmbedInteractiveExample("pages/css/background-position.html")}}
+ +

Syntaxe

+ +
/* Valeurs utilisant un mot-clé */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* Valeurs proportionnelles à la boîte */
+/* Type <percentage>                   */
+background-position: 25% 75%;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Plusieurs valeurs pour plusieurs arrières-plans */
+background-position: 0 0, center;
+
+/* Valeurs exprimant un décalage relatif aux côtés */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Valeurs globales */
+background-position: inherit;
+background-position: initial;
+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

+ +
+
<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 :

+ +
    +
  • Le mot-clé center qui centre l'image.
    • +
  • Un mot-clé parmi top, left, bottom, right. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).
    • +
  • Une longeur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.
    • +
+ +

Définition avec deux valeurs : la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être :

+ +
    +
  • Un des mots-clés parmi top, left, bottom, right. Si left ou right est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si top ou bottom est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.
    • +
  • Une valeur de longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}). Si l'autre valeur vaut left ou right, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est top ou bottom,  cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.
    • +
+ +

On notera que :

+ +
    +
  • si une valeur est top ou bottom, la seconde ne peut pas être top ou bottom.
    • +
  • si une valeur est left ou right, la seconde ne peut pas être left ou right.
    • +
+ +

Autrement dit "top top" ou "left right" seront considérées comme invalides.

+ +

À propos des pourcentages : lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.

+ +

Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante :

+ +

(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)
+ (hauteur conteneur - hauteur image) * (position en %) = (décalage vertical).

+ +

On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour background-position n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.

+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Exemples utilisant plusieurs images

+ +

Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente.

+ +

CSS

+ +
div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* On utilise la propriété raccourcie background */
+.exemple_un {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exemple_deux {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/*
+Plusieurs images d'arrière-plan chacune positionnée
+différemment, on voit les virgules dans les déclarations.
+L'ordre est le même entre background-image et -position.
+*/
+.exemple_trois {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       center;
+}
+ +

HTML

+ +
<div class="exemple_un">Premier exemple</div>
+<div class="exemple_deux">Deuxième exemple</div>
+<div class="exemple_trois">Troisième exemple</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 420, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}{{Spec2('CSS3 Backgrounds')}}La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}{{Spec2('CSS2.1')}}Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("<length>")}} et {{cssxref("<percentage>")}}.
{{SpecName('CSS1', '#background-position', 'background-position')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-position")}}

+ +

Notes relatives à Quantum CSS

+ +
    +
  • Un bug de Gecko empêche la transition de background-position entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("<position>")}} (par exemple background-position: 10px 10px; d'une part et background-position: 20px 20px, 30px 30px; d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé Quantum CSS ou Stylo, prévu pour Firefox 57) corrige ce problème.
    • +
+ +

Voir aussi

+ +
    +
  • Gérer plusieurs arrières-plans
    • +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • {{cssxref("transform-origin")}}
    • +
diff --git a/files/fr/web/css/background-repeat/index.html b/files/fr/web/css/background-repeat/index.html deleted file mode 100644 index 91aeac12e6..0000000000 --- a/files/fr/web/css/background-repeat/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: background-repeat -slug: Web/CSS/background-repeat -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-repeat ---- -
{{CSSRef}}
- -

La propriété background-repeat définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.

- -
{{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

- -
/* Valeurs avec un mot-clé */
-background-repeat: repeat-x;
-background-repeat: repeat-y;
-background-repeat: repeat;
-background-repeat: space;
-background-repeat: round;
-background-repeat: no-repeat;
-
-/* Syntaxe avec deux valeurs        */
-/* Première valeur : axe horizontal */
-/* Seconde valeur : axe vertical    */
-background-repeat: repeat space;
-background-repeat: repeat repeat;
-background-repeat: round space;
-background-repeat: no-repeat round;
-
-/* Valeurs globales */
-background-repeat: inherit;
-background-repeat: initial;
-background-repeat: unset;
-
- -

Valeurs

- -
-
<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 : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Une seule valeurÉquivalent avec deux-valeurs
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
- 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 : - - - - - - - - - - - - - - - - - - - -
repeatL'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.
spaceL'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété {{cssxref("background-position")}} est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où space est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.
roundL'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels.
no-repeatIl n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété {{cssxref("background-position")}}.
-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
/* Commun à tous les DIVS */
-ol, li {
-  margin: 0;
-  padding: 0;
-}
-li {
-  margin-bottom: 12px;
-}
-div {
-    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
-    width: 160px;
-    height: 70px;
-}
-
-/* background repeat CSS */
-.one {
-    background-repeat: no-repeat;
-}
-.two {
-    background-repeat: repeat;
-}
-.three {
-    background-repeat: repeat-x;
-}
-.four {
-    background-repeat: repeat-y;
-}
-
-.five {
-   background-repeat: space;
-}
-
-.six {
-   background-repeat: round;
-}
-
-/* Plusieurs images */
-.seven {
-    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
-                       url(https://developer.mozilla.org/static/img/favicon32.png);
-    background-repeat: repeat-x,
-                       repeat-y;
-    height: 144px;
-}
- -

HTML

- -
<ol>
-    <li>no-repeat
-        <div class="one"></div>
-    </li>
-    <li>repeat
-        <div class="two"></div>
-    </li>
-    <li>repeat-x
-        <div class="three"></div>
-    </li>
-    <li>repeat-y
-        <div class="four"></div>
-    </li>
-    <li>space
-        <div class="five"></div>
-    </li>
-    <li>round
-        <div class="six"></div>
-    </li>
-    <li>repeat-x, repeat-y (plusieurs images)
-        <div class="seven"></div>
-    </li>
-</ol>
- -

Résultat

- -

Dans cet exemple, chaque élément de la liste illustre une valeur différente de background-repeat.

- -

{{EmbedLiveSample('Exemples', 240, 560)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés space et round sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-repeat")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/background-repeat/index.md b/files/fr/web/css/background-repeat/index.md new file mode 100644 index 0000000000..91aeac12e6 --- /dev/null +++ b/files/fr/web/css/background-repeat/index.md @@ -0,0 +1,227 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-repeat +--- +
{{CSSRef}}
+ +

La propriété background-repeat définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.

+ +
{{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

+ +
/* Valeurs avec un mot-clé */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* Syntaxe avec deux valeurs        */
+/* Première valeur : axe horizontal */
+/* Seconde valeur : axe vertical    */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Valeurs globales */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+
+ +

Valeurs

+ +
+
<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 : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Une seule valeurÉquivalent avec deux-valeurs
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ 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 : + + + + + + + + + + + + + + + + + + + +
repeatL'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.
spaceL'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété {{cssxref("background-position")}} est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où space est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.
roundL'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels.
no-repeatIl n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété {{cssxref("background-position")}}.
+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
/* Commun à tous les DIVS */
+ol, li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+.five {
+   background-repeat: space;
+}
+
+.six {
+   background-repeat: round;
+}
+
+/* Plusieurs images */
+.seven {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.mozilla.org/static/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one"></div>
+    </li>
+    <li>repeat
+        <div class="two"></div>
+    </li>
+    <li>repeat-x
+        <div class="three"></div>
+    </li>
+    <li>repeat-y
+        <div class="four"></div>
+    </li>
+    <li>space
+        <div class="five"></div>
+    </li>
+    <li>round
+        <div class="six"></div>
+    </li>
+    <li>repeat-x, repeat-y (plusieurs images)
+        <div class="seven"></div>
+    </li>
+</ol>
+ +

Résultat

+ +

Dans cet exemple, chaque élément de la liste illustre une valeur différente de background-repeat.

+ +

{{EmbedLiveSample('Exemples', 240, 560)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés space et round sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-repeat")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/background-size/index.html b/files/fr/web/css/background-size/index.html deleted file mode 100644 index 3ab7be1f5f..0000000000 --- a/files/fr/web/css/background-size/index.html +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: background-size -slug: Web/CSS/background-size -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background-size ---- -
{{CSSRef}}
- -

La propriété CSS background-size définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-background-size: cover;
-background-size: contain;
-
-/* Une seule valeur                         */
-/* La valeur désigne la largeur de l'image. */
-/* La hauteur vaut 'auto'.                  */
-background-size: 50%;
-background-size: 3.2em;
-background-size: 12px;
-background-size: auto;
-
-/* Deux valeurs                            */
-/* Première valeur : la largeur de l'image */
-/* Seconde valeur : la hauteur de l'image  */
-background-size: 50% auto;
-background-size: 3em 25%;
-background-size: auto 6px;
-background-size: auto auto;
-
-/* Valeurs pour plusieurs arrière-plans */
-background-size: auto, auto; /* À ne pas confondre avec `auto auto` */
-background-size: 50%, 25%, 25%;
-background-size: 6px, auto, contain;
-
-/* Valeurs globales */
-background-size: inherit;
-background-size: initial;
-background-size: unset;
-
- -

La propriété background-size peut être définie de différentes façons :

- -
    -
  • Avec l'un des mots-clés contain ou cover.
    • -
  • Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors auto par défaut)
    • -
  • Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) ou encore auto.
    • -
- -

Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}).

- -

Valeurs

- -
-
contain
-
Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.
-
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
-
Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.
-
<length>
-
Une valeur de type {{cssxref("<length>")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.
-
<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.
-
- -

Dimensions intrinsèques et proportions

- -

Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :

- -
    -
  • Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.
    • -
  • Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.
    • -
  • Un dégradé CSS (cf. {{cssxref("<gradient>")}}) ne possède ni dimension ni proportion intrinsèque.
    • -
  • Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur.
    • -
- -
-

Note : Le comportement associé aux dégradés (<gradient>) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan.

-
- -
-

Note : Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.

-
- -

Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :

- -
    -

  • Si les deux composants de background-size sont définis et qu'aucun ne vaut auto : L'image utilise la taille définie.

    • -

  • Si background-size vaut contain ou cover : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.

    • -

  • Si background-size vaut auto ou auto auto :

    -
      -
    • Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.
      • -
    • Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.
      • -
    • Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur contain avait été utilisée.
      • -
    • Si 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 :

    -
      -
    • Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.
      • -
    • Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.
      • -
    -
    • -
- -
-

Note : Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.

-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

cover

- -

CSS

- -
div {
-  height: 300px;
-  width: 200px;
-  background-color: palegreen;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-repeat: no-repeat;
-}
-
-.exemple_cover {
-  background-size: cover;
-}
- -

HTML

- -
<div class="exemple_cover"></div>
- -

Résultat

- -

{{EmbedLiveSample("cover","200","300")}}

- -

contain

- -

CSS

- -
div {
-  height: 300px;
-  width: 200px;
-  background-color: palegreen;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-repeat: no-repeat;
-}
-
-.exemple_cover {
-  background-size: contain;
-}
- -

HTML

- -
<div class="exemple_cover"></div>
- -

Résultat

- -

{{EmbedLiveSample("contain","200","300")}}

- -

auto 50%

- -

CSS

- -
div {
-  height: 300px;
-  width: 200px;
-  background-color: palegreen;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-repeat: no-repeat;
-}
-
-.exemple_cover {
-  background-size: auto 50%;
-}
- -

HTML

- -
<div class="exemple_cover"></div>
- -

Résultat

- -

{{EmbedLiveSample("auto_50","200","300")}}

- -

Notes

- -

Si on utilise un dégradé (<gradient>) comme arrière-plan et qu'on définit une valeur associée pour la propriété background-size, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant auto ou qu'une seule largeur (par exemple background-size: 50%). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la spécification CSS3 pour background-size et la spécification CSS3 pour les images qui sont des dégradés).

- -
.gradient-exemple {
-  width: 50px;
-  height: 100px;
-  background-image: linear-gradient(blue, red);
-
-  /* Méthode risquée */
-  background-size: 25px;
-  background-size: 50%;
-  background-size: auto 50px;
-  background-size: auto 50%;
-
-  /* Sans risque */
-  background-size: 25px 50px;
-  background-size: 50% 50%;
-}
-
- -

On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec auto lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background-size")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/background-size/index.md b/files/fr/web/css/background-size/index.md new file mode 100644 index 0000000000..3ab7be1f5f --- /dev/null +++ b/files/fr/web/css/background-size/index.md @@ -0,0 +1,256 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +

La propriété CSS background-size définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+background-size: cover;
+background-size: contain;
+
+/* Une seule valeur                         */
+/* La valeur désigne la largeur de l'image. */
+/* La hauteur vaut 'auto'.                  */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* Deux valeurs                            */
+/* Première valeur : la largeur de l'image */
+/* Seconde valeur : la hauteur de l'image  */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Valeurs pour plusieurs arrière-plans */
+background-size: auto, auto; /* À ne pas confondre avec `auto auto` */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Valeurs globales */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+
+ +

La propriété background-size peut être définie de différentes façons :

+ +
    +
  • Avec l'un des mots-clés contain ou cover.
    • +
  • Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors auto par défaut)
    • +
  • Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) ou encore auto.
    • +
+ +

Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}).

+ +

Valeurs

+ +
+
contain
+
Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.
+
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
+
Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.
+
<length>
+
Une valeur de type {{cssxref("<length>")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.
+
<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.
+
+ +

Dimensions intrinsèques et proportions

+ +

Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :

+ +
    +
  • Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.
    • +
  • Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.
    • +
  • Un dégradé CSS (cf. {{cssxref("<gradient>")}}) ne possède ni dimension ni proportion intrinsèque.
    • +
  • Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur.
    • +
+ +
+

Note : Le comportement associé aux dégradés (<gradient>) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan.

+
+ +
+

Note : Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.

+
+ +

Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :

+ +
    +

  • Si les deux composants de background-size sont définis et qu'aucun ne vaut auto : L'image utilise la taille définie.

    • +

  • Si background-size vaut contain ou cover : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.

    • +

  • Si background-size vaut auto ou auto auto :

    +
      +
    • Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.
      • +
    • Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.
      • +
    • Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur contain avait été utilisée.
      • +
    • Si 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 :

    +
      +
    • Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.
      • +
    • Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.
      • +
    +
    • +
+ +
+

Note : Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.

+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

cover

+ +

CSS

+ +
div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: cover;
+}
+ +

HTML

+ +
<div class="exemple_cover"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("cover","200","300")}}

+ +

contain

+ +

CSS

+ +
div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: contain;
+}
+ +

HTML

+ +
<div class="exemple_cover"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("contain","200","300")}}

+ +

auto 50%

+ +

CSS

+ +
div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: auto 50%;
+}
+ +

HTML

+ +
<div class="exemple_cover"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("auto_50","200","300")}}

+ +

Notes

+ +

Si on utilise un dégradé (<gradient>) comme arrière-plan et qu'on définit une valeur associée pour la propriété background-size, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant auto ou qu'une seule largeur (par exemple background-size: 50%). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la spécification CSS3 pour background-size et la spécification CSS3 pour les images qui sont des dégradés).

+ +
.gradient-exemple {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* Méthode risquée */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* Sans risque */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+
+ +

On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec auto lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-size")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/background/index.html b/files/fr/web/css/background/index.html deleted file mode 100644 index a404e63da6..0000000000 --- a/files/fr/web/css/background/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: background -slug: Web/CSS/background -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/background ---- -
{{CSSRef}}
- -

La propriété CSS background est une propriété raccourcie qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).

- -
{{EmbedInteractiveExample("pages/css/background.html")}}
- -

Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.

- -

Lorsqu'on utilise la propriété raccourcie background, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.

- -
-

Note : La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.

-
- -

Syntaxe

- -
/* On utilise une couleur <background-color> */
-background: green;
-
-/* Ici, une <bg-image> avec <repeat-style> */
-background: url("test.jpg") repeat-y;
-
-/* Là <box> et <background-color> */
-background: border-box red;
-
-/* Ici on utilise une seule image, centrée */
-/* et remise à l'échelle */
-background: no-repeat center/80% url("../img/image.png");
-
- -

La propriété background permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :

- -
    -
  • Zéro ou une occurence d'une valeur : - -
    • -
  • Une valeur <bg-size> qui peut uniquement être utilisée directement après une valeur <position> suivie d'une barre oblique (par exemple "center/80%")
    • -
  • Une valeur <box> présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.
    • -
  • Une valeur <background-color> qui peut uniquement être incluse pour la dernière couche qui est définie.
    • -
- -

Valeurs

- -
-
<attachment>
-
Voir {{cssxref("background-attachment")}}
-
<box>
-
Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}
-
<background-color>
-
Voir {{cssxref("background-color")}}
-
<bg-image>
-
Voir {{Cssxref("background-image")}}
-
<position>
-
Voir {{cssxref("background-position")}}
-
<repeat-style>
-
Voir {{cssxref("background-repeat")}}
-
<bg-size>
-
Voir {{cssxref("background-size")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<p class="banniere">
-  Dessine-moi une étoile<br/>
-  Qui brille<br/>
-  Dans le ciel.
-</p>
-<p class="attention">Voici un paragraphe !<p>
- -

CSS

- -
.attention {
-  background: pink;
-}
-
-.banniere {
-  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Accessibilité

- -

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}Pas de modification significative.
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.background")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/background/index.md b/files/fr/web/css/background/index.md new file mode 100644 index 0000000000..a404e63da6 --- /dev/null +++ b/files/fr/web/css/background/index.md @@ -0,0 +1,156 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background +--- +
{{CSSRef}}
+ +

La propriété CSS background est une propriété raccourcie qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).

+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ +

Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.

+ +

Lorsqu'on utilise la propriété raccourcie background, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.

+ +
+

Note : La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.

+
+ +

Syntaxe

+ +
/* On utilise une couleur <background-color> */
+background: green;
+
+/* Ici, une <bg-image> avec <repeat-style> */
+background: url("test.jpg") repeat-y;
+
+/* Là <box> et <background-color> */
+background: border-box red;
+
+/* Ici on utilise une seule image, centrée */
+/* et remise à l'échelle */
+background: no-repeat center/80% url("../img/image.png");
+
+ +

La propriété background permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :

+ +
    +
  • Zéro ou une occurence d'une valeur : + +
    • +
  • Une valeur <bg-size> qui peut uniquement être utilisée directement après une valeur <position> suivie d'une barre oblique (par exemple "center/80%")
    • +
  • Une valeur <box> présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.
    • +
  • Une valeur <background-color> qui peut uniquement être incluse pour la dernière couche qui est définie.
    • +
+ +

Valeurs

+ +
+
<attachment>
+
Voir {{cssxref("background-attachment")}}
+
<box>
+
Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}
+
<background-color>
+
Voir {{cssxref("background-color")}}
+
<bg-image>
+
Voir {{Cssxref("background-image")}}
+
<position>
+
Voir {{cssxref("background-position")}}
+
<repeat-style>
+
Voir {{cssxref("background-repeat")}}
+
<bg-size>
+
Voir {{cssxref("background-size")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<p class="banniere">
+  Dessine-moi une étoile<br/>
+  Qui brille<br/>
+  Dans le ciel.
+</p>
+<p class="attention">Voici un paragraphe !<p>
+ +

CSS

+ +
.attention {
+  background: pink;
+}
+
+.banniere {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Accessibilité

+ +

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}Pas de modification significative.
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/basic-shape/index.html b/files/fr/web/css/basic-shape/index.html deleted file mode 100644 index 0205f6ff16..0000000000 --- a/files/fr/web/css/basic-shape/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: -slug: Web/CSS/basic-shape -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/basic-shape ---- -
{{CSSRef}}
- -

Le type <basic-shape> permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}.

- -
{{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.

- -

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()
-
-

Cette fonction permet de définir un rectangle incrusté (inset).

- 
inset( <shape-arg>{1,4} [round <border-radius>]? )
- -

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()
-
-

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.

-
-
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()
-
-

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()
-
-

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.

- -

L'argument obligatoire <string> est une chaîne de caractères, entre quotes, représentant un chemin SVG.

-
-
- -

Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe :

- -
<shape-arg> = <length> | <percentage>
-<shape-radius> = <length> | <percentage> | closest-side | farthest-side
- -

closest-side utilise la distance entre le centre de la forme et le côté le plus proche de la boîte de la référence. Pour les cercles, cela au côté le plus proche dans les deux axes. Pour les ellipses, cela correspond au côté le plus proche dans l'axe du rayon de l'ellipse.

- -

À l'inverse, farthest-side utilise la distance entre le centre de la forme et le côté le plus éloigné de la boîte de référence.

- -

Les valeurs calculées des formes simples

- -

Les valeurs d'une fonction <basic-shape> sont calculées comme indiqué, avec ces exceptions :

- -
    -
  • Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut.
    • -
  • Une valeur {{cssxref("<position>")}} pour circle() ou  ellipse() est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage.
    • -
  • Pour inset(), une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages.
    • -
- -

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.
- -
 
- -
    -
  • Les deux formes doivent partager la même boîte de référence.
    • -
  • Si les deux formes sont du même type et que ce type est ellipse() ou circle(), qu'aucun des rayons n'utilise les mots-clés closest-side ou farthest-side, on aura une interpolation entre chaque valeur.
    • -
  • Si les deux formes sont de type inset(), on aura une interpolation entre chaque valeur.
    • -
  • Si les deux formes sont de type polygon(), que les deux polygones possèdent le même nombre de sommets et utilisent la même règle fill-rule, l'interpolation sera appliquée entre chaque valeur.
    • -
  • Si les deux formes sont de type path(), que les deux chemins possèdent le même nombre de composantes, dans le même ordre et qu'elles sont de même type, les données sont interpolées entre chaque chemin comme des nombres réels.
    • -
  • Dans les autres cas, aucune interpolation n'est définie.
    • -
- -

Exemples

- -

Exemple simple

- -

CSS

- -
.clipped {
-  clip-path: circle(15px at 20px 20px); // bugs 1247229 / 1075457 pour Firefox
-}
- -

HTML

- -
<img class="clipped" src="https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg" alt="Rain Drops">
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple_simple',"500","500")}}

- -

Polygone animé

- -

Dans cet exemple, on utilise la règle-@ {{cssxref("@keyframes")}} afin d'animer un chemin de rognage entre deux polygones. On notera que les deux polygones ont le même nombre de sommets, une condition nécessaire pour que l'animation fonctionne.

- -

HTML

- -
<div></div>
- -

CSS

- -
div {
-  width: 300px;
-  height: 300px;
-  background: red;
-  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-  animation: 5s poly infinite alternate ease-in-out;
-  margin: 1em auto;
-  display: block;
-}
-
-@keyframes poly {
-  from {
-    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-  }
-
-  to {
-    clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample('Polygone_animé','100%', '340')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>')}}{{Spec2('CSS Shapes')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.basic-shape")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/basic-shape/index.md b/files/fr/web/css/basic-shape/index.md new file mode 100644 index 0000000000..0205f6ff16 --- /dev/null +++ b/files/fr/web/css/basic-shape/index.md @@ -0,0 +1,188 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/basic-shape +--- +
{{CSSRef}}
+ +

Le type <basic-shape> permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}.

+ +
{{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.

+ +

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()
+
+

Cette fonction permet de définir un rectangle incrusté (inset).

+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

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()
+
+

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.

+
+
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()
+
+

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()
+
+

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.

+ +

L'argument obligatoire <string> est une chaîne de caractères, entre quotes, représentant un chemin SVG.

+
+
+ +

Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe :

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

closest-side utilise la distance entre le centre de la forme et le côté le plus proche de la boîte de la référence. Pour les cercles, cela au côté le plus proche dans les deux axes. Pour les ellipses, cela correspond au côté le plus proche dans l'axe du rayon de l'ellipse.

+ +

À l'inverse, farthest-side utilise la distance entre le centre de la forme et le côté le plus éloigné de la boîte de référence.

+ +

Les valeurs calculées des formes simples

+ +

Les valeurs d'une fonction <basic-shape> sont calculées comme indiqué, avec ces exceptions :

+ +
    +
  • Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut.
    • +
  • Une valeur {{cssxref("<position>")}} pour circle() ou  ellipse() est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage.
    • +
  • Pour inset(), une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages.
    • +
+ +

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.
+ +
 
+ +
    +
  • Les deux formes doivent partager la même boîte de référence.
    • +
  • Si les deux formes sont du même type et que ce type est ellipse() ou circle(), qu'aucun des rayons n'utilise les mots-clés closest-side ou farthest-side, on aura une interpolation entre chaque valeur.
    • +
  • Si les deux formes sont de type inset(), on aura une interpolation entre chaque valeur.
    • +
  • Si les deux formes sont de type polygon(), que les deux polygones possèdent le même nombre de sommets et utilisent la même règle fill-rule, l'interpolation sera appliquée entre chaque valeur.
    • +
  • Si les deux formes sont de type path(), que les deux chemins possèdent le même nombre de composantes, dans le même ordre et qu'elles sont de même type, les données sont interpolées entre chaque chemin comme des nombres réels.
    • +
  • Dans les autres cas, aucune interpolation n'est définie.
    • +
+ +

Exemples

+ +

Exemple simple

+ +

CSS

+ +
.clipped {
+  clip-path: circle(15px at 20px 20px); // bugs 1247229 / 1075457 pour Firefox
+}
+ +

HTML

+ +
<img class="clipped" src="https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg" alt="Rain Drops">
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_simple',"500","500")}}

+ +

Polygone animé

+ +

Dans cet exemple, on utilise la règle-@ {{cssxref("@keyframes")}} afin d'animer un chemin de rognage entre deux polygones. On notera que les deux polygones ont le même nombre de sommets, une condition nécessaire pour que l'animation fonctionne.

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: red;
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  animation: 5s poly infinite alternate ease-in-out;
+  margin: 1em auto;
+  display: block;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  }
+
+  to {
+    clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Polygone_animé','100%', '340')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>')}}{{Spec2('CSS Shapes')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.basic-shape")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/blend-mode/index.html b/files/fr/web/css/blend-mode/index.html deleted file mode 100644 index cd83ad75cd..0000000000 --- a/files/fr/web/css/blend-mode/index.html +++ /dev/null @@ -1,355 +0,0 @@ ---- -title: -slug: Web/CSS/blend-mode -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/blend-mode ---- -
{{CSSRef}}
- -

Le type <blend-mode> est un ensemble de mots-clés qui permettent de décrire les différents modes de fusion (blend modes). Ce type de valeur est utilisé pour les propriétés {{cssxref("background-blend-mode")}} et {{cssxref("mix-blend-mode")}}.

- -

Un mode de fusion est une méthode de calcul permettant de déterminer la couleur finale d'un pixel lorsque plusieurs couches sont empilées. Chaque mode de fusion prend en entrée la couleur du premier plan et de l'arrière-plan (dans cet ordre) pour calculer la valeur de la couleur obtenue. Le résultat final est la couche visible obtenue lorsque les différents plans ont été fusionnés avec les modes de fusion.

- -

Syntaxe

- -

Une valeur de type de données <blend-mode> s'écrit avec l'un des mots-clés suivants.

- -

Valeurs possibles

- -
-
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.

-
-
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.

-
-
- - -

Exemples

- -

normal

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: normal;
-}
- -

{{ EmbedLiveSample('normal', "300", "350") }}

- -

multiply

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: multiply;
-}
- -

{{ EmbedLiveSample('multiply', "300", "350") }}

- -

screen

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: screen;
-}
- -

{{ EmbedLiveSample('screen', "300", "350") }}

- -

overlay

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: overlay;
-}
- -

{{ EmbedLiveSample('overlay', "300", "350") }}

- -

darken

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: darken;
-}
- -

{{ EmbedLiveSample('darken', "300", "350") }}

- -

lighten

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: lighten;
-}
- -

{{ EmbedLiveSample('lighten', "300", "350") }}

- -

color-dodge

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: color-dodge;
-}
- -

{{ EmbedLiveSample('color-dodge', "300", "350") }}

- -

color-burn

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: color-burn;
-}
- -

{{ EmbedLiveSample('color-burn', "300", "350") }}

- -

hard-light

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: hard-light;
-}
- -

{{ EmbedLiveSample('hard-light', "300", "350") }}

- -

soft-light

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: soft-light;
-}
- -

{{ EmbedLiveSample('soft-light', "300", "350") }}

- -

difference

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: difference;
-}
- -

{{ EmbedLiveSample('difference', "300", "350") }}

- -

exclusion

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: exclusion;
-}
- -

{{ EmbedLiveSample('exclusion', "300", "350") }}

- -

hue

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: hue;
-}
- -

{{ EmbedLiveSample('hue', "300", "350") }}

- -

saturation

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: saturation;
-}
- -

{{ EmbedLiveSample('saturation', "300", "350") }}

- -

color

- - - - 
#div {
-  width: 300px;
-  height: 300px;
-  background: url('br.png'),
-              url('tr.png');
-  background-blend-mode: color;
-}
- -

{{ 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

- -

Il n'y a pas d'interpolation pour les modes de fusion. Toute transition se produit brutalement.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Compositing', '#ltblendmodegt', '<blend-mode>')}}{{Spec2('Compositing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.blend-mode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/blend-mode/index.md b/files/fr/web/css/blend-mode/index.md new file mode 100644 index 0000000000..cd83ad75cd --- /dev/null +++ b/files/fr/web/css/blend-mode/index.md @@ -0,0 +1,355 @@ +--- +title: +slug: Web/CSS/blend-mode +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/blend-mode +--- +
{{CSSRef}}
+ +

Le type <blend-mode> est un ensemble de mots-clés qui permettent de décrire les différents modes de fusion (blend modes). Ce type de valeur est utilisé pour les propriétés {{cssxref("background-blend-mode")}} et {{cssxref("mix-blend-mode")}}.

+ +

Un mode de fusion est une méthode de calcul permettant de déterminer la couleur finale d'un pixel lorsque plusieurs couches sont empilées. Chaque mode de fusion prend en entrée la couleur du premier plan et de l'arrière-plan (dans cet ordre) pour calculer la valeur de la couleur obtenue. Le résultat final est la couche visible obtenue lorsque les différents plans ont été fusionnés avec les modes de fusion.

+ +

Syntaxe

+ +

Une valeur de type de données <blend-mode> s'écrit avec l'un des mots-clés suivants.

+ +

Valeurs possibles

+ +
+
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.

+
+
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.

+
+
+ + +

Exemples

+ +

normal

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: normal;
+}
+ +

{{ EmbedLiveSample('normal', "300", "350") }}

+ +

multiply

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: multiply;
+}
+ +

{{ EmbedLiveSample('multiply', "300", "350") }}

+ +

screen

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: screen;
+}
+ +

{{ EmbedLiveSample('screen', "300", "350") }}

+ +

overlay

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: overlay;
+}
+ +

{{ EmbedLiveSample('overlay', "300", "350") }}

+ +

darken

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: darken;
+}
+ +

{{ EmbedLiveSample('darken', "300", "350") }}

+ +

lighten

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: lighten;
+}
+ +

{{ EmbedLiveSample('lighten', "300", "350") }}

+ +

color-dodge

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: color-dodge;
+}
+ +

{{ EmbedLiveSample('color-dodge', "300", "350") }}

+ +

color-burn

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: color-burn;
+}
+ +

{{ EmbedLiveSample('color-burn', "300", "350") }}

+ +

hard-light

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: hard-light;
+}
+ +

{{ EmbedLiveSample('hard-light', "300", "350") }}

+ +

soft-light

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: soft-light;
+}
+ +

{{ EmbedLiveSample('soft-light', "300", "350") }}

+ +

difference

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: difference;
+}
+ +

{{ EmbedLiveSample('difference', "300", "350") }}

+ +

exclusion

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: exclusion;
+}
+ +

{{ EmbedLiveSample('exclusion', "300", "350") }}

+ +

hue

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: hue;
+}
+ +

{{ EmbedLiveSample('hue', "300", "350") }}

+ +

saturation

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: saturation;
+}
+ +

{{ EmbedLiveSample('saturation', "300", "350") }}

+ +

color

+ + + + 
#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: color;
+}
+ +

{{ 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

+ +

Il n'y a pas d'interpolation pour les modes de fusion. Toute transition se produit brutalement.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compositing', '#ltblendmodegt', '<blend-mode>')}}{{Spec2('Compositing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.blend-mode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/block-size/index.html b/files/fr/web/css/block-size/index.html deleted file mode 100644 index 4ed59048b2..0000000000 --- a/files/fr/web/css/block-size/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: block-size -slug: Web/CSS/block-size -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/block-size ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété block-size est une propriété logique qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété {{cssxref("writing-mode")}}, elle correspondra à la propriété physique {{cssxref("width")}} ou {{cssxref("height")}}.

- -
{{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")}}.

- -

Syntaxe

- -
/* Valeurs de longueur */
-/* Type <length>       */
-block-size: 300px;
-block-size: 25em;
-
-/* Valeurs proportionnelles */
-/* Type <percentage>        */
-block-size: 75%;
-
-/* Valeurs avec un mot-clé */
-block-size: 25em border-box;
-block-size: 75% content-box;
-block-size: max-content;
-block-size: min-content;
-block-size: available;
-block-size: fit-content;
-block-size: auto;
-
-/* Valeurs globales */
-block-size: inherit;
-block-size: initial;
-block-size: unset;
-
- -

Valeurs

- -

La propriété block-size peut prendre les mêmes valeurs que {{cssxref("width")}} et {{cssxref("height")}}.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  writing-mode: vertical-rl;
-  background-color: yellow;
-  block-size: 200px;
-}
- -

HTML

- -
<p class="exemple">Texte d'exemple</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.block-size")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : {{cssxref("width")}} et {{cssxref("height")}}
    • -
  • {{cssxref("writing-mode")}}
    • -
diff --git a/files/fr/web/css/block-size/index.md b/files/fr/web/css/block-size/index.md new file mode 100644 index 0000000000..4ed59048b2 --- /dev/null +++ b/files/fr/web/css/block-size/index.md @@ -0,0 +1,105 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/block-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété block-size est une propriété logique qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété {{cssxref("writing-mode")}}, elle correspondra à la propriété physique {{cssxref("width")}} ou {{cssxref("height")}}.

+ +
{{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")}}.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+block-size: 300px;
+block-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+block-size: 75%;
+
+/* Valeurs avec un mot-clé */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Valeurs globales */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+
+ +

Valeurs

+ +

La propriété block-size peut prendre les mêmes valeurs que {{cssxref("width")}} et {{cssxref("height")}}.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}
+ +

HTML

+ +
<p class="exemple">Texte d'exemple</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.block-size")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : {{cssxref("width")}} et {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/fr/web/css/border-block-color/index.html b/files/fr/web/css/border-block-color/index.html deleted file mode 100644 index d014382130..0000000000 --- a/files/fr/web/css/border-block-color/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: border-block-color -slug: Web/CSS/border-block-color -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-block-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-color définit la couleur de la bordure d'un élément sur les côtés de l'axe de bloc. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
border-block-color: yellow;
-border-block-color: #F5F6F7;
-
- -

Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-inline-color")}} qui définit {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.

- -

Syntaxe

- -

Valeurs

- -
-
<'color'>
-
La couleur de la bordure. Voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.texteExemple {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-block-color: red;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques qui peuvent correspondre à cette propriété : -
      -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
  • {{bug("1297097")}}
    • -
diff --git a/files/fr/web/css/border-block-color/index.md b/files/fr/web/css/border-block-color/index.md new file mode 100644 index 0000000000..d014382130 --- /dev/null +++ b/files/fr/web/css/border-block-color/index.md @@ -0,0 +1,100 @@ +--- +title: border-block-color +slug: Web/CSS/border-block-color +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-block-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-color définit la couleur de la bordure d'un élément sur les côtés de l'axe de bloc. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
border-block-color: yellow;
+border-block-color: #F5F6F7;
+
+ +

Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-inline-color")}} qui définit {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<'color'>
+
La couleur de la bordure. Voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-color: red;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques qui peuvent correspondre à cette propriété : +
      +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
  • {{bug("1297097")}}
    • +
diff --git a/files/fr/web/css/border-block-end-color/index.html b/files/fr/web/css/border-block-end-color/index.html deleted file mode 100644 index 0837a30800..0000000000 --- a/files/fr/web/css/border-block-end-color/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: border-block-end-color -slug: Web/CSS/border-block-end-color -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-block-end-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-end-color définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-start-color")}},
    • -
  • {{cssxref("border-inline-end-color")}},
    • -
  • {{cssxref("border-inline-start-color")}}.
    • -
- -

Syntaxe

- -
border-block-end-color: red;
-border-block-end-color: #fffff;
-border-block-end-color: rgb(200, 0, 0);
-
-border-block-end-color: unset;
-border-block-end-color: initial;
-border-block-end-color: inherit;
-
- -

Valeurs

- -
-
<'border-color'>
-
La couleur utilisée pour la bordure, voir {{cssxref("border-color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-block-end-color: red;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-end-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
  • {{bug("1297097")}}
    • -
diff --git a/files/fr/web/css/border-block-end-color/index.md b/files/fr/web/css/border-block-end-color/index.md new file mode 100644 index 0000000000..0837a30800 --- /dev/null +++ b/files/fr/web/css/border-block-end-color/index.md @@ -0,0 +1,113 @@ +--- +title: border-block-end-color +slug: Web/CSS/border-block-end-color +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-block-end-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-end-color définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-start-color")}},
    • +
  • {{cssxref("border-inline-end-color")}},
    • +
  • {{cssxref("border-inline-start-color")}}.
    • +
+ +

Syntaxe

+ +
border-block-end-color: red;
+border-block-end-color: #fffff;
+border-block-end-color: rgb(200, 0, 0);
+
+border-block-end-color: unset;
+border-block-end-color: initial;
+border-block-end-color: inherit;
+
+ +

Valeurs

+ +
+
<'border-color'>
+
La couleur utilisée pour la bordure, voir {{cssxref("border-color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-end-color: red;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-end-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
  • {{bug("1297097")}}
    • +
diff --git a/files/fr/web/css/border-block-end-style/index.html b/files/fr/web/css/border-block-end-style/index.html deleted file mode 100644 index 2f381a74bc..0000000000 --- a/files/fr/web/css/border-block-end-style/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: border-block-end-style -slug: Web/CSS/border-block-end-style -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-block-end-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-end-style définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-inline-start-style")}}
    • -
  • {{cssxref("border-inline-end-style")}}
    • -
  • {{cssxref("border-block-start-style")}}.
    • -
- -

Syntaxe

- -
border-block-end-style: dashed;
-border-block-end-style: dotted;
-border-block-end-style: groove;
- -

Valeurs

- -
-
<'border-style'>
-
Le style de la ligne pour la bordure, voir {{cssxref("border-style")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-block-end-style: dashed;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-end-style")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-style")}},
      • -
    • {{cssxref("border-right-style")}},
      • -
    • {{cssxref("border-bottom-style")}},
      • -
    • {{cssxref("border-left-style")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-end-style/index.md b/files/fr/web/css/border-block-end-style/index.md new file mode 100644 index 0000000000..2f381a74bc --- /dev/null +++ b/files/fr/web/css/border-block-end-style/index.md @@ -0,0 +1,106 @@ +--- +title: border-block-end-style +slug: Web/CSS/border-block-end-style +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-block-end-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-end-style définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-inline-start-style")}}
    • +
  • {{cssxref("border-inline-end-style")}}
    • +
  • {{cssxref("border-block-start-style")}}.
    • +
+ +

Syntaxe

+ +
border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;
+ +

Valeurs

+ +
+
<'border-style'>
+
Le style de la ligne pour la bordure, voir {{cssxref("border-style")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-end-style: dashed;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-end-style")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-style")}},
      • +
    • {{cssxref("border-right-style")}},
      • +
    • {{cssxref("border-bottom-style")}},
      • +
    • {{cssxref("border-left-style")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block-end-width/index.html b/files/fr/web/css/border-block-end-width/index.html deleted file mode 100644 index a6cd3ee9ea..0000000000 --- a/files/fr/web/css/border-block-end-width/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: border-block-end-width -slug: Web/CSS/border-block-end-width -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-block-end-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-end-width définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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

- -
/* Valeur de longueur */
-/* Type <length>      */
-border-block-end-width: 5px;
-border-block-end-width: thick;
-
- -

Valeurs

- -
-
<'border-width'>
-
La largeur utilisée pour la bordure, voir {{cssxref("border-width")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-block-end-width: 5px;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-end-width")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-width")}}
      • -
    • {{cssxref("border-right-width")}}
      • -
    • {{cssxref("border-bottom-width")}}
      • -
    • {{cssxref("border-left-width")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-end-width/index.md b/files/fr/web/css/border-block-end-width/index.md new file mode 100644 index 0000000000..a6cd3ee9ea --- /dev/null +++ b/files/fr/web/css/border-block-end-width/index.md @@ -0,0 +1,102 @@ +--- +title: border-block-end-width +slug: Web/CSS/border-block-end-width +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-block-end-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-end-width définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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

+ +
/* Valeur de longueur */
+/* Type <length>      */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+
+ +

Valeurs

+ +
+
<'border-width'>
+
La largeur utilisée pour la bordure, voir {{cssxref("border-width")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-end-width: 5px;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-end-width")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-width")}}
      • +
    • {{cssxref("border-right-width")}}
      • +
    • {{cssxref("border-bottom-width")}}
      • +
    • {{cssxref("border-left-width")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block-end/index.html b/files/fr/web/css/border-block-end/index.html deleted file mode 100644 index 4ec15731fe..0000000000 --- a/files/fr/web/css/border-block-end/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: border-block-end -slug: Web/CSS/border-block-end -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-block-end ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-end est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}} et {{cssxref("border-block-end-color")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-start")}},
    • -
  • {{cssxref("border-inline-end")}},
    • -
  • {{cssxref("border-inline-start")}}.
    • -
- -

Syntaxe

- -
border-block-end: 1px;
-border-block-end: 2px dotted;
-border-block-end: medium dashed green;
-
- -

Valeurs

- -

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

- -
-
<'border-width'>
-
La largeur de la bordure, voir {{cssxref("border-width")}}.
-
<'border-style'>
-
Le style utilisé pour la ligne de la bordure, {{cssxref("border-style")}}.
-
<'color'>
-
La couleur de la bordure, voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-rl;
-  border-block-end: 5px dashed blue;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-end")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top")}},
      • -
    • {{cssxref("border-right")}},
      • -
    • {{cssxref("border-bottom")}},
      • -
    • {{cssxref("border-left")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-end/index.md b/files/fr/web/css/border-block-end/index.md new file mode 100644 index 0000000000..4ec15731fe --- /dev/null +++ b/files/fr/web/css/border-block-end/index.md @@ -0,0 +1,114 @@ +--- +title: border-block-end +slug: Web/CSS/border-block-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-end est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}} et {{cssxref("border-block-end-color")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-start")}},
    • +
  • {{cssxref("border-inline-end")}},
    • +
  • {{cssxref("border-inline-start")}}.
    • +
+ +

Syntaxe

+ +
border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed green;
+
+ +

Valeurs

+ +

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

+ +
+
<'border-width'>
+
La largeur de la bordure, voir {{cssxref("border-width")}}.
+
<'border-style'>
+
Le style utilisé pour la ligne de la bordure, {{cssxref("border-style")}}.
+
<'color'>
+
La couleur de la bordure, voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top")}},
      • +
    • {{cssxref("border-right")}},
      • +
    • {{cssxref("border-bottom")}},
      • +
    • {{cssxref("border-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block-start-color/index.html b/files/fr/web/css/border-block-start-color/index.html deleted file mode 100644 index 95208d2f9b..0000000000 --- a/files/fr/web/css/border-block-start-color/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: border-block-start-color -slug: Web/CSS/border-block-start-color -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-block-start-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-start-color définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-end-color")}},
    • -
  • {{cssxref("border-inline-end-color")}},
    • -
  • {{cssxref("border-inline-start-color")}}.
    • -
- -

Syntaxe

- -
border-block-start-color: red;
-border-block-start-color: #fffff;
-border-block-start-color: rgb(200, 0, 0);
-
-border-block-start-color: unset;
-border-block-start-color: initial;
-border-block-start-color: inherit;
-
- -

Valeurs

- -
-
<'border-color'>
-
Voir {{cssxref("border-color")}}
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-block-start-color: red;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-start-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-start-color/index.md b/files/fr/web/css/border-block-start-color/index.md new file mode 100644 index 0000000000..95208d2f9b --- /dev/null +++ b/files/fr/web/css/border-block-start-color/index.md @@ -0,0 +1,112 @@ +--- +title: border-block-start-color +slug: Web/CSS/border-block-start-color +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-block-start-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-start-color définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-end-color")}},
    • +
  • {{cssxref("border-inline-end-color")}},
    • +
  • {{cssxref("border-inline-start-color")}}.
    • +
+ +

Syntaxe

+ +
border-block-start-color: red;
+border-block-start-color: #fffff;
+border-block-start-color: rgb(200, 0, 0);
+
+border-block-start-color: unset;
+border-block-start-color: initial;
+border-block-start-color: inherit;
+
+ +

Valeurs

+ +
+
<'border-color'>
+
Voir {{cssxref("border-color")}}
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-start-color: red;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-start-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block-start-style/index.html b/files/fr/web/css/border-block-start-style/index.html deleted file mode 100644 index a6060e2c1d..0000000000 --- a/files/fr/web/css/border-block-start-style/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: border-block-start-style -slug: Web/CSS/border-block-start-style -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-block-start-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-start-style définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-inline-start-style")}}
    • -
  • {{cssxref("border-inline-end-style")}}
    • -
  • {{cssxref("border-block-end-style")}}.
    • -
- -

Syntaxe

- -
/* border-block-start-style: style */
-border-block-start-style: dashed;
-border-block-start-style: dotted;
-border-block-start-style: groove;
- -

Valeurs

- -
-
<'border-style'>
-
Le style utilisé pour la ligne de la bordure, voir {{cssxref("border-style")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-block-start-style: dashed;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-start-style")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-style")}},
      • -
    • {{cssxref("border-right-style")}},
      • -
    • {{cssxref("border-bottom-style")}},
      • -
    • {{cssxref("border-left-style")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-start-style/index.md b/files/fr/web/css/border-block-start-style/index.md new file mode 100644 index 0000000000..a6060e2c1d --- /dev/null +++ b/files/fr/web/css/border-block-start-style/index.md @@ -0,0 +1,107 @@ +--- +title: border-block-start-style +slug: Web/CSS/border-block-start-style +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-block-start-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-start-style définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-inline-start-style")}}
    • +
  • {{cssxref("border-inline-end-style")}}
    • +
  • {{cssxref("border-block-end-style")}}.
    • +
+ +

Syntaxe

+ +
/* border-block-start-style: style */
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;
+ +

Valeurs

+ +
+
<'border-style'>
+
Le style utilisé pour la ligne de la bordure, voir {{cssxref("border-style")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-start-style: dashed;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-start-style")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-style")}},
      • +
    • {{cssxref("border-right-style")}},
      • +
    • {{cssxref("border-bottom-style")}},
      • +
    • {{cssxref("border-left-style")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block-start-width/index.html b/files/fr/web/css/border-block-start-width/index.html deleted file mode 100644 index 4e9e0f6139..0000000000 --- a/files/fr/web/css/border-block-start-width/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: border-block-start-width -slug: Web/CSS/border-block-start-width -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-block-start-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-start-width définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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

- -
/* Valeur de longueur */
-/* Type <length> */
-border-block-start-width: 5px;
-border-block-start-width: thick;
-
- -

Valeurs

- -
-
<'border-width'>
-
Voir {{cssxref("border-width")}}
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-block-start-width: 5px;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-start-width")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-width")}}
      • -
    • {{cssxref("border-right-width")}}
      • -
    • {{cssxref("border-bottom-width")}}
      • -
    • {{cssxref("border-left-width")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-start-width/index.md b/files/fr/web/css/border-block-start-width/index.md new file mode 100644 index 0000000000..4e9e0f6139 --- /dev/null +++ b/files/fr/web/css/border-block-start-width/index.md @@ -0,0 +1,103 @@ +--- +title: border-block-start-width +slug: Web/CSS/border-block-start-width +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-block-start-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-start-width définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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

+ +
/* Valeur de longueur */
+/* Type <length> */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+
+ +

Valeurs

+ +
+
<'border-width'>
+
Voir {{cssxref("border-width")}}
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-start-width: 5px;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-start-width")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-width")}}
      • +
    • {{cssxref("border-right-width")}}
      • +
    • {{cssxref("border-bottom-width")}}
      • +
    • {{cssxref("border-left-width")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block-start/index.html b/files/fr/web/css/border-block-start/index.html deleted file mode 100644 index 44fa752755..0000000000 --- a/files/fr/web/css/border-block-start/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: border-block-start -slug: Web/CSS/border-block-start -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-block-start ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-start est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}} et {{cssxref("border-block-start-color")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-end")}},
    • -
  • {{cssxref("border-inline-end")}},
    • -
  • {{cssxref("border-inline-start")}}.
    • -
- -

Syntaxe

- -
border-block-start: 1px;
-border-block-start: 2px dotted;
-border-block-start: medium dashed green;
-
- -

Valeurs

- -

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

- -
-
<'border-width'>
-
La largeur utilisée pour la bordure de ce côté, voir {{cssxref("border-width")}}.
-
<'border-style'>
-
Le style utilisé pour la ligne de la bordure de ce côté, voir {{cssxref("border-style")}}.
-
<'color'>
-
La couleur de la bordure de ce côté, voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-rl;
-  border-block-start: 5px dashed blue;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-start")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top")}},
      • -
    • {{cssxref("border-right")}},
      • -
    • {{cssxref("border-bottom")}},
      • -
    • {{cssxref("border-left")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-start/index.md b/files/fr/web/css/border-block-start/index.md new file mode 100644 index 0000000000..44fa752755 --- /dev/null +++ b/files/fr/web/css/border-block-start/index.md @@ -0,0 +1,114 @@ +--- +title: border-block-start +slug: Web/CSS/border-block-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-start est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}} et {{cssxref("border-block-start-color")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-end")}},
    • +
  • {{cssxref("border-inline-end")}},
    • +
  • {{cssxref("border-inline-start")}}.
    • +
+ +

Syntaxe

+ +
border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed green;
+
+ +

Valeurs

+ +

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

+ +
+
<'border-width'>
+
La largeur utilisée pour la bordure de ce côté, voir {{cssxref("border-width")}}.
+
<'border-style'>
+
Le style utilisé pour la ligne de la bordure de ce côté, voir {{cssxref("border-style")}}.
+
<'color'>
+
La couleur de la bordure de ce côté, voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-block-start: 5px dashed blue;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top")}},
      • +
    • {{cssxref("border-right")}},
      • +
    • {{cssxref("border-bottom")}},
      • +
    • {{cssxref("border-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block-style/index.html b/files/fr/web/css/border-block-style/index.html deleted file mode 100644 index 996bd6b92f..0000000000 --- a/files/fr/web/css/border-block-style/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: border-block-style -slug: Web/CSS/border-block-style -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-block-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-style permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
/* Valeurs de type <'border-style'> */
-border-block-style: dashed;
-border-block-style: dotted;
-border-block-style: groove;
-
- -

Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-inline-style")}} qui définit {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-end-style")}}.

- -

Syntaxe

- -

Valeur

- -
-
<'border-style'>
-
Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.texteExemple {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-block-style: dashed;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Texte exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-style")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques qui correspondent à cette propriété logique : -
      -
    • {{cssxref("border-top-style")}},
      • -
    • {{cssxref("border-right-style")}},
      • -
    • {{cssxref("border-bottom-style")}},
      • -
    • {{cssxref("border-left-style")}}.
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-style/index.md b/files/fr/web/css/border-block-style/index.md new file mode 100644 index 0000000000..996bd6b92f --- /dev/null +++ b/files/fr/web/css/border-block-style/index.md @@ -0,0 +1,101 @@ +--- +title: border-block-style +slug: Web/CSS/border-block-style +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-block-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-style permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de type <'border-style'> */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+
+ +

Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-inline-style")}} qui définit {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-end-style")}}.

+ +

Syntaxe

+ +

Valeur

+ +
+
<'border-style'>
+
Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-style: dashed;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Texte exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-style")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques qui correspondent à cette propriété logique : +
      +
    • {{cssxref("border-top-style")}},
      • +
    • {{cssxref("border-right-style")}},
      • +
    • {{cssxref("border-bottom-style")}},
      • +
    • {{cssxref("border-left-style")}}.
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block-width/index.html b/files/fr/web/css/border-block-width/index.html deleted file mode 100644 index 356fb06bf4..0000000000 --- a/files/fr/web/css/border-block-width/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: border-block-width -slug: Web/CSS/border-block-width -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-block-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block-width définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe de bloc. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
/* Valeurs de type <'border-width'> */
-border-block-width: 5px 10px;
-border-block-width: 5px;
-border-block-width: thick;
-
- -

The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}.

- -

{{cssinfo}}

- -

Syntaxe

- -

Valeur

- -
-
<'border-width'>
-
La largeur de la bordure. Voir {{ cssxref("border-width") }}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.texteExemple {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-block-width: 5px 10px;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-width")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block-width/index.md b/files/fr/web/css/border-block-width/index.md new file mode 100644 index 0000000000..356fb06bf4 --- /dev/null +++ b/files/fr/web/css/border-block-width/index.md @@ -0,0 +1,94 @@ +--- +title: border-block-width +slug: Web/CSS/border-block-width +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-block-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block-width définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe de bloc. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de type <'border-width'> */
+border-block-width: 5px 10px;
+border-block-width: 5px;
+border-block-width: thick;
+
+ +

The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeur

+ +
+
<'border-width'>
+
La largeur de la bordure. Voir {{ cssxref("border-width") }}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-width: 5px 10px;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-width")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-block/index.html b/files/fr/web/css/border-block/index.html deleted file mode 100644 index 5a7eaf7dc2..0000000000 --- a/files/fr/web/css/border-block/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: border-block -slug: Web/CSS/border-block -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-block ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-block est une propriété raccourcie qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en bloc.

- -
border-block: 1px;
-border-block: 2px dotted;
-border-block: medium dashed blue;
-
- -

border-block peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}} et {{cssxref("border-block-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de bloc. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -

Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-inline")}}, (qui est la proprété raccourcie pour {{cssxref("border-inline-start")}} et {{cssxref("border-inline-end")}}).

- -

Syntaxe

- -

Valeurs

- -

La propriété border-block peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.

- -
-
<'border-width'>
-
La largeur de la bordure. Voir {{cssxref("border-width")}}.
-
<'border-style'>
-
Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.
-
<'color'>
-
La couleur de la bordure. Voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exempleTexte {
-  writing-mode: vertical-rl;
-  border-block: 5px dashed blue;
-}
- -

 

- -

HTML

- -
<div>
-  <p class="exempleTexte">Texte exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques qui peuvent correspondre à cette propriété logique : -
      -
    • {{cssxref("border-top")}},
      • -
    • {{cssxref("border-right")}},
      • -
    • {{cssxref("border-bottom")}},
      • -
    • {{cssxref("border-left")}}.
      • -
    -
    • -
  • Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-block/index.md b/files/fr/web/css/border-block/index.md new file mode 100644 index 0000000000..5a7eaf7dc2 --- /dev/null +++ b/files/fr/web/css/border-block/index.md @@ -0,0 +1,109 @@ +--- +title: border-block +slug: Web/CSS/border-block +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-block +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-block est une propriété raccourcie qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en bloc.

+ +
border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+
+ +

border-block peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}} et {{cssxref("border-block-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de bloc. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +

Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-inline")}}, (qui est la proprété raccourcie pour {{cssxref("border-inline-start")}} et {{cssxref("border-inline-end")}}).

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété border-block peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.

+ +
+
<'border-width'>
+
La largeur de la bordure. Voir {{cssxref("border-width")}}.
+
<'border-style'>
+
Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.
+
<'color'>
+
La couleur de la bordure. Voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exempleTexte {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}
+ +

 

+ +

HTML

+ +
<div>
+  <p class="exempleTexte">Texte exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques qui peuvent correspondre à cette propriété logique : +
      +
    • {{cssxref("border-top")}},
      • +
    • {{cssxref("border-right")}},
      • +
    • {{cssxref("border-bottom")}},
      • +
    • {{cssxref("border-left")}}.
      • +
    +
    • +
  • Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-bottom-color/index.html b/files/fr/web/css/border-bottom-color/index.html deleted file mode 100644 index a1c9a1bf02..0000000000 --- a/files/fr/web/css/border-bottom-color/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: border-bottom-color -slug: Web/CSS/border-bottom-color -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-bottom-color ---- -
{{CSSRef}}
- -

La propriété border-bottom-color permet de définir la couleur utilisée pour la bordure basse d'un élément.

- -

Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-bottom")}}.

- -
{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
- -

Syntaxe

- -
/* Valeurs de type <color> */
-border-bottom-color: red;
-border-bottom-color: rgb(255, 128, 0);
-border-bottom-color: hsla(100%, 50%, 25%, 0.75);
-border-bottom-color: #ffbb00;
-border-bottom-color: currentColor;
-border-bottom-color: transparent;
-
-/* Valeurs globales */
-border-bottom-color: inherit;
-border-bottom-color: initial;
-border-bottom-color: unset;
-
- -

Valeurs

- -
-
<color>
-
Une valeur de couleur (type {{cssxref("<color>")}}) qui décrit la couleur utilisée pour la bordure du côté inférieur.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.maboite {
-  border: solid 0.3em gold;
-  border-bottom-color: red;
-  width: auto;
-}
-
-.texterouge {
-  color: red;
-}
- -

HTML

- -
<div class="maboite">
-  <p>Une boîte avec une bordure autour.
-     Notez le côté de la boîte qui est
-     <span class="texterouge">rouge</span>.</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type {{cssxref("<color>")}} qui a été étendu.
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-bottom-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés raccourciées liées aux bordures -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-bottom")}},
      • -
    • {{cssxref("border-color")}}.
      • -
    -
    • -
  • Les propriétés de couleur pour les autres bordures : -
      -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • Les autres propriétés liées à la bordure du haut : -
      -
    • {{cssxref("border-bottom-style")}},
      • -
    • {{cssxref("border-bottom-width")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-bottom-color/index.md b/files/fr/web/css/border-bottom-color/index.md new file mode 100644 index 0000000000..a1c9a1bf02 --- /dev/null +++ b/files/fr/web/css/border-bottom-color/index.md @@ -0,0 +1,124 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-bottom-color +--- +
{{CSSRef}}
+ +

La propriété border-bottom-color permet de définir la couleur utilisée pour la bordure basse d'un élément.

+ +

Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-bottom")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
+ +

Syntaxe

+ +
/* Valeurs de type <color> */
+border-bottom-color: red;
+border-bottom-color: rgb(255, 128, 0);
+border-bottom-color: hsla(100%, 50%, 25%, 0.75);
+border-bottom-color: #ffbb00;
+border-bottom-color: currentColor;
+border-bottom-color: transparent;
+
+/* Valeurs globales */
+border-bottom-color: inherit;
+border-bottom-color: initial;
+border-bottom-color: unset;
+
+ +

Valeurs

+ +
+
<color>
+
Une valeur de couleur (type {{cssxref("<color>")}}) qui décrit la couleur utilisée pour la bordure du côté inférieur.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.maboite {
+  border: solid 0.3em gold;
+  border-bottom-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}
+ +

HTML

+ +
<div class="maboite">
+  <p>Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     <span class="texterouge">rouge</span>.</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type {{cssxref("<color>")}} qui a été étendu.
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-bottom-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés raccourciées liées aux bordures +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-bottom")}},
      • +
    • {{cssxref("border-color")}}.
      • +
    +
    • +
  • Les propriétés de couleur pour les autres bordures : +
      +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • Les autres propriétés liées à la bordure du haut : +
      +
    • {{cssxref("border-bottom-style")}},
      • +
    • {{cssxref("border-bottom-width")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-bottom-left-radius/index.html b/files/fr/web/css/border-bottom-left-radius/index.html deleted file mode 100644 index be45e9ff52..0000000000 --- a/files/fr/web/css/border-bottom-left-radius/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: border-bottom-left-radius -slug: Web/CSS/border-bottom-left-radius -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-bottom-left-radius ---- -
{{CSSRef}}
- -

La propriété border-bottom-left-radius définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte.

- -
{{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.

-
- -

Syntaxe

- -
/* Le coin est un quart de cercle         */
-/* La valeur indique le rayon de courbure */
-border-bottom-left-radius: 3px;
-
-/* Valeurs avec un pourcentage */
-border-bottom-left-radius: 20%;
-
-/* Le coin est un quart d'ellipse         */
-/* La première valeur indique le demi-axe */
-/* horizontal et la seconde le demi-axe   */
-/* vertical                               */
-border-bottom-left-radius: 0.5em 1em;
-
-border-bottom-left-radius: inherit;
-
- -

Cette propriété peut prendre deux formes :

- -
    -
  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
    • -
  • Une seconde avec deux valeurs -
      -
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
      • -
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
      • -
    -
    • -
- -

Valeurs

- -
-
<length-percentage>
-
La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: lightgreen;
-  border: solid 1px black;
-  width: 100px;
-  height: 130px;
-}
-
-.arc_cercle {
-  border-bottom-left-radius: 40px 40px;
-}
-
-.arc_ellipse {
-  border-bottom-left-radius: 40px 20px;
-}
-
-.pourcentage {
-  border-bottom-left-radius: 40%;
-}
-
-.rognage {
-  border: black 10px double;
-  border-bottom-left-radius: 40%;
-  background-color: rgb(250,20,70);
-  background-clip: content-box; // essayez margin-box...
-}
-
- -

HTML

- -
 <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","540")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-bottom-left-radius")}}

- -

Voir aussi

- -
    -
  • La propriété raccourcie {{cssxref("border-radius")}}
    • -
  • Les propriétés pour les autres coins : -
      -
    • {{cssxref("border-top-right-radius")}},
      • -
    • {{cssxref("border-top-left-radius")}},
      • -
    • {{cssxref("border-bottom-right-radius")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-bottom-left-radius/index.md b/files/fr/web/css/border-bottom-left-radius/index.md new file mode 100644 index 0000000000..be45e9ff52 --- /dev/null +++ b/files/fr/web/css/border-bottom-left-radius/index.md @@ -0,0 +1,141 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-bottom-left-radius +--- +
{{CSSRef}}
+ +

La propriété border-bottom-left-radius définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-bottom-left-radius: 3px;
+
+/* Valeurs avec un pourcentage */
+border-bottom-left-radius: 20%;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+
+ +

Cette propriété peut prendre deux formes :

+ +
    +
  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
    • +
  • Une seconde avec deux valeurs +
      +
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
      • +
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
      • +
    +
    • +
+ +

Valeurs

+ +
+
<length-percentage>
+
La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-bottom-left-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-bottom-left-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-bottom-left-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-bottom-left-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+
+ +

HTML

+ +
 <div class="arc_cercle"></div>
+ <div class="arc_ellipse"></div>
+ <div class="pourcentage"></div>
+ <div class="rognage"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","540")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-bottom-left-radius")}}

+ +

Voir aussi

+ +
    +
  • La propriété raccourcie {{cssxref("border-radius")}}
    • +
  • Les propriétés pour les autres coins : +
      +
    • {{cssxref("border-top-right-radius")}},
      • +
    • {{cssxref("border-top-left-radius")}},
      • +
    • {{cssxref("border-bottom-right-radius")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-bottom-right-radius/index.html b/files/fr/web/css/border-bottom-right-radius/index.html deleted file mode 100644 index 9a9fb45657..0000000000 --- a/files/fr/web/css/border-bottom-right-radius/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: border-bottom-right-radius -slug: Web/CSS/border-bottom-right-radius -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-bottom-right-radius ---- -
{{CSSRef}}
- -

La propriété border-bottom-right-radius définit le rayon de courbure de la bordure pour le coin en bas à droite de la boîte. 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.

- -
{{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.

-
- -

Syntaxe

- -
/* Le coin est un quart de cercle         */
-/* La valeur indique le rayon de courbure */
-border-bottom-right-radius: 3px;
-
-/* Valeur avec un pourcentage */
-border-bottom-right-radius: 20%;
-
-/* Le coin est un quart d'ellipse         */
-/* La première valeur indique le demi-axe */
-/* horizontal et la seconde le demi-axe   */
-/* vertical                               */
-border-bottom-right-radius: 0.5em 1em;
-
-border-bottom-right-radius: inherit;
-
- -

Cette propriété peut prendre deux formes :

- -
    -
  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
    • -
  • Une seconde avec deux valeurs -
      -
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
      • -
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
      • -
    -
    • -
- -

Valeurs

- -
-
<length-percentage>
-
La mesure du rayon ou de l'un des demi-axes de l'ellipse. La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: lightgreen;
-  border: solid 1px black;
-  width: 100px;
-  height: 130px;
-}
-
-.arc_cercle {
-  border-bottom-right-radius: 40px 40px;
-}
-
-.arc_ellipse {
-  border-bottom-right-radius: 40px 20px;
-}
-
-.pourcentage {
-  border-bottom-right-radius: 40%;
-}
-
-.rognage {
-  border: black 10px double;
-  border-bottom-right-radius: 40%;
-  background-color: rgb(250,20,70);
-  background-clip: content-box; // essayez margin-box...
-}
-
- -

HTML

- -
 <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","540")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-bottom-right-radius")}}

- -

Voir aussi

- -
    -
  • La propriété raccourcie {{cssxref("border-radius")}}
    • -
  • Les propriétés pour les autres coins : -
      -
    • {{cssxref("border-top-left-radius")}},
      • -
    • {{cssxref("border-top-right-radius")}},
      • -
    • {{cssxref("border-bottom-left-radius")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-bottom-right-radius/index.md b/files/fr/web/css/border-bottom-right-radius/index.md new file mode 100644 index 0000000000..9a9fb45657 --- /dev/null +++ b/files/fr/web/css/border-bottom-right-radius/index.md @@ -0,0 +1,141 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-bottom-right-radius +--- +
{{CSSRef}}
+ +

La propriété border-bottom-right-radius définit le rayon de courbure de la bordure pour le coin en bas à droite de la boîte. 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.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-bottom-right-radius: 3px;
+
+/* Valeur avec un pourcentage */
+border-bottom-right-radius: 20%;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+
+ +

Cette propriété peut prendre deux formes :

+ +
    +
  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
    • +
  • Une seconde avec deux valeurs +
      +
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
      • +
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
      • +
    +
    • +
+ +

Valeurs

+ +
+
<length-percentage>
+
La mesure du rayon ou de l'un des demi-axes de l'ellipse. La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-bottom-right-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-bottom-right-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-bottom-right-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-bottom-right-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+
+ +

HTML

+ +
 <div class="arc_cercle"></div>
+ <div class="arc_ellipse"></div>
+ <div class="pourcentage"></div>
+ <div class="rognage"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","540")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-bottom-right-radius")}}

+ +

Voir aussi

+ +
    +
  • La propriété raccourcie {{cssxref("border-radius")}}
    • +
  • Les propriétés pour les autres coins : +
      +
    • {{cssxref("border-top-left-radius")}},
      • +
    • {{cssxref("border-top-right-radius")}},
      • +
    • {{cssxref("border-bottom-left-radius")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-bottom-style/index.html b/files/fr/web/css/border-bottom-style/index.html deleted file mode 100644 index 82a22dc543..0000000000 --- a/files/fr/web/css/border-bottom-style/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: border-bottom-style -slug: Web/CSS/border-bottom-style -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-bottom-style ---- -
{{CSSRef}}
- -

La propriété border-bottom-style définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-border-bottom-style: none;
-border-bottom-style: hidden;
-border-bottom-style: dotted;
-border-bottom-style: dashed;
-border-bottom-style: solid;
-border-bottom-style: double;
-border-bottom-style: groove;
-border-bottom-style: ridge;
-border-bottom-style: inset;
-border-bottom-style: outset;
-
-/* Valeurs globales */
-border-bottom-style: inherit;
-border-bottom-style: initial;
-border-bottom-style: unset;
-
- -

Valeurs

- -
-
<br-style>
-
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté bas. Il peut prendre l'une des valeurs suivantes : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
noneL'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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

-
-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
/* On applique un style sur le tableau */
-table {
-  border-width: 2px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
-
-/* Des exemples pour border-bottom-style */
-.b1 {border-bottom-style:none;}
-.b2 {border-bottom-style:hidden;}
-.b3 {border-bottom-style:dotted;}
-.b4 {border-bottom-style:dashed;}
-.b5 {border-bottom-style:solid;}
-.b6 {border-bottom-style:double;}
-.b7 {border-bottom-style:groove;}
-.b8 {border-bottom-style:ridge;}
-.b9 {border-bottom-style:inset;}
-.b10 {border-bottom-style:outset;}
- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">petits points</td>
-    <td class="b4">tirets</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 300, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-bottom-style")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés liées au style des bordures : -
      -
    • {{cssxref("border-left-style")}}
      • -
    • {{cssxref("border-right-style")}}
      • -
    • {{cssxref("border-top-style")}}
      • -
    • {{cssxref("border-style")}}.
      • -
    -
    • -
  • Les autres propriétés liées à la bordure haute : -
      -
    • {{cssxref("border-bottom")}}
      • -
    • {{cssxref("border-bottom-color")}}
      • -
    • {{cssxref("border-bottom-width")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-bottom-style/index.md b/files/fr/web/css/border-bottom-style/index.md new file mode 100644 index 0000000000..82a22dc543 --- /dev/null +++ b/files/fr/web/css/border-bottom-style/index.md @@ -0,0 +1,196 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-bottom-style +--- +
{{CSSRef}}
+ +

La propriété border-bottom-style définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* Valeurs globales */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+
+ +

Valeurs

+ +
+
<br-style>
+
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté bas. Il peut prendre l'une des valeurs suivantes : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
noneL'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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

+
+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-bottom-style */
+.b1 {border-bottom-style:none;}
+.b2 {border-bottom-style:hidden;}
+.b3 {border-bottom-style:dotted;}
+.b4 {border-bottom-style:dashed;}
+.b5 {border-bottom-style:solid;}
+.b6 {border-bottom-style:double;}
+.b7 {border-bottom-style:groove;}
+.b8 {border-bottom-style:ridge;}
+.b9 {border-bottom-style:inset;}
+.b10 {border-bottom-style:outset;}
+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-bottom-style")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés liées au style des bordures : +
      +
    • {{cssxref("border-left-style")}}
      • +
    • {{cssxref("border-right-style")}}
      • +
    • {{cssxref("border-top-style")}}
      • +
    • {{cssxref("border-style")}}.
      • +
    +
    • +
  • Les autres propriétés liées à la bordure haute : +
      +
    • {{cssxref("border-bottom")}}
      • +
    • {{cssxref("border-bottom-color")}}
      • +
    • {{cssxref("border-bottom-width")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-bottom-width/index.html b/files/fr/web/css/border-bottom-width/index.html deleted file mode 100644 index 62e85b5adb..0000000000 --- a/files/fr/web/css/border-bottom-width/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: border-bottom-width -slug: Web/CSS/border-bottom-width -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-bottom-width ---- -
{{CSSRef}}
- -

La propriété border-bottom-width définit l'épaisseur de la bordure pour le côté bas d'un élément.

- -
{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}
- -

Syntaxe

- -
/* Une valeur de longueur */
-/* Type <length>          */
-border-bottom-width: 10em;
-border-bottom-width: 3vmax;
-border-bottom-width: 6px;
-
-/* Valeurs avec un mot-clé */
-border-bottom-width: thin;
-border-bottom-width: medium;
-border-bottom-width: thick;
-
-/* Valeurs globales */
-border-bottom-width: inherit;
-border-bottom-width: initial;
-border-bottom-width: unset;
-
- -

Valeurs

- -
-
<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 : -
    -
  • 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.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.element1{
-  border-bottom: thick solid red;
-}
-.element2{
-  border-bottom: medium solid orange;
-}
-.element3{
-  border-bottom: thin solid green;
-}
-
- -

HTML

- -
<p class="element1">
-  Une bordure épaisse rouge.
-</p>
-
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
-
-<p class="element3">
-  Et une bordure fine verte.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}{{Spec2('CSS2.1')}}Définition initiale.
{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-bottom-width")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés liées à la largeur de la bordure : -
      -
    • {{cssxref("border-left-width")}},
      • -
    • {{cssxref("border-right-width")}},
      • -
    • {{cssxref("border-top-width")}},
      • -
    • {{cssxref("border-width")}}
      • -
    -
    • -
  • Les autres propriétés CSS liées à la bordure du côté haut : -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-bottom")}},
      • -
    • {{cssxref("border-bottom-style")}},
      • -
    • {{cssxref("border-bottom-color")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-bottom-width/index.md b/files/fr/web/css/border-bottom-width/index.md new file mode 100644 index 0000000000..62e85b5adb --- /dev/null +++ b/files/fr/web/css/border-bottom-width/index.md @@ -0,0 +1,139 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-bottom-width +--- +
{{CSSRef}}
+ +

La propriété border-bottom-width définit l'épaisseur de la bordure pour le côté bas d'un élément.

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}
+ +

Syntaxe

+ +
/* Une valeur de longueur */
+/* Type <length>          */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* Valeurs globales */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+
+ +

Valeurs

+ +
+
<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 : +
    +
  • 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.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.element1{
+  border-bottom: thick solid red;
+}
+.element2{
+  border-bottom: medium solid orange;
+}
+.element3{
+  border-bottom: thin solid green;
+}
+
+ +

HTML

+ +
<p class="element1">
+  Une bordure épaisse rouge.
+</p>
+
+<p class="element2">
+  Une bordure moyenne orange.
+</p>
+
+<p class="element3">
+  Et une bordure fine verte.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}{{Spec2('CSS2.1')}}Définition initiale.
{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-bottom-width")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés liées à la largeur de la bordure : +
      +
    • {{cssxref("border-left-width")}},
      • +
    • {{cssxref("border-right-width")}},
      • +
    • {{cssxref("border-top-width")}},
      • +
    • {{cssxref("border-width")}}
      • +
    +
    • +
  • Les autres propriétés CSS liées à la bordure du côté haut : +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-bottom")}},
      • +
    • {{cssxref("border-bottom-style")}},
      • +
    • {{cssxref("border-bottom-color")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-bottom/index.html b/files/fr/web/css/border-bottom/index.html deleted file mode 100644 index 40903908a8..0000000000 --- a/files/fr/web/css/border-bottom/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: border-bottom -slug: Web/CSS/border-bottom -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-bottom ---- -
{{CSSRef}}
- -

La propriété border-bottom est une propriété raccourcie qui définit la bordure du côté bas d'un élément.

- -

C'est une propriété raccourcie qui synthétise :

- -
    -
  • {{cssxref("border-bottom-width")}},
    • -
  • {{cssxref("border-bottom-color")}},
    • -
  • {{cssxref("border-bottom-style")}}.
    • -
- -

Ces propriétés permettent de décrire la bordure du côté bas d'un élément.

- -
{{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 :

- -
  border-bottom-style: dotted;
-  border-bottom: thick green;
-
- -

est équivalent à :

- -
  border-bottom-style: dotted;
-  border-bottom: none thick green;
-
- -

 et la valeur {{cssxref("border-bottom-style")}} fournie avant border-bottom est ignorée.

- -

La valeur par défaut de {{cssxref("border-bottom-style")}} étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

-
- -

Syntaxe

- -
border-bottom: 1px;
-border-bottom: 2px dotted;
-border-bottom: medium dashed green;
-
- -

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.

- -

Valeurs

- -
-
<br-width> 
-
Voir {{cssxref("border-bottom-width")}}.
-
<br-style> 
-
Voir {{cssxref("border-bottom-style")}}.
-
<color> 
-
Voir {{cssxref("border-bottom-color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border-bottom: 3px dotted orange;
-}
- -

HTML

- -
<p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
-  « MARMELADE D’ORANGES. »
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","150")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-bottom-color")}} s'applique.
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}{{Spec2('CSS1')}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-bottom")}}

diff --git a/files/fr/web/css/border-bottom/index.md b/files/fr/web/css/border-bottom/index.md new file mode 100644 index 0000000000..40903908a8 --- /dev/null +++ b/files/fr/web/css/border-bottom/index.md @@ -0,0 +1,122 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-bottom +--- +
{{CSSRef}}
+ +

La propriété border-bottom est une propriété raccourcie qui définit la bordure du côté bas d'un élément.

+ +

C'est une propriété raccourcie qui synthétise :

+ +
    +
  • {{cssxref("border-bottom-width")}},
    • +
  • {{cssxref("border-bottom-color")}},
    • +
  • {{cssxref("border-bottom-style")}}.
    • +
+ +

Ces propriétés permettent de décrire la bordure du côté bas d'un élément.

+ +
{{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 :

+ +
  border-bottom-style: dotted;
+  border-bottom: thick green;
+
+ +

est équivalent à :

+ +
  border-bottom-style: dotted;
+  border-bottom: none thick green;
+
+ +

 et la valeur {{cssxref("border-bottom-style")}} fournie avant border-bottom est ignorée.

+ +

La valeur par défaut de {{cssxref("border-bottom-style")}} étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

+
+ +

Syntaxe

+ +
border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed green;
+
+ +

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.

+ +

Valeurs

+ +
+
<br-width> 
+
Voir {{cssxref("border-bottom-width")}}.
+
<br-style> 
+
Voir {{cssxref("border-bottom-style")}}.
+
<color> 
+
Voir {{cssxref("border-bottom-color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border-bottom: 3px dotted orange;
+}
+ +

HTML

+ +
<p class="exemple">
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","150")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-bottom-color")}} s'applique.
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}{{Spec2('CSS1')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-bottom")}}

diff --git a/files/fr/web/css/border-collapse/index.html b/files/fr/web/css/border-collapse/index.html deleted file mode 100644 index 1751aa7ddf..0000000000 --- a/files/fr/web/css/border-collapse/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: border-collapse -slug: Web/CSS/border-collapse -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-collapse ---- -
{{CSSRef}}
- -

La propriété border-collapse détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées.

- -
{{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.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-border-collapse: collapse;
-border-collapse: separate;
-
-/* Valeurs globales */
-border-collapse: inherit;
-border-collapse: initial;
-border-collapse: unset;
-
- -

La propriété border-collapse est définie avec un seul mot-clé parmi ceux définis ci-après.

- -

Valeurs

- -
-
collapse
-
Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé.
-
separate
-
Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.collapse {
-  border-collapse: collapse;
-}
-.separate {
-  border-collapse: separate;
-}
-table {
-  display: inline-table;
-  margin: 1em;
-  border: dashed 6px;
-  border-width: 6px;
-}
-table th, table td {
-  border: solid 3px;
-}
-.fx { border-color: orange blue; }
-.gk { border-color: black red; }
-.ie { border-color: blue gold; }
-.tr { border-color: aqua; }
-.sa { border-color: silver blue; }
-.wk { border-color: gold blue; }
-.ch { border-color: red yellow green blue; }
-.bk { border-color: navy blue teal aqua; }
-.op { border-color: red; }
- -

HTML

- -
<table class="separate">
-  <caption><code>border-collapse: separate</code></caption>
-  <tbody>
-    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
-    </tr>
-    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
-    </tr>
-    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
-    </tr>
-    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
-    </tr>
-    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
-    </tr>
-    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
-    </tr>
-  </tbody>
-</table>
-<table class="collapse">
-  <caption><code>border-collapse: collapse</code></caption>
-  <tbody>
-    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
-    </tr>
-    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
-    </tr>
-    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
-    </tr>
-    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
-    </tr>
-    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
-    </tr>
-    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
-    </tr>
-  </tbody>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 400, 300)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#borders', 'border-collapse')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-collapse")}}

- -

Voir aussi

- -
    -
  • {{cssxref("border-spacing")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • L'élément HTML {{HTMLElement("table")}} impacté border-collapse.
    • -
diff --git a/files/fr/web/css/border-collapse/index.md b/files/fr/web/css/border-collapse/index.md new file mode 100644 index 0000000000..1751aa7ddf --- /dev/null +++ b/files/fr/web/css/border-collapse/index.md @@ -0,0 +1,148 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-collapse +--- +
{{CSSRef}}
+ +

La propriété border-collapse détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées.

+ +
{{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.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Valeurs globales */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+
+ +

La propriété border-collapse est définie avec un seul mot-clé parmi ceux définis ci-après.

+ +

Valeurs

+ +
+
collapse
+
Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé.
+
separate
+
Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.collapse {
+  border-collapse: collapse;
+}
+.separate {
+  border-collapse: separate;
+}
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 6px;
+  border-width: 6px;
+}
+table th, table td {
+  border: solid 3px;
+}
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ie { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }
+ +

HTML

+ +
<table class="separate">
+  <caption><code>border-collapse: separate</code></caption>
+  <tbody>
+    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
+    </tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
+    </tr>
+    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
+    </tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
+    </tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
+    </tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
+    </tr>
+  </tbody>
+</table>
+<table class="collapse">
+  <caption><code>border-collapse: collapse</code></caption>
+  <tbody>
+    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
+    </tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
+    </tr>
+    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
+    </tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
+    </tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
+    </tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
+    </tr>
+  </tbody>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 400, 300)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#borders', 'border-collapse')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-collapse")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("border-spacing")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • L'élément HTML {{HTMLElement("table")}} impacté border-collapse.
    • +
diff --git a/files/fr/web/css/border-color/index.html b/files/fr/web/css/border-color/index.html deleted file mode 100644 index 34c8a624c4..0000000000 --- a/files/fr/web/css/border-color/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: border-color -slug: Web/CSS/border-color -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference -translation_of: Web/CSS/border-color ---- -
{{CSSRef}}
- -

La propriété CSS border-color est une propriété raccourcie qui permet de définir la couleur de la bordure sur les quatre côtés de la boîte de bordure d'un élément.

- -
{{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

- -
/* border-color : Une valeur        */
-/* Une valeur pour les quatre côtés */
-border-color: red;
-
-/* border-color : Deux valeurs         */
-/* Première valeur : côtés horizontaux */
-/* Seconde valeur : côtés verticaux    */
-border-color: red #f015ca;
-
-/* border-color : Trois valeurs        */
-/* Première valeur : côté haut         */
-/* Deuxième valeur : côtés verticaux */
-/* Troisième valeur : côté bas         */
-border-color: red yellow green;
-
-/* border-color : Quatre valeurs  */
-/* Première valeur : côté haut    */
-/* Deuxième valeur : côté droit   */
-/* Troisième valeur : côté bas    */
-/* Quatrième valeur : côté gauche */
-border-color: red yellow green blue;
-
-/* Valeurs globales */
-border-color: inherit;
-
- -

Valeurs

- -
-
<color>
-
Une valeur de type {{cssxref("<color>")}} qui indique la couleur qu'on souhaite appliquer sur un ou plusieurs côtés de la boîte de bordure.
-
inherit
-
Un mot-clé qui indique que les quatre valeurs sont héritées depuis la valeur calculée de la propriété pour l'élément parent.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
#unevaleur {
-  border-color: red;
-}
-
-#horzvert {
-  border-color: gold red;
-}
-
-#hauthoribas {
-  border-color: red cyan gold;
-}
-
-#hdbg {
-  border-color: red cyan black gold;
-}
-
-/* Set width and style for all divs */
-div {
-  border: solid 0.3em;
-  width: auto;
-  margin: 0.5em;
-  padding: 0.5em;
-}
-
-ul {
-  margin: 0;
-  list-style: none;
-}
- -

HTML

- -
<div id="unevaleur">
-  <p><code>border-color: red;</code> équivalent à</p>
-  <ul><li><code>border-top-color: red;</code></li>
-    <li><code>border-right-color: red;</code></li>
-    <li><code>border-bottom-color: red;</code></li>
-    <li><code>border-left-color: red;</code></li>
-  </ul>
-</div>
-<div id="horzvert">
-  <p><code>border-color: gold red;</code> équivalent à</p>
-  <ul><li><code>border-top-color: gold;</code></li>
-    <li><code>border-right-color: red;</code></li>
-    <li><code>border-bottom-color: gold;</code></li>
-    <li><code>border-left-color: red;</code></li>
-  </ul>
-</div>
-<div id="hauthoribas">
-  <p><code>border-color: red cyan gold;</code> équivalent à</p>
-  <ul><li><code>border-top-color: red;</code></li>
-    <li><code>border-right-color: cyan;</code></li>
-    <li><code>border-bottom-color: gold;</code></li>
-    <li><code>border-left-color: cyan;</code></li>
-  </ul>
-</div>
-<div id="hdbg">
-  <p><code>border-color: red cyan black gold;</code> équivalent à</p>
-  <ul><li><code>border-top-color: red;</code></li>
-    <li><code>border-right-color: cyan;</code></li>
-    <li><code>border-bottom-color: black;</code></li>
-    <li><code>border-left-color: gold;</code></li>
-  </ul>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 600, 300)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}{{Spec2("CSS Logical Properties")}}Ajout du mot-clé logical.
{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}{{Spec2('CSS3 Backgrounds')}}Le mot-clé transparent a été retiré pour être ajouté au type {{cssxref("<color>")}}.
{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}{{Spec2('CSS2.1')}}Cette propriété est désormais une propriété raccourcie.
{{SpecName("CSS1", "#border-color", "border-color")}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés liées à la couleur de la bordure -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}},
      • -
    -
    • -
  • Les autres propriétés raccourcies liées à la bordure : -
      -
    • {{cssxref("border-width")}},
      • -
    • {{cssxref("border-style")}}.
      • -
    -
    • -
  • 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/border-color/index.md b/files/fr/web/css/border-color/index.md new file mode 100644 index 0000000000..34c8a624c4 --- /dev/null +++ b/files/fr/web/css/border-color/index.md @@ -0,0 +1,194 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/border-color +--- +
{{CSSRef}}
+ +

La propriété CSS border-color est une propriété raccourcie qui permet de définir la couleur de la bordure sur les quatre côtés de la boîte de bordure d'un élément.

+ +
{{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

+ +
/* border-color : Une valeur        */
+/* Une valeur pour les quatre côtés */
+border-color: red;
+
+/* border-color : Deux valeurs         */
+/* Première valeur : côtés horizontaux */
+/* Seconde valeur : côtés verticaux    */
+border-color: red #f015ca;
+
+/* border-color : Trois valeurs        */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés verticaux */
+/* Troisième valeur : côté bas         */
+border-color: red yellow green;
+
+/* border-color : Quatre valeurs  */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-color: red yellow green blue;
+
+/* Valeurs globales */
+border-color: inherit;
+
+ +

Valeurs

+ +
+
<color>
+
Une valeur de type {{cssxref("<color>")}} qui indique la couleur qu'on souhaite appliquer sur un ou plusieurs côtés de la boîte de bordure.
+
inherit
+
Un mot-clé qui indique que les quatre valeurs sont héritées depuis la valeur calculée de la propriété pour l'élément parent.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#unevaleur {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#hauthoribas {
+  border-color: red cyan gold;
+}
+
+#hdbg {
+  border-color: red cyan black gold;
+}
+
+/* Set width and style for all divs */
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+ +

HTML

+ +
<div id="unevaleur">
+  <p><code>border-color: red;</code> équivalent à</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: red;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="horzvert">
+  <p><code>border-color: gold red;</code> équivalent à</p>
+  <ul><li><code>border-top-color: gold;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="hauthoribas">
+  <p><code>border-color: red cyan gold;</code> équivalent à</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: cyan;</code></li>
+  </ul>
+</div>
+<div id="hdbg">
+  <p><code>border-color: red cyan black gold;</code> équivalent à</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: black;</code></li>
+    <li><code>border-left-color: gold;</code></li>
+  </ul>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 600, 300)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}{{Spec2("CSS Logical Properties")}}Ajout du mot-clé logical.
{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}{{Spec2('CSS3 Backgrounds')}}Le mot-clé transparent a été retiré pour être ajouté au type {{cssxref("<color>")}}.
{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}{{Spec2('CSS2.1')}}Cette propriété est désormais une propriété raccourcie.
{{SpecName("CSS1", "#border-color", "border-color")}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés liées à la couleur de la bordure +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}},
      • +
    +
    • +
  • Les autres propriétés raccourcies liées à la bordure : +
      +
    • {{cssxref("border-width")}},
      • +
    • {{cssxref("border-style")}}.
      • +
    +
    • +
  • 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/border-end-end-radius/index.html b/files/fr/web/css/border-end-end-radius/index.html deleted file mode 100644 index 6a36727480..0000000000 --- a/files/fr/web/css/border-end-end-radius/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: border-end-end-radius -slug: Web/CSS/border-end-end-radius -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-end-end-radius ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-end-end-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
/* Valeurs de longueur */
-/* Type <length> */
-/* Avec une valeur, le coin sera circulaire */
-border-end-end-radius: 10px;
-border-end-end-radius: 1em;
-
-/* Avec deux valeurs, le coin sera une ellipse */
-border-end-end-radius: 1em 2em;
-
-/* Valeurs globales */
-border-end-end-radius: inherit;
-border-end-end-radius: initial;
-border-end-end-radius: unset;
-
- -

Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-right-radius")}}.

- -

Syntaxe

- -

Valeurs

- -
-
<length-percentage>
-
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("<length>")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: rebeccapurple;
-  width: 120px;
-  height: 120px;
-  border-end-end-radius: 10px;
-}
-
-.texteExemple {
-  writing-mode: vertical-rl;
-  padding: 10px;
-  background-color: #fff;
-  border-end-end-radius: 10px;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{CSSInfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-end-end-radius")}}

- -

Voir aussi

- -
    -
  • La propriété physique correspondante : {{CSSxRef("border-bottom-right-radius")}}
    • -
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-end-end-radius/index.md b/files/fr/web/css/border-end-end-radius/index.md new file mode 100644 index 0000000000..6a36727480 --- /dev/null +++ b/files/fr/web/css/border-end-end-radius/index.md @@ -0,0 +1,105 @@ +--- +title: border-end-end-radius +slug: Web/CSS/border-end-end-radius +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-end-end-radius +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-end-end-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+/* Avec une valeur, le coin sera circulaire */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-end-end-radius: 1em 2em;
+
+/* Valeurs globales */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+
+ +

Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-right-radius")}}.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<length-percentage>
+
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("<length>")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-end-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-end-radius: 10px;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-end-end-radius")}}

+ +

Voir aussi

+ +
    +
  • La propriété physique correspondante : {{CSSxRef("border-bottom-right-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-end-start-radius/index.html b/files/fr/web/css/border-end-start-radius/index.html deleted file mode 100644 index 23164848c4..0000000000 --- a/files/fr/web/css/border-end-start-radius/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: border-end-start-radius -slug: Web/CSS/border-end-start-radius -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-end-start-radius ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-end-start-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
/* Valeurs de longueur */
-/* Type <length> */
-/* Avec une valeur, le coin sera circulaire */
-border-end-start-radius: 10px;
-border-end-start-radius: 1em;
-
-/* Avec deux valeurs, le coin sera une ellipse */
-border-end-start-radius: 1em 2em;
-
-/* Valeurs globales */
-border-end-start-radius: inherit;
-border-end-start-radius: initial;
-border-end-start-radius: unset;
-
- -

Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-right-radius")}}.

- -

Syntaxe

- -

Valeurs

- -
-
<length-percentage>
-
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("<length>")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: rebeccapurple;
-  width: 120px;
-  height: 120px;
-  border-end-start-radius: 10px;
-}
-
-.texteExemple {
-  writing-mode: vertical-rl;
-  padding: 10px;
-  background-color: #fff;
-  border-end-start-radius: 10px;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{CSSInfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-end-start-radius")}}

- -

Voir aussi

- -
    -
  • La propriété physique correspondante : {{CSSxRef("border-top-right-radius")}}
    • -
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-end-start-radius/index.md b/files/fr/web/css/border-end-start-radius/index.md new file mode 100644 index 0000000000..23164848c4 --- /dev/null +++ b/files/fr/web/css/border-end-start-radius/index.md @@ -0,0 +1,105 @@ +--- +title: border-end-start-radius +slug: Web/CSS/border-end-start-radius +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-end-start-radius +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-end-start-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+/* Avec une valeur, le coin sera circulaire */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-end-start-radius: 1em 2em;
+
+/* Valeurs globales */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+
+ +

Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-right-radius")}}.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<length-percentage>
+
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("<length>")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-start-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-start-radius: 10px;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-end-start-radius")}}

+ +

Voir aussi

+ +
    +
  • La propriété physique correspondante : {{CSSxRef("border-top-right-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-image-outset/index.html b/files/fr/web/css/border-image-outset/index.html deleted file mode 100644 index 72861fff31..0000000000 --- a/files/fr/web/css/border-image-outset/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: border-image-outset -slug: Web/CSS/border-image-outset -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-image-outset ---- -
{{CSSRef}}
- -

La propriété border-image-outset définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.

- -
{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
- -

Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.

- -

Syntaxe

- -
/* border-image-outset :                 */
-/* Une même valeur pour les quatre côtés */
-border-image-outset: 1.5;
-
-/* border-image-outset :              */
-/* Première valeur : côtés verticaux  */
-/* Seconde valeur : côtés horizontaux */
-border-image-outset: 1 1.2;
-
-/* border-image-outset :               */
-/* Première valeur : côté haut         */
-/* Deuxième valeur : côtés horizontaux */
-/* Troisième valeur : côté bas         */
-border-image-outset: 30px 2 45px;
-
-/* border-image-outset :          */
-/* Première valeur : côté haut    */
-/* Deuxième valeur : côté droit   */
-/* Troisième valeur : côté bas    */
-/* Quatrième valeur : côté gauche */
-border-image-outset: 7px 12px 14px 5px;
-
-/* Valeurs globales */
-border-image-outset: inherit;
-border-image-outset: initial;
-border-image-outset: unset;
-
- -

Valeurs

- -
-
<length>
-
Une valeur de longueur (cf. type {{cssxref("<length>")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.
-
<number>
-
Une valeur numérique (cf. type {{cssxref("<number>")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
-  border-image-slice: 30;
-  border-image-width: 20px;
-  border-image-repeat: round;
-  border-image-outset: 10px;
-  padding: 40px;
-}
- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-  no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '480', '320')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-image-outset")}}

diff --git a/files/fr/web/css/border-image-outset/index.md b/files/fr/web/css/border-image-outset/index.md new file mode 100644 index 0000000000..72861fff31 --- /dev/null +++ b/files/fr/web/css/border-image-outset/index.md @@ -0,0 +1,110 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef}}
+ +

La propriété border-image-outset définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.

+ +
{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
+ +

Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.

+ +

Syntaxe

+ +
/* border-image-outset :                 */
+/* Une même valeur pour les quatre côtés */
+border-image-outset: 1.5;
+
+/* border-image-outset :              */
+/* Première valeur : côtés verticaux  */
+/* Seconde valeur : côtés horizontaux */
+border-image-outset: 1 1.2;
+
+/* border-image-outset :               */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés horizontaux */
+/* Troisième valeur : côté bas         */
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset :          */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-image-outset: 7px 12px 14px 5px;
+
+/* Valeurs globales */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Une valeur de longueur (cf. type {{cssxref("<length>")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.
+
<number>
+
Une valeur numérique (cf. type {{cssxref("<number>")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+  border-image-slice: 30;
+  border-image-width: 20px;
+  border-image-repeat: round;
+  border-image-outset: 10px;
+  padding: 40px;
+}
+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '480', '320')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-image-outset")}}

diff --git a/files/fr/web/css/border-image-repeat/index.html b/files/fr/web/css/border-image-repeat/index.html deleted file mode 100644 index 73277c07d4..0000000000 --- a/files/fr/web/css/border-image-repeat/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: border-image-repeat -slug: Web/CSS/border-image-repeat -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-image-repeat ---- -
{{CSSRef}}
- -

La propriété border-image-repeat définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux.

- -
{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
- -

Syntaxe

- -
/* border-image-repeat                      */
-/* Une valeur : s'applique à tous les côtés */
-border-image-repeat: stretch;
-
-/* border-image-repeat
-/* Première valeur : côtés horizontaux */
-/* Deuxième valeur : côtés verticaux   */
-border-image-repeat: round stretch;
-
-/* Valeurs globales */
-border-image-repeat: inherit;
-border-image-repeat: initial;
-border-image-repeat: unset;
-
- -

Valeurs

- -
-
stretch
-
Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures.
-
repeat
-
Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures.
-
round
-
Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli.
-
space
-
Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
- border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
- border-image-slice: 30;
- border-image-width: 20px;
- border-image-repeat: round;
- padding: 40px;
-}
- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-  no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '480', '320')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-image-repeat")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/border-image-repeat/index.md b/files/fr/web/css/border-image-repeat/index.md new file mode 100644 index 0000000000..73277c07d4 --- /dev/null +++ b/files/fr/web/css/border-image-repeat/index.md @@ -0,0 +1,104 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

La propriété border-image-repeat définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux.

+ +
{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
+ +

Syntaxe

+ +
/* border-image-repeat                      */
+/* Une valeur : s'applique à tous les côtés */
+border-image-repeat: stretch;
+
+/* border-image-repeat
+/* Première valeur : côtés horizontaux */
+/* Deuxième valeur : côtés verticaux   */
+border-image-repeat: round stretch;
+
+/* Valeurs globales */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

Valeurs

+ +
+
stretch
+
Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures.
+
repeat
+
Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures.
+
round
+
Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli.
+
space
+
Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+ border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+ border-image-slice: 30;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ padding: 40px;
+}
+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '480', '320')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-image-repeat")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/border-image-slice/index.html b/files/fr/web/css/border-image-slice/index.html deleted file mode 100644 index ab1572f57c..0000000000 --- a/files/fr/web/css/border-image-slice/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: border-image-slice -slug: Web/CSS/border-image-slice -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-image-slice ---- -
{{CSSRef}}
- -

La propriété border-image-slice permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.

- -
{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
- -

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).

- -

La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé fill. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).

- -

Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées.

- -

La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.

- -

Syntaxe

- -
/* border-image-slice :                       */
-/* Une valeur qui s'applique aux quatre côtés */
-border-image-slice: 30%;
-
-/* border-image-slice :                */
-/* Première valeur : côtés verticaux   */
-/* Deuxième valeur : côtés horizontaux */
-border-image-slice: 10% 30%;
-
-/* border-image-slice :                */
-/* Première valeur : côté haut         */
-/* Deuxième valeur : côtés horizontaux */
-/* Troisième valeur : côté bas         */
-border-image-slice: 30 30% 45;
-
-/* border-image-slice :           */
-/* Première valeur : côté haut    */
-/* Deuxième valeur : côté droit   */
-/* Troisième valeur : côté bas    */
-/* Quatrième valeur : côté gauche */
-border-image-slice: 7 12 14 5;
-
-/* border-image-slice: … fill          */
-/* Le mot-clé fill peut être intercalé */
-/* à n'importe quel endroit            */
-border-image-slice: 10% fill 7 12;
-
-/* Valeurs globales */
-border-image-slice: inherit;
-border-image-slice: initial;
-border-image-slice: unset;
-
- -

Valeurs

- -
-
slice
-
Une valeur de type {{cssxref("<number>")}} ou {{cssxref("<percentage>")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("<length>")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("<number>")}} correspondra à des pixels pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("<percentage>")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à 100%. Il est préférable d'utiliser des pourcentages pour les images vectorielles.
-
fill
-
Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
- border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
- border-image-slice: 30;
- border-image-width: 20px;
- border-image-repeat: round;
- padding: 40px;
-}
- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-  no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '480', '320')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-image-slice")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/border-image-slice/index.md b/files/fr/web/css/border-image-slice/index.md new file mode 100644 index 0000000000..ab1572f57c --- /dev/null +++ b/files/fr/web/css/border-image-slice/index.md @@ -0,0 +1,128 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

La propriété border-image-slice permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.

+ +
{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
+ +

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).

+ +

La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé fill. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).

+ +

Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées.

+ +

La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.

+ +

Syntaxe

+ +
/* border-image-slice :                       */
+/* Une valeur qui s'applique aux quatre côtés */
+border-image-slice: 30%;
+
+/* border-image-slice :                */
+/* Première valeur : côtés verticaux   */
+/* Deuxième valeur : côtés horizontaux */
+border-image-slice: 10% 30%;
+
+/* border-image-slice :                */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés horizontaux */
+/* Troisième valeur : côté bas         */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice :           */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill          */
+/* Le mot-clé fill peut être intercalé */
+/* à n'importe quel endroit            */
+border-image-slice: 10% fill 7 12;
+
+/* Valeurs globales */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

Valeurs

+ +
+
slice
+
Une valeur de type {{cssxref("<number>")}} ou {{cssxref("<percentage>")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("<length>")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("<number>")}} correspondra à des pixels pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("<percentage>")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à 100%. Il est préférable d'utiliser des pourcentages pour les images vectorielles.
+
fill
+
Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+ border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+ border-image-slice: 30;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ padding: 40px;
+}
+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '480', '320')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-image-slice")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/border-image-source/index.html b/files/fr/web/css/border-image-source/index.html deleted file mode 100644 index f030f45974..0000000000 --- a/files/fr/web/css/border-image-source/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: border-image-source -slug: Web/CSS/border-image-source -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-image-source ---- -
{{CSSRef}}
- -

La propriété border-image-source définit l'image (type {{cssxref("<image>")}}) qu'on souhaite utiliser pour mettre en forme la bordure. Si la valeur de cette propriété vaut none, ce sera la mise en forme définie par la propriété {{cssxref("border-style")}} qui sera utilisée.

- -
{{EmbedInteractiveExample("pages/css/border-image-source.html")}}
- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-/* Ici, pas de border-image, */
-/* on utilise border-style */
-border-image-source: none;
-
-/* Valeur de type <image> */
-border-image-source: url(image.jpg);
-border-image-source: linear-gradient(to top, red, yellow);
-
-/* Valeurs globales */
-border-image-source: inherit;
-border-image-source: initial;
-border-image-source: unset;
-
- -

La propriété {{cssxref("border-image-slice")}} peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.

- -

Valeurs

- -
-
none
-
Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété {{cssxref("border-style")}} qui sera utilisé.
-
<image>
-
Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir {{cssxref("<image>")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Voir la page de la propriété raccourcie {{cssxref("border-image")}} et les différents exemples.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-image-source")}}

- -

Voir aussi

- -
    -
  • {{cssxref("border")}}
    • -
  • {{cssxref("outline")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("background-image")}}
    • -
  • {{cssxref("url()", "url()")}}
    • -
diff --git a/files/fr/web/css/border-image-source/index.md b/files/fr/web/css/border-image-source/index.md new file mode 100644 index 0000000000..f030f45974 --- /dev/null +++ b/files/fr/web/css/border-image-source/index.md @@ -0,0 +1,85 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-image-source +--- +
{{CSSRef}}
+ +

La propriété border-image-source définit l'image (type {{cssxref("<image>")}}) qu'on souhaite utiliser pour mettre en forme la bordure. Si la valeur de cette propriété vaut none, ce sera la mise en forme définie par la propriété {{cssxref("border-style")}} qui sera utilisée.

+ +
{{EmbedInteractiveExample("pages/css/border-image-source.html")}}
+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+/* Ici, pas de border-image, */
+/* on utilise border-style */
+border-image-source: none;
+
+/* Valeur de type <image> */
+border-image-source: url(image.jpg);
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Valeurs globales */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+
+ +

La propriété {{cssxref("border-image-slice")}} peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.

+ +

Valeurs

+ +
+
none
+
Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété {{cssxref("border-style")}} qui sera utilisé.
+
<image>
+
Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir {{cssxref("<image>")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Voir la page de la propriété raccourcie {{cssxref("border-image")}} et les différents exemples.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-image-source")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("outline")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("url()", "url()")}}
    • +
diff --git a/files/fr/web/css/border-image-width/index.html b/files/fr/web/css/border-image-width/index.html deleted file mode 100644 index f334914cde..0000000000 --- a/files/fr/web/css/border-image-width/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: border-image-width -slug: Web/CSS/border-image-width -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-image-width ---- -
{{CSSRef}}
- -

La propriété border-image-width définit la largeur de la bordure imagée.

- -
{{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

- -
/* Valeur avec un mot-clé */
-border-image-width: auto;
-
-/* Longueur */
-/* Type <length> */
-border-image-width: 1rem;
-
-/* Valeur proportionnelle */
-/* Type <percentage> */
-border-image-width: 25%;
-
-/* Valeur numérique */
-/* Type <number> */
-border-image-width: 3;
-
-/* épaisseur verticale | horizontale */
-border-image-width: 2em 3em;
-
-/* haut | côtés horizontaux | bas */
-border-image-width: 5% 15% 10%;
-
-/* haut | droit | bas | gauche */
-border-image-width: 5% 2em 10% auto;
-
-/* Valeurs globales */
-border-image-width: inherit;
-border-image-width: initial;
-border-image-width: unset;
-
- -

La propriété border-image-width est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.

- -
    -
  • Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés
    • -
  • Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit
    • -
  • Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.
    • -
  • Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).
    • -
- -

Valeurs

- -
-
<length-percentage>
-
Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. px) ou relative (ex. rem). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides.
-
<number>
-
Représente un multiple de la valeur calculée de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides.
-
auto
-
L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de border-width qui sera utilisée à la place.
-
inherit
-
Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  border: 20px solid;
-  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
-  border-image-width: 16px;
-  padding: 40px;
-}
- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-  no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '480', '320')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-image-width")}}

diff --git a/files/fr/web/css/border-image-width/index.md b/files/fr/web/css/border-image-width/index.md new file mode 100644 index 0000000000..f334914cde --- /dev/null +++ b/files/fr/web/css/border-image-width/index.md @@ -0,0 +1,123 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

La propriété border-image-width définit la largeur de la bordure imagée.

+ +
{{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

+ +
/* Valeur avec un mot-clé */
+border-image-width: auto;
+
+/* Longueur */
+/* Type <length> */
+border-image-width: 1rem;
+
+/* Valeur proportionnelle */
+/* Type <percentage> */
+border-image-width: 25%;
+
+/* Valeur numérique */
+/* Type <number> */
+border-image-width: 3;
+
+/* épaisseur verticale | horizontale */
+border-image-width: 2em 3em;
+
+/* haut | côtés horizontaux | bas */
+border-image-width: 5% 15% 10%;
+
+/* haut | droit | bas | gauche */
+border-image-width: 5% 2em 10% auto;
+
+/* Valeurs globales */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

La propriété border-image-width est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.

+ +
    +
  • Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés
    • +
  • Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit
    • +
  • Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.
    • +
  • Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).
    • +
+ +

Valeurs

+ +
+
<length-percentage>
+
Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. px) ou relative (ex. rem). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides.
+
<number>
+
Représente un multiple de la valeur calculée de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides.
+
auto
+
L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de border-width qui sera utilisée à la place.
+
inherit
+
Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}
+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '480', '320')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-image-width")}}

diff --git a/files/fr/web/css/border-image/index.html b/files/fr/web/css/border-image/index.html deleted file mode 100644 index d945857f9f..0000000000 --- a/files/fr/web/css/border-image/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: border-image -slug: Web/CSS/border-image -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference -translation_of: Web/CSS/border-image ---- -
{{CSSRef}}
- -

La propriété border-image dessine une image sur la bordure d'un élément. C'est une propriété raccourcie qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}.

- -
{{EmbedInteractiveExample("pages/css/border-image.html")}}
- -

Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété border-image sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, border-style doit être présente si border-image est utilisée.

- -
-

Note : Si la valeur calculée de {{cssxref("border-image-source")}} vaut none (via border-image-source ou via la propriété raccourcie border-image), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé.

-
- -

Syntaxe

- -
/* source | slice */
-border-image: linear-gradient(red, blue) 27;
-
-/* source | slice | repeat */
-border-image: url("/images/border.png") 27 space;
-
-/* source | slice | width */
-border-image: linear-gradient(red, blue) 27 / 35px;
-
-/* source | slice | width | outset | repeat */
-border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
-
- -

La propriété border-image peut être définie avec une à cinq valeurs parmi celles définies ci-après.

- -
-

Note : Si la valeur calculée de {{cssxref("border-image-source")}} vaut none ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché.

-
- -

Valeurs

- -
-
border-image-source
-
L'image source. Voir {{cssxref("border-image-source")}}.
-
border-image-slice
-
La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}.
-
border-image-width
-
La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}.
-
border-image-outset
-
La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}.
-
border-image-repeat
-
La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Utiliser une image matricielle étirée

- -

On découpe l'image et on la répète pour remplir la zone entre les bordures.

- -

CSS

- -
#bitmap {
-  border: 30px solid transparent;
-  padding: 20px;
-  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
-}
-
- -

HTML

- -
<div id="bitmap">
-  L'image est étirée pour remplir l'espace.
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Utiliser_une_image_matricielle_répétée')}}

- -

Utiliser un dégradé

- -

CSS

- -
#gradient {
-  border: 30px solid;
-  border-image: linear-gradient(red, yellow) 10;
-  padding: 20px;
-}
-
- -

HTML

- -
<div id="gradient">
-  L'image formée par le gradient est étirée pour remplir la zone.
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Utiliser_un_dégradé')}}

- -

Accessibilité

- -

Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-image")}}

- -

Voir aussi

- -
    -
  • {{cssxref("border")}}
    • -
  • {{cssxref("outline")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("background-image")}}
    • -
  • {{cssxref("url()", "url()")}}
    • -
  • Fonctions pour les dégradés -
      -
    • {{CSSxRef("conic-gradient")}}
      • -
    • {{CSSxRef("linear-gradient")}}
      • -
    • {{CSSxRef("repeating-linear-gradient")}}
      • -
    • {{CSSxRef("radial-gradient")}}
      • -
    • {{CSSxRef("repeating-radial-gradient")}}
      • -
    -
    • -
diff --git a/files/fr/web/css/border-image/index.md b/files/fr/web/css/border-image/index.md new file mode 100644 index 0000000000..d945857f9f --- /dev/null +++ b/files/fr/web/css/border-image/index.md @@ -0,0 +1,162 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/border-image +--- +
{{CSSRef}}
+ +

La propriété border-image dessine une image sur la bordure d'un élément. C'est une propriété raccourcie qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-image.html")}}
+ +

Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété border-image sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, border-style doit être présente si border-image est utilisée.

+ +
+

Note : Si la valeur calculée de {{cssxref("border-image-source")}} vaut none (via border-image-source ou via la propriété raccourcie border-image), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé.

+
+ +

Syntaxe

+ +
/* source | slice */
+border-image: linear-gradient(red, blue) 27;
+
+/* source | slice | repeat */
+border-image: url("/images/border.png") 27 space;
+
+/* source | slice | width */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* source | slice | width | outset | repeat */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+
+ +

La propriété border-image peut être définie avec une à cinq valeurs parmi celles définies ci-après.

+ +
+

Note : Si la valeur calculée de {{cssxref("border-image-source")}} vaut none ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché.

+
+ +

Valeurs

+ +
+
border-image-source
+
L'image source. Voir {{cssxref("border-image-source")}}.
+
border-image-slice
+
La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}.
+
border-image-width
+
La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}.
+
border-image-outset
+
La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}.
+
border-image-repeat
+
La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Utiliser une image matricielle étirée

+ +

On découpe l'image et on la répète pour remplir la zone entre les bordures.

+ +

CSS

+ +
#bitmap {
+  border: 30px solid transparent;
+  padding: 20px;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
+}
+
+ +

HTML

+ +
<div id="bitmap">
+  L'image est étirée pour remplir l'espace.
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Utiliser_une_image_matricielle_répétée')}}

+ +

Utiliser un dégradé

+ +

CSS

+ +
#gradient {
+  border: 30px solid;
+  border-image: linear-gradient(red, yellow) 10;
+  padding: 20px;
+}
+
+ +

HTML

+ +
<div id="gradient">
+  L'image formée par le gradient est étirée pour remplir la zone.
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Utiliser_un_dégradé')}}

+ +

Accessibilité

+ +

Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-image")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("outline")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("url()", "url()")}}
    • +
  • Fonctions pour les dégradés +
      +
    • {{CSSxRef("conic-gradient")}}
      • +
    • {{CSSxRef("linear-gradient")}}
      • +
    • {{CSSxRef("repeating-linear-gradient")}}
      • +
    • {{CSSxRef("radial-gradient")}}
      • +
    • {{CSSxRef("repeating-radial-gradient")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/border-inline-color/index.html b/files/fr/web/css/border-inline-color/index.html deleted file mode 100644 index b8cd8d95e2..0000000000 --- a/files/fr/web/css/border-inline-color/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: border-inline-color -slug: Web/CSS/border-inline-color -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-inline-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-color définit la couleur de la bordure d'un élément sur les côtés de l'axe en ligne. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
border-inline-color: yellow;
-border-inline-color: #F5F6F7;
-
- -

Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-block-color")}} qui définit {{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}.

- -

Syntaxe

- -

Valeurs

- -
-
<'color'>
-
La couleur de la bordure. Voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.texteExemple {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-inline-color: red;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques qui peuvent correspondre à cette propriété : -
      -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
  • {{bug("1297097")}}
    • -
diff --git a/files/fr/web/css/border-inline-color/index.md b/files/fr/web/css/border-inline-color/index.md new file mode 100644 index 0000000000..b8cd8d95e2 --- /dev/null +++ b/files/fr/web/css/border-inline-color/index.md @@ -0,0 +1,100 @@ +--- +title: border-inline-color +slug: Web/CSS/border-inline-color +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-inline-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-color définit la couleur de la bordure d'un élément sur les côtés de l'axe en ligne. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+
+ +

Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-block-color")}} qui définit {{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<'color'>
+
La couleur de la bordure. Voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques qui peuvent correspondre à cette propriété : +
      +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
  • {{bug("1297097")}}
    • +
diff --git a/files/fr/web/css/border-inline-end-color/index.html b/files/fr/web/css/border-inline-end-color/index.html deleted file mode 100644 index bc4b34cade..0000000000 --- a/files/fr/web/css/border-inline-end-color/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: border-inline-end-color -slug: Web/CSS/border-inline-end-color -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-inline-end-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-end-color définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-start-color")}},
    • -
  • {{cssxref("border-block-end-color")}},
    • -
  • {{cssxref("border-inline-start-color")}}.
    • -
- -

Syntaxe

- -
border-inline-end-color: red;
-border-inline-end-color: #fffff;
-border-inline-end-color: rgb(200, 0, 0);
-
-border-inline-end-color: unset;
-border-inline-end-color: initial;
-border-inline-end-color: inherit;
-
- -

Valeurs

- -
-
<'border-color'>
-
Voir {{cssxref("border-color")}}
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-inline-end-color: red;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-end-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-end-color/index.md b/files/fr/web/css/border-inline-end-color/index.md new file mode 100644 index 0000000000..bc4b34cade --- /dev/null +++ b/files/fr/web/css/border-inline-end-color/index.md @@ -0,0 +1,111 @@ +--- +title: border-inline-end-color +slug: Web/CSS/border-inline-end-color +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-inline-end-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-end-color définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-start-color")}},
    • +
  • {{cssxref("border-block-end-color")}},
    • +
  • {{cssxref("border-inline-start-color")}}.
    • +
+ +

Syntaxe

+ +
border-inline-end-color: red;
+border-inline-end-color: #fffff;
+border-inline-end-color: rgb(200, 0, 0);
+
+border-inline-end-color: unset;
+border-inline-end-color: initial;
+border-inline-end-color: inherit;
+
+ +

Valeurs

+ +
+
<'border-color'>
+
Voir {{cssxref("border-color")}}
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-end-color: red;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-end-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-end-style/index.html b/files/fr/web/css/border-inline-end-style/index.html deleted file mode 100644 index 7fa9597e99..0000000000 --- a/files/fr/web/css/border-inline-end-style/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: border-inline-end-style -slug: Web/CSS/border-inline-end-style -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-inline-end-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-end-style définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-start-style")}}
    • -
  • {{cssxref("border-block-end-style")}}
    • -
  • {{cssxref("border-inline-start-style")}}.
    • -
- -

Syntaxe

- -
border-inline-end-style: dashed;
-border-inline-end-style: dotted;
-border-inline-end-style: groove;
- -

Valeurs

- -
-
<'border-style'>
-
Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-inline-end-style: dashed;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-end-style")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-style")}},
      • -
    • {{cssxref("border-right-style")}},
      • -
    • {{cssxref("border-bottom-style")}},
      • -
    • {{cssxref("border-left-style")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-end-style/index.md b/files/fr/web/css/border-inline-end-style/index.md new file mode 100644 index 0000000000..7fa9597e99 --- /dev/null +++ b/files/fr/web/css/border-inline-end-style/index.md @@ -0,0 +1,106 @@ +--- +title: border-inline-end-style +slug: Web/CSS/border-inline-end-style +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-inline-end-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-end-style définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-start-style")}}
    • +
  • {{cssxref("border-block-end-style")}}
    • +
  • {{cssxref("border-inline-start-style")}}.
    • +
+ +

Syntaxe

+ +
border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;
+ +

Valeurs

+ +
+
<'border-style'>
+
Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-end-style: dashed;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-end-style")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-style")}},
      • +
    • {{cssxref("border-right-style")}},
      • +
    • {{cssxref("border-bottom-style")}},
      • +
    • {{cssxref("border-left-style")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-end-width/index.html b/files/fr/web/css/border-inline-end-width/index.html deleted file mode 100644 index 1c01412029..0000000000 --- a/files/fr/web/css/border-inline-end-width/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: border-inline-end-width -slug: Web/CSS/border-inline-end-width -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-inline-end-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-end-width définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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

- -
/* Valeur de longueur */
-/* Type <length> */
-border-inline-end-width: 5px;
-border-inline-end-width: thick;
-
- -

Valeurs

- -
-
<'border-width'>
-
La largeur de la bordure, voir {{cssxref("border-width")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-inline-end-width: 5px;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-end-width")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-width")}}
      • -
    • {{cssxref("border-right-width")}}
      • -
    • {{cssxref("border-bottom-width")}}
      • -
    • {{cssxref("border-left-width")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-end-width/index.md b/files/fr/web/css/border-inline-end-width/index.md new file mode 100644 index 0000000000..1c01412029 --- /dev/null +++ b/files/fr/web/css/border-inline-end-width/index.md @@ -0,0 +1,102 @@ +--- +title: border-inline-end-width +slug: Web/CSS/border-inline-end-width +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-inline-end-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-end-width définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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

+ +
/* Valeur de longueur */
+/* Type <length> */
+border-inline-end-width: 5px;
+border-inline-end-width: thick;
+
+ +

Valeurs

+ +
+
<'border-width'>
+
La largeur de la bordure, voir {{cssxref("border-width")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-end-width: 5px;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-end-width")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-width")}}
      • +
    • {{cssxref("border-right-width")}}
      • +
    • {{cssxref("border-bottom-width")}}
      • +
    • {{cssxref("border-left-width")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-end/index.html b/files/fr/web/css/border-inline-end/index.html deleted file mode 100644 index 860957487a..0000000000 --- a/files/fr/web/css/border-inline-end/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: border-inline-end -slug: Web/CSS/border-inline-end -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-inline-end ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-end est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} et {{cssxref("border-inline-end-color")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-start")}},
    • -
  • {{cssxref("border-block-end")}},
    • -
  • {{cssxref("border-inline-start")}}.
    • -
- -

Syntaxe

- -
border-inline-end: 1px;
-border-inline-end: 2px dotted;
-border-inline-end: medium dashed green;
-
- -

Valeurs

- -

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

- -
-
<'border-width'>
-
La largeur de la bordure pour ce côté, voir {{cssxref("border-width")}}.
-
<'border-style'>
-
Le style de la ligne utilisé pour la bordure de ce côté, voir {{cssxref("border-style")}}.
-
<'color'>
-
La couleur de la bordure sur ce côté, voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-rl;
-  border-inline-end: 5px dashed blue;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-end")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top")}},
      • -
    • {{cssxref("border-right")}},
      • -
    • {{cssxref("border-bottom")}},
      • -
    • {{cssxref("border-left")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-end/index.md b/files/fr/web/css/border-inline-end/index.md new file mode 100644 index 0000000000..860957487a --- /dev/null +++ b/files/fr/web/css/border-inline-end/index.md @@ -0,0 +1,114 @@ +--- +title: border-inline-end +slug: Web/CSS/border-inline-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-end est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} et {{cssxref("border-inline-end-color")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-start")}},
    • +
  • {{cssxref("border-block-end")}},
    • +
  • {{cssxref("border-inline-start")}}.
    • +
+ +

Syntaxe

+ +
border-inline-end: 1px;
+border-inline-end: 2px dotted;
+border-inline-end: medium dashed green;
+
+ +

Valeurs

+ +

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

+ +
+
<'border-width'>
+
La largeur de la bordure pour ce côté, voir {{cssxref("border-width")}}.
+
<'border-style'>
+
Le style de la ligne utilisé pour la bordure de ce côté, voir {{cssxref("border-style")}}.
+
<'color'>
+
La couleur de la bordure sur ce côté, voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-inline-end: 5px dashed blue;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top")}},
      • +
    • {{cssxref("border-right")}},
      • +
    • {{cssxref("border-bottom")}},
      • +
    • {{cssxref("border-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-start-color/index.html b/files/fr/web/css/border-inline-start-color/index.html deleted file mode 100644 index f2b6520344..0000000000 --- a/files/fr/web/css/border-inline-start-color/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: border-inline-start-color -slug: Web/CSS/border-inline-start-color -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-inline-start-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-start-color définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-start-color")}},
    • -
  • {{cssxref("border-block-end-color")}},
    • -
  • {{cssxref("border-inline-end-color")}}.
    • -
- -

Syntaxe

- -
border-inline-start-color: red;
-border-inline-start-color: #fffff;
-border-inline-start-color: rgb(200, 0, 0);
-
- -

Valeurs

- -
-
<'border-color'>
-
La couleur de la bordure, voir {{cssxref("border-color")}} et {{cssxref("<color>")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-inline-start-color: red;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-start-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-start-color/index.md b/files/fr/web/css/border-inline-start-color/index.md new file mode 100644 index 0000000000..f2b6520344 --- /dev/null +++ b/files/fr/web/css/border-inline-start-color/index.md @@ -0,0 +1,108 @@ +--- +title: border-inline-start-color +slug: Web/CSS/border-inline-start-color +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-inline-start-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-start-color définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-start-color")}},
    • +
  • {{cssxref("border-block-end-color")}},
    • +
  • {{cssxref("border-inline-end-color")}}.
    • +
+ +

Syntaxe

+ +
border-inline-start-color: red;
+border-inline-start-color: #fffff;
+border-inline-start-color: rgb(200, 0, 0);
+
+ +

Valeurs

+ +
+
<'border-color'>
+
La couleur de la bordure, voir {{cssxref("border-color")}} et {{cssxref("<color>")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-start-color: red;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-start-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-start-style/index.html b/files/fr/web/css/border-inline-start-style/index.html deleted file mode 100644 index 84313d9460..0000000000 --- a/files/fr/web/css/border-inline-start-style/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: border-inline-start-style -slug: Web/CSS/border-inline-start-style -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/border-inline-start-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-start-style définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
- -

Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :

- -
    -
  • {{cssxref("border-block-start-style")}}
    • -
  • {{cssxref("border-block-end-style")}}
    • -
  • {{cssxref("border-inline-end-style")}}.
    • -
- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-border-inline-start-style: dashed;
-border-inline-start-style: dotted;
-border-inline-start-style: groove;
-
- -

Valeurs

- -
-
<'border-style'>
-
Le style de la ligne utilisé pour la bordure, voir {{cssxref("border-style")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-inline-start-style: dashed;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-start-style")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-style")}},
      • -
    • {{cssxref("border-right-style")}},
      • -
    • {{cssxref("border-bottom-style")}},
      • -
    • {{cssxref("border-left-style")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-start-style/index.md b/files/fr/web/css/border-inline-start-style/index.md new file mode 100644 index 0000000000..84313d9460 --- /dev/null +++ b/files/fr/web/css/border-inline-start-style/index.md @@ -0,0 +1,108 @@ +--- +title: border-inline-start-style +slug: Web/CSS/border-inline-start-style +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/border-inline-start-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-start-style définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
+ +

Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :

+ +
    +
  • {{cssxref("border-block-start-style")}}
    • +
  • {{cssxref("border-block-end-style")}}
    • +
  • {{cssxref("border-inline-end-style")}}.
    • +
+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+
+ +

Valeurs

+ +
+
<'border-style'>
+
Le style de la ligne utilisé pour la bordure, voir {{cssxref("border-style")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-start-style: dashed;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-start-style")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-style")}},
      • +
    • {{cssxref("border-right-style")}},
      • +
    • {{cssxref("border-bottom-style")}},
      • +
    • {{cssxref("border-left-style")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-start-width/index.html b/files/fr/web/css/border-inline-start-width/index.html deleted file mode 100644 index a530bc3c6e..0000000000 --- a/files/fr/web/css/border-inline-start-width/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: border-inline-start-width -slug: Web/CSS/border-inline-start-width -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-inline-start-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-start-width définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
{{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

- -
/* Valeur de longueur */
-/* Type <length>      */
-border-inline-start-width: 5px;
-border-inline-start-width: thick;
-
- -

Valeurs

- -
-
<'border-width'>
-
La largeur de la bordure, voir {{cssxref("border-width")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-inline-start-width: 5px;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-start-width")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top-width")}}
      • -
    • {{cssxref("border-right-width")}}
      • -
    • {{cssxref("border-bottom-width")}}
      • -
    • {{cssxref("border-left-width")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-start-width/index.md b/files/fr/web/css/border-inline-start-width/index.md new file mode 100644 index 0000000000..a530bc3c6e --- /dev/null +++ b/files/fr/web/css/border-inline-start-width/index.md @@ -0,0 +1,103 @@ +--- +title: border-inline-start-width +slug: Web/CSS/border-inline-start-width +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-inline-start-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-start-width définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
{{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

+ +
/* Valeur de longueur */
+/* Type <length>      */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+
+ +

Valeurs

+ +
+
<'border-width'>
+
La largeur de la bordure, voir {{cssxref("border-width")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-start-width: 5px;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-start-width")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top-width")}}
      • +
    • {{cssxref("border-right-width")}}
      • +
    • {{cssxref("border-bottom-width")}}
      • +
    • {{cssxref("border-left-width")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-start/index.html b/files/fr/web/css/border-inline-start/index.html deleted file mode 100644 index 1e57c3f268..0000000000 --- a/files/fr/web/css/border-inline-start/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: border-inline-start -slug: Web/CSS/border-inline-start -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-inline-start ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-start est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-start-color")}}.

- -
{{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 :

- -
    -
  • {{cssxref("border-block-start")}},
    • -
  • {{cssxref("border-block-end")}},
    • -
  • {{cssxref("border-inline-end")}}.
    • -
- -

Syntaxe

- -
border-inline-start: 1px;
-border-inline-start: 2px dotted;
-border-inline-start: medium dashed green;
-
- -

Valeurs

- -

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

- -
-
<'border-width'>
-
La largeur de la bordure, voir {{cssxref("border-width")}}.
-
<'border-style'>
-
Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}.
-
<'color'>
-
La couleur utilisé pour la bordure sur ce côté, voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-rl;
-  border-inline-start: 5px dashed blue;
-}
- -

HTML

- -
<div>
-  <p class="exemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-start")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top")}},
      • -
    • {{cssxref("border-right")}},
      • -
    • {{cssxref("border-bottom")}},
      • -
    • {{cssxref("border-left")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-start/index.md b/files/fr/web/css/border-inline-start/index.md new file mode 100644 index 0000000000..1e57c3f268 --- /dev/null +++ b/files/fr/web/css/border-inline-start/index.md @@ -0,0 +1,115 @@ +--- +title: border-inline-start +slug: Web/CSS/border-inline-start +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-start est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-start-color")}}.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-block-start")}},
    • +
  • {{cssxref("border-block-end")}},
    • +
  • {{cssxref("border-inline-end")}}.
    • +
+ +

Syntaxe

+ +
border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+
+ +

Valeurs

+ +

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

+ +
+
<'border-width'>
+
La largeur de la bordure, voir {{cssxref("border-width")}}.
+
<'border-style'>
+
Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}.
+
<'color'>
+
La couleur utilisé pour la bordure sur ce côté, voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px dashed blue;
+}
+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("border-top")}},
      • +
    • {{cssxref("border-right")}},
      • +
    • {{cssxref("border-bottom")}},
      • +
    • {{cssxref("border-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-style/index.html b/files/fr/web/css/border-inline-style/index.html deleted file mode 100644 index 76e63f490d..0000000000 --- a/files/fr/web/css/border-inline-style/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: border-inline-style -slug: Web/CSS/border-inline-style -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-inline-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-style permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
/* Valeurs de type <'border-style'> */
-border-inline-style: dashed;
-border-inline-style: dotted;
-border-inline-style: groove;
-
- -

Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-block-style")}} qui définit {{cssxref("border-block-start-style")}} et {{cssxref("border-block-end-style")}}.

- -

Syntaxe

- -

Valeur

- -
-
<'border-style'>
-
Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.texteExemple {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-inline-style: dashed;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Texte exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline-style")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques qui correspondent à cette propriété logique : -
      -
    • {{cssxref("border-top-style")}},
      • -
    • {{cssxref("border-right-style")}},
      • -
    • {{cssxref("border-bottom-style")}},
      • -
    • {{cssxref("border-left-style")}}.
      • -
    -
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-style/index.md b/files/fr/web/css/border-inline-style/index.md new file mode 100644 index 0000000000..76e63f490d --- /dev/null +++ b/files/fr/web/css/border-inline-style/index.md @@ -0,0 +1,101 @@ +--- +title: border-inline-style +slug: Web/CSS/border-inline-style +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-inline-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-style permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de type <'border-style'> */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+
+ +

Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-block-style")}} qui définit {{cssxref("border-block-start-style")}} et {{cssxref("border-block-end-style")}}.

+ +

Syntaxe

+ +

Valeur

+ +
+
<'border-style'>
+
Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-style: dashed;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Texte exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline-style")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques qui correspondent à cette propriété logique : +
      +
    • {{cssxref("border-top-style")}},
      • +
    • {{cssxref("border-right-style")}},
      • +
    • {{cssxref("border-bottom-style")}},
      • +
    • {{cssxref("border-left-style")}}.
      • +
    +
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline-width/index.html b/files/fr/web/css/border-inline-width/index.html deleted file mode 100644 index 36cc04cc58..0000000000 --- a/files/fr/web/css/border-inline-width/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: border-inline-width -slug: Web/CSS/border-inline-width -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-inline-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline-width définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe en ligne. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
/* Valeurs de type <'border-width'> */
-border-inline-width: 5px 10px;
-border-inline-width: 5px;
-border-inline-width: thick;
-
- -

The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}.

- -

Syntaxe

- -

Valeur

- -
-
<'border-width'>
-
La largeur de la bordure. Voir {{ cssxref("border-width") }}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.texteExemple {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-inline-width: 5px 10px;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Texte d'exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-block-width")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
    • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline-width/index.md b/files/fr/web/css/border-inline-width/index.md new file mode 100644 index 0000000000..36cc04cc58 --- /dev/null +++ b/files/fr/web/css/border-inline-width/index.md @@ -0,0 +1,94 @@ +--- +title: border-inline-width +slug: Web/CSS/border-inline-width +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-inline-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline-width définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe en ligne. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de type <'border-width'> */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+
+ +

The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}.

+ +

Syntaxe

+ +

Valeur

+ +
+
<'border-width'>
+
La largeur de la bordure. Voir {{ cssxref("border-width") }}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-width: 5px 10px;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-block-width")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-inline/index.html b/files/fr/web/css/border-inline/index.html deleted file mode 100644 index fee3624b6f..0000000000 --- a/files/fr/web/css/border-inline/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: border-inline -slug: Web/CSS/border-inline -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-inline ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-inline est une propriété raccourcie qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en ligne.

- -
border-inline: 1px;
-border-inline: 2px dotted;
-border-inline: medium dashed blue;
-
- -

border-inline peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}} et {{cssxref("border-inline-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de en ligne. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -

Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-block")}}, (qui est la proprété raccourcie pour {{cssxref("border-block-start")}} et {{cssxref("border-block-end")}}).

- -

Syntaxe

- -

Valeurs

- -

La propriété border-inline peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.

- -
-
<'border-width'>
-
La largeur de la bordure. Voir {{cssxref("border-width")}}.
-
<'border-style'>
-
Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.
-
<'color'>
-
La couleur de la bordure. Voir {{cssxref("color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

 

- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exempleTexte {
-  writing-mode: vertical-rl;
-  border-inline: 5px dashed blue;
-}
- -

 

- -

HTML

- -
<div>
-  <p class="exempleTexte">Texte exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-inline")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques qui peuvent correspondre à cette propriété logique : -
      -
    • {{cssxref("border-top")}},
      • -
    • {{cssxref("border-right")}},
      • -
    • {{cssxref("border-bottom")}},
      • -
    • {{cssxref("border-left")}}.
      • -
    -
    • -
  • Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-inline/index.md b/files/fr/web/css/border-inline/index.md new file mode 100644 index 0000000000..fee3624b6f --- /dev/null +++ b/files/fr/web/css/border-inline/index.md @@ -0,0 +1,111 @@ +--- +title: border-inline +slug: Web/CSS/border-inline +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-inline +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-inline est une propriété raccourcie qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en ligne.

+ +
border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+
+ +

border-inline peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}} et {{cssxref("border-inline-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de en ligne. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +

Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-block")}}, (qui est la proprété raccourcie pour {{cssxref("border-block-start")}} et {{cssxref("border-block-end")}}).

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété border-inline peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.

+ +
+
<'border-width'>
+
La largeur de la bordure. Voir {{cssxref("border-width")}}.
+
<'border-style'>
+
Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.
+
<'color'>
+
La couleur de la bordure. Voir {{cssxref("color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

 

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exempleTexte {
+  writing-mode: vertical-rl;
+  border-inline: 5px dashed blue;
+}
+ +

 

+ +

HTML

+ +
<div>
+  <p class="exempleTexte">Texte exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-inline")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques qui peuvent correspondre à cette propriété logique : +
      +
    • {{cssxref("border-top")}},
      • +
    • {{cssxref("border-right")}},
      • +
    • {{cssxref("border-bottom")}},
      • +
    • {{cssxref("border-left")}}.
      • +
    +
    • +
  • Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-left-color/index.html b/files/fr/web/css/border-left-color/index.html deleted file mode 100644 index d19f3c7ad2..0000000000 --- a/files/fr/web/css/border-left-color/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: border-left-color -slug: Web/CSS/border-left-color -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-left-color ---- -
{{CSSRef}}
- -

La propriété border-left-color permet de définir la couleur utilisée pour la bordure gauche d'un élément.

- -

Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-left")}}.

- -
{{EmbedInteractiveExample("pages/css/border-left-color.html")}}
- -

Syntaxe

- -
/* Valeurs de type <color> */
-border-left-color: red;
-border-left-color: rgb(255, 128, 0);
-border-left-color: hsla(100%, 50%, 25%, 0.75);
-border-left-color: #ffbb00;
-border-left-color: currentColor;
-border-left-color: transparent;
-
-/* Valeurs globales */
-border-left-color: inherit;
-border-left-color: initial;
-border-left-color: unset;
-
- -

Valeurs

- -
-
<color>
-
Une valeur de couleur (type {{cssxref("<color>")}}) qui décrit la couleur utilisée pour la bordure du côté gauche.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.maboite {
-  border: solid 0.3em gold;
-  border-left-color: red;
-  width: auto;
-}
-
-.texterouge {
-  color: red;
-}
- -

HTML

- -
<div class="maboite">
-  <p>Une boîte avec une bordure autour.
-     Notez le côté de la boîte qui est
-     <span class="texterouge">rouge</span>.</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-color', 'border-color')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type {{cssxref("<color>")}} qui a été étendu.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-left-color')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-left-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés raccourcies liées aux bordures -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-left")}},
      • -
    • {{cssxref("border-color")}}.
      • -
    -
    • -
  • Les propriétés de couleur pour les autres bordures : -
      -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-right-color")}}.
      • -
    -
    • -
  • Les autres propriétés liées à la bordure gauche : -
      -
    • {{cssxref("border-left-style")}},
      • -
    • {{cssxref("border-left-width")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-left-color/index.md b/files/fr/web/css/border-left-color/index.md new file mode 100644 index 0000000000..d19f3c7ad2 --- /dev/null +++ b/files/fr/web/css/border-left-color/index.md @@ -0,0 +1,124 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-left-color +--- +
{{CSSRef}}
+ +

La propriété border-left-color permet de définir la couleur utilisée pour la bordure gauche d'un élément.

+ +

Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-left")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-left-color.html")}}
+ +

Syntaxe

+ +
/* Valeurs de type <color> */
+border-left-color: red;
+border-left-color: rgb(255, 128, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: #ffbb00;
+border-left-color: currentColor;
+border-left-color: transparent;
+
+/* Valeurs globales */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+
+ +

Valeurs

+ +
+
<color>
+
Une valeur de couleur (type {{cssxref("<color>")}}) qui décrit la couleur utilisée pour la bordure du côté gauche.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.maboite {
+  border: solid 0.3em gold;
+  border-left-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}
+ +

HTML

+ +
<div class="maboite">
+  <p>Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     <span class="texterouge">rouge</span>.</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-color', 'border-color')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type {{cssxref("<color>")}} qui a été étendu.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-left-color')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-left-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés raccourcies liées aux bordures +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-left")}},
      • +
    • {{cssxref("border-color")}}.
      • +
    +
    • +
  • Les propriétés de couleur pour les autres bordures : +
      +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-right-color")}}.
      • +
    +
    • +
  • Les autres propriétés liées à la bordure gauche : +
      +
    • {{cssxref("border-left-style")}},
      • +
    • {{cssxref("border-left-width")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html deleted file mode 100644 index 3bb7d560f3..0000000000 --- a/files/fr/web/css/border-left-style/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: border-left-style -slug: Web/CSS/border-left-style -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-left-style ---- -
{{CSSRef}}
- -

La propriété border-left-style définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-border-left-style: none;
-border-left-style: hidden;
-border-left-style: dotted;
-border-left-style: dashed;
-border-left-style: solid;
-border-left-style: double;
-border-left-style: groove;
-border-left-style: ridge;
-border-left-style: inset;
-border-left-style: outset;
-
-/* Valeurs globales */
-border-left-style: inherit;
-border-left-style: initial;
-border-left-style: unset;
-
- -

Valeurs

- -
-
<br-style>
-
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
noneL'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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

-
-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
/* On applique un style sur le tableau */
-table {
-  border-width: 2px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
-
-/* Des exemples pour border-left-style */
-.b1 {border-left-style:none;}
-.b2 {border-left-style:hidden;}
-.b3 {border-left-style:dotted;}
-.b4 {border-left-style:dashed;}
-.b5 {border-left-style:solid;}
-.b6 {border-left-style:double;}
-.b7 {border-left-style:groove;}
-.b8 {border-left-style:ridge;}
-.b9 {border-left-style:inset;}
-.b10 {border-left-style:outset;}
- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">petits points</td>
-    <td class="b4">tirets</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 300, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-left-style")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés liées au style des bordures : -
      -
    • {{cssxref("border-right-style")}}
      • -
    • {{cssxref("border-top-style")}}
      • -
    • {{cssxref("border-bottom-style")}}
      • -
    • {{cssxref("border-style")}}.
      • -
    -
    • -
  • Les autres propriétés liées à la bordure gauche : -
      -
    • {{cssxref("border-left")}}
      • -
    • {{cssxref("border-left-color")}}
      • -
    • {{cssxref("border-left-width")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-left-style/index.md b/files/fr/web/css/border-left-style/index.md new file mode 100644 index 0000000000..3bb7d560f3 --- /dev/null +++ b/files/fr/web/css/border-left-style/index.md @@ -0,0 +1,196 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-left-style +--- +
{{CSSRef}}
+ +

La propriété border-left-style définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* Valeurs globales */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+
+ +

Valeurs

+ +
+
<br-style>
+
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
noneL'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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

+
+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-left-style */
+.b1 {border-left-style:none;}
+.b2 {border-left-style:hidden;}
+.b3 {border-left-style:dotted;}
+.b4 {border-left-style:dashed;}
+.b5 {border-left-style:solid;}
+.b6 {border-left-style:double;}
+.b7 {border-left-style:groove;}
+.b8 {border-left-style:ridge;}
+.b9 {border-left-style:inset;}
+.b10 {border-left-style:outset;}
+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-left-style")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés liées au style des bordures : +
      +
    • {{cssxref("border-right-style")}}
      • +
    • {{cssxref("border-top-style")}}
      • +
    • {{cssxref("border-bottom-style")}}
      • +
    • {{cssxref("border-style")}}.
      • +
    +
    • +
  • Les autres propriétés liées à la bordure gauche : +
      +
    • {{cssxref("border-left")}}
      • +
    • {{cssxref("border-left-color")}}
      • +
    • {{cssxref("border-left-width")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-left-width/index.html b/files/fr/web/css/border-left-width/index.html deleted file mode 100644 index 5c218977d1..0000000000 --- a/files/fr/web/css/border-left-width/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: border-left-width -slug: Web/CSS/border-left-width -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-left-width ---- -
{{CSSRef}}
- -

La propriété border-left-width définit l'épaisseur de la bordure pour le côté gauche d'un élément.

- -
{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
- -

Syntaxe

- -
/* Une valeur de longueur */
-/* Type <length>          */
-border-left-width: 10em;
-border-left-width: 3vmax;
-border-left-width: 6px;
-
-/* Valeurs avec un mot-clé */
-border-left-width: thin;
-border-left-width: medium;
-border-left-width: thick;
-
-/* Valeurs globales */
-border-left-width: inherit;
-border-left-width: initial;
-border-left-width: unset;
-
- -

Valeurs

- -
-
<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 (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.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.element1{
-  border-left-width: thick;
-  border-left-style: solid;
-  border-left-color: red;
-}
-.element2{
-  border-left-width: medium;
-  border-left-style: solid;
-  border-left-color: orange;
-}
-.element3{
-  border-left-width: thin;
-  border-left-style: solid;
-  border-left-color: green;
-}
-
- -

HTML

- -
<p class="element1">
-  Une bordure épaisse rouge.
-</p>
-
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
-
-<p class="element3">
-  Et une bordure fine verte.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}{{Spec2('CSS2.1')}}Pas de modification significative.
{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-left-width")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés liées à la largeur de la bordure : -
      -
    • {{cssxref("border-right-width")}},
      • -
    • {{cssxref("border-top-width")}},
      • -
    • {{cssxref("border-bottom-width")}},
      • -
    • {{cssxref("border-width")}}
      • -
    -
    • -
  • Les autres propriétés CSS liées à la bordure du côté gauche : -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-left")}},
      • -
    • {{cssxref("border-left-style")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-left-width/index.md b/files/fr/web/css/border-left-width/index.md new file mode 100644 index 0000000000..5c218977d1 --- /dev/null +++ b/files/fr/web/css/border-left-width/index.md @@ -0,0 +1,145 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-left-width +--- +
{{CSSRef}}
+ +

La propriété border-left-width définit l'épaisseur de la bordure pour le côté gauche d'un élément.

+ +
{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
+ +

Syntaxe

+ +
/* Une valeur de longueur */
+/* Type <length>          */
+border-left-width: 10em;
+border-left-width: 3vmax;
+border-left-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-left-width: thin;
+border-left-width: medium;
+border-left-width: thick;
+
+/* Valeurs globales */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+
+ +

Valeurs

+ +
+
<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 (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.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.element1{
+  border-left-width: thick;
+  border-left-style: solid;
+  border-left-color: red;
+}
+.element2{
+  border-left-width: medium;
+  border-left-style: solid;
+  border-left-color: orange;
+}
+.element3{
+  border-left-width: thin;
+  border-left-style: solid;
+  border-left-color: green;
+}
+
+ +

HTML

+ +
<p class="element1">
+  Une bordure épaisse rouge.
+</p>
+
+<p class="element2">
+  Une bordure moyenne orange.
+</p>
+
+<p class="element3">
+  Et une bordure fine verte.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}{{Spec2('CSS2.1')}}Pas de modification significative.
{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-left-width")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés liées à la largeur de la bordure : +
      +
    • {{cssxref("border-right-width")}},
      • +
    • {{cssxref("border-top-width")}},
      • +
    • {{cssxref("border-bottom-width")}},
      • +
    • {{cssxref("border-width")}}
      • +
    +
    • +
  • Les autres propriétés CSS liées à la bordure du côté gauche : +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-left")}},
      • +
    • {{cssxref("border-left-style")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-left/index.html b/files/fr/web/css/border-left/index.html deleted file mode 100644 index bd60bc0f95..0000000000 --- a/files/fr/web/css/border-left/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: border-left -slug: Web/CSS/border-left -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-left ---- -
{{CSSRef}}
- -

La propriété border-left est une propriété raccourcie qui permet de définir la bordure gauche d'un élément

- -

Cette propriété raccourcie définit les valeurs des propriétés détaillées suivantes :

- -
    -
  • {{cssxref("border-left-width")}},
    • -
  • {{cssxref("border-left-style")}},
    • -
  • {{cssxref("border-left-color")}}.
    • -
- -

Ces propriétés permettent de décrire la bordure du côté gauche d'un élément.

- -
{{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.

- -

Comme pour les autres propriétés raccourcies, border-left 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 :

- -
  border-left-style: dotted;
-  border-left: thick green;
-
- -

est équivalent à :

- -
  border-left-style: dotted;
-  border-left: none thick green;
-
- -

 et la valeur {{cssxref("border-left-style")}} fournie avant border-left est ignorée.

- -

La valeur par défaut de {{cssxref("border-left-style")}} étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

-
- -

Syntaxe

- -
border-left: 1px;
-border-left: 2px dotted;
-border-left: medium dashed green;
-
- -

Valeurs

- -
-
<br-width> 
-
Voir {{cssxref("border-left-width")}}.
-
<br-style> 
-
Voir {{cssxref("border-left-style")}}.
-
<color> 
-
Voir {{cssxref("border-left-color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border-left: 3px dotted orange;
-}
- -

HTML

- -
<p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
-  « MARMELADE D’ORANGES. »
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","150")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-left', 'border-left')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-left-color")}} s'applique.
{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#border-left', 'border-left')}}{{Spec2('CSS1')}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-left")}}

diff --git a/files/fr/web/css/border-left/index.md b/files/fr/web/css/border-left/index.md new file mode 100644 index 0000000000..bd60bc0f95 --- /dev/null +++ b/files/fr/web/css/border-left/index.md @@ -0,0 +1,122 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-left +--- +
{{CSSRef}}
+ +

La propriété border-left est une propriété raccourcie qui permet de définir la bordure gauche d'un élément

+ +

Cette propriété raccourcie définit les valeurs des propriétés détaillées suivantes :

+ +
    +
  • {{cssxref("border-left-width")}},
    • +
  • {{cssxref("border-left-style")}},
    • +
  • {{cssxref("border-left-color")}}.
    • +
+ +

Ces propriétés permettent de décrire la bordure du côté gauche d'un élément.

+ +
{{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.

+ +

Comme pour les autres propriétés raccourcies, border-left 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 :

+ +
  border-left-style: dotted;
+  border-left: thick green;
+
+ +

est équivalent à :

+ +
  border-left-style: dotted;
+  border-left: none thick green;
+
+ +

 et la valeur {{cssxref("border-left-style")}} fournie avant border-left est ignorée.

+ +

La valeur par défaut de {{cssxref("border-left-style")}} étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

+
+ +

Syntaxe

+ +
border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+
+ +

Valeurs

+ +
+
<br-width> 
+
Voir {{cssxref("border-left-width")}}.
+
<br-style> 
+
Voir {{cssxref("border-left-style")}}.
+
<color> 
+
Voir {{cssxref("border-left-color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border-left: 3px dotted orange;
+}
+ +

HTML

+ +
<p class="exemple">
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","150")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-left', 'border-left')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-left-color")}} s'applique.
{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#border-left', 'border-left')}}{{Spec2('CSS1')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-left")}}

diff --git a/files/fr/web/css/border-radius/index.html b/files/fr/web/css/border-radius/index.html deleted file mode 100644 index 540cf83bc4..0000000000 --- a/files/fr/web/css/border-radius/index.html +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: border-radius -slug: Web/CSS/border-radius -tags: - - CSS - - Propriété - - Reference - - Web -translation_of: Web/CSS/border-radius ---- -
{{CSSRef}}
- -

La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.

- -
{{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 :

- -
    -
  • {{cssxref("border-top-left-radius")}},
    • -
  • {{cssxref("border-top-right-radius")}},
    • -
  • {{cssxref("border-bottom-right-radius")}},
    • -
  • {{cssxref("border-bottom-left-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.

-
- -

Syntaxe

- -
/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */
-/* On utilise le même rayon pour les quatre angles */
-border-radius: 10px;
-
-/* 1. coin en haut à gauche et en bas à droite      */
-/* 2. puis coin en haut à droite et en bas à gauche */
-border-radius: 10px 5%;
-
-/* 1. coin en haut à gauche                    */
-/* 2. coin en haut à droite et en bas à gauche */
-/* 3. coin en bas à droite                     */
-border-radius: 2px 4px 2px;
-
-/* 1. coin en haut à gauche */
-/* 2. coin en haut à droite */
-/* 3. coin en bas à droite  */
-/* 4. coin en bas à gauche  */
-border-radius: 1px 0 3px 4px;
-
-/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */
-/* On sépare les rayons horizontaux des verticaux par une barre oblique    */
-/* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */
-border-radius: 10px 5% / 20px;
-
-/* rayons horizontaux puis / puis rayons verticaux */
-/* 1. coin en haut à gauche et en bas à droite      */
-/* 2. puis coin en haut à droite et en bas à gauche */
-border-radius: 10px 5% / 20px 30px;
-
-/* rayons horizontaux puis / puis rayons verticaux */
-/* 1. coin en haut à gauche                        */
-/* 2. coin en haut à droite et en bas à gauche     */
-/* 3. coin en bas à droite                         */
-border-radius: 10px 5px 2em / 20px 25px 30%;
-
-/* rayons horizontaux puis / puis rayons verticaux */
-/* 1. coin en haut à gauche                        */
-/* 2. coin en haut à droite                        */
-/* 3. coin en bas à droite                         */
-/* 4. coin en bas à gauche                         */
-border-radius: 10px 5% / 20px 25em 30px 35em;
-
-/* Valeurs globales */
-border-radius: inherit;
-border-radius: initial;
-border-radius: unset;
-
- -

La propriété border-radius peut être définie avec :

- -
    -
  • une, deux, trois voire quatre valeurs de longueur (<length>) ou de pourcentages (<percentage>). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle.
    • -
  • puis éventuellement une barre oblique (/) suivie d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage qui permettent de définir un rayon de courbure supplémentaire pour créer des coins elliptiques.
    • -
- -

Valeurs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Une seule valeurUne 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)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)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 à gaucheUne 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 à droiteUne 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 à droiteUne 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 à gaucheUne 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>
-
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>
-
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.
-
- -

Ainsi :

- -
border-radius: 1em/5em;
-
-/* est équivalent à */
-
-border-top-left-radius:     1em 5em;
-border-top-right-radius:    1em 5em;
-border-bottom-right-radius: 1em 5em;
-border-bottom-left-radius:  1em 5em;
-
- -
border-radius: 4px 3px 6px / 2px 4px;
-
-/* est équivalent à : */
-
-border-top-left-radius:     4px 2px;
-border-top-right-radius:    3px 4px;
-border-bottom-right-radius: 6px 2px;
-border-bottom-left-radius:  3px 4px;
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  height: 100px;
-  width: 200px;
-  border-style: solid;
-  border-color: black;
-  background-color: palegreen;
-}
-
-.arrondi_droit {
-  border-radius: 10px 40px 40px 10px;
-}
-
-.ellipse {
-  border-radius: 50%;
-}
-
-.pointille {
-  border: dotted;
-  border-width: 10px 4px;
-  border-radius: 10px 40px;
-}
-
-.tirets {
-  border: dashed;
-  border-width: 2px 4px;
-  border-radius: 40px;
-
-}
-
-.slash {
-  border-radius: 13em/3em;
-}
-
- -

HTML

- -
<div class="arrondi_droit"></div>
-
-<div class="ellipse"></div>
-
-<div class="tirets"></div>
-
-<div class="pointille"></div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","400")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-radius")}}

- -

Voir aussi

- -
    -
  • Les propriétés liées à la courbure de la bordure -
      -
    • {{cssxref("border-top-left-radius")}},
      • -
    • {{cssxref("border-top-right-radius")}},
      • -
    • {{cssxref("border-bottom-right-radius")}},
      • -
    • {{cssxref("border-bottom-left-radius")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-radius/index.md b/files/fr/web/css/border-radius/index.md new file mode 100644 index 0000000000..540cf83bc4 --- /dev/null +++ b/files/fr/web/css/border-radius/index.md @@ -0,0 +1,254 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - Propriété + - Reference + - Web +translation_of: Web/CSS/border-radius +--- +
{{CSSRef}}
+ +

La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.

+ +
{{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 :

+ +
    +
  • {{cssxref("border-top-left-radius")}},
    • +
  • {{cssxref("border-top-right-radius")}},
    • +
  • {{cssxref("border-bottom-right-radius")}},
    • +
  • {{cssxref("border-bottom-left-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.

+
+ +

Syntaxe

+ +
/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */
+/* On utilise le même rayon pour les quatre angles */
+border-radius: 10px;
+
+/* 1. coin en haut à gauche et en bas à droite      */
+/* 2. puis coin en haut à droite et en bas à gauche */
+border-radius: 10px 5%;
+
+/* 1. coin en haut à gauche                    */
+/* 2. coin en haut à droite et en bas à gauche */
+/* 3. coin en bas à droite                     */
+border-radius: 2px 4px 2px;
+
+/* 1. coin en haut à gauche */
+/* 2. coin en haut à droite */
+/* 3. coin en bas à droite  */
+/* 4. coin en bas à gauche  */
+border-radius: 1px 0 3px 4px;
+
+/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */
+/* On sépare les rayons horizontaux des verticaux par une barre oblique    */
+/* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */
+border-radius: 10px 5% / 20px;
+
+/* rayons horizontaux puis / puis rayons verticaux */
+/* 1. coin en haut à gauche et en bas à droite      */
+/* 2. puis coin en haut à droite et en bas à gauche */
+border-radius: 10px 5% / 20px 30px;
+
+/* rayons horizontaux puis / puis rayons verticaux */
+/* 1. coin en haut à gauche                        */
+/* 2. coin en haut à droite et en bas à gauche     */
+/* 3. coin en bas à droite                         */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* rayons horizontaux puis / puis rayons verticaux */
+/* 1. coin en haut à gauche                        */
+/* 2. coin en haut à droite                        */
+/* 3. coin en bas à droite                         */
+/* 4. coin en bas à gauche                         */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Valeurs globales */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+
+ +

La propriété border-radius peut être définie avec :

+ +
    +
  • une, deux, trois voire quatre valeurs de longueur (<length>) ou de pourcentages (<percentage>). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle.
    • +
  • puis éventuellement une barre oblique (/) suivie d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage qui permettent de définir un rayon de courbure supplémentaire pour créer des coins elliptiques.
    • +
+ +

Valeurs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Une seule valeurUne 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)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)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 à gaucheUne 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 à droiteUne 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 à droiteUne 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 à gaucheUne 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>
+
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>
+
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.
+
+ +

Ainsi :

+ +
border-radius: 1em/5em;
+
+/* est équivalent à */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* est équivalent à : */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  height: 100px;
+  width: 200px;
+  border-style: solid;
+  border-color: black;
+  background-color: palegreen;
+}
+
+.arrondi_droit {
+  border-radius: 10px 40px 40px 10px;
+}
+
+.ellipse {
+  border-radius: 50%;
+}
+
+.pointille {
+  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+}
+
+.tirets {
+  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+}
+
+.slash {
+  border-radius: 13em/3em;
+}
+
+ +

HTML

+ +
<div class="arrondi_droit"></div>
+
+<div class="ellipse"></div>
+
+<div class="tirets"></div>
+
+<div class="pointille"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","400")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-radius")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés liées à la courbure de la bordure +
      +
    • {{cssxref("border-top-left-radius")}},
      • +
    • {{cssxref("border-top-right-radius")}},
      • +
    • {{cssxref("border-bottom-right-radius")}},
      • +
    • {{cssxref("border-bottom-left-radius")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-right-color/index.html b/files/fr/web/css/border-right-color/index.html deleted file mode 100644 index 7ec0703a27..0000000000 --- a/files/fr/web/css/border-right-color/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: border-right-color -slug: Web/CSS/border-right-color -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-right-color ---- -
{{CSSRef}}
- -

La propriété border-right-color définit la couleur utilisée pour la bordure droite d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-right")}}.

- -
{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
- -

Syntaxe

- -
/* Valeurs de type <color> */
-border-right-color: red;
-border-right-color: rgb(255, 128, 0);
-border-right-color: hsla(100%, 50%, 25%, 0.75);
-border-right-color: #ffbb00;
-border-right-color: currentColor;
-border-right-color: transparent;
-
-/* Valeurs globales */
-border-right-color: inherit;
-border-right-color: initial;
-border-right-color: unset;
-
- -

Valeurs

- -
-
<color>
-
Une valeur de couleur (type {{cssxref("<color>")}}) qui décrit la couleur utilisée pour la bordure du côté droit.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.maboite {
-  border: solid 0.3em gold;
-  border-right-color: red;
-  width: auto;
-}
-
-.texterouge {
-  color: red;
-}
- -

HTML

- -
<div class="maboite">
-  <p>Une boîte avec une bordure autour.
-     Notez le côté de la boîte qui est
-     <span class="texterouge">rouge</span>.</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type {{cssxref("<color>")}} qui a été étendu.
{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-right-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés raccourcies liées aux bordures -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-right")}},
      • -
    • {{cssxref("border-color")}}.
      • -
    -
    • -
  • Les propriétés de couleur pour les autres bordures : -
      -
    • {{cssxref("border-top-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • Les autres propriétés liées à la bordure droite : -
      -
    • {{cssxref("border-right-style")}},
      • -
    • {{cssxref("border-right-width")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-right-color/index.md b/files/fr/web/css/border-right-color/index.md new file mode 100644 index 0000000000..7ec0703a27 --- /dev/null +++ b/files/fr/web/css/border-right-color/index.md @@ -0,0 +1,122 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-right-color +--- +
{{CSSRef}}
+ +

La propriété border-right-color définit la couleur utilisée pour la bordure droite d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-right")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
+ +

Syntaxe

+ +
/* Valeurs de type <color> */
+border-right-color: red;
+border-right-color: rgb(255, 128, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: #ffbb00;
+border-right-color: currentColor;
+border-right-color: transparent;
+
+/* Valeurs globales */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+
+ +

Valeurs

+ +
+
<color>
+
Une valeur de couleur (type {{cssxref("<color>")}}) qui décrit la couleur utilisée pour la bordure du côté droit.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.maboite {
+  border: solid 0.3em gold;
+  border-right-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}
+ +

HTML

+ +
<div class="maboite">
+  <p>Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     <span class="texterouge">rouge</span>.</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type {{cssxref("<color>")}} qui a été étendu.
{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-right-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés raccourcies liées aux bordures +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-right")}},
      • +
    • {{cssxref("border-color")}}.
      • +
    +
    • +
  • Les propriétés de couleur pour les autres bordures : +
      +
    • {{cssxref("border-top-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • Les autres propriétés liées à la bordure droite : +
      +
    • {{cssxref("border-right-style")}},
      • +
    • {{cssxref("border-right-width")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-right-style/index.html b/files/fr/web/css/border-right-style/index.html deleted file mode 100644 index 13e84b546f..0000000000 --- a/files/fr/web/css/border-right-style/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: border-right-style -slug: Web/CSS/border-right-style -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-right-style ---- -
{{CSSRef}}
- -

La propriété border-right-style définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-border-right-style: none;
-border-right-style: hidden;
-border-right-style: dotted;
-border-right-style: dashed;
-border-right-style: solid;
-border-right-style: double;
-border-right-style: groove;
-border-right-style: ridge;
-border-right-style: inset;
-border-right-style: outset;
-
-/* Valeurs globales */
-border-right-style: inherit;
-border-right-style: initial;
-border-right-style: unset;
-
- -

Valeurs

- -
-
<br-style>
-
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté droit. Il peut prendre l'une des valeurs suivantes : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
noneL'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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

-
-
-
inherit
-
Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
/* On applique un style sur le tableau */
-table {
-  border-width: 2px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
-
-/* Des exemples pour border-right-style */
-.b1 {border-right-style:none;}
-.b2 {border-right-style:hidden;}
-.b3 {border-right-style:dotted;}
-.b4 {border-right-style:dashed;}
-.b5 {border-right-style:solid;}
-.b6 {border-right-style:double;}
-.b7 {border-right-style:groove;}
-.b8 {border-right-style:ridge;}
-.b9 {border-right-style:inset;}
-.b10 {border-right-style:outset;}
- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">petits points</td>
-    <td class="b4">tirets</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 300, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-right-style")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés liées au style des bordures : -
      -
    • {{cssxref("border-left-style")}}
      • -
    • {{cssxref("border-top-style")}}
      • -
    • {{cssxref("border-bottom-style")}}
      • -
    • {{cssxref("border-style")}}.
      • -
    -
    • -
  • Les autres propriétés liées à la bordure droite : -
      -
    • {{cssxref("border-right")}}
      • -
    • {{cssxref("border-right-color")}}
      • -
    • {{cssxref("border-right-width")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-right-style/index.md b/files/fr/web/css/border-right-style/index.md new file mode 100644 index 0000000000..13e84b546f --- /dev/null +++ b/files/fr/web/css/border-right-style/index.md @@ -0,0 +1,198 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-right-style +--- +
{{CSSRef}}
+ +

La propriété border-right-style définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* Valeurs globales */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+
+ +

Valeurs

+ +
+
<br-style>
+
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté droit. Il peut prendre l'une des valeurs suivantes : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
noneL'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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

+
+
+
inherit
+
Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-right-style */
+.b1 {border-right-style:none;}
+.b2 {border-right-style:hidden;}
+.b3 {border-right-style:dotted;}
+.b4 {border-right-style:dashed;}
+.b5 {border-right-style:solid;}
+.b6 {border-right-style:double;}
+.b7 {border-right-style:groove;}
+.b8 {border-right-style:ridge;}
+.b9 {border-right-style:inset;}
+.b10 {border-right-style:outset;}
+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-right-style")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés liées au style des bordures : +
      +
    • {{cssxref("border-left-style")}}
      • +
    • {{cssxref("border-top-style")}}
      • +
    • {{cssxref("border-bottom-style")}}
      • +
    • {{cssxref("border-style")}}.
      • +
    +
    • +
  • Les autres propriétés liées à la bordure droite : +
      +
    • {{cssxref("border-right")}}
      • +
    • {{cssxref("border-right-color")}}
      • +
    • {{cssxref("border-right-width")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-right-width/index.html b/files/fr/web/css/border-right-width/index.html deleted file mode 100644 index f2233827aa..0000000000 --- a/files/fr/web/css/border-right-width/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: border-right-width -slug: Web/CSS/border-right-width -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-right-width ---- -
{{CSSRef}}
- -

La propriété border-right-width définit l'épaisseur de la bordure pour le côté droit d'une boîte.

- -
{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-border-right-width: thin;
-border-right-width: medium;
-border-right-width: thick;
-
-/* Valeurs de longueurs */
-/* Type <length> */
-border-right-width: 10em;
-border-right-width: 3vmax;
-border-right-width: 6px;
-
-/* Valeurs globales */
-border-right-width: inherit;
-border-right-width: initial;
-border-right-width: unset;
- -

Valeurs

- -
-
<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 (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.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.element1{
-	border-right: thick solid red;
-}
-.element2{
-	border-right: medium solid orange;
-}
-.element3{
-	border-right: thin solid green;
-}
-
- -

HTML

- -
<p class="element1">
-  Une bordure épaisse rouge.
-</p>
-
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
-
-<p class="element3">
-  Et une bordure fine verte.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}{{Spec2('CSS2.1')}}Pas de modification significative.
{{SpecName('CSS1', '#border-right-width', 'border-right-width')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-right-width")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés liées à la largeur de la bordure : -
      -
    • {{cssxref("border-left-width")}},
      • -
    • {{cssxref("border-top-width")}},
      • -
    • {{cssxref("border-bottom-width")}},
      • -
    • {{cssxref("border-width")}}
      • -
    -
    • -
  • Les autres propriétés CSS liées à la bordure du côté droit : -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-right")}},
      • -
    • {{cssxref("border-right-style")}},
      • -
    • {{cssxref("border-right-color")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-right-width/index.md b/files/fr/web/css/border-right-width/index.md new file mode 100644 index 0000000000..f2233827aa --- /dev/null +++ b/files/fr/web/css/border-right-width/index.md @@ -0,0 +1,138 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-right-width +--- +
{{CSSRef}}
+ +

La propriété border-right-width définit l'épaisseur de la bordure pour le côté droit d'une boîte.

+ +
{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-right-width: thin;
+border-right-width: medium;
+border-right-width: thick;
+
+/* Valeurs de longueurs */
+/* Type <length> */
+border-right-width: 10em;
+border-right-width: 3vmax;
+border-right-width: 6px;
+
+/* Valeurs globales */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;
+ +

Valeurs

+ +
+
<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 (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.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.element1{
+	border-right: thick solid red;
+}
+.element2{
+	border-right: medium solid orange;
+}
+.element3{
+	border-right: thin solid green;
+}
+
+ +

HTML

+ +
<p class="element1">
+  Une bordure épaisse rouge.
+</p>
+
+<p class="element2">
+  Une bordure moyenne orange.
+</p>
+
+<p class="element3">
+  Et une bordure fine verte.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}{{Spec2('CSS2.1')}}Pas de modification significative.
{{SpecName('CSS1', '#border-right-width', 'border-right-width')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-right-width")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés liées à la largeur de la bordure : +
      +
    • {{cssxref("border-left-width")}},
      • +
    • {{cssxref("border-top-width")}},
      • +
    • {{cssxref("border-bottom-width")}},
      • +
    • {{cssxref("border-width")}}
      • +
    +
    • +
  • Les autres propriétés CSS liées à la bordure du côté droit : +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-right")}},
      • +
    • {{cssxref("border-right-style")}},
      • +
    • {{cssxref("border-right-color")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-right/index.html b/files/fr/web/css/border-right/index.html deleted file mode 100644 index 9c33a5c287..0000000000 --- a/files/fr/web/css/border-right/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: border-right -slug: Web/CSS/border-right -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-right ---- -
{{CSSRef}}
- -

La propriété border-right est une propriété raccourcie qui permet de décrire la bordure droite d'un élément.

- -

Elle définit les valeurs des propriétés suivantes :

- -
    -
  • {{cssxref("border-right-width")}},
    • -
  • {{cssxref("border-right-style")}},
    • -
  • {{cssxref("border-right-color")}}.
    • -
- -
{{EmbedInteractiveExample("pages/css/border-right.html")}}
- -

Ces propriétés permettent de décrire la bordure du côté droit d'un élément.

- -
-

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.

- -

Comme pour les autres propriétés raccourcies, border-right 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 :

- -
  border-right-style: dotted;
-  border-right: thick green;
-
- -

est équivalent à :

- -
  border-right-style: dotted;
-  border-right: none thick green;
-
- -

 et la valeur {{cssxref("border-right-style")}} fournie avant border-right est ignorée.

- -

La valeur par défaut de {{cssxref("border-right-style")}} étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

-
- -

Syntaxe

- -
border-right: 1px;
-border-right: 2px dotted;
-border-right: medium dashed green;
-
- -

Valeurs

- -
-
<br-width> 
-
Voir {{cssxref("border-right-width")}}.
-
<br-style> 
-
Voir {{cssxref("border-right-style")}}.
-
<color> 
-
Voir {{cssxref("border-right-color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border-right: 3px dotted orange;
-}
- -

HTML

- -
<p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
-  « MARMELADE D’ORANGES. »
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","150")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-right-color")}} s'applique.
{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#border-right', 'border-right')}}{{Spec2('CSS1')}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-right")}}

diff --git a/files/fr/web/css/border-right/index.md b/files/fr/web/css/border-right/index.md new file mode 100644 index 0000000000..9c33a5c287 --- /dev/null +++ b/files/fr/web/css/border-right/index.md @@ -0,0 +1,122 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-right +--- +
{{CSSRef}}
+ +

La propriété border-right est une propriété raccourcie qui permet de décrire la bordure droite d'un élément.

+ +

Elle définit les valeurs des propriétés suivantes :

+ +
    +
  • {{cssxref("border-right-width")}},
    • +
  • {{cssxref("border-right-style")}},
    • +
  • {{cssxref("border-right-color")}}.
    • +
+ +
{{EmbedInteractiveExample("pages/css/border-right.html")}}
+ +

Ces propriétés permettent de décrire la bordure du côté droit d'un élément.

+ +
+

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.

+ +

Comme pour les autres propriétés raccourcies, border-right 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 :

+ +
  border-right-style: dotted;
+  border-right: thick green;
+
+ +

est équivalent à :

+ +
  border-right-style: dotted;
+  border-right: none thick green;
+
+ +

 et la valeur {{cssxref("border-right-style")}} fournie avant border-right est ignorée.

+ +

La valeur par défaut de {{cssxref("border-right-style")}} étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

+
+ +

Syntaxe

+ +
border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+
+ +

Valeurs

+ +
+
<br-width> 
+
Voir {{cssxref("border-right-width")}}.
+
<br-style> 
+
Voir {{cssxref("border-right-style")}}.
+
<color> 
+
Voir {{cssxref("border-right-color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border-right: 3px dotted orange;
+}
+ +

HTML

+ +
<p class="exemple">
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","150")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-right-color")}} s'applique.
{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#border-right', 'border-right')}}{{Spec2('CSS1')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-right")}}

diff --git a/files/fr/web/css/border-spacing/index.html b/files/fr/web/css/border-spacing/index.html deleted file mode 100644 index f6e0d18643..0000000000 --- a/files/fr/web/css/border-spacing/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: border-spacing -slug: Web/CSS/border-spacing -tags: - - CSS - - Propriété - - Reference - - Tableaux CSS -translation_of: Web/CSS/border-spacing ---- -
{{CSSRef}}
- -

La propriété border-spacing définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque {{cssxref("border-collapse")}} vaut separate). Cette propriété est équivalente à l'attribut HTML déprécié {{htmlattrxref("cellspacing","table")}} mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.

- -
{{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.

-
- -

Syntaxe

- -
/* Une valeur de longueur */
-/* Type <length>         */
-border-spacing: 2px;
-
-/* La première valeur indique */
-/* l'espacement horizontal et */
-/* la seconde le vertical.    */
-border-spacing: 1cm 2em;
-
-/* Valeurs globales */
-border-spacing: inherit;
-border-spacing: initial;
-border-spacing: unset;
-
- -

La propriété border-spacing peut être définie avec une ou deux valeurs :

- -
    -
  • Avec une valeur de type {{cssxref("<length>")}}, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.
    • -
  • Avec deux valeurs de type {{cssxref("<length>")}}, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).
    • -
- -

Valeurs

- -
-
length
-
Une valeur de longueur ({{cssxref("<length>")}} qui décrit l'espacement entre les cellules.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
table {
-  border-collapse: separate;
-  border: 1px solid #000;
-}
-
-td {
-  border: 1px solid #000;
-  padding: 5px;
-}
-
-.unevaleur {
-  border-spacing: 5px;
-}
-
-.deuxvaleurs {
-  border-spacing: 5px 10px;
-}
- -

HTML

- -
<table class="unevaleur">
-  <tr>
-    <td>Ces cellules</td>
-    <td>sont séparées par 5px</td>
-    <td>tout autour.</td>
-  </tr>
-</table>
-<br />
-<table class="deuxvaleurs">
-  <tr>
-    <td>Ces cellules</td>
-    <td>sont séparées par 5px d'écart horizontal</td>
-    <td>et 10px d'écart vertical.</td>
-  </tr>
-</table>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-spacing")}}

- -

Voir auss

- -
    -
  • {{cssxref("border-collapse")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • L'élément HTML {{htmlelement("table")}}
    • -
diff --git a/files/fr/web/css/border-spacing/index.md b/files/fr/web/css/border-spacing/index.md new file mode 100644 index 0000000000..f6e0d18643 --- /dev/null +++ b/files/fr/web/css/border-spacing/index.md @@ -0,0 +1,133 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - Propriété + - Reference + - Tableaux CSS +translation_of: Web/CSS/border-spacing +--- +
{{CSSRef}}
+ +

La propriété border-spacing définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque {{cssxref("border-collapse")}} vaut separate). Cette propriété est équivalente à l'attribut HTML déprécié {{htmlattrxref("cellspacing","table")}} mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Une valeur de longueur */
+/* Type <length>         */
+border-spacing: 2px;
+
+/* La première valeur indique */
+/* l'espacement horizontal et */
+/* la seconde le vertical.    */
+border-spacing: 1cm 2em;
+
+/* Valeurs globales */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+
+ +

La propriété border-spacing peut être définie avec une ou deux valeurs :

+ +
    +
  • Avec une valeur de type {{cssxref("<length>")}}, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.
    • +
  • Avec deux valeurs de type {{cssxref("<length>")}}, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).
    • +
+ +

Valeurs

+ +
+
length
+
Une valeur de longueur ({{cssxref("<length>")}} qui décrit l'espacement entre les cellules.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
table {
+  border-collapse: separate;
+  border: 1px solid #000;
+}
+
+td {
+  border: 1px solid #000;
+  padding: 5px;
+}
+
+.unevaleur {
+  border-spacing: 5px;
+}
+
+.deuxvaleurs {
+  border-spacing: 5px 10px;
+}
+ +

HTML

+ +
<table class="unevaleur">
+  <tr>
+    <td>Ces cellules</td>
+    <td>sont séparées par 5px</td>
+    <td>tout autour.</td>
+  </tr>
+</table>
+<br />
+<table class="deuxvaleurs">
+  <tr>
+    <td>Ces cellules</td>
+    <td>sont séparées par 5px d'écart horizontal</td>
+    <td>et 10px d'écart vertical.</td>
+  </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-spacing")}}

+ +

Voir auss

+ +
    +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • L'élément HTML {{htmlelement("table")}}
    • +
diff --git a/files/fr/web/css/border-start-end-radius/index.html b/files/fr/web/css/border-start-end-radius/index.html deleted file mode 100644 index 4c658bcdc7..0000000000 --- a/files/fr/web/css/border-start-end-radius/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: border-start-end-radius -slug: Web/CSS/border-start-end-radius -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-start-end-radius ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-start-end-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
/* Valeurs de longueur */
-/* Type <length> */
-/* Avec une valeur, le coin sera circulaire */
-border-start-end-radius: 10px;
-border-start-end-radius: 1em;
-
-/* Avec deux valeurs, le coin sera une ellipse */
-border-start-end-radius: 1em 2em;
-
-/* Valeurs globales */
-border-start-end-radius: inherit;
-border-start-end-radius: initial;
-border-start-end-radius: unset;
-
- -

Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-left-radius")}}.

- -

Syntaxe

- -

Valeurs

- -
-
<length-percentage>
-
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("<length>")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: rebeccapurple;
-  width: 120px;
-  height: 120px;
-  border-start-end-radius: 10px;
-}
-
-.texteExemple {
-  writing-mode: vertical-rl;
-  padding: 10px;
-  background-color: #fff;
-  border-start-end-radius: 10px;
-}
- -

HTML

- -
<div>
-  <p class="texteExemple">Exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{CSSInfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-start-end-radius")}}

- -

Voir aussi

- -
    -
  • La propriété physique correspondante : {{CSSxRef("border-bottom-left-radius")}}
    • -
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-start-end-radius/index.md b/files/fr/web/css/border-start-end-radius/index.md new file mode 100644 index 0000000000..4c658bcdc7 --- /dev/null +++ b/files/fr/web/css/border-start-end-radius/index.md @@ -0,0 +1,105 @@ +--- +title: border-start-end-radius +slug: Web/CSS/border-start-end-radius +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-start-end-radius +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-start-end-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+/* Avec une valeur, le coin sera circulaire */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-start-end-radius: 1em 2em;
+
+/* Valeurs globales */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+
+ +

Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-left-radius")}}.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<length-percentage>
+
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("<length>")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-end-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-end-radius: 10px;
+}
+ +

HTML

+ +
<div>
+  <p class="texteExemple">Exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-start-end-radius")}}

+ +

Voir aussi

+ +
    +
  • La propriété physique correspondante : {{CSSxRef("border-bottom-left-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-start-start-radius/index.html b/files/fr/web/css/border-start-start-radius/index.html deleted file mode 100644 index 83c242af2a..0000000000 --- a/files/fr/web/css/border-start-start-radius/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: border-start-start-radius -slug: Web/CSS/border-start-start-radius -tags: - - CSS - - Experimental - - Propriété - - Propriété logique - - Reference -translation_of: Web/CSS/border-start-start-radius ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété border-start-start-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
/* Valeurs de longueur */
-/* Type <length> */
-/* Avec une valeur, le coin sera circulaire */
-border-start-start-radius: 10px;
-border-start-start-radius: 1em;
-
-/* Avec deux valeurs, le coin sera une ellipse */
-border-start-start-radius: 1em 2em;
-
-/* Valeurs globales */
-border-start-start-radius: inherit;
-border-start-start-radius: initial;
-border-start-start-radius: unset;
-
- -

Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-left-radius")}}.

- -

Syntaxe

- -

Valeurs

- -
-
<length-percentage>
-
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("<length>")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

CSS

- -
div {
-background-color: rebeccapurple;
-width: 120px;
-height: 120px;
-  border-start-start-radius: 10px;
-}
-
-.texteExemple {
-writing-mode: vertical-rl;
-padding: 10px;
-background-color: #fff;
-  border-start-start-radius: 10px;
-}
- -

HTML

- -
<div>
-<p class="texteExemple">Exemple</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{CSSInfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-start-start-radius")}}

- -

Voir aussi

- -
    -
  • La propriété physique correspondante : {{CSSxRef("border-top-left-radius")}}
    • -
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • -
diff --git a/files/fr/web/css/border-start-start-radius/index.md b/files/fr/web/css/border-start-start-radius/index.md new file mode 100644 index 0000000000..83c242af2a --- /dev/null +++ b/files/fr/web/css/border-start-start-radius/index.md @@ -0,0 +1,105 @@ +--- +title: border-start-start-radius +slug: Web/CSS/border-start-start-radius +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/border-start-start-radius +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété border-start-start-radius définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+/* Avec une valeur, le coin sera circulaire */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-start-start-radius: 1em 2em;
+
+/* Valeurs globales */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+
+ +

Ainsi, avec un mode d'écriture horizontal-tb, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-left-radius")}}.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<length-percentage>
+
Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("<length>")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

CSS

+ +
div {
+background-color: rebeccapurple;
+width: 120px;
+height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.texteExemple {
+writing-mode: vertical-rl;
+padding: 10px;
+background-color: #fff;
+  border-start-start-radius: 10px;
+}
+ +

HTML

+ +
<div>
+<p class="texteExemple">Exemple</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-start-start-radius")}}

+ +

Voir aussi

+ +
    +
  • La propriété physique correspondante : {{CSSxRef("border-top-left-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/fr/web/css/border-style/index.html b/files/fr/web/css/border-style/index.html deleted file mode 100644 index 1ddbc35fff..0000000000 --- a/files/fr/web/css/border-style/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: border-style -slug: Web/CSS/border-style -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-style ---- -
{{CSSRef}}
- -

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")}}
Syntaxe - -
/* Valeurs avec un mot-clé */
-border-style: none;
-border-style: hidden;
-border-style: dotted;
-border-style: dashed;
-border-style: solid;
-border-style: double;
-border-style: groove;
-border-style: ridge;
-border-style: inset;
-border-style: outset;
-
-/*  côtés horizontaux | côtés verticaux */
-border-style: dotted solid;
-
-/* haut | côtés verticaux | bas */
-border-style: hidden double dashed;
-
-/* haut | droite | bas | gauche */
-border-style: none solid dotted dashed;
-
-/* Valeurs globales */
-border-style: inherit;
-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.

-
- -

La propriété border-style peut être définie avec une, deux, trois ou quatre valeurs :

- -
    -
  • Avec une valeur, celle-ci s'applique aux quatre côté
    • -
  • Avec deux valeurs, la première s'applique aux côté haut et bas et la seconde aux côtés gauche et droit
    • -
  • Avec trois valeurs, la première s'applique au côté haut, la deuxième aux côtés gauche et droit puis la troisième au côté bas
    • -
  • Avec quatre valeurs, les valeurs s'applique dans le sens des aiguilles d'une montre (la première sur le côté haut, la deuxième sur le côté droit, la troisième sur le côté bas et la quatrième sur le côté gauche).
    • -
- -

Chacune des valeurs peut être un des mots-clés parmi la liste suivante.

- -

Valeurs

- -
-
<line-style>
-
Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre 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-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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

-
-
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
/* On définit la mise en forme */
-/* du tableau.                 */
-table {
-    border-width: 3px;
-    background-color: #52E396;
-}
-tr, td {
-    padding: 2px;
-}
-
-/* voici des classes pour les exemples */
-.b1 {border-style:none;}
-.b2 {border-style:hidden;}
-.b3 {border-style:dotted;}
-.b4 {border-style:dashed;}
-.b5 {border-style:solid;}
-.b6 {border-style:double;}
-.b7 {border-style:groove;}
-.b8 {border-style:ridge;}
-.b9 {border-style:inset;}
-.b10 {border-style:outset;}
- -

HTML

- -
<table>
-    <tr>
-        <td class="b1">none</td>
-        <td class="b2">hidden</td>
-        <td class="b3">dotted</td>
-        <td class="b4">dashed</td>
-    </tr>
-    <tr>
-        <td class="b5">solid</td>
-        <td class="b6">double</td>
-        <td class="b7">groove</td>
-        <td class="b8">ridge</td>
-    </tr>
-    <tr>
-        <td class="b9">inset</td>
-        <td class="b10">outset</td>
-    </tr>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 300, 200)}}

- -

Spécific​ations

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification.
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}Ajout du mot-clé hidden.
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-style")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés raccourcies liées aux bordures : -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-width")}},
      • -
    • {{cssxref("border-color")}},
      • -
    • {{cssxref("border-radius")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-style/index.md b/files/fr/web/css/border-style/index.md new file mode 100644 index 0000000000..1ddbc35fff --- /dev/null +++ b/files/fr/web/css/border-style/index.md @@ -0,0 +1,218 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

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")}}
Syntaxe + +
/* Valeurs avec un mot-clé */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/*  côtés horizontaux | côtés verticaux */
+border-style: dotted solid;
+
+/* haut | côtés verticaux | bas */
+border-style: hidden double dashed;
+
+/* haut | droite | bas | gauche */
+border-style: none solid dotted dashed;
+
+/* Valeurs globales */
+border-style: inherit;
+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.

+
+ +

La propriété border-style peut être définie avec une, deux, trois ou quatre valeurs :

+ +
    +
  • Avec une valeur, celle-ci s'applique aux quatre côté
    • +
  • Avec deux valeurs, la première s'applique aux côté haut et bas et la seconde aux côtés gauche et droit
    • +
  • Avec trois valeurs, la première s'applique au côté haut, la deuxième aux côtés gauche et droit puis la troisième au côté bas
    • +
  • Avec quatre valeurs, les valeurs s'applique dans le sens des aiguilles d'une montre (la première sur le côté haut, la deuxième sur le côté droit, la troisième sur le côté bas et la quatrième sur le côté gauche).
    • +
+ +

Chacune des valeurs peut être un des mots-clés parmi la liste suivante.

+ +

Valeurs

+ +
+
<line-style>
+
Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre 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-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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

+
+
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
/* On définit la mise en forme */
+/* du tableau.                 */
+table {
+    border-width: 3px;
+    background-color: #52E396;
+}
+tr, td {
+    padding: 2px;
+}
+
+/* voici des classes pour les exemples */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

HTML

+ +
<table>
+    <tr>
+        <td class="b1">none</td>
+        <td class="b2">hidden</td>
+        <td class="b3">dotted</td>
+        <td class="b4">dashed</td>
+    </tr>
+    <tr>
+        <td class="b5">solid</td>
+        <td class="b6">double</td>
+        <td class="b7">groove</td>
+        <td class="b8">ridge</td>
+    </tr>
+    <tr>
+        <td class="b9">inset</td>
+        <td class="b10">outset</td>
+    </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 200)}}

+ +

Spécific​ations

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification.
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}Ajout du mot-clé hidden.
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-style")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés raccourcies liées aux bordures : +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-width")}},
      • +
    • {{cssxref("border-color")}},
      • +
    • {{cssxref("border-radius")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-top-color/index.html b/files/fr/web/css/border-top-color/index.html deleted file mode 100644 index 4abdfc1493..0000000000 --- a/files/fr/web/css/border-top-color/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: border-top-color -slug: Web/CSS/border-top-color -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-top-color ---- -
{{CSSRef}}
- -

La propriété border-top-color définit la couleur utilisée pour la bordure haute d'un élément.

- -

Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-top")}}.

- -
{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
- -

Syntaxe

- -
/* Valeurs de type <color> */
-border-top-color: red;
-border-top-color: #ffbb00;
-border-top-color: rgb(255, 0, 0);
-border-top-color: hsla(100%, 50%, 25%, 0.75);
-border-top-color: currentColor;
-border-top-color: transparent;
-
-/* Valeurs globales */
-border-top-color: inherit;
-border-top-color: initial;
-border-top-color: unset;
-
- -

Valeurs

- -
-
<color>
-
Une valeur de couleur (type {{cssxref("<color>")}}) qui décrit la couleur utilisée pour la bordure du côté haut.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.maboite {
-  border: solid 0.3em gold;
-  border-top-color: red;
-  width: auto;
-}
-
-.texterouge {
-  color: red;
-}
- -

HTML

- -
<div class="maboite">
-  <p>Une boîte avec une bordure autour.
-     Notez le côté de la boîte qui est
-     <span class="texterouge">rouge</span>.</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type {{cssxref("<color>")}} qui a été étendu.
{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-top-color")}}

- -

Voir aussi

- -
    -
  • Les propriétés raccourciées liées aux bordures -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-top")}},
      • -
    • {{cssxref("border-color")}}.
      • -
    -
    • -
  • Les propriétés de couleur pour les autres bordures : -
      -
    • {{cssxref("border-right-color")}},
      • -
    • {{cssxref("border-bottom-color")}},
      • -
    • {{cssxref("border-left-color")}}.
      • -
    -
    • -
  • Les autres propriétés liées à la bordure du haut : -
      -
    • {{cssxref("border-top-style")}},
      • -
    • {{cssxref("border-top-width")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-top-color/index.md b/files/fr/web/css/border-top-color/index.md new file mode 100644 index 0000000000..4abdfc1493 --- /dev/null +++ b/files/fr/web/css/border-top-color/index.md @@ -0,0 +1,124 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-top-color +--- +
{{CSSRef}}
+ +

La propriété border-top-color définit la couleur utilisée pour la bordure haute d'un élément.

+ +

Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-top")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
+ +

Syntaxe

+ +
/* Valeurs de type <color> */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* Valeurs globales */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+
+ +

Valeurs

+ +
+
<color>
+
Une valeur de couleur (type {{cssxref("<color>")}}) qui décrit la couleur utilisée pour la bordure du côté haut.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.maboite {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}
+ +

HTML

+ +
<div class="maboite">
+  <p>Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     <span class="texterouge">rouge</span>.</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type {{cssxref("<color>")}} qui a été étendu.
{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-top-color")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés raccourciées liées aux bordures +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-top")}},
      • +
    • {{cssxref("border-color")}}.
      • +
    +
    • +
  • Les propriétés de couleur pour les autres bordures : +
      +
    • {{cssxref("border-right-color")}},
      • +
    • {{cssxref("border-bottom-color")}},
      • +
    • {{cssxref("border-left-color")}}.
      • +
    +
    • +
  • Les autres propriétés liées à la bordure du haut : +
      +
    • {{cssxref("border-top-style")}},
      • +
    • {{cssxref("border-top-width")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-top-left-radius/index.html b/files/fr/web/css/border-top-left-radius/index.html deleted file mode 100644 index 0c34d5e94d..0000000000 --- a/files/fr/web/css/border-top-left-radius/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: border-top-left-radius -slug: Web/CSS/border-top-left-radius -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-top-left-radius ---- -
{{CSSRef}}
- -

La propriété border-top-left-radius définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. 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")}}.

- -
{{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.

-
- -

Syntaxe

- -
/* Le coin est un quart de cercle         */
-/* La valeur indique le rayon de courbure */
-border-top-left-radius: 3px;
-
-/* Le coin est un quart d'ellipse         */
-/* La première valeur indique le demi-axe */
-/* horizontal et la seconde le demi-axe   */
-/* vertical                               */
-border-top-left-radius: 0.5em 1em;
-
-border-top-left-radius: inherit;
-
- -

Cette propriété peut prendre deux formes :

- -
    -
  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
    • -
  • Une seconde avec deux valeurs -
      -
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
      • -
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
      • -
    -
    • -
- -

Valeurs

- -
-
<length-percentage>
-
La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: lightgreen;
-  border: solid 1px black;
-  width: 100px;
-  height: 130px;
-}
-
-.arc_cercle {
-  border-top-left-radius: 40px 40px;
-}
-
-.arc_ellipse {
-  border-top-left-radius: 40px 20px;
-}
-
-.pourcentage {
-  border-top-left-radius: 40%;
-}
-
-.rognage {
-  border: black 10px double;
-  border-top-left-radius: 40%;
-  background-color: rgb(250,20,70);
-  background-clip: content-box; // essayez margin-box...
-}
-
- -

HTML

- -
 <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","540")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-top-left-radius")}}

- -

Voir aussi

- -
    -
  • La propriété raccourcie {{cssxref("border-radius")}}
    • -
  • Les propriétés pour les autres coins : -
      -
    • {{cssxref("border-top-right-radius")}},
      • -
    • {{cssxref("border-bottom-right-radius")}},
      • -
    • {{cssxref("border-bottom-left-radius")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md new file mode 100644 index 0000000000..0c34d5e94d --- /dev/null +++ b/files/fr/web/css/border-top-left-radius/index.md @@ -0,0 +1,136 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-top-left-radius +--- +
{{CSSRef}}
+ +

La propriété border-top-left-radius définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. 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")}}.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-top-left-radius: 3px;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +

Cette propriété peut prendre deux formes :

+ +
    +
  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
    • +
  • Une seconde avec deux valeurs +
      +
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
      • +
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
      • +
    +
    • +
+ +

Valeurs

+ +
+
<length-percentage>
+
La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-top-left-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-top-left-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-top-left-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-top-left-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+
+ +

HTML

+ +
 <div class="arc_cercle"></div>
+ <div class="arc_ellipse"></div>
+ <div class="pourcentage"></div>
+ <div class="rognage"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","540")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-top-left-radius")}}

+ +

Voir aussi

+ +
    +
  • La propriété raccourcie {{cssxref("border-radius")}}
    • +
  • Les propriétés pour les autres coins : +
      +
    • {{cssxref("border-top-right-radius")}},
      • +
    • {{cssxref("border-bottom-right-radius")}},
      • +
    • {{cssxref("border-bottom-left-radius")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-top-right-radius/index.html b/files/fr/web/css/border-top-right-radius/index.html deleted file mode 100644 index 51c7324d0f..0000000000 --- a/files/fr/web/css/border-top-right-radius/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: border-top-right-radius -slug: Web/CSS/border-top-right-radius -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-top-right-radius ---- -
{{CSSRef}}
- -

La propriété border-top-right-radius définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. 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.

- -
{{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.

-
- -

Syntaxe

- -
/* Le coin est un quart de cercle         */
-/* La valeur indique le rayon de courbure */
-border-top-right-radius: 3px;
-
-/* Le coin est un quart d'ellipse         */
-/* La première valeur indique le demi-axe */
-/* horizontal et la seconde le demi-axe   */
-/* vertical                               */
-border-top-right-radius: 0.5em 1em;
-
-border-top-right-radius: inherit;
-
- -

Cette propriété peut prendre deux formes :

- -
    -
  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
    • -
  • Une seconde avec deux valeurs -
      -
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
      • -
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
      • -
    -
    • -
- -

Valeurs

- -
-
<length-percentage>
-
La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: lightgreen;
-  border: solid 1px black;
-  width: 100px;
-  height: 130px;
-}
-
-.arc_cercle {
-  border-top-right-radius: 40px 40px;
-}
-
-.arc_ellipse {
-  border-top-right-radius: 40px 20px;
-}
-
-.pourcentage {
-  border-top-right-radius: 40%;
-}
-
-.rognage {
-  border: black 10px double;
-  border-top-right-radius: 40%;
-  background-color: rgb(250,20,70);
-  background-clip: content-box; // essayez margin-box...
-}
-
- -

HTML

- -
 <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","540")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-top-right-radius")}}

- -

Voir aussi

- -
    -
  • La propriété raccourcie {{cssxref("border-radius")}}
    • -
  • Les propriétés pour les autres coins : -
      -
    • {{cssxref("border-top-left-radius")}},
      • -
    • {{cssxref("border-bottom-right-radius")}},
      • -
    • {{cssxref("border-bottom-left-radius")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-top-right-radius/index.md b/files/fr/web/css/border-top-right-radius/index.md new file mode 100644 index 0000000000..51c7324d0f --- /dev/null +++ b/files/fr/web/css/border-top-right-radius/index.md @@ -0,0 +1,138 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-top-right-radius +--- +
{{CSSRef}}
+ +

La propriété border-top-right-radius définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. 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.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-top-right-radius: 3px;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+
+ +

Cette propriété peut prendre deux formes :

+ +
    +
  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
    • +
  • Une seconde avec deux valeurs +
      +
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
      • +
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
      • +
    +
    • +
+ +

Valeurs

+ +
+
<length-percentage>
+
La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-top-right-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-top-right-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-top-right-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-top-right-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+
+ +

HTML

+ +
 <div class="arc_cercle"></div>
+ <div class="arc_ellipse"></div>
+ <div class="pourcentage"></div>
+ <div class="rognage"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","540")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-top-right-radius")}}

+ +

Voir aussi

+ +
    +
  • La propriété raccourcie {{cssxref("border-radius")}}
    • +
  • Les propriétés pour les autres coins : +
      +
    • {{cssxref("border-top-left-radius")}},
      • +
    • {{cssxref("border-bottom-right-radius")}},
      • +
    • {{cssxref("border-bottom-left-radius")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-top-style/index.html b/files/fr/web/css/border-top-style/index.html deleted file mode 100644 index aa175464ec..0000000000 --- a/files/fr/web/css/border-top-style/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: border-top-style -slug: Web/CSS/border-top-style -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-top-style ---- -
{{CSSRef}}
- -

La propriété border-top-style définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-border-top-style: none;
-border-top-style: hidden;
-border-top-style: dotted;
-border-top-style: dashed;
-border-top-style: solid;
-border-top-style: double;
-border-top-style: groove;
-border-top-style: ridge;
-border-top-style: inset;
-border-top-style: outset;
-
-/* Valeurs globales */
-border-top-style: inherit;
-border-top-style: inherit;
-border-top-style: inherit;
-
- -

Valeurs

- -
-
<br-style>
-
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté haut. Il peut prendre l'une des valeurs suivantes : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
noneL'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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

-
-
-
inherit
-
Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
/* On applique un style sur le tableau */
-table {
-  border-width: 2px;
-  background-color: #52E385;
-}
-tr, td {
-  padding: 3px;
-}
-
-/* Des exemples pour border-top-style */
-.b1 {border-top-style:none;}
-.b2 {border-top-style:hidden;}
-.b3 {border-top-style:dotted;}
-.b4 {border-top-style:dashed;}
-.b5 {border-top-style:solid;}
-.b6 {border-top-style:double;}
-.b7 {border-top-style:groove;}
-.b8 {border-top-style:ridge;}
-.b9 {border-top-style:inset;}
-.b10 {border-top-style:outset;}
- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">petits points</td>
-    <td class="b4">tirets</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 300, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-top-style")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés liées au style des bordures : -
      -
    • {{cssxref("border-left-style")}}
      • -
    • {{cssxref("border-right-style")}}
      • -
    • {{cssxref("border-bottom-style")}}
      • -
    • {{cssxref("border-style")}}.
      • -
    -
    • -
  • Les autres propriétés liées à la bordure haute : -
      -
    • {{cssxref("border-top")}}
      • -
    • {{cssxref("border-top-color")}}
      • -
    • {{cssxref("border-top-width")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-top-style/index.md b/files/fr/web/css/border-top-style/index.md new file mode 100644 index 0000000000..aa175464ec --- /dev/null +++ b/files/fr/web/css/border-top-style/index.md @@ -0,0 +1,198 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-top-style +--- +
{{CSSRef}}
+ +

La propriété border-top-style définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* Valeurs globales */
+border-top-style: inherit;
+border-top-style: inherit;
+border-top-style: inherit;
+
+ +

Valeurs

+ +
+
<br-style>
+
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté haut. Il peut prendre l'une des valeurs suivantes : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
noneL'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.
hiddenL'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.
dottedAffiche 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")}}.
dashedAffiche 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.
solidAffiche une ligne droite continue.
doubleDeux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.
grooveLa bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridgeLa bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
insetLa 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.

+
+
+
inherit
+
Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-top-style */
+.b1 {border-top-style:none;}
+.b2 {border-top-style:hidden;}
+.b3 {border-top-style:dotted;}
+.b4 {border-top-style:dashed;}
+.b5 {border-top-style:solid;}
+.b6 {border-top-style:double;}
+.b7 {border-top-style:groove;}
+.b8 {border-top-style:ridge;}
+.b9 {border-top-style:inset;}
+.b10 {border-top-style:outset;}
+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}{{Spec2('CSS3 Backgrounds')}}Aucune modification significative.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-top-style")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés liées au style des bordures : +
      +
    • {{cssxref("border-left-style")}}
      • +
    • {{cssxref("border-right-style")}}
      • +
    • {{cssxref("border-bottom-style")}}
      • +
    • {{cssxref("border-style")}}.
      • +
    +
    • +
  • Les autres propriétés liées à la bordure haute : +
      +
    • {{cssxref("border-top")}}
      • +
    • {{cssxref("border-top-color")}}
      • +
    • {{cssxref("border-top-width")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-top-width/index.html b/files/fr/web/css/border-top-width/index.html deleted file mode 100644 index e96b5ef89f..0000000000 --- a/files/fr/web/css/border-top-width/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: border-top-width -slug: Web/CSS/border-top-width -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-top-width ---- -
{{CSSRef}}
- -

La propriété border-top-width définit l'épaisseur de la bordure pour le côté haut d'une boîte.

- -
{{EmbedInteractiveExample("pages/css/border-top-width.html")}}
- -

Syntaxe

- -
/* Une valeur de longueur */
-/* Type <length>          */
-border-top-width: 10em;
-border-top-width: 3vmax;
-border-top-width: 6px;
-
-/* Valeurs avec un mot-clé */
-border-top-width: thin;
-border-top-width: medium;
-border-top-width: thick;
-
-/* Valeurs globales */
-border-top-width: inherit;
-border-top-width: initial;
-border-top-width: unset;
-
- -

Valeurs

- -
-
<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 (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.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.element1{
-	border-top: thick solid red;
-}
-.element2{
-	border-top: medium solid orange;
-}
-.element3{
-	border-top: thin solid green;
-}
-
- -

HTML

- -
<p class="element1">
-  Une bordure épaisse rouge.
-</p>
-
-<p class="element2">
-  Une bordure moyenne orange.
-</p>
-
-<p class="element3">
-  Et une bordure fine verte.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-top-width")}}

- -

Voir aussi

- -
    -
  • Les autres propriétés liées à la largeur de la bordure : -
      -
    • {{cssxref("border-left-width")}},
      • -
    • {{cssxref("border-right-width")}},
      • -
    • {{cssxref("border-bottom-width")}},
      • -
    • {{cssxref("border-width")}}
      • -
    -
    • -
  • Les autres propriétés CSS liées à la bordure du côté haut : -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-top")}},
      • -
    • {{cssxref("border-top-style")}},
      • -
    • {{cssxref("border-top-color")}}.
      • -
    -
    • -
diff --git a/files/fr/web/css/border-top-width/index.md b/files/fr/web/css/border-top-width/index.md new file mode 100644 index 0000000000..e96b5ef89f --- /dev/null +++ b/files/fr/web/css/border-top-width/index.md @@ -0,0 +1,134 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-top-width +--- +
{{CSSRef}}
+ +

La propriété border-top-width définit l'épaisseur de la bordure pour le côté haut d'une boîte.

+ +
{{EmbedInteractiveExample("pages/css/border-top-width.html")}}
+ +

Syntaxe

+ +
/* Une valeur de longueur */
+/* Type <length>          */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* Valeurs globales */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+
+ +

Valeurs

+ +
+
<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 (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.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.element1{
+	border-top: thick solid red;
+}
+.element2{
+	border-top: medium solid orange;
+}
+.element3{
+	border-top: thin solid green;
+}
+
+ +

HTML

+ +
<p class="element1">
+  Une bordure épaisse rouge.
+</p>
+
+<p class="element2">
+  Une bordure moyenne orange.
+</p>
+
+<p class="element3">
+  Et une bordure fine verte.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification significative.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-top-width")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés liées à la largeur de la bordure : +
      +
    • {{cssxref("border-left-width")}},
      • +
    • {{cssxref("border-right-width")}},
      • +
    • {{cssxref("border-bottom-width")}},
      • +
    • {{cssxref("border-width")}}
      • +
    +
    • +
  • Les autres propriétés CSS liées à la bordure du côté haut : +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-top")}},
      • +
    • {{cssxref("border-top-style")}},
      • +
    • {{cssxref("border-top-color")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/border-top/index.html b/files/fr/web/css/border-top/index.html deleted file mode 100644 index 4b9d59fe82..0000000000 --- a/files/fr/web/css/border-top/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: border-top -slug: Web/CSS/border-top -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-top ---- -
{{CSSRef}}
- -

La propriété CSS border-top est une propriété raccourcie qui permet de paramétrer la bordure haute d'un élément.

- -

C'est une propriété raccourcie qui permet de définir les valeurs de :

- -
    -
  • {{cssxref("border-top-width")}},
    • -
  • {{cssxref("border-top-style")}},
    • -
  • {{cssxref("border-top-color")}}.
    • -
- -
{{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.

- -

Comme pour les autres propriétés raccourcies, border-top 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 :

- -
border-top-style: dotted;
-border-top: thick green;
-
- -

est équivalent à :

- -
border-top-style: dotted;
-border-top: none thick green;
-
- -

 et la valeur {{cssxref("border-top-style")}} fournie avant border-top est ignorée.

- -

La valeur par défaut de {{cssxref("border-top-style")}} étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

-
- -

Syntaxe

- -
border-top: 1px;
-border-top: 2px dotted;
-border-top: medium dashed green;
-
- -

Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.

- -

Valeurs

- -
-
<br-width> 
-
Voir {{cssxref("border-top-width")}}.
-
<br-style> 
-
Voir {{cssxref("border-top-style")}}.
-
<color> 
-
Voir {{cssxref("border-top-color")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border-top: 3px dotted orange;
-}
- -

HTML

- -
<p class="exemple">
-  En passant elle prit sur un rayon un pot
-  de confiture portant cette étiquette,
-  « MARMELADE D’ORANGES. »
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","150")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-top-color")}} s'applique.
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-top")}}

diff --git a/files/fr/web/css/border-top/index.md b/files/fr/web/css/border-top/index.md new file mode 100644 index 0000000000..4b9d59fe82 --- /dev/null +++ b/files/fr/web/css/border-top/index.md @@ -0,0 +1,122 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-top +--- +
{{CSSRef}}
+ +

La propriété CSS border-top est une propriété raccourcie qui permet de paramétrer la bordure haute d'un élément.

+ +

C'est une propriété raccourcie qui permet de définir les valeurs de :

+ +
    +
  • {{cssxref("border-top-width")}},
    • +
  • {{cssxref("border-top-style")}},
    • +
  • {{cssxref("border-top-color")}}.
    • +
+ +
{{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.

+ +

Comme pour les autres propriétés raccourcies, border-top 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 :

+ +
border-top-style: dotted;
+border-top: thick green;
+
+ +

est équivalent à :

+ +
border-top-style: dotted;
+border-top: none thick green;
+
+ +

 et la valeur {{cssxref("border-top-style")}} fournie avant border-top est ignorée.

+ +

La valeur par défaut de {{cssxref("border-top-style")}} étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

+
+ +

Syntaxe

+ +
border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+
+ +

Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.

+ +

Valeurs

+ +
+
<br-width> 
+
Voir {{cssxref("border-top-width")}}.
+
<br-style> 
+
Voir {{cssxref("border-top-style")}}.
+
<color> 
+
Voir {{cssxref("border-top-color")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border-top: 3px dotted orange;
+}
+ +

HTML

+ +
<p class="exemple">
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","150")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-top-color")}} s'applique.
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-top")}}

diff --git a/files/fr/web/css/border-width/index.html b/files/fr/web/css/border-width/index.html deleted file mode 100644 index f41d3cb8a7..0000000000 --- a/files/fr/web/css/border-width/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: border-width -slug: Web/CSS/border-width -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-width ---- -
{{CSSRef}}
- -

La propriété CSS border-width est une propriété raccourcie qui définit la largeur de la bordure d'un élément.

- -

Cette propriété raccourcie définit les propriétés détaillées

- -
    -
  • {{cssxref("border-top-width")}},
    • -
  • {{cssxref("border-right-width")}},
    • -
  • {{cssxref("border-bottom-width")}}
    • -
  • {{cssxref("border-left-width")}}.
    • -
- -

Si on utilise les propriétés logiques, elle définit {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} et {{cssxref("border-inline-end-width")}}.

- -

Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie {{cssxref("border")}}.

- -
{{EmbedInteractiveExample("pages/css/border-width.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-border-width: thin;
-border-width: medium;
-border-width: thick;
-
-/* Une largeur pour chaque côté */
-/* Valeur de type <length> */
-border-width: 5px;
-
-/* largeur verticale puis horizontale */
-border-width: 2px 1.5em;
-
-/* haut | largeur horizontale | bas */
-border-width: 1px 2em 1.5cm;
-
-/* haut | droite | bas | gauche */
-border-width: 1px 2em 0 4rem;
-
-/* Valeurs globales */
-border-width: inherit;
-border-width: initial;
-border-width: unset;
-
- -

La propriété border-width peut être définie avec une, deux, trois ou quatre valeurs.

- -
    -
  • Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés
    • -
  • Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite
    • -
  • Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse
    • -
  • Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).
    • -
- -

Valeurs

- -
-
<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 (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.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<p id="unevaleur">
-  Une valeur : la bordure fait 6px sur les 4 côtés.
-</p>
-
-<p id="deuxvaleurs">
-  Deux valeurs différentes : elle fait 2px en haut
-  et en bas et elle mesure 10px pour les bords droit
-  et gauche.
-</p>
-
-<p id="troisvaleurs">
-  Trois valeurs différentes : 0.3em pour le haut,
-  9px pour le bas et zéro pour la droite et la
-  gauche.
-</p>
-
-<p id="quatrevaleurs">
-  Quatre valeurs différentes : "thin" pour le haut,
-  "medium" pour la droite, "thick" pour le bas
-  et 1em pour la gauche.
-</p>
- -

CSS

- -
#unevaleur {
-  border: ridge #ccc;
-  border-width: 6px;
-}
-
-#deuxvaleurs {
-  border: solid red;
-  border-width: 2px 10px;
-}
-
-#troisvaleurs {
-  border: dotted orange;
-  border-width: 0.3em 0 9px;
-}
-
-#quatrevaleurs {
-  border: solid lightgreen;
-  border-width: thin medium thick 1em;
-}
-
-p {
-  width: auto;
-  margin: 0.25em;
-  padding: 0.25em;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 300, 180) }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe. La modification du type de données {{cssxref("<length>")}} impacte cette propriété.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document.
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-width")}}

- -

Voir aussi

- -
    -
  • Les propriétés raccourcies liées aux bordures -
      -
    • {{cssxref("border")}},
      • -
    • {{cssxref("border-style")}}
      • -
    • {{cssxref("border-color")}}
      • -
    -
    • -
  • Les propriétés liées à la largeur des bordures -
      -
    • {{cssxref("border-bottom-width")}},
      • -
    • {{cssxref("border-left-width")}},
      • -
    • {{cssxref("border-right-width")}},
      • -
    • {{cssxref("border-top-width")}}
      • -
    -
    • -
diff --git a/files/fr/web/css/border-width/index.md b/files/fr/web/css/border-width/index.md new file mode 100644 index 0000000000..f41d3cb8a7 --- /dev/null +++ b/files/fr/web/css/border-width/index.md @@ -0,0 +1,192 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-width +--- +
{{CSSRef}}
+ +

La propriété CSS border-width est une propriété raccourcie qui définit la largeur de la bordure d'un élément.

+ +

Cette propriété raccourcie définit les propriétés détaillées

+ +
    +
  • {{cssxref("border-top-width")}},
    • +
  • {{cssxref("border-right-width")}},
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-left-width")}}.
    • +
+ +

Si on utilise les propriétés logiques, elle définit {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} et {{cssxref("border-inline-end-width")}}.

+ +

Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie {{cssxref("border")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-width.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+/* Une largeur pour chaque côté */
+/* Valeur de type <length> */
+border-width: 5px;
+
+/* largeur verticale puis horizontale */
+border-width: 2px 1.5em;
+
+/* haut | largeur horizontale | bas */
+border-width: 1px 2em 1.5cm;
+
+/* haut | droite | bas | gauche */
+border-width: 1px 2em 0 4rem;
+
+/* Valeurs globales */
+border-width: inherit;
+border-width: initial;
+border-width: unset;
+
+ +

La propriété border-width peut être définie avec une, deux, trois ou quatre valeurs.

+ +
    +
  • Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés
    • +
  • Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite
    • +
  • Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse
    • +
  • Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).
    • +
+ +

Valeurs

+ +
+
<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 (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.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<p id="unevaleur">
+  Une valeur : la bordure fait 6px sur les 4 côtés.
+</p>
+
+<p id="deuxvaleurs">
+  Deux valeurs différentes : elle fait 2px en haut
+  et en bas et elle mesure 10px pour les bords droit
+  et gauche.
+</p>
+
+<p id="troisvaleurs">
+  Trois valeurs différentes : 0.3em pour le haut,
+  9px pour le bas et zéro pour la droite et la
+  gauche.
+</p>
+
+<p id="quatrevaleurs">
+  Quatre valeurs différentes : "thin" pour le haut,
+  "medium" pour la droite, "thick" pour le bas
+  et 1em pour la gauche.
+</p>
+ +

CSS

+ +
#unevaleur {
+  border: ridge #ccc;
+  border-width: 6px;
+}
+
+#deuxvaleurs {
+  border: solid red;
+  border-width: 2px 10px;
+}
+
+#troisvaleurs {
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
+}
+
+#quatrevaleurs {
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
+}
+
+p {
+  width: auto;
+  margin: 0.25em;
+  padding: 0.25em;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 180) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}Pas de modification directe. La modification du type de données {{cssxref("<length>")}} impacte cette propriété.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document.
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border-width")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés raccourcies liées aux bordures +
      +
    • {{cssxref("border")}},
      • +
    • {{cssxref("border-style")}}
      • +
    • {{cssxref("border-color")}}
      • +
    +
    • +
  • Les propriétés liées à la largeur des bordures +
      +
    • {{cssxref("border-bottom-width")}},
      • +
    • {{cssxref("border-left-width")}},
      • +
    • {{cssxref("border-right-width")}},
      • +
    • {{cssxref("border-top-width")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/border/index.html b/files/fr/web/css/border/index.html deleted file mode 100644 index 1c1edbdede..0000000000 --- a/files/fr/web/css/border/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: border -slug: Web/CSS/border -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border ---- -
{{CSSRef("CSS Borders")}}
- -

La propriété CSS border est une propriété raccourcie qui permet de définir les propriétés liées à la bordure. border peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.

- -
{{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.

- -
-

Note : Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (border) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.

-
- -

Différences entre les bordures et les contours (outlines)

- -

Les bordures et contours sont similaires mais quelques différences les distinguent :

- -
    -
  • Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément
    • -
  • Selon la spécification, les contours ne sont pas nécessairement rectangulaires.
    • -
- -

Syntaxe

- -
/* style */
-border: solid;
-
-/* largeur | style */
-border: 2px dotted;
-
-/* style | couleur */
-border: outset #f33;
-
-/* largeur | style | couleur */
-border: medium dashed green;
-
-/* Valeurs globales */
-border: inherit;
-border: initial;
-border: unset;
-
- -

La propriété border peut être définie grâce à une ou plusieurs valeurs <line-width>, <line-style> ou <color>.

- -
-

Note : La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est none.

-
- -

Valeurs

- -
-
<line-width>
-
Voir {{cssxref("border-width")}} (la valeur par défaut est medium).
-
<line-style>
-
Voir {{cssxref("border-style")}} (la valeur par défaut est none).
-
<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).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.brd {
-  border: 1px solid black;
-}
-style {
-  border: 1px dashed black;
-  display:block;
-}
- -

HTML

- -
<div class="brd">Oh des bordures</div>
-<p>
-  N'hésitez pas à éditer le CSS qui suit pour voir
-  l'effet des valeurs.
-</p>
-<style contenteditable>
-  .brd {
-    border: 1px solid black;
-  }
-</style>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}La prise en charge du mot-clé transparent est retirée car celui-ci est désormais intégré au type {{cssxref("<color>")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via border, cette dernière la réinitialise quand même avec sa valeur initiale (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}Le mot-clé inherit peut être utilisé et transparent est considéré comme une couleur valide.
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border")}}

- -

Voir aussi

- -
    -
  • {{cssxref("border-top-left-radius")}},
    • -
  • {{cssxref("border-top-right-radius")}},
    • -
  • {{cssxref("border-bottom-right-radius")}},
    • -
  • {{cssxref("border-bottom-left-radius")}}
    • -
diff --git a/files/fr/web/css/border/index.md b/files/fr/web/css/border/index.md new file mode 100644 index 0000000000..1c1edbdede --- /dev/null +++ b/files/fr/web/css/border/index.md @@ -0,0 +1,144 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border +--- +
{{CSSRef("CSS Borders")}}
+ +

La propriété CSS border est une propriété raccourcie qui permet de définir les propriétés liées à la bordure. border peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.

+ +
{{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.

+ +
+

Note : Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (border) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.

+
+ +

Différences entre les bordures et les contours (outlines)

+ +

Les bordures et contours sont similaires mais quelques différences les distinguent :

+ +
    +
  • Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément
    • +
  • Selon la spécification, les contours ne sont pas nécessairement rectangulaires.
    • +
+ +

Syntaxe

+ +
/* style */
+border: solid;
+
+/* largeur | style */
+border: 2px dotted;
+
+/* style | couleur */
+border: outset #f33;
+
+/* largeur | style | couleur */
+border: medium dashed green;
+
+/* Valeurs globales */
+border: inherit;
+border: initial;
+border: unset;
+
+ +

La propriété border peut être définie grâce à une ou plusieurs valeurs <line-width>, <line-style> ou <color>.

+ +
+

Note : La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est none.

+
+ +

Valeurs

+ +
+
<line-width>
+
Voir {{cssxref("border-width")}} (la valeur par défaut est medium).
+
<line-style>
+
Voir {{cssxref("border-style")}} (la valeur par défaut est none).
+
<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).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.brd {
+  border: 1px solid black;
+}
+style {
+  border: 1px dashed black;
+  display:block;
+}
+ +

HTML

+ +
<div class="brd">Oh des bordures</div>
+<p>
+  N'hésitez pas à éditer le CSS qui suit pour voir
+  l'effet des valeurs.
+</p>
+<style contenteditable>
+  .brd {
+    border: 1px solid black;
+  }
+</style>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}La prise en charge du mot-clé transparent est retirée car celui-ci est désormais intégré au type {{cssxref("<color>")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via border, cette dernière la réinitialise quand même avec sa valeur initiale (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}Le mot-clé inherit peut être utilisé et transparent est considéré comme une couleur valide.
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.border")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("border-top-left-radius")}},
    • +
  • {{cssxref("border-top-right-radius")}},
    • +
  • {{cssxref("border-bottom-right-radius")}},
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
diff --git a/files/fr/web/css/bottom/index.html b/files/fr/web/css/bottom/index.html deleted file mode 100644 index b1b5d78f15..0000000000 --- a/files/fr/web/css/bottom/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: bottom -slug: Web/CSS/bottom -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/bottom ---- -
{{CSSRef}}
- -

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")}}
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.

- -

Pour les éléments positionnés de façon relative, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est relative, la propriété bottom définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.

- -

Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} est sticky

- -

Lorsque les propriétés {{cssxref("top")}} et bottom sont définies et que {{cssxref("height")}} n'est pas définie ou vaut auto ou 100%, les distances indiquées par {{cssxref("top")}} et bottom sont respectées. Dans les autres cas, si {{cssxref("height")}} est contrainte, la propriété {{cssxref("top")}} prendra le pas sur la propriété bottom qui sera alors ignorée.

- -

Syntaxe

- -
/* Valeurs de longueur */
-/* Type <length>       */
-bottom: 3px;
-bottom: 2.4em;
-
-/* Valeurs proportionnelles à la hauteur */
-/* du bloc englobant                     */
-/* Type <percentages>                    */
-bottom: 10%;
-
-/* Valeurs avec un mot-clé */
-bottom: auto;
-
-/* Valeurs globales */
-bottom: inherit;
-bottom: initial;
-bottom: unset;
-
- -

Valeurs

- -
-
<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.
    • -
-
-
<percentage>
-
Une valeur de pourcentage (type {{cssxref("<percentage>")}} exprimée par rapport à la hauteur du bloc englobant.
-
auto
-
Indique 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
    • -
  • 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
-
Cette valeur indique que la valeur est la même que la valeur calculée pour l'élément parent (qui peut ne pas être le bloc englobant). Cette valeur calculée est gérée comme si elle était une longueur, un pourcentage ou le mot-clé auto.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dans l'exemple qui suit, on illustre la différence de comportement de la propriété bottom lorsque {{cssxref("position")}} vaut absolute ou lorsqu'elle vaut fixed. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with position:absolute scroll with the page, while blocks positioned with position:fixed don't.

- -

CSS

- -
p {
-  font-size:30px;
-  line-height:3em;
-}
-
-div.pos {
-  width:49%;
-  text-align:center;
-  border:2px solid #00f;
-}
-
-div#abs {
-  position:absolute;
-  bottom:0;
-  left:0;
-}
-
-div#fix {
-  position:fixed;
-  bottom:0;
-  right:0;
-}
- -

HTML

- -
<p>
-  Voici <br>un<br>grand<br>grand,<br>grand,
-  <br>grand,<br>grand,<br>grand<br>contenu.
-</p>
-
-<div id="fix" class="pos">
-  <p>Fixe</p>
-</div>
-
-<div id="abs" class="pos">
-  <p>Absolu</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}{{Spec2('CSS2.1')}}Définition initiale.
{{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}{{Spec2('CSS3 Transitions')}}bottom peut désormais être animée.
{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}{{Spec2('CSS3 Positioning')}}Décrit le comportement pour le positionnement adhérent (sticky).
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.bottom")}}

- -

Voir aussi

- -
    -
  • {{cssxref("position")}},
    • -
  • {{cssxref("top")}},
    • -
  • {{cssxref("left")}},
    • -
  • {{cssxref("right")}}
    • -
diff --git a/files/fr/web/css/bottom/index.md b/files/fr/web/css/bottom/index.md new file mode 100644 index 0000000000..b1b5d78f15 --- /dev/null +++ b/files/fr/web/css/bottom/index.md @@ -0,0 +1,162 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/bottom +--- +
{{CSSRef}}
+ +

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")}}
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.

+ +

Pour les éléments positionnés de façon relative, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est relative, la propriété bottom définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.

+ +

Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} est sticky

+ +

Lorsque les propriétés {{cssxref("top")}} et bottom sont définies et que {{cssxref("height")}} n'est pas définie ou vaut auto ou 100%, les distances indiquées par {{cssxref("top")}} et bottom sont respectées. Dans les autres cas, si {{cssxref("height")}} est contrainte, la propriété {{cssxref("top")}} prendra le pas sur la propriété bottom qui sera alors ignorée.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+bottom: 3px;
+bottom: 2.4em;
+
+/* Valeurs proportionnelles à la hauteur */
+/* du bloc englobant                     */
+/* Type <percentages>                    */
+bottom: 10%;
+
+/* Valeurs avec un mot-clé */
+bottom: auto;
+
+/* Valeurs globales */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+
+ +

Valeurs

+ +
+
<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.
    • +
+
+
<percentage>
+
Une valeur de pourcentage (type {{cssxref("<percentage>")}} exprimée par rapport à la hauteur du bloc englobant.
+
auto
+
Indique 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
    • +
  • 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
+
Cette valeur indique que la valeur est la même que la valeur calculée pour l'élément parent (qui peut ne pas être le bloc englobant). Cette valeur calculée est gérée comme si elle était une longueur, un pourcentage ou le mot-clé auto.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dans l'exemple qui suit, on illustre la différence de comportement de la propriété bottom lorsque {{cssxref("position")}} vaut absolute ou lorsqu'elle vaut fixed. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with position:absolute scroll with the page, while blocks positioned with position:fixed don't.

+ +

CSS

+ +
p {
+  font-size:30px;
+  line-height:3em;
+}
+
+div.pos {
+  width:49%;
+  text-align:center;
+  border:2px solid #00f;
+}
+
+div#abs {
+  position:absolute;
+  bottom:0;
+  left:0;
+}
+
+div#fix {
+  position:fixed;
+  bottom:0;
+  right:0;
+}
+ +

HTML

+ +
<p>
+  Voici <br>un<br>grand<br>grand,<br>grand,
+  <br>grand,<br>grand,<br>grand<br>contenu.
+</p>
+
+<div id="fix" class="pos">
+  <p>Fixe</p>
+</div>
+
+<div id="abs" class="pos">
+  <p>Absolu</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}{{Spec2('CSS2.1')}}Définition initiale.
{{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}{{Spec2('CSS3 Transitions')}}bottom peut désormais être animée.
{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}{{Spec2('CSS3 Positioning')}}Décrit le comportement pour le positionnement adhérent (sticky).
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.bottom")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("position")}},
    • +
  • {{cssxref("top")}},
    • +
  • {{cssxref("left")}},
    • +
  • {{cssxref("right")}}
    • +
diff --git a/files/fr/web/css/box-align/index.html b/files/fr/web/css/box-align/index.html deleted file mode 100644 index 731682f8ba..0000000000 --- a/files/fr/web/css/box-align/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: box-align -slug: Web/CSS/box-align -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/box-align ---- -
{{CSSRef}}{{Non-standard_header}}{{warning("Cette propriété s'inscrivait dans une ancienne version du standard pour le module CSS sur les boîtes flexibles et a été remplacée dans une nouvelle version du standard.")}}
- -

La propriété CSS box-align définit comment un élément aligne son contenu par rapport à l'axe orthogonal à la disposition. L'effet obtenu ne sera visible que s'il y a de l'espace supplémentaire dans la boîte flexible. Voir la page Flexbox pour plus d'informations.

- -
/* Valeurs avec un mot-clé */
-box-align: start;
-box-align: center;
-box-align: end;
-box-align: baseline;
-box-align: stretch;
-
-/* Valeurs globales */
-box-lines: inherit;
-box-lines: initial;
-box-lines: unset;
-
- -

La direction de l'élément dépend de son orientation.

- -

Syntaxe

- -

La propriété box-align est paramétrée grâce à l'un des mots-clés suivants.

- -

Valeurs

- -
-
start
-
La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).
-
center
-
La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).
-
end
-
La boîte aligne son contenu au début (l'espace restant est alors situé au début).
-
baseline
-
La boîte aligne les lignes de base des contenus (le texte sera sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.
-
stretch
-
Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div.exemple {
-  display: box;
-  display: -moz-box; /* Mozilla */
-  display: -webkit-box; /* WebKit */
-
-  /* La boîte est plus grande que ses
-     éléments afin que box-pack ait
-     un effet */
-  height: 400px;
-
-  /* La boîte est plus large que ses
-     éléments afin que box-align ait
-     un effet */
-  width: 300px;
-
-  /* Les éléments fils seront orientés
-     verticalement */
-  box-orient: vertical;
-  -moz-box-orient: vertical; /* Mozilla */
-  -webkit-box-orient: vertical; /* WebKit */
-
-  /* On centre les éléments horizontalement */
-  box-align: center;
-  -moz-box-align: center; /* Mozilla */
-  -webkit-box-align: center; /* WebKit */
-
-  /* On les regroupe vers le bas */
-  box-pack: end;
-  -moz-box-pack: end; /* Mozilla */
-  -webkit-box-pack: end; /* WebKit */
-}
-
-div.exemple > p {
-  /* On réduit les éléments fils pour que
-     box-align ait un impact. */
-  width: 200px;
-}
- -

HTML

- -
<div class="exemple">
-  <p>Je serai deuxième en partant du bas, centré horizontalement.</p>
-  <p>Je serai en bas de div.exemple, centré horizontalement.</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","500","500")}}

- -

Notes

- -

Le bord de la boîte qui est indiqué par start dépend de l'orientation de la boîte : si celle-ci est orientée horizontalement, ce sera le côté haut, si elle est orientée verticalement, ce sera le côté bas. Le côté désigné par end est le côté opposé à start.

- -

Si l'alignement est défini via l'attribut HTML align, la déclaration sera alors ignorée.

- -

Spécifications

- - - -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.box-align")}}

- -

Voir aussi

- -
    -
  • {{cssxref("align-items")}},
    • -
  • {{cssxref("box-orient")}},
    • -
  • {{cssxref("box-direction")}},
    • -
  • {{cssxref("box-pack")}}.
    • -
diff --git a/files/fr/web/css/box-align/index.md b/files/fr/web/css/box-align/index.md new file mode 100644 index 0000000000..731682f8ba --- /dev/null +++ b/files/fr/web/css/box-align/index.md @@ -0,0 +1,132 @@ +--- +title: box-align +slug: Web/CSS/box-align +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/box-align +--- +
{{CSSRef}}{{Non-standard_header}}{{warning("Cette propriété s'inscrivait dans une ancienne version du standard pour le module CSS sur les boîtes flexibles et a été remplacée dans une nouvelle version du standard.")}}
+ +

La propriété CSS box-align définit comment un élément aligne son contenu par rapport à l'axe orthogonal à la disposition. L'effet obtenu ne sera visible que s'il y a de l'espace supplémentaire dans la boîte flexible. Voir la page Flexbox pour plus d'informations.

+ +
/* Valeurs avec un mot-clé */
+box-align: start;
+box-align: center;
+box-align: end;
+box-align: baseline;
+box-align: stretch;
+
+/* Valeurs globales */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+
+ +

La direction de l'élément dépend de son orientation.

+ +

Syntaxe

+ +

La propriété box-align est paramétrée grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
start
+
La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).
+
center
+
La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).
+
end
+
La boîte aligne son contenu au début (l'espace restant est alors situé au début).
+
baseline
+
La boîte aligne les lignes de base des contenus (le texte sera sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.
+
stretch
+
Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div.exemple {
+  display: box;
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* La boîte est plus grande que ses
+     éléments afin que box-pack ait
+     un effet */
+  height: 400px;
+
+  /* La boîte est plus large que ses
+     éléments afin que box-align ait
+     un effet */
+  width: 300px;
+
+  /* Les éléments fils seront orientés
+     verticalement */
+  box-orient: vertical;
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* On centre les éléments horizontalement */
+  box-align: center;
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* On les regroupe vers le bas */
+  box-pack: end;
+  -moz-box-pack: end; /* Mozilla */
+  -webkit-box-pack: end; /* WebKit */
+}
+
+div.exemple > p {
+  /* On réduit les éléments fils pour que
+     box-align ait un impact. */
+  width: 200px;
+}
+ +

HTML

+ +
<div class="exemple">
+  <p>Je serai deuxième en partant du bas, centré horizontalement.</p>
+  <p>Je serai en bas de div.exemple, centré horizontalement.</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","500","500")}}

+ +

Notes

+ +

Le bord de la boîte qui est indiqué par start dépend de l'orientation de la boîte : si celle-ci est orientée horizontalement, ce sera le côté haut, si elle est orientée verticalement, ce sera le côté bas. Le côté désigné par end est le côté opposé à start.

+ +

Si l'alignement est défini via l'attribut HTML align, la déclaration sera alors ignorée.

+ +

Spécifications

+ + + +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.box-align")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("align-items")}},
    • +
  • {{cssxref("box-orient")}},
    • +
  • {{cssxref("box-direction")}},
    • +
  • {{cssxref("box-pack")}}.
    • +
diff --git a/files/fr/web/css/box-decoration-break/index.html b/files/fr/web/css/box-decoration-break/index.html deleted file mode 100644 index cfbe10973c..0000000000 --- a/files/fr/web/css/box-decoration-break/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: box-decoration-break -slug: Web/CSS/box-decoration-break -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/box-decoration-break ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété box-decoration-break définit la façon dont les propriétés {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("border-image")}}, {{cssxref("box-shadow")}}, {{cssxref("margin")}} et {{cssxref("clip")}} sont appliquées sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment.

- -
{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-box-decoration-break: slice;
-box-decoration-break: clone;
-
-/* Valeurs globales */
-box-decoration-break: initial;
-box-decoration-break: inherit;
-box-decoration-break: unset;
-
- -

La propriété box-decoration-break est définie avec l'un des mots-clés définis ci-après.

- -

Valeurs

- -
-
clone
-
Le rendu de chaque fragment de boîte est obtenu indépendamment avec la bordure, le remplissage, la marge indiqués pour chacun des fragments. Les propriétés {{cssxref("border-radius")}}, {{cssxref("border-image")}} et {{cssxref("box-shadow")}} sont appliquées indépendamment à chaque fragment. L'arrière-plan est dessiné indépendamment pour chaque fragment (ainsi, une image d'arrière-plan avec {{cssxref("background-repeat")}}: no-repeat pourra être présente à plusieurs reprises).
-
slice
-
L'élément est initialement affiché comme si la boîte n'était pas fragmentée puis le rendu de cette boîte hypothétique est découpé en fragments pour chaque ligne/colonne/page. On notera que la boîte hypothétique peut être différente pour chaque fragment car elle utilise sa propre hauteur (si la rupture apparaît dans la direction de l'élément) ou sa propre largeur (si la rupture apparaît dans la direction orthogonale). C'est la valeur initiale de la propriété.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Gestion des fragments pour les boîtes en ligne

- -

Avec slice (valeur initiale)

- -
CSS
- -
.exemple {
-  background: linear-gradient(to bottom right, yellow, green);
-  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
-  padding: 0em 1em;
-  border-radius: 16px;
-  border-style: solid;
-  margin-left: 10px;
-  font: 24px sans-serif;
-  line-height: 2;
-}
- -
HTML
- -
<span class="exemple">The<br>quick<br>orange fox</span>
- -
Résultat live
- -

{{EmbedLiveSample("Avec_slice_(valeur_initiale)","200","200")}}

- -
Image équivalente
- -

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

- -

Avec clone

- -
CSS
- -
.exemple {
-  background: linear-gradient(to bottom right, yellow, green);
-  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
-  padding: 0em 1em;
-  border-radius: 16px;
-  border-style: solid;
-  margin-left: 10px;
-  font: 24px sans-serif;
-  line-height: 2;
-
- -webkit-box-decoration-break: clone;
- -o-box-decoration-break: clone;
-  box-decoration-break: clone;
-}
- -
HTML
- -
<span class="exemple">The<br>quick<br>orange fox</span>
- -
Résultat live
- -

{{EmbedLiveSample("Avec_clone","200","200")}}

- -
Image équivalente
- -

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 sans fragmentation:

- -

A screenshot of the rendering of the block element used in the examples without any fragmentation.

- -

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.

- -

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.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break')}}{{Spec2('CSS3 Fragmentation')}}Définition initiale
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.box-decoration-break")}}

- -

Voir aussi

- -
    -
  • {{cssxref("break-after")}}
    • -
  • {{cssxref("break-before")}}
    • -
  • {{cssxref("break-inside")}}
    • -
diff --git a/files/fr/web/css/box-decoration-break/index.md b/files/fr/web/css/box-decoration-break/index.md new file mode 100644 index 0000000000..cfbe10973c --- /dev/null +++ b/files/fr/web/css/box-decoration-break/index.md @@ -0,0 +1,151 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/box-decoration-break +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété box-decoration-break définit la façon dont les propriétés {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("border-image")}}, {{cssxref("box-shadow")}}, {{cssxref("margin")}} et {{cssxref("clip")}} sont appliquées sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment.

+ +
{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+box-decoration-break: slice;
+box-decoration-break: clone;
+
+/* Valeurs globales */
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+
+ +

La propriété box-decoration-break est définie avec l'un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
clone
+
Le rendu de chaque fragment de boîte est obtenu indépendamment avec la bordure, le remplissage, la marge indiqués pour chacun des fragments. Les propriétés {{cssxref("border-radius")}}, {{cssxref("border-image")}} et {{cssxref("box-shadow")}} sont appliquées indépendamment à chaque fragment. L'arrière-plan est dessiné indépendamment pour chaque fragment (ainsi, une image d'arrière-plan avec {{cssxref("background-repeat")}}: no-repeat pourra être présente à plusieurs reprises).
+
slice
+
L'élément est initialement affiché comme si la boîte n'était pas fragmentée puis le rendu de cette boîte hypothétique est découpé en fragments pour chaque ligne/colonne/page. On notera que la boîte hypothétique peut être différente pour chaque fragment car elle utilise sa propre hauteur (si la rupture apparaît dans la direction de l'élément) ou sa propre largeur (si la rupture apparaît dans la direction orthogonale). C'est la valeur initiale de la propriété.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Gestion des fragments pour les boîtes en ligne

+ +

Avec slice (valeur initiale)

+ +
CSS
+ +
.exemple {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+ +
HTML
+ +
<span class="exemple">The<br>quick<br>orange fox</span>
+ +
Résultat live
+ +

{{EmbedLiveSample("Avec_slice_(valeur_initiale)","200","200")}}

+ +
Image équivalente
+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

+ +

Avec clone

+ +
CSS
+ +
.exemple {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+
+ -webkit-box-decoration-break: clone;
+ -o-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+ +
HTML
+ +
<span class="exemple">The<br>quick<br>orange fox</span>
+ +
Résultat live
+ +

{{EmbedLiveSample("Avec_clone","200","200")}}

+ +
Image équivalente
+ +

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 sans fragmentation:

+ +

A screenshot of the rendering of the block element used in the examples without any fragmentation.

+ +

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.

+ +

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.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break')}}{{Spec2('CSS3 Fragmentation')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.box-decoration-break")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
diff --git a/files/fr/web/css/box-direction/index.html b/files/fr/web/css/box-direction/index.html deleted file mode 100644 index 9a62ce1e3f..0000000000 --- a/files/fr/web/css/box-direction/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: box-direction -slug: Web/CSS/box-direction -tags: - - CSS - - Non-standard - - Propriété - - Reference -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.

-
- -

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;
-box-direction: reverse;
-
-/* Valeurs globales */
-box-direction: inherit;
-box-direction: initial;
-box-direction: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
normal
-
La boîte répartit son contenu à partir du début (le côté gauche si la boîte est orientée horizontalement ou le côté haut si la boîte est orientée verticalement).
-
reverse
-
La boîte répartit son contenu à partir de la fin (le côté droit si la boîte est orientée horizontalement ou le côté bas si la boîte est orienté verticalement).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
.exemple {
-  /* du bas vers le haut */
-  -moz-box-direction: reverse;      /* Mozilla */
-  -webkit-box-direction: reverse;   /* WebKit */
-  box-direction: reverse;
-}
-
- -

Notes

- -

Si la direction de l'élément est définie grâce à l'attribut dir, la déclaration est ignorée.

- -

Spécifications

- - - -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.box-direction")}}

- -

Voir aussi

- -
    -
  • {{cssxref("box-orient")}},
    • -
  • {{cssxref("box-pack")}},
    • -
  • {{cssxref("box-align")}},
    • -
  • {{cssxref("flex-direction")}}.
    • -
diff --git a/files/fr/web/css/box-direction/index.md b/files/fr/web/css/box-direction/index.md new file mode 100644 index 0000000000..9a62ce1e3f --- /dev/null +++ b/files/fr/web/css/box-direction/index.md @@ -0,0 +1,78 @@ +--- +title: box-direction +slug: Web/CSS/box-direction +tags: + - CSS + - Non-standard + - Propriété + - Reference +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.

+
+ +

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;
+box-direction: reverse;
+
+/* Valeurs globales */
+box-direction: inherit;
+box-direction: initial;
+box-direction: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
normal
+
La boîte répartit son contenu à partir du début (le côté gauche si la boîte est orientée horizontalement ou le côté haut si la boîte est orientée verticalement).
+
reverse
+
La boîte répartit son contenu à partir de la fin (le côté droit si la boîte est orientée horizontalement ou le côté bas si la boîte est orienté verticalement).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
.exemple {
+  /* du bas vers le haut */
+  -moz-box-direction: reverse;      /* Mozilla */
+  -webkit-box-direction: reverse;   /* WebKit */
+  box-direction: reverse;
+}
+
+ +

Notes

+ +

Si la direction de l'élément est définie grâce à l'attribut dir, la déclaration est ignorée.

+ +

Spécifications

+ + + +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.box-direction")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("box-orient")}},
    • +
  • {{cssxref("box-pack")}},
    • +
  • {{cssxref("box-align")}},
    • +
  • {{cssxref("flex-direction")}}.
    • +
diff --git a/files/fr/web/css/box-flex-group/index.html b/files/fr/web/css/box-flex-group/index.html deleted file mode 100644 index c04d6907b0..0000000000 --- a/files/fr/web/css/box-flex-group/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: box-flex-group -slug: Web/CSS/box-flex-group -tags: - - CSS - - Non-standard - - Propriété - - Reference -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.

-
- -

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.

- -
/* Un entier désignant le groupe */
-/* Type <integer>                */
-box-flex-group: 1;
-box-flex-group: 5;
-
-/* Valeurs globales */
-box-flex-group: inherit;
-box-flex-group: initial;
-box-flex-group: unset;
-
- -

Les éléments flexibles sont affectés à des groupes. Le premier groupe sera désigné par l'indice 1 et les groupes suivants par 2, 3, et ainsi de suite. Lorsque l'espace restant dans la boîte est réparti, le moteur prend d'abord en compte les éléments du premier groupe et répartit l'espace entre les différents éléments de ce groupe selon leurs flexibilités relatives. Une fois l'espace augmenté au maximum, le moteur passe au groupe qui suit en utilisant l'espace restant et ainsi de suite. Si, une fois l'ensemble des groupes traités, il y a encore de l'espace, celui-ci est réparti grâce à la propriété {{cssxref("box-pack")}}.

- -

Si la boîte dépasse une fois que l'espace pour l'élément fils a été calculé, l'espace est alors retiré (chaque groupe est examiné dans l'ordre et l'espace est retiré selon la flexibilité de chaque élément). Les éléments ne sont pas réduits en deçà de leurs largeurs minimales.

- -

Syntaxe

- -

Cette propriété est définie avec un entier positif.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -
{{Compat("css.properties.box-flex-group")}}
- -

Voir aussi

- -
    -
  • {{cssxref("box-flex")}},
    • -
  • {{cssxref("box-ordinal-group")}},
    • -
  • {{cssxref("box-pack")}}.
    • -
diff --git a/files/fr/web/css/box-flex-group/index.md b/files/fr/web/css/box-flex-group/index.md new file mode 100644 index 0000000000..c04d6907b0 --- /dev/null +++ b/files/fr/web/css/box-flex-group/index.md @@ -0,0 +1,63 @@ +--- +title: box-flex-group +slug: Web/CSS/box-flex-group +tags: + - CSS + - Non-standard + - Propriété + - Reference +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.

+
+ +

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.

+ +
/* Un entier désignant le groupe */
+/* Type <integer>                */
+box-flex-group: 1;
+box-flex-group: 5;
+
+/* Valeurs globales */
+box-flex-group: inherit;
+box-flex-group: initial;
+box-flex-group: unset;
+
+ +

Les éléments flexibles sont affectés à des groupes. Le premier groupe sera désigné par l'indice 1 et les groupes suivants par 2, 3, et ainsi de suite. Lorsque l'espace restant dans la boîte est réparti, le moteur prend d'abord en compte les éléments du premier groupe et répartit l'espace entre les différents éléments de ce groupe selon leurs flexibilités relatives. Une fois l'espace augmenté au maximum, le moteur passe au groupe qui suit en utilisant l'espace restant et ainsi de suite. Si, une fois l'ensemble des groupes traités, il y a encore de l'espace, celui-ci est réparti grâce à la propriété {{cssxref("box-pack")}}.

+ +

Si la boîte dépasse une fois que l'espace pour l'élément fils a été calculé, l'espace est alors retiré (chaque groupe est examiné dans l'ordre et l'espace est retiré selon la flexibilité de chaque élément). Les éléments ne sont pas réduits en deçà de leurs largeurs minimales.

+ +

Syntaxe

+ +

Cette propriété est définie avec un entier positif.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +
{{Compat("css.properties.box-flex-group")}}
+ +

Voir aussi

+ +
    +
  • {{cssxref("box-flex")}},
    • +
  • {{cssxref("box-ordinal-group")}},
    • +
  • {{cssxref("box-pack")}}.
    • +
diff --git a/files/fr/web/css/box-flex/index.html b/files/fr/web/css/box-flex/index.html deleted file mode 100644 index 8029705961..0000000000 --- a/files/fr/web/css/box-flex/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: box-flex -slug: Web/CSS/box-flex -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/box-flex ---- -
{{CSSRef}}{{Non-standard_header}}
- -
-

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.

- -
/* Valeurs numériques */
-/* Type <number>      */
--moz-box-flex: 0;
--moz-box-flex: 2;
--moz-box-flex: 3.5;
--webkit-box-flex: 0;
--webkit-box-flex: 2;
--webkit-box-flex: 3.5;
-
-/* Valeurs globales */
--moz-box-flex: inherit;
--moz-box-flex: initial;
--moz-box-flex: unset;
--webkit-box-flex: inherit;
--webkit-box-flex: initial;
--webkit-box-flex: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
<number>
-
Une valeur de type {{cssxref("<number>")}}. Si la valeur vaut 0, la boîte ne s'étend pas. Si elle est supérieure à 0, la boîte s'étendra sur l'espace disponible de façon proportionnelle.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div.exemple {
-  display: -moz-box;
-  display: -webkit-box;
-  border: 1px solid black;
-  width: 100%;
-}
-
-div.exemple > p:nth-child(1) {
-  -moz-box-flex: 1; /* Mozilla */
-  -webkit-box-flex: 1; /* WebKit */
-  border: 1px solid black;
-}
-
-div.exemple > p:nth-child(2) {
-  -moz-box-flex: 0; /* Mozilla */
-  -webkit-box-flex: 0; /* WebKit */
-  border: 1px solid black;
-}
- -

HTML

- -
<div class="exemple">
-  <p>Je m'étends sur l'espace.</p>
-  <p>Je ne me dilate pas.</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","200")}}

- -

Notes

- -

La boîte englobante distribue l'espace supplémentaire en fonction de la valeur de flex de chaque élément. Les éléments pour lesquels ce coefficient est nul ne s'agrandiront pas. Si un seul élément possède un coefficient non nul, celui-ci occupera l'espace supplémentaires.

- -

Les éléments qui possèdent le même coefficient grandiront de la même façon.

- -

Si la valeur de cette propriété est définie via l'attribut XUL flex, la déclaration est ignorée. Afin que les éléments XUL d'une même boîte aient la même taille, on utilisera l'attribut equalsize avec la valeur always. Il n'existe pas de propriété CSS correspondante.

- -

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é.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -
{{Compat("css.properties.box-flex")}}
- -

Voir aussi

- -
    -
  • {{cssxref("box-orient")}},
    • -
  • {{cssxref("box-pack")}},
    • -
  • {{cssxref("box-direction")}},
    • -
  • {{cssxref("flex")}}.
    • -
diff --git a/files/fr/web/css/box-flex/index.md b/files/fr/web/css/box-flex/index.md new file mode 100644 index 0000000000..8029705961 --- /dev/null +++ b/files/fr/web/css/box-flex/index.md @@ -0,0 +1,110 @@ +--- +title: box-flex +slug: Web/CSS/box-flex +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

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.

+ +
/* Valeurs numériques */
+/* Type <number>      */
+-moz-box-flex: 0;
+-moz-box-flex: 2;
+-moz-box-flex: 3.5;
+-webkit-box-flex: 0;
+-webkit-box-flex: 2;
+-webkit-box-flex: 3.5;
+
+/* Valeurs globales */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+-webkit-box-flex: inherit;
+-webkit-box-flex: initial;
+-webkit-box-flex: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<number>
+
Une valeur de type {{cssxref("<number>")}}. Si la valeur vaut 0, la boîte ne s'étend pas. Si elle est supérieure à 0, la boîte s'étendra sur l'espace disponible de façon proportionnelle.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div.exemple {
+  display: -moz-box;
+  display: -webkit-box;
+  border: 1px solid black;
+  width: 100%;
+}
+
+div.exemple > p:nth-child(1) {
+  -moz-box-flex: 1; /* Mozilla */
+  -webkit-box-flex: 1; /* WebKit */
+  border: 1px solid black;
+}
+
+div.exemple > p:nth-child(2) {
+  -moz-box-flex: 0; /* Mozilla */
+  -webkit-box-flex: 0; /* WebKit */
+  border: 1px solid black;
+}
+ +

HTML

+ +
<div class="exemple">
+  <p>Je m'étends sur l'espace.</p>
+  <p>Je ne me dilate pas.</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","200")}}

+ +

Notes

+ +

La boîte englobante distribue l'espace supplémentaire en fonction de la valeur de flex de chaque élément. Les éléments pour lesquels ce coefficient est nul ne s'agrandiront pas. Si un seul élément possède un coefficient non nul, celui-ci occupera l'espace supplémentaires.

+ +

Les éléments qui possèdent le même coefficient grandiront de la même façon.

+ +

Si la valeur de cette propriété est définie via l'attribut XUL flex, la déclaration est ignorée. Afin que les éléments XUL d'une même boîte aient la même taille, on utilisera l'attribut equalsize avec la valeur always. Il n'existe pas de propriété CSS correspondante.

+ +

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é.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +
{{Compat("css.properties.box-flex")}}
+ +

Voir aussi

+ +
    +
  • {{cssxref("box-orient")}},
    • +
  • {{cssxref("box-pack")}},
    • +
  • {{cssxref("box-direction")}},
    • +
  • {{cssxref("flex")}}.
    • +
diff --git a/files/fr/web/css/box-lines/index.html b/files/fr/web/css/box-lines/index.html deleted file mode 100644 index 9c01911dbc..0000000000 --- a/files/fr/web/css/box-lines/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: box-lines -slug: Web/CSS/box-lines -tags: - - CSS - - Non-standard - - Propriété - - Reference -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.

-
- -

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.

- -
/* Valeurs avec un mot-clé */
-box-lines: single;
-box-lines: multiple;
-
-/* Valeurs globales */
-box-lines: inherit;
-box-lines: initial;
-box-lines: unset;
-
- -

Par défaut, une boîte horizontale organisera ses éléments sur une seule ligne et une boîte verticale les organisera sur une seule colonne. On peut modifier ce comportement en utilisant box-lines. La valeur par défaut est single (ce qui correspond au cas expliqué avant) et les éléments qui ne peuvent être contenus dans cette ligne ou cette colonne dépasseront.

- -

Si, au contraire, on utilise la valeur multiple, la boîte pourra s'étendre sur plusieurs rangées (des lignes ou des colonnes) afin de contenir ses différents éléments fils. La boîte utilisera alors le moins de lignes ou de colonnes possibles et réduira les éléments à leur taille minimale si nécessaire.

- -

Si les éléments fils d'une boîte horizontale ne rentrent pas dans une ligne après avoir été réduits à leur taille minimale, ils sont déplacés sur une nouvelle ligne jusqu'à ce que rien ne dépasse de la ligne précédente. Le procédé est répété autant de fois que nécessaire. Si une ligne contient un seul élément et que celui-ci est trop grand, ce dernier restera sur cette ligne et dépassera en dehors de la boîte. Les nouvelles lignes sont créées en dessous des premières lorsque la direction de la boîte est normal, dans le sens inverse (reverse) elles seront empilées les unes au dessus des autres. La hauteur d'une ligne sera égale à la plus grande hauteur des éléments portés sur cette ligne. Aucun espace ne sera ajouté entre les lignes en dehors des marges décrites par les plus grands éléments. Lors du calcul de la hauteur, les éléments avec une marge dont la valeur calculée est auto seront traités comme si la marge était nulle (0).

- -

On aura un fonctionnement analogue avec une disposition verticale.

- -

Une fois que le nombre de rangées a été calculé, les éléments pour lesquels {{cssxref("box-flex")}} a une valeur calculée différentes de 0 seront étirés afin de remplir les espaces restants sur les lignes. Ces étirements sont calculés de façon indépendante selon chaque ligne (notamment pour {{cssxref("box-flex")}} et {{cssxref("box-flex-group")}}). Il en va de même pour le regroupement des éléments sur une ligne avec la propriété {{cssxref("box-pack")}}.

- -

Syntaxe

- -

Cette propriété est définie grâce à l'un des mots-clés suivants.

- -

Valeurs

- -
-
single
-
Les éléments d'une boîte sont disposés sur une seule ligne ou sur une seule colonne.
-
multiple
-
Les éléments de la boîte sont disposés sur plusieurs lignes ou colonnes si nécessaire.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -
{{Compat("css.properties.box-lines")}}
- -

Voir aussi

- -
    -
  • {{cssxref("box-flex")}},
    • -
  • {{cssxref("box-flex-groups")}},
    • -
  • {{cssxref("box-pack")}}
    • -
diff --git a/files/fr/web/css/box-lines/index.md b/files/fr/web/css/box-lines/index.md new file mode 100644 index 0000000000..9c01911dbc --- /dev/null +++ b/files/fr/web/css/box-lines/index.md @@ -0,0 +1,77 @@ +--- +title: box-lines +slug: Web/CSS/box-lines +tags: + - CSS + - Non-standard + - Propriété + - Reference +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.

+
+ +

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.

+ +
/* Valeurs avec un mot-clé */
+box-lines: single;
+box-lines: multiple;
+
+/* Valeurs globales */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+
+ +

Par défaut, une boîte horizontale organisera ses éléments sur une seule ligne et une boîte verticale les organisera sur une seule colonne. On peut modifier ce comportement en utilisant box-lines. La valeur par défaut est single (ce qui correspond au cas expliqué avant) et les éléments qui ne peuvent être contenus dans cette ligne ou cette colonne dépasseront.

+ +

Si, au contraire, on utilise la valeur multiple, la boîte pourra s'étendre sur plusieurs rangées (des lignes ou des colonnes) afin de contenir ses différents éléments fils. La boîte utilisera alors le moins de lignes ou de colonnes possibles et réduira les éléments à leur taille minimale si nécessaire.

+ +

Si les éléments fils d'une boîte horizontale ne rentrent pas dans une ligne après avoir été réduits à leur taille minimale, ils sont déplacés sur une nouvelle ligne jusqu'à ce que rien ne dépasse de la ligne précédente. Le procédé est répété autant de fois que nécessaire. Si une ligne contient un seul élément et que celui-ci est trop grand, ce dernier restera sur cette ligne et dépassera en dehors de la boîte. Les nouvelles lignes sont créées en dessous des premières lorsque la direction de la boîte est normal, dans le sens inverse (reverse) elles seront empilées les unes au dessus des autres. La hauteur d'une ligne sera égale à la plus grande hauteur des éléments portés sur cette ligne. Aucun espace ne sera ajouté entre les lignes en dehors des marges décrites par les plus grands éléments. Lors du calcul de la hauteur, les éléments avec une marge dont la valeur calculée est auto seront traités comme si la marge était nulle (0).

+ +

On aura un fonctionnement analogue avec une disposition verticale.

+ +

Une fois que le nombre de rangées a été calculé, les éléments pour lesquels {{cssxref("box-flex")}} a une valeur calculée différentes de 0 seront étirés afin de remplir les espaces restants sur les lignes. Ces étirements sont calculés de façon indépendante selon chaque ligne (notamment pour {{cssxref("box-flex")}} et {{cssxref("box-flex-group")}}). Il en va de même pour le regroupement des éléments sur une ligne avec la propriété {{cssxref("box-pack")}}.

+ +

Syntaxe

+ +

Cette propriété est définie grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
single
+
Les éléments d'une boîte sont disposés sur une seule ligne ou sur une seule colonne.
+
multiple
+
Les éléments de la boîte sont disposés sur plusieurs lignes ou colonnes si nécessaire.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +
{{Compat("css.properties.box-lines")}}
+ +

Voir aussi

+ +
    +
  • {{cssxref("box-flex")}},
    • +
  • {{cssxref("box-flex-groups")}},
    • +
  • {{cssxref("box-pack")}}
    • +
diff --git a/files/fr/web/css/box-ordinal-group/index.html b/files/fr/web/css/box-ordinal-group/index.html deleted file mode 100644 index b9d400c5d1..0000000000 --- a/files/fr/web/css/box-ordinal-group/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: box-ordinal-group -slug: Web/CSS/box-ordinal-group -tags: - - CSS - - Non-standard - - Propriété - - Reference -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.

-
- -

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.

- -
/* Un entier indiquant le groupe */
-/* Type <integer>                */
-box-ordinal-group: 1;
-box-ordinal-group: 5;
-
-/* Global values */
-box-ordinal-group: inherit;
-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.

- -

Syntaxe

- -

Cette propriété se définit avec un entier positif.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.box-ordinal-group")}}

- -

Voir aussi

- -
    -
  • {{cssxref("box-flex")}},
    • -
  • {{cssxref("box-flex-group")}},
    • -
  • {{cssxref("box-pack")}}
    • -
diff --git a/files/fr/web/css/box-ordinal-group/index.md b/files/fr/web/css/box-ordinal-group/index.md new file mode 100644 index 0000000000..b9d400c5d1 --- /dev/null +++ b/files/fr/web/css/box-ordinal-group/index.md @@ -0,0 +1,61 @@ +--- +title: box-ordinal-group +slug: Web/CSS/box-ordinal-group +tags: + - CSS + - Non-standard + - Propriété + - Reference +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.

+
+ +

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.

+ +
/* Un entier indiquant le groupe */
+/* Type <integer>                */
+box-ordinal-group: 1;
+box-ordinal-group: 5;
+
+/* Global values */
+box-ordinal-group: inherit;
+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.

+ +

Syntaxe

+ +

Cette propriété se définit avec un entier positif.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.box-ordinal-group")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("box-flex")}},
    • +
  • {{cssxref("box-flex-group")}},
    • +
  • {{cssxref("box-pack")}}
    • +
diff --git a/files/fr/web/css/box-orient/index.html b/files/fr/web/css/box-orient/index.html deleted file mode 100644 index 9c5220bd16..0000000000 --- a/files/fr/web/css/box-orient/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: box-orient -slug: Web/CSS/box-orient -tags: - - CSS - - Non-standard - - Propriété - - Reference -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.

-
- -

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.

- -
/* Valeurs avec un mot-clé */
-box-orient: horizontal;
-box-orient: vertical;
-box-orient: inline-axis;
-box-orient: block-axis;
-
-/* Valeurs globales */
-box-orient: inherit;
-box-orient: initial;
-box-orient: unset;
-
- -

Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que  {{XULElem("vbox")}} organise son contenu de façon verticale par défaut.

- -

Les éléments HTML disposent leurs contenus selon l'axe inline par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}.

- -

Syntaxe

- -

Valeurs

- -
-
horizontal
-
La boîte organise son contenu horizontalement.
-
vertical
-
La boîte organise son contenu verticalement.
-
inline-axis (HTML)
-
La boîte organise son contenu (ses éléments-fils) dans le sens de l'axe de lecture (axe inline).
-
block-axis (HTML)
-
La boîte organise son contenu (ses éléments-fils) dans le sens perpendiculaire à l'axe de lecteur (axe block).
-
- -

Les axes inline et block dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à horizontal et vertical.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div.exemple {
-  display: -moz-box; /* Mozilla */
-  display: -webkit-box; /* WebKit */
-  display: box; /* On utilise les boîtes */
-
-  -moz-box-orient: horizontal; /* Mozilla */
-  -webkit-box-orient: horizontal; /* WebKit */
-  box-orient: horizontal; /* spécifié */
-}
- -

HTML

- -
<div class="exemple">
-  <p>Je serai à gauche de mon voisin.</p>
-  <p>Et moi à droite de mon voisin.</p>
-</div>
- -

Résultat

- -

On aura les deux paragraphes situés côte à côte.

- -

{{EmbedLiveSample("Exemples")}}

- -

Notes

- -

Pour les éléments XUL, si l'orientation est définie avec l'attribut {{XULAttr("orient")}} cette propriété est ignorée.

- -

Spécifications

- - - -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.box-orient")}}

- -

Voir aussi

- -
    -
  • {{cssxref("box-direction")}},
    • -
  • {{cssxref("box-pack")}},
    • -
  • {{cssxref("box-align")}},
    • -
  • {{cssxref("flex-direction")}}.
    • -
diff --git a/files/fr/web/css/box-orient/index.md b/files/fr/web/css/box-orient/index.md new file mode 100644 index 0000000000..9c5220bd16 --- /dev/null +++ b/files/fr/web/css/box-orient/index.md @@ -0,0 +1,109 @@ +--- +title: box-orient +slug: Web/CSS/box-orient +tags: + - CSS + - Non-standard + - Propriété + - Reference +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.

+
+ +

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.

+ +
/* Valeurs avec un mot-clé */
+box-orient: horizontal;
+box-orient: vertical;
+box-orient: inline-axis;
+box-orient: block-axis;
+
+/* Valeurs globales */
+box-orient: inherit;
+box-orient: initial;
+box-orient: unset;
+
+ +

Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que  {{XULElem("vbox")}} organise son contenu de façon verticale par défaut.

+ +

Les éléments HTML disposent leurs contenus selon l'axe inline par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}.

+ +

Syntaxe

+ +

Valeurs

+ +
+
horizontal
+
La boîte organise son contenu horizontalement.
+
vertical
+
La boîte organise son contenu verticalement.
+
inline-axis (HTML)
+
La boîte organise son contenu (ses éléments-fils) dans le sens de l'axe de lecture (axe inline).
+
block-axis (HTML)
+
La boîte organise son contenu (ses éléments-fils) dans le sens perpendiculaire à l'axe de lecteur (axe block).
+
+ +

Les axes inline et block dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à horizontal et vertical.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div.exemple {
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+  display: box; /* On utilise les boîtes */
+
+  -moz-box-orient: horizontal; /* Mozilla */
+  -webkit-box-orient: horizontal; /* WebKit */
+  box-orient: horizontal; /* spécifié */
+}
+ +

HTML

+ +
<div class="exemple">
+  <p>Je serai à gauche de mon voisin.</p>
+  <p>Et moi à droite de mon voisin.</p>
+</div>
+ +

Résultat

+ +

On aura les deux paragraphes situés côte à côte.

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Notes

+ +

Pour les éléments XUL, si l'orientation est définie avec l'attribut {{XULAttr("orient")}} cette propriété est ignorée.

+ +

Spécifications

+ + + +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.box-orient")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("box-direction")}},
    • +
  • {{cssxref("box-pack")}},
    • +
  • {{cssxref("box-align")}},
    • +
  • {{cssxref("flex-direction")}}.
    • +
diff --git a/files/fr/web/css/box-pack/index.html b/files/fr/web/css/box-pack/index.html deleted file mode 100644 index 45fd486ed7..0000000000 --- a/files/fr/web/css/box-pack/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: box-pack -slug: Web/CSS/box-pack -tags: - - CSS - - Non-standard - - Propriété - - Reference -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.

-
- -
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;
-box-pack: center;
-box-pack: end;
-box-pack: justify;
-
-/* Valeurs globales */
-box-pack: inherit;
-box-pack: initial;
-box-pack: unset;
-
- -

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.

- -

Syntaxe

- -

Cette propriété se définit grâce à l'un des mots-clés définis ci-après.

- -

Valeurs

- -
-
start
-
La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.
-
center
-
La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.
-
end
-
La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.
-
justify
-
L'espace est réparti entre chacun des éléments fils sans qu'un espace soit placé avant le premier fils ou après le dernier. S'il y a un seul élément fils, la valeur est synonyme de start.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div.exemple {
-  border-style: solid;
-
-  display: -moz-box; /* Mozilla */
-  display: -webkit-box; /* WebKit */
-
-  /* On rend la boîte plus grande que son
-     contenu pour avoir de l'espace pour box-pack */
-  height: 300px;
-  /* On rend la boîte suffisament large pour que
-     contenu soit centré horizontalemen */
-  width: 300px;
-
-  /* On oriente les éléments fils verticalement */
-  -moz-box-orient: vertical; /* Mozilla */
-  -webkit-box-orient: vertical; /* WebKit */
-
-  /* On aligne les fils sur le centre horizontal */
-  -moz-box-align: center; /* Mozilla */
-  -webkit-box-align: center; /* WebKit */
-
-  /* On groupe les éléments fils en bas de la boîte */
-  -moz-box-pack: end;             /* Mozilla */
-  -webkit-box-pack: end;          /* WebKit */
-}
-
-div.exemple p {
-  /* On réduit les éléments fils, pour
-     qu'il y ait de la place pour box-align */
-  width: 200px;
-}
-
- -

HTML

- -
<div class="exemple">
-  <p>Je serai 2nd en partant du bas de div.exemple, centré horizontalement.</p>
-  <p>Je serai tout en bas de div.exemple, centré horizontalement.</p>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 310, 310)}}

- -

Notes

- -

Le « début » et la « fin » de la boîte dépendent de l'orientation et de la direction de la boîte. Voici le tableau indiquant le début de la boîte en fonction de l'orientation et de la direction :

- - - - - - - - - - - - - - - - - - - -
 NormalInverse
Horizontalgauchedroit
Verticalhaubas
- -

Si le regroupement utilise l'attribut pack de l'élément, le style est ignoré.

- -

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.

- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -
{{Compat("css.properties.box-pack")}}
- -

Voir aussi

- -
    -
  • {{cssxref("box-orient")}},
    • -
  • {{cssxref("box-direction")}},
    • -
  • {{cssxref("box-align")}}
    • -
diff --git a/files/fr/web/css/box-pack/index.md b/files/fr/web/css/box-pack/index.md new file mode 100644 index 0000000000..45fd486ed7 --- /dev/null +++ b/files/fr/web/css/box-pack/index.md @@ -0,0 +1,147 @@ +--- +title: box-pack +slug: Web/CSS/box-pack +tags: + - CSS + - Non-standard + - Propriété + - Reference +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.

+
+ +
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;
+box-pack: center;
+box-pack: end;
+box-pack: justify;
+
+/* Valeurs globales */
+box-pack: inherit;
+box-pack: initial;
+box-pack: unset;
+
+ +

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.

+ +

Syntaxe

+ +

Cette propriété se définit grâce à l'un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
start
+
La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.
+
center
+
La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.
+
end
+
La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.
+
justify
+
L'espace est réparti entre chacun des éléments fils sans qu'un espace soit placé avant le premier fils ou après le dernier. S'il y a un seul élément fils, la valeur est synonyme de start.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div.exemple {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* On rend la boîte plus grande que son
+     contenu pour avoir de l'espace pour box-pack */
+  height: 300px;
+  /* On rend la boîte suffisament large pour que
+     contenu soit centré horizontalemen */
+  width: 300px;
+
+  /* On oriente les éléments fils verticalement */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* On aligne les fils sur le centre horizontal */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* On groupe les éléments fils en bas de la boîte */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.exemple p {
+  /* On réduit les éléments fils, pour
+     qu'il y ait de la place pour box-align */
+  width: 200px;
+}
+
+ +

HTML

+ +
<div class="exemple">
+  <p>Je serai 2nd en partant du bas de div.exemple, centré horizontalement.</p>
+  <p>Je serai tout en bas de div.exemple, centré horizontalement.</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 310, 310)}}

+ +

Notes

+ +

Le « début » et la « fin » de la boîte dépendent de l'orientation et de la direction de la boîte. Voici le tableau indiquant le début de la boîte en fonction de l'orientation et de la direction :

+ + + + + + + + + + + + + + + + + + + +
 NormalInverse
Horizontalgauchedroit
Verticalhaubas
+ +

Si le regroupement utilise l'attribut pack de l'élément, le style est ignoré.

+ +

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.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +
{{Compat("css.properties.box-pack")}}
+ +

Voir aussi

+ +
    +
  • {{cssxref("box-orient")}},
    • +
  • {{cssxref("box-direction")}},
    • +
  • {{cssxref("box-align")}}
    • +
diff --git a/files/fr/web/css/box-shadow/index.html b/files/fr/web/css/box-shadow/index.html deleted file mode 100644 index a8e3cae319..0000000000 --- a/files/fr/web/css/box-shadow/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: box-shadow -slug: Web/CSS/box-shadow -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/box-shadow ---- -
{{CSSRef}}
- -

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")}}
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).

- -

Le générateur de box-shadow est un outil interactif qui permet de générer des valeurs pour box-shadow.

- -

Syntaxe

- -
/* offset-x | offset-y | color */
-box-shadow: 60px -16px teal;
-
-/* offset-x | offset-y | blur-radius | color */
-box-shadow: 10px 5px 5px black;
-
-/* offset-x | offset-y | blur-radius | spread-radius | color */
-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-
-/* inset | offset-x | offset-y | color */
-box-shadow: inset 5em 1em gold;
-
-/* Une liste d'ombres, séparées par des virgules */
-box-shadow: 3px 3px red, -1em 0 0.4em olive;
-
-/* Mots-clés globaux */
-box-shadow: inherit;
-box-shadow: initial;
-box-shadow: unset;
-
- -

La propriété box-shadow peut être définie grâce :

- -
    -
  • À deux, trois ou quatre valeurs de longueur ({{cssxref("<length>")}}) : -
      -
    • Avec deux valeurs, celles-ci sont respectivement considérées comme les coordonnées de décalage de l'ombre : <offset-x> et <offset-y>
      • -
    • Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou : <blur-radius>
      • -
    • Si une quatrième valeur est fournie, celle-ci correspondra au rayon d'étalement : <spread-radius>.
      • -
    -
    • -
  • Au mot-clé optionnel inset
    • -
  • À une valeur de couleur (<color>) optionnelle.
    • -
- -

Valeurs

- -
-
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>
-
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>
-
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>
-
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>
-
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.
-
- -

Interpolation

- -

Chaque ombre de la liste (none sera traitée comme une liste de longueur nulle) est interpolée via la couleur, le décalage horizontal et vertical, le rayon de flou et l'étalement (lorsque c'est pertinent). Pour chaque ombre, si les deux ombres sont ou ne sont pas inset, l'ombre interpolée doit respecter cette valeur. Si l'une des ombres a inset et l'autre non, la liste d'ombres ne peut pas être interpolée. Si les listes d'ombres ont des longueurs différentes, la liste la plus courte sera complétée à la fin avec des ombres dont la couleur est transparent, toutes les longueurs valent 0 et inset pour que la valeur corresponde à la plus longue liste.

- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
p {
-  height: 5em;
-  width: 300px;
-  background-color: rgba(128,128,128,0.1);
-}
-.ombre_droite_haut {
-  box-shadow: 60px -16px teal; /* la valeur négative décale vers le haut */
-}
-
-.ombre_interieure {
-  box-shadow: inset 5em 1em gold;
-  /* le mot-clé inset renverse l'ombre à l'intérieur */
-}
-
-.ombres_multiples_diffuses {
-  box-shadow: inset 0 0 1em gold, 0 0 2em red;
-  /* deux ombres dans la liste et des rayons de flou pour chacune */
-}
- -

HTML

- -
<p class="ombre_droite_haut">Déportée dans l'autre sens</p>
-
-<p class="ombre_interieure">L'ombre est dans le contenu !</p>
-
-<p class="ombres_multiples_diffuses">Du rouge dehors et du doré dedans</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","400","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.box-shadow")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/box-shadow/index.md b/files/fr/web/css/box-shadow/index.md new file mode 100644 index 0000000000..a8e3cae319 --- /dev/null +++ b/files/fr/web/css/box-shadow/index.md @@ -0,0 +1,152 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/box-shadow +--- +
{{CSSRef}}
+ +

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")}}
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).

+ +

Le générateur de box-shadow est un outil interactif qui permet de générer des valeurs pour box-shadow.

+ +

Syntaxe

+ +
/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Une liste d'ombres, séparées par des virgules */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Mots-clés globaux */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+
+ +

La propriété box-shadow peut être définie grâce :

+ +
    +
  • À deux, trois ou quatre valeurs de longueur ({{cssxref("<length>")}}) : +
      +
    • Avec deux valeurs, celles-ci sont respectivement considérées comme les coordonnées de décalage de l'ombre : <offset-x> et <offset-y>
      • +
    • Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou : <blur-radius>
      • +
    • Si une quatrième valeur est fournie, celle-ci correspondra au rayon d'étalement : <spread-radius>.
      • +
    +
    • +
  • Au mot-clé optionnel inset
    • +
  • À une valeur de couleur (<color>) optionnelle.
    • +
+ +

Valeurs

+ +
+
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>
+
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>
+
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>
+
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>
+
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.
+
+ +

Interpolation

+ +

Chaque ombre de la liste (none sera traitée comme une liste de longueur nulle) est interpolée via la couleur, le décalage horizontal et vertical, le rayon de flou et l'étalement (lorsque c'est pertinent). Pour chaque ombre, si les deux ombres sont ou ne sont pas inset, l'ombre interpolée doit respecter cette valeur. Si l'une des ombres a inset et l'autre non, la liste d'ombres ne peut pas être interpolée. Si les listes d'ombres ont des longueurs différentes, la liste la plus courte sera complétée à la fin avec des ombres dont la couleur est transparent, toutes les longueurs valent 0 et inset pour que la valeur corresponde à la plus longue liste.

+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
p {
+  height: 5em;
+  width: 300px;
+  background-color: rgba(128,128,128,0.1);
+}
+.ombre_droite_haut {
+  box-shadow: 60px -16px teal; /* la valeur négative décale vers le haut */
+}
+
+.ombre_interieure {
+  box-shadow: inset 5em 1em gold;
+  /* le mot-clé inset renverse l'ombre à l'intérieur */
+}
+
+.ombres_multiples_diffuses {
+  box-shadow: inset 0 0 1em gold, 0 0 2em red;
+  /* deux ombres dans la liste et des rayons de flou pour chacune */
+}
+ +

HTML

+ +
<p class="ombre_droite_haut">Déportée dans l'autre sens</p>
+
+<p class="ombre_interieure">L'ombre est dans le contenu !</p>
+
+<p class="ombres_multiples_diffuses">Du rouge dehors et du doré dedans</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","400","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.box-shadow")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/box-sizing/index.html b/files/fr/web/css/box-sizing/index.html deleted file mode 100644 index 2108d237cb..0000000000 --- a/files/fr/web/css/box-sizing/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: box-sizing -slug: Web/CSS/box-sizing -tags: - - Boîtes - - CSS - - Mocèle de Boîte CSS - - Propriété CSS - - Reference - - border-box - - box-sizing - - content-box - - height - - modèle de boîte - - size - - width -translation_of: Web/CSS/box-sizing ---- -
{{CSSRef}}
- -

La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec le modèle de boîte CSS).

- -
{{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 :

- -
    -
  • content-box est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.
    • -
  • 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.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-box-sizing: content-box;
-box-sizing: border-box;
-
-/* Valeurs globales */
-box-sizing: inherit;
-box-sizing: initial;
-box-sizing: unset;
-
- -

La propriété box-sizing peut être définie avec l'un des mots-clés suivants.

- -

Valeurs

- -
-
content-box
-
C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (padding)). Ainsi, .box {width: 350px; border:10px solid black;} fournira une boîte dont la largeur vaut  370px.
-
border-box
-
Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (padding), la bordure, mais pas la marge. C'est le modèle de boîte utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser border-box pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (padding) et du contenu.
-
- Ici, les dimensions de l'élément sont calculées comme suit : largeur = bordure + marge interne + largeur du contenu, et hauteur = bordure + marge interne + hauteur du contenu.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -
-

Note : La valeur padding-box a été dépréciée.

-
- -

Exemples

- -

CSS

- -
div {
-  width: 160px;
-  height: 80px;
-  padding: 20px;
-  border: 8px solid red;
-  background: yellow;
-}
-
-.content-box {
-  box-sizing: content-box;
-  /* Largeur totale : 160px + (2 * 20px) + (2 * 8px) = 216px
-     Hauteur totale : 80px + (2 * 20px) + (2 * 8px) = 136px
-     Largeur de la boîte de contenu : 160px
-     Hauteur de la boîte de contenu : 80px */
-}
-
-.border-box {
-  box-sizing: border-box;
-  /* Largeur totale : 160px
-     Hauteur totale : 80px
-     Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
-     Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
-}
- -

HTML

- -
<div class="content-box">Content box</div>
-<br>
-<div class="border-box">Border box</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","auto","200")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.box-sizing")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/box-sizing/index.md b/files/fr/web/css/box-sizing/index.md new file mode 100644 index 0000000000..2108d237cb --- /dev/null +++ b/files/fr/web/css/box-sizing/index.md @@ -0,0 +1,138 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - Boîtes + - CSS + - Mocèle de Boîte CSS + - Propriété CSS + - Reference + - border-box + - box-sizing + - content-box + - height + - modèle de boîte + - size + - width +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec le modèle de boîte CSS).

+ +
{{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 :

+ +
    +
  • content-box est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.
    • +
  • 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.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Valeurs globales */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

La propriété box-sizing peut être définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
content-box
+
C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (padding)). Ainsi, .box {width: 350px; border:10px solid black;} fournira une boîte dont la largeur vaut  370px.
+
border-box
+
Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (padding), la bordure, mais pas la marge. C'est le modèle de boîte utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser border-box pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (padding) et du contenu.
+
+ Ici, les dimensions de l'élément sont calculées comme suit : largeur = bordure + marge interne + largeur du contenu, et hauteur = bordure + marge interne + hauteur du contenu.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +
+

Note : La valeur padding-box a été dépréciée.

+
+ +

Exemples

+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Largeur totale : 160px + (2 * 20px) + (2 * 8px) = 216px
+     Hauteur totale : 80px + (2 * 20px) + (2 * 8px) = 136px
+     Largeur de la boîte de contenu : 160px
+     Hauteur de la boîte de contenu : 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Largeur totale : 160px
+     Hauteur totale : 80px
+     Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
+     Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","auto","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.box-sizing")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/break-after/index.html b/files/fr/web/css/break-after/index.html deleted file mode 100644 index 4ed535eaf6..0000000000 --- a/files/fr/web/css/break-after/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: break-after -slug: Web/CSS/break-after -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/break-after ---- -
{{CSSRef}}
- -

La propriété CSS break-after définit la façon dont la page, la colonne ou la région se fragmente après la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

- -
/* Valeurs génériques */
-break-after: auto;
-break-after: avoid;
-break-after: always;
-break-after: all;
-
-/* Valeurs de rupture liées aux pages */
-break-after: avoid-page;
-break-after: page;
-break-after: always;
-break-after: left;
-break-after: right;
-break-after: recto;
-break-after: verso;
-
-/* Valeurs de rupture liées aux colonnes */
-break-after: avoid-column;
-break-after: column;
-
-/* Valeurs de rupture liées aux régions */
-break-after: avoid-region;
-break-after: region;
-
-/* Valeurs globales */
-break-after: inherit;
-break-after: initial;
-break-after: unset;
-
- -

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de break-inside de l'élément englobant.

- -

Pour déterminer si on a une rupture, on applique les règles suivantes :

- -
    -
  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).
    2. -
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region, avoid-column), aucune rupture ne sera appliquée à cet endroit.
    3. -
- -

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

- -

Syntaxe

- -

Valeurs

- -
-
auto
-
Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte.
-
always{{experimental_inline}}
-
Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page.
-
all{{experimental_inline}}
-
Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page.
-
avoid
-
Empêche toute rupture (de page, de colonne ou de région) après la boîte.
-
left
-
Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche.
-
right
-
Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite.
-
page
-
Force un saut de page après la boîte de l'élément.
-
column
-
Force une rupture de colonne de page après la boîte de l'élément.
-
region {{experimental_inline}}
-
Force une rupture de région après la boîte de l'élément.
-
recto {{experimental_inline}}
-
Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).
-
verso {{experimental_inline}}
-
Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).
-
avoid-page
-
Empêche toute saut de page après la boîte de l'élément.
-
avoid-column
-
Empêche toute rupture de colonne après la boîte de l'élément.
-
avoid-region {{experimental_inline}}
-
Empêche toute rupture de région après boîte de l'élément.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Synonymes pour page-break-after

- -

Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-after")}} devrait être traitée par les navigateurs comme un alias de break-after. Cela permet de s'assurer que les sites qui utilisaient page-break-after continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
page-break-afterbreak-after
autoauto
leftleft
rightright
avoidavoid
alwayspage
- -
-

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.

-
- -

Exemples

- -

CSS

- -
.exemple {
-  -webkit-column-count: 4;
-  -moz-column-count: 4;
-  column-count: 4;
-}
-
-p {
-  break-after: avoid-column;
-  /* Pour Firefox : */
-  page-break-after: avoid;
-  /* Pour WebKit : */
-  -webkit-column-break-after: avoid;
-}
-
- -

HTML

- -
<div class="exemple">
-  <p>« Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »</p>
-  <p>« Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","400","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}{{Spec2('CSS3 Fragmentation')}}Ajouts des mots-clés recto et verso. Le type de média pour cette propriété est passé de paged à visual. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}{{Spec2('CSS3 Regions')}}La spécification étend la propriété pour gérer les sauts de région. Les mots-clés avoid-region et region sont ajoutés.
{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}{{Spec2('CSS3 Multicol')}}Définition initiale. La spécification étend la propriété {{cssxref("page-break-after")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

Prise en charge pour une disposition multi-colonnes

- -

{{Compat("css.properties.break-after.multicol_context")}}

- -

Prise en charge pour les média paginés

- -

{{Compat("css.properties.break-after.paged_context")}}

diff --git a/files/fr/web/css/break-after/index.md b/files/fr/web/css/break-after/index.md new file mode 100644 index 0000000000..4ed535eaf6 --- /dev/null +++ b/files/fr/web/css/break-after/index.md @@ -0,0 +1,209 @@ +--- +title: break-after +slug: Web/CSS/break-after +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/break-after +--- +
{{CSSRef}}
+ +

La propriété CSS break-after définit la façon dont la page, la colonne ou la région se fragmente après la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

+ +
/* Valeurs génériques */
+break-after: auto;
+break-after: avoid;
+break-after: always;
+break-after: all;
+
+/* Valeurs de rupture liées aux pages */
+break-after: avoid-page;
+break-after: page;
+break-after: always;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+
+/* Valeurs de rupture liées aux colonnes */
+break-after: avoid-column;
+break-after: column;
+
+/* Valeurs de rupture liées aux régions */
+break-after: avoid-region;
+break-after: region;
+
+/* Valeurs globales */
+break-after: inherit;
+break-after: initial;
+break-after: unset;
+
+ +

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de break-inside de l'élément englobant.

+ +

Pour déterminer si on a une rupture, on applique les règles suivantes :

+ +
    +
  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).
    2. +
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region, avoid-column), aucune rupture ne sera appliquée à cet endroit.
    3. +
+ +

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte.
+
always{{experimental_inline}}
+
Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page.
+
all{{experimental_inline}}
+
Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page.
+
avoid
+
Empêche toute rupture (de page, de colonne ou de région) après la boîte.
+
left
+
Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche.
+
right
+
Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite.
+
page
+
Force un saut de page après la boîte de l'élément.
+
column
+
Force une rupture de colonne de page après la boîte de l'élément.
+
region {{experimental_inline}}
+
Force une rupture de région après la boîte de l'élément.
+
recto {{experimental_inline}}
+
Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).
+
verso {{experimental_inline}}
+
Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).
+
avoid-page
+
Empêche toute saut de page après la boîte de l'élément.
+
avoid-column
+
Empêche toute rupture de colonne après la boîte de l'élément.
+
avoid-region {{experimental_inline}}
+
Empêche toute rupture de région après boîte de l'élément.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Synonymes pour page-break-after

+ +

Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-after")}} devrait être traitée par les navigateurs comme un alias de break-after. Cela permet de s'assurer que les sites qui utilisaient page-break-after continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-afterbreak-after
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +
+

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.

+
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-after: avoid-column;
+  /* Pour Firefox : */
+  page-break-after: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-after: avoid;
+}
+
+ +

HTML

+ +
<div class="exemple">
+  <p>« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »</p>
+  <p>« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","400","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}{{Spec2('CSS3 Fragmentation')}}Ajouts des mots-clés recto et verso. Le type de média pour cette propriété est passé de paged à visual. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}{{Spec2('CSS3 Regions')}}La spécification étend la propriété pour gérer les sauts de région. Les mots-clés avoid-region et region sont ajoutés.
{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}{{Spec2('CSS3 Multicol')}}Définition initiale. La spécification étend la propriété {{cssxref("page-break-after")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

Prise en charge pour une disposition multi-colonnes

+ +

{{Compat("css.properties.break-after.multicol_context")}}

+ +

Prise en charge pour les média paginés

+ +

{{Compat("css.properties.break-after.paged_context")}}

diff --git a/files/fr/web/css/break-before/index.html b/files/fr/web/css/break-before/index.html deleted file mode 100644 index 7ea0446d08..0000000000 --- a/files/fr/web/css/break-before/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: break-before -slug: Web/CSS/break-before -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/break-before ---- -
{{CSSRef}}
- -

La propriété break-before décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

- -
/* Valeurs de rupture génériques */
-break-before: auto;
-break-before: avoid;
-break-before: always;
-break-before: all;
-
-/* Valeurs de rupture pour les pages */
-break-before: avoid-page;
-break-before: page:
-break-before: left;
-break-before: right;
-break-before: recto;
-break-before: verso;
-
-/* Valeurs de rupture pour les colonnes */
-break-before: avoid-column;
-break-before: column;
-
-/* Valeurs de rupture pour les régions */
-break-before: avoid-region;
-break-before: region;
-
-/* Valeurs globales */
-break-before: inherit;
-break-before: initial;
-break-before: unset;
-
- -

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de break-inside de l'élément englobant.

- -

Pour déterminer si on a une rupture, on applique les règles suivantes :

- -
    -
  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).
    2. -
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region, avoid-column), aucune rupture ne sera appliquée à cet endroit.
    3. -
- -

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

- -

Syntaxe

- -

La propriété break-before se paramètre avec un des mots-clés définis ci-après.

- -

Valeurs

- -

Valeurs de rupture génériques

- -
-
auto
-
Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.
-
all{{experimental_inline}}
-
Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.
-
always{{experimental_inline}}
-
Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.
-
avoid
-
Empêche toute rupture (de page, de colonne ou de région) avant la boîte.
-
- -

Valeurs de rupture liées aux médias paginés

- -
-
avoid-page
-
Empêche toute saut de page avant la boîte de l'élément.
-
page
-
Force un saut de page avant la boîte de l'élément
-
left
-
Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.
-
recto {{experimental_inline}}
-
Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).
-
right
-
Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.
-
verso{{experimental_inline}}
-
Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).
-
- -

Valeurs de ruptures relatives aux dispositions en colonnes

- -
-
avoid-column
-
Empêche toute rupture de colonne avant la boîte de l'élément.
-
column
-
Force une rupture de colonne de page avant la boîte de l'élément.
-
- -

Valeurs de ruptures relatives aux régions

- -
-
region{{experimental_inline}}
-
Force une rupture de région avant la boîte de l'élément.
-
avoid-region{{experimental_inline}}
-
Empêche toute rupture de région avant la boîte de l'élément.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Alias/synonymes pour les ruptures de page

- -

Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de break-before. Cela permet aux sites utilisant page-break-before de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
page-break-beforebreak-before
autoauto
leftleft
rightright
avoidavoid
alwayspage
- -
-

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.

-
- -

Exemples

- -

CSS

- -
.exemple {
-  -webkit-column-count: 4;
-  -moz-column-count: 4;
-  column-count: 4;
-}
-
-p {
-  break-before: avoid-column;
-  /* Pour Firefox : */
-  page-break-before: avoid;
-  /* Pour WebKit : */
-  -webkit-column-break-before: avoid;
-}
-
- -

HTML

- -
<div class="exemple">
-  <p>« Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »</p>
-  <p>« Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","400","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}{{Spec2('CSS3 Fragmentation')}}Ajouts des mots-clés recto et verso. Le type de média pour cette propriété est passé de paged à visual. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}{{Spec2('CSS3 Regions')}}La spécification étend la propriété pour gérer les sauts de région. Les mots-clés avoid-region et region sont ajoutés.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}{{Spec2('CSS3 Multicol')}}Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de  CSS 2.1 afin de gérer les sauts de page ou de colonne.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

Prise en charge pour une disposition multi-colonnes

- -

{{Compat("css.properties.break-before.multicol_context")}}

- -

Prise en charge pour les média paginés

- -

{{Compat("css.properties.break-before.paged_context")}}

diff --git a/files/fr/web/css/break-before/index.md b/files/fr/web/css/break-before/index.md new file mode 100644 index 0000000000..7ea0446d08 --- /dev/null +++ b/files/fr/web/css/break-before/index.md @@ -0,0 +1,227 @@ +--- +title: break-before +slug: Web/CSS/break-before +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/break-before +--- +
{{CSSRef}}
+ +

La propriété break-before décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

+ +
/* Valeurs de rupture génériques */
+break-before: auto;
+break-before: avoid;
+break-before: always;
+break-before: all;
+
+/* Valeurs de rupture pour les pages */
+break-before: avoid-page;
+break-before: page:
+break-before: left;
+break-before: right;
+break-before: recto;
+break-before: verso;
+
+/* Valeurs de rupture pour les colonnes */
+break-before: avoid-column;
+break-before: column;
+
+/* Valeurs de rupture pour les régions */
+break-before: avoid-region;
+break-before: region;
+
+/* Valeurs globales */
+break-before: inherit;
+break-before: initial;
+break-before: unset;
+
+ +

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de break-inside de l'élément englobant.

+ +

Pour déterminer si on a une rupture, on applique les règles suivantes :

+ +
    +
  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).
    2. +
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region, avoid-column), aucune rupture ne sera appliquée à cet endroit.
    3. +
+ +

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

+ +

Syntaxe

+ +

La propriété break-before se paramètre avec un des mots-clés définis ci-après.

+ +

Valeurs

+ +

Valeurs de rupture génériques

+ +
+
auto
+
Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.
+
all{{experimental_inline}}
+
Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.
+
always{{experimental_inline}}
+
Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.
+
avoid
+
Empêche toute rupture (de page, de colonne ou de région) avant la boîte.
+
+ +

Valeurs de rupture liées aux médias paginés

+ +
+
avoid-page
+
Empêche toute saut de page avant la boîte de l'élément.
+
page
+
Force un saut de page avant la boîte de l'élément
+
left
+
Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.
+
recto {{experimental_inline}}
+
Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).
+
right
+
Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.
+
verso{{experimental_inline}}
+
Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).
+
+ +

Valeurs de ruptures relatives aux dispositions en colonnes

+ +
+
avoid-column
+
Empêche toute rupture de colonne avant la boîte de l'élément.
+
column
+
Force une rupture de colonne de page avant la boîte de l'élément.
+
+ +

Valeurs de ruptures relatives aux régions

+ +
+
region{{experimental_inline}}
+
Force une rupture de région avant la boîte de l'élément.
+
avoid-region{{experimental_inline}}
+
Empêche toute rupture de région avant la boîte de l'élément.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Alias/synonymes pour les ruptures de page

+ +

Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de break-before. Cela permet aux sites utilisant page-break-before de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-beforebreak-before
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +
+

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.

+
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-before: avoid-column;
+  /* Pour Firefox : */
+  page-break-before: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-before: avoid;
+}
+
+ +

HTML

+ +
<div class="exemple">
+  <p>« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »</p>
+  <p>« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","400","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}{{Spec2('CSS3 Fragmentation')}}Ajouts des mots-clés recto et verso. Le type de média pour cette propriété est passé de paged à visual. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}{{Spec2('CSS3 Regions')}}La spécification étend la propriété pour gérer les sauts de région. Les mots-clés avoid-region et region sont ajoutés.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}{{Spec2('CSS3 Multicol')}}Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de  CSS 2.1 afin de gérer les sauts de page ou de colonne.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

Prise en charge pour une disposition multi-colonnes

+ +

{{Compat("css.properties.break-before.multicol_context")}}

+ +

Prise en charge pour les média paginés

+ +

{{Compat("css.properties.break-before.paged_context")}}

diff --git a/files/fr/web/css/break-inside/index.html b/files/fr/web/css/break-inside/index.html deleted file mode 100644 index 4a0ca31b30..0000000000 --- a/files/fr/web/css/break-inside/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: break-inside -slug: Web/CSS/break-inside -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/break-inside ---- -
{{CSSRef}}
- -

La propriété CSS break-inside définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

- -
/* Valeurs avec un mot-clé */
-break-inside: auto;
-break-inside: avoid;
-break-inside: avoid-page;
-break-inside: avoid-column;
-break-inside: avoid-region;
-
-/* Valeurs globales */
-break-inside: inherit;
-break-inside: initial;
-break-inside: unset;
-
- -

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de break-inside de l'élément englobant.

- -

Pour déterminer si on a une rupture, on applique les règles suivantes :

- -
    -
  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur break-inside).
    2. -
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region ou avoid-column), aucune rupture ne sera appliquée à cet endroit.
    3. -
- -

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

- -

Syntaxe

- -

La propriété break-inside se définit avec un mot-clé parmi ceux de la liste ci-après.

- -

Valeurs

- -
-
auto
-
Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).
-
avoid
-
Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.
-
avoid-page
-
Cette valeur interdit toute rupture de page au sein de la boîte.
-
avoid-column
-
Cette valeur interdit toute rupture de colonne au sein de la boîte.
-
avoid-region {{experimental_inline}}
-
Cette valeur interdit toute rupture de région au sein de la boîte.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Synonymes pour page-break-inside

- -

Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme break-inside. De cette façon, cela permet aux sites qui utilisaient page-break-inside de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :

- - - - - - - - - - - - - - - - - - -
page-break-insidebreak-inside
autoauto
avoidavoid
- -

Exemples

- -

CSS

- -
.exemple {
-  -webkit-column-count: 4;
-  -moz-column-count: 4;
-  column-count: 4;
-}
-
-p {
-  break-inside: avoid-column;
-  /* Pour Firefox : */
-  page-break-inside: avoid;
-  /* Pour WebKit : */
-  -webkit-column-break-inside: avoid;
-}
-
- -

HTML

- -
<div class="exemple">
-  <p>« Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »</p>
-  <p>« Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","400","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}Aucune modification.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}Ajout de la gestion des ruptures de région.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.break-inside", 4)}}

- -

Notes relatives à la compatibilité

- -

Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.

- -

Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée -webkit-column-break-inside afin de contrôler les ruptures de colonne.

diff --git a/files/fr/web/css/break-inside/index.md b/files/fr/web/css/break-inside/index.md new file mode 100644 index 0000000000..4a0ca31b30 --- /dev/null +++ b/files/fr/web/css/break-inside/index.md @@ -0,0 +1,161 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/break-inside +--- +
{{CSSRef}}
+ +

La propriété CSS break-inside définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

+ +
/* Valeurs avec un mot-clé */
+break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+/* Valeurs globales */
+break-inside: inherit;
+break-inside: initial;
+break-inside: unset;
+
+ +

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de break-inside de l'élément englobant.

+ +

Pour déterminer si on a une rupture, on applique les règles suivantes :

+ +
    +
  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur break-inside).
    2. +
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region ou avoid-column), aucune rupture ne sera appliquée à cet endroit.
    3. +
+ +

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

+ +

Syntaxe

+ +

La propriété break-inside se définit avec un mot-clé parmi ceux de la liste ci-après.

+ +

Valeurs

+ +
+
auto
+
Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).
+
avoid
+
Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.
+
avoid-page
+
Cette valeur interdit toute rupture de page au sein de la boîte.
+
avoid-column
+
Cette valeur interdit toute rupture de colonne au sein de la boîte.
+
avoid-region {{experimental_inline}}
+
Cette valeur interdit toute rupture de région au sein de la boîte.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Synonymes pour page-break-inside

+ +

Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme break-inside. De cette façon, cela permet aux sites qui utilisaient page-break-inside de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :

+ + + + + + + + + + + + + + + + + + +
page-break-insidebreak-inside
autoauto
avoidavoid
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-inside: avoid-column;
+  /* Pour Firefox : */
+  page-break-inside: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-inside: avoid;
+}
+
+ +

HTML

+ +
<div class="exemple">
+  <p>« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »</p>
+  <p>« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","400","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}Aucune modification.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}Ajout de la gestion des ruptures de région.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.break-inside", 4)}}

+ +

Notes relatives à la compatibilité

+ +

Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.

+ +

Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée -webkit-column-break-inside afin de contrôler les ruptures de colonne.

diff --git a/files/fr/web/css/calc()/index.html b/files/fr/web/css/calc()/index.html deleted file mode 100644 index b3eb962d7b..0000000000 --- a/files/fr/web/css/calc()/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: calc -slug: Web/CSS/calc() -tags: - - CSS - - Fonction - - Reference - - Web -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}
- -

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) */
-width: calc(100% - 80px);
-
- -

Il est aussi possible d'utiliser calc() dans une autre fonction calc() et ainsi d'imbriquer les fonctions les unes dans les autres.

- -

Syntaxe

- -

Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs :

- -
-
+
-
Addition
-
-
-
Soustraction
-
*
-
Multiplication. Au moins un des arguments doit être un {{cssxref("<number>")}}.
-
/
-
Division. Il n'est pas possible de diviser par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante. L'opérande droit doit être une valeur de type {{cssxref("<number>")}}.
-
- -

L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.

- -

Notes

- -
    -
  • Une division par zéro aboutit à une erreur qui est générée par le parseur HTML.
    • -
  • Les opérateurs + et - doivent toujours être entouré d'espaces. Par exemple l'opérande de calc(50% -8px) sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de calc(50% - 8px) est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, calc(8px + -50%) est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif.
    • -
  • Les opérateurs * et / ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé.
    • -
  • Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était auto qui avait été utilisé.
    • -
  • Il est possible d'imbriquer des fonctions calc(), auquel cas, les appels « internes » sont considérés comme des parenthèses.
    • -
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Positionner un objet sur l’écran avec une marge

- -

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 {
-  position: absolute;
-  left: 40px;
-  width: calc(100% - 80px);
-  border: solid black 1px;
-  box-shadow: 1px 2px;
-  background-color: yellow;
-  padding: 6px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
- -
<div class="banniere">C'est une bannière !</div>
- -

{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}

- -

Dimensionner automatiquement les champs d’un formulaire pour s’ajuster au conteneur

- -

Un autre cas d'utilisation de calc() est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.

- -

Regardons un peu le CSS :

- -
input {
-  padding: 2px;
-  display: block;
-  width: calc(100% - 1em);
-}
-
-#boiteformulaire {
-  width: calc(100%/6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

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>
-  <div id="boiteformulaire">
-  <label>Tapez quelque chose :</label>
-  <input type="text">
-  </div>
-</form>
-
- -

{{EmbedLiveSample("Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur", '100%', '80')}}

- -

Imbriquer plusieurs calc() grâce aux variables CSS

- -

Prenons la feuille de style suivante :

- -
.toto {
-  --largeurA: 100px;
-  --largeurB: calc(var(--largeurA) / 2);
-  --largeurC: calc(var(--largeurB) / 2);
-  width: var(--largeurC);
-}
- -

Une fois que toutes les variables sont développées, largeurC aura la valeur calc( calc( 100px / 2) / 2) et sera ensuite affectée à la propriété {{cssxref("width")}} des éléments de la classe toto. Tous les calc() imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme calc( ( 100px / 2) / 2) (soit 25px). En résumé, utiliser des calc() imbriqués revient à utiliser des parenthèses.

- -

Accessibilité

- -

Lorsque vous utilisez calc() pour définir la taille d'un texte, assurez-vous d'inclure une unité de longueur relative. Par exemple :

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.calc")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/calc()/index.md b/files/fr/web/css/calc()/index.md new file mode 100644 index 0000000000..b3eb962d7b --- /dev/null +++ b/files/fr/web/css/calc()/index.md @@ -0,0 +1,161 @@ +--- +title: calc +slug: Web/CSS/calc() +tags: + - CSS + - Fonction + - Reference + - Web +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

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) */
+width: calc(100% - 80px);
+
+ +

Il est aussi possible d'utiliser calc() dans une autre fonction calc() et ainsi d'imbriquer les fonctions les unes dans les autres.

+ +

Syntaxe

+ +

Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs :

+ +
+
+
+
Addition
+
-
+
Soustraction
+
*
+
Multiplication. Au moins un des arguments doit être un {{cssxref("<number>")}}.
+
/
+
Division. Il n'est pas possible de diviser par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante. L'opérande droit doit être une valeur de type {{cssxref("<number>")}}.
+
+ +

L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.

+ +

Notes

+ +
    +
  • Une division par zéro aboutit à une erreur qui est générée par le parseur HTML.
    • +
  • Les opérateurs + et - doivent toujours être entouré d'espaces. Par exemple l'opérande de calc(50% -8px) sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de calc(50% - 8px) est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, calc(8px + -50%) est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif.
    • +
  • Les opérateurs * et / ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé.
    • +
  • Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était auto qui avait été utilisé.
    • +
  • Il est possible d'imbriquer des fonctions calc(), auquel cas, les appels « internes » sont considérés comme des parenthèses.
    • +
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Positionner un objet sur l’écran avec une marge

+ +

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 {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+ +
<div class="banniere">C'est une bannière !</div>
+ +

{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}

+ +

Dimensionner automatiquement les champs d’un formulaire pour s’ajuster au conteneur

+ +

Un autre cas d'utilisation de calc() est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.

+ +

Regardons un peu le CSS :

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#boiteformulaire {
+  width: calc(100%/6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

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>
+  <div id="boiteformulaire">
+  <label>Tapez quelque chose :</label>
+  <input type="text">
+  </div>
+</form>
+
+ +

{{EmbedLiveSample("Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur", '100%', '80')}}

+ +

Imbriquer plusieurs calc() grâce aux variables CSS

+ +

Prenons la feuille de style suivante :

+ +
.toto {
+  --largeurA: 100px;
+  --largeurB: calc(var(--largeurA) / 2);
+  --largeurC: calc(var(--largeurB) / 2);
+  width: var(--largeurC);
+}
+ +

Une fois que toutes les variables sont développées, largeurC aura la valeur calc( calc( 100px / 2) / 2) et sera ensuite affectée à la propriété {{cssxref("width")}} des éléments de la classe toto. Tous les calc() imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme calc( ( 100px / 2) / 2) (soit 25px). En résumé, utiliser des calc() imbriqués revient à utiliser des parenthèses.

+ +

Accessibilité

+ +

Lorsque vous utilisez calc() pour définir la taille d'un texte, assurez-vous d'inclure une unité de longueur relative. Par exemple :

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.calc")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/caption-side/index.html b/files/fr/web/css/caption-side/index.html deleted file mode 100644 index 46b1691fd8..0000000000 --- a/files/fr/web/css/caption-side/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: caption-side -slug: Web/CSS/caption-side -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/caption-side ---- -
{{CSSRef}}
- -

La propriété caption-side permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément {{HTMLElement("caption")}} du tableau). Les valeurs sont relatives au mode d'écriture (cf. {{cssxref("writing-mode")}}) du tableau.

- -
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-/* Valeurs directionnelles */
-caption-side: top;
-caption-side: bottom;
-
-/* Valeurs non-standards */
-caption-side: left;
-caption-side: right;
-caption-side: top-outside;
-caption-side: bottom-outside;
-
-
-/* Valeur globales */
-caption-side: inherit;
-caption-side: initial;
-caption-side: unset;
-
- -

Valeurs

- -
-
top
-
Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.
-
bottom
-
Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau.
-
left {{non-standard_inline}}
-
Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau.
- {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}
-
right {{non-standard_inline}}
-
Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau.
- {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}
-
top-outside {{non-standard_inline}}
-
Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.
- {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur top, réintroduit avec cette valeur dans une future spécification.")}}
-
bottom-outside {{non-standard_inline}}
-
Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.
- {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur bottom, réintroduit avec cette valeur dans une future spécification.")}}
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
caption {
-  caption-side: bottom;
-}
-
- -

HTML

- -
<table>
-  <caption>Une légende</caption>
-  <tr>
-    <td>Des données d'un tableau</td>
-    <td>Pfiou encore des données</td>
-  </tr>
-</table>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}}{{Spec2('CSS Logical Properties')}}Les valeurs top et bottom sont désormais définies comme relatives à la valeur de writing-mode.
{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.caption-side")}}

diff --git a/files/fr/web/css/caption-side/index.md b/files/fr/web/css/caption-side/index.md new file mode 100644 index 0000000000..46b1691fd8 --- /dev/null +++ b/files/fr/web/css/caption-side/index.md @@ -0,0 +1,112 @@ +--- +title: caption-side +slug: Web/CSS/caption-side +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/caption-side +--- +
{{CSSRef}}
+ +

La propriété caption-side permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément {{HTMLElement("caption")}} du tableau). Les valeurs sont relatives au mode d'écriture (cf. {{cssxref("writing-mode")}}) du tableau.

+ +
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+/* Valeurs directionnelles */
+caption-side: top;
+caption-side: bottom;
+
+/* Valeurs non-standards */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+
+/* Valeur globales */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+
+ +

Valeurs

+ +
+
top
+
Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.
+
bottom
+
Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau.
+
left {{non-standard_inline}}
+
Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau.
+ {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}
+
right {{non-standard_inline}}
+
Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau.
+ {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}
+
top-outside {{non-standard_inline}}
+
Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.
+ {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur top, réintroduit avec cette valeur dans une future spécification.")}}
+
bottom-outside {{non-standard_inline}}
+
Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.
+ {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur bottom, réintroduit avec cette valeur dans une future spécification.")}}
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
caption {
+  caption-side: bottom;
+}
+
+ +

HTML

+ +
<table>
+  <caption>Une légende</caption>
+  <tr>
+    <td>Des données d'un tableau</td>
+    <td>Pfiou encore des données</td>
+  </tr>
+</table>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}}{{Spec2('CSS Logical Properties')}}Les valeurs top et bottom sont désormais définies comme relatives à la valeur de writing-mode.
{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.caption-side")}}

diff --git a/files/fr/web/css/caret-color/index.html b/files/fr/web/css/caret-color/index.html deleted file mode 100644 index ef1f0eb278..0000000000 --- a/files/fr/web/css/caret-color/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: caret-color -slug: Web/CSS/caret-color -tags: - - CSS - - Propriété - - Reference - - Web -translation_of: Web/CSS/caret-color ---- -
{{CSSRef}}
- -

La propriété CSS caret-color définit la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.

- -
{{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.

-
- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-caret-color: auto;
-caret-color: transparent;
-color: currentColor;
-
-/* Valeurs de couleur */
-/* Type <color> */
-caret-color: red;
-caret-color: #5729e9;
-caret-color: rgb(0, 200, 0);
-caret-color: hsla(228, 4%, 24%, 0.8);
- -

Valeurs

- -
-
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).

-
-
<color>
-
L'agent utilisateur utilise la couleur ({{cssxref("<color>")}}) indiquée comme couleur pour le curseur de saisie.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
#exemple {
-  caret-color: red;
-}
- -

HTML

- -
<input id="exemple" />
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}{{Spec2("CSS3 UI")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.caret-color")}}

- -

Voir aussi

- -
    -
  • {{HTMLElement("input")}}
    • -
  • L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément é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/caret-color/index.md b/files/fr/web/css/caret-color/index.md new file mode 100644 index 0000000000..ef1f0eb278 --- /dev/null +++ b/files/fr/web/css/caret-color/index.md @@ -0,0 +1,100 @@ +--- +title: caret-color +slug: Web/CSS/caret-color +tags: + - CSS + - Propriété + - Reference + - Web +translation_of: Web/CSS/caret-color +--- +
{{CSSRef}}
+ +

La propriété CSS caret-color définit la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.

+ +
{{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.

+
+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+caret-color: auto;
+caret-color: transparent;
+color: currentColor;
+
+/* Valeurs de couleur */
+/* Type <color> */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);
+ +

Valeurs

+ +
+
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).

+
+
<color>
+
L'agent utilisateur utilise la couleur ({{cssxref("<color>")}}) indiquée comme couleur pour le curseur de saisie.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
#exemple {
+  caret-color: red;
+}
+ +

HTML

+ +
<input id="exemple" />
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}{{Spec2("CSS3 UI")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.caret-color")}}

+ +

Voir aussi

+ +
    +
  • {{HTMLElement("input")}}
    • +
  • L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément é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/child_combinator/index.html b/files/fr/web/css/child_combinator/index.html deleted file mode 100644 index e0d64a3f3f..0000000000 --- a/files/fr/web/css/child_combinator/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Sélecteurs enfant -slug: Web/CSS/Child_combinator -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/Child_combinator -original_slug: Web/CSS/Sélecteurs_enfant ---- -
{{CSSRef("Selectors")}}
- -

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

- -
/* Les éléments <li> qui sont des enfant d'un */
-/* <ul class="mon-truc"> */
-ul.mon-truc>li {
-  margin: 2em;
-}
- -

En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

- -

Syntaxe

- -
selecteur1 > selecteur2 { déclarations CSS }
-
- -

Exemples

- -

CSS

- -
span {
-  background-color: white;
-}
-
-div > span {
-  background-color: blue;
-}
-
- -

HTML

- -
<div>
-  <span>Premier span du div.
-    <span>Deuxième span, dans un span dans un div.</span>
-  </span>
-</div>
-<span>Troisième span, en dehors de tout div.</span>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%", 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.child")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/child_combinator/index.md b/files/fr/web/css/child_combinator/index.md new file mode 100644 index 0000000000..e0d64a3f3f --- /dev/null +++ b/files/fr/web/css/child_combinator/index.md @@ -0,0 +1,93 @@ +--- +title: Sélecteurs enfant +slug: Web/CSS/Child_combinator +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Child_combinator +original_slug: Web/CSS/Sélecteurs_enfant +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

+ +
/* Les éléments <li> qui sont des enfant d'un */
+/* <ul class="mon-truc"> */
+ul.mon-truc>li {
+  margin: 2em;
+}
+ +

En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

+ +

Syntaxe

+ +
selecteur1 > selecteur2 { déclarations CSS }
+
+ +

Exemples

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: blue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Premier span du div.
+    <span>Deuxième span, dans un span dans un div.</span>
+  </span>
+</div>
+<span>Troisième span, en dehors de tout div.</span>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%", 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.child")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/clamp()/index.html b/files/fr/web/css/clamp()/index.html deleted file mode 100644 index 242f7aa3f6..0000000000 --- a/files/fr/web/css/clamp()/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/clamp() ---- -
{{CSSRef}}
- -

La fonction CSS clamp() permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction clamp() 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>")}} peut être utilisée.

- -
-

Note : l'expression  clamp(MIN, VAL, MAX) sera résolue comme max(MIN, min(VAL, MAX))).

-
- -
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);
-/* 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))) */
-width: max(10px, min(64px, 80px))
-width: max(10px, 64px);
-width: 64px;
-
- -

Syntaxe

- -

La fonction clamp() utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale.

- -

La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure.

- -

La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure.

- -

La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure.

- -

Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir  {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans calc() et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées.

- -

Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions.

- -

Notes

- -
    -
  • Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme auto si le tableau suit une disposition automatique ou fixée.
    • -
  • Il est possible d'imbriquer des fonctions max() et min() dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à calc().
    • -
  • Attention à bien utiliser un espace de chaque côté des opérateurs + et -.
    • -
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Indiquer une taille de police minimale et maximale

- -

Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme.

- -

CSS

- -
h1 {
-  font-size: 2rem;
-}
-h1.responsive {
-  font-size: clamp(32px, 2em, 2rem);
-}
-
- -

Ici on utilise l'unité rem pour fixer un maximum correspondant à deux fois la taille em de la racine.

- -

HTML

- -
<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>
-
- -

Résultat

- -

{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}}{{Spec2('CSS4 Values')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.clamp")}}

- -

Voir aussi

- -
    -
  • {{CSSxRef("calc")}}
    • -
  • {{CSSxRef("max")}}
    • -
  • {{CSSxRef("min")}}
    • -
  • Valeurs CSS
    • -
diff --git a/files/fr/web/css/clamp()/index.md b/files/fr/web/css/clamp()/index.md new file mode 100644 index 0000000000..242f7aa3f6 --- /dev/null +++ b/files/fr/web/css/clamp()/index.md @@ -0,0 +1,118 @@ +--- +title: clamp() +slug: Web/CSS/clamp() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/clamp() +--- +
{{CSSRef}}
+ +

La fonction CSS clamp() permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction clamp() 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>")}} peut être utilisée.

+ +
+

Note : l'expression  clamp(MIN, VAL, MAX) sera résolue comme max(MIN, min(VAL, MAX))).

+
+ +
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);
+/* 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))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;
+
+ +

Syntaxe

+ +

La fonction clamp() utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale.

+ +

La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure.

+ +

La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure.

+ +

La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure.

+ +

Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir  {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans calc() et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées.

+ +

Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions.

+ +

Notes

+ +
    +
  • Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme auto si le tableau suit une disposition automatique ou fixée.
    • +
  • Il est possible d'imbriquer des fonctions max() et min() dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à calc().
    • +
  • Attention à bien utiliser un espace de chaque côté des opérateurs + et -.
    • +
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Indiquer une taille de police minimale et maximale

+ +

Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme.

+ +

CSS

+ +
h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: clamp(32px, 2em, 2rem);
+}
+
+ +

Ici on utilise l'unité rem pour fixer un maximum correspondant à deux fois la taille em de la racine.

+ +

HTML

+ +
<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>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}}{{Spec2('CSS4 Values')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.clamp")}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("calc")}}
    • +
  • {{CSSxRef("max")}}
    • +
  • {{CSSxRef("min")}}
    • +
  • Valeurs CSS
    • +
diff --git a/files/fr/web/css/class_selectors/index.html b/files/fr/web/css/class_selectors/index.html deleted file mode 100644 index 1e65081811..0000000000 --- a/files/fr/web/css/class_selectors/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Sélecteurs de classe -slug: Web/CSS/Class_selectors -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Class_selectors -original_slug: Web/CSS/Sélecteurs_de_classe ---- -
{{CSSRef}}
- -

Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.

- -
/* Cible tous les éléments ayant la classe "spacious" */
-.spacious {
-  margin: 2em;
-}
-
-/* Cible tous les éléments <li> ayant la classe "spacious" */
-li.spacious {
-  margin: 2em;
-}
-
-/* Cible tous les éléments <li> ayant une classe qui */
-/* contient à la fois "spacious" et "elegant"        */
-li.spacious.elegant {
-  margin: 2em;
-}
- -

L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.

- -

Syntaxe

- -
.nomdeclasse { déclarations CSS }
- -

Cela est exactement équivalent à l'utilisation du sélecteur d'attribut de la façon suivante :

- -
[class~=nomdeclasse] { déclarations CSS }
- -

Exemples

- -

CSS

- -
.classy {
-  background-color: skyblue;
-}
-.toto {
- font-weight: bold;
-}
-
- -

HTML

- -
<div class="classy">Voici un div avec du texte.</div>
-<div class="toto classy truc">Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !</div>
-<div>En voilà un autre.</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.class")}}

diff --git a/files/fr/web/css/class_selectors/index.md b/files/fr/web/css/class_selectors/index.md new file mode 100644 index 0000000000..1e65081811 --- /dev/null +++ b/files/fr/web/css/class_selectors/index.md @@ -0,0 +1,100 @@ +--- +title: Sélecteurs de classe +slug: Web/CSS/Class_selectors +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Class_selectors +original_slug: Web/CSS/Sélecteurs_de_classe +--- +
{{CSSRef}}
+ +

Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.

+ +
/* Cible tous les éléments ayant la classe "spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments <li> ayant la classe "spacious" */
+li.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments <li> ayant une classe qui */
+/* contient à la fois "spacious" et "elegant"        */
+li.spacious.elegant {
+  margin: 2em;
+}
+ +

L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.

+ +

Syntaxe

+ +
.nomdeclasse { déclarations CSS }
+ +

Cela est exactement équivalent à l'utilisation du sélecteur d'attribut de la façon suivante :

+ +
[class~=nomdeclasse] { déclarations CSS }
+ +

Exemples

+ +

CSS

+ +
.classy {
+  background-color: skyblue;
+}
+.toto {
+ font-weight: bold;
+}
+
+ +

HTML

+ +
<div class="classy">Voici un div avec du texte.</div>
+<div class="toto classy truc">Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !</div>
+<div>En voilà un autre.</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.class")}}

diff --git a/files/fr/web/css/clear/index.html b/files/fr/web/css/clear/index.html deleted file mode 100644 index 541ff870fa..0000000000 --- a/files/fr/web/css/clear/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: clear -slug: Web/CSS/clear -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/clear ---- -
{{CSSRef}}
- -

La propriété clear indique si un élément peut être situé à côté d'éléments flottants qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété clear s'applique aux éléments flottants comme aux éléments non-flottants.

- -
{{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 é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.

- -
-

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: "";
-   display: block;
-   clear: both;
-}
-
-
- -

Syntaxe

- -
/* Valeurs avec mot-clé */
-clear: none;
-clear: left;
-clear: right;
-clear: both;
-clear: inline-start;
-clear: inline-end;
-
-/* Valeurs globales */
-clear: inherit;
-clear: initial;
-clear: unset;
-
- -

Valeurs

- -
-
none
-
Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.
-
left
-
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.
-
right
-
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.
-
both
-
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.
-
inline-start
-
Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu vers le début du bloc englobant. Autrement dit, cela dégage à gauche pour les scripts de gauche à droite (LTR pour left to right) et dégage à droite pour les scripts de droite à gauche (RTL pour droite à gauche).
-
inline-end
-
Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu du côté de la fin du bloc englobant. Autrement dit, cela dégage à droite pour les scripts de gauche à droite (LTR pour left to right) et dégage à gauche pour les scripts de droite à gauche (RTL pour droite à gauche).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

clear: left

- -

HTML

- -
<div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
-  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-  <p class="left">Ce paragraphe est dégagé à gauche.</p>
-</div>
-
- -

CSS

- -
.wrapper{
-  border:1px solid black;
-  padding:10px;
-}
-.left {
-  border: 1px solid black;
-  clear: left;
-}
-.black {
-  float: left;
-  margin: 0;
-  background-color: black;
-  color: #fff;
-  width: 20%;
-}
-.red {
-  float: left;
-  margin: 0;
-  background-color: red;
-  width:20%;
-}
-p {
-  width: 50%;
-}
-
- -

{{EmbedLiveSample('clear_left','100%','250')}}

- -

clear: right

- -

HTML

- -
<div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
-  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-  <p class="right">Ce paragraphe est dégagé à droite.</p>
-</div>
-
- -

CSS

- -
.wrapper{
-  border:1px solid black;
-  padding:10px;
-}
-.right {
-  border: 1px solid black;
-  clear: right;
-}
-.black {
-  float: right;
-  margin: 0;
-  background-color: black;
-  color: #fff;
-  width:20%;
-}
-.red {
-  float: right;
-  margin: 0;
-  background-color: red;
-  width:20%;
-}
-p {
-  width: 50%;
-}
- -

{{EmbedLiveSample('clear_right','100%','250')}}

- -

clear: both

- -

HTML

- -
<div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
-  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
-  <p class="both">Ce paragraphe est dégagé de chaque côté.</p>
-</div>
-
- -

CSS

- -
.wrapper{
-  border:1px solid black;
-  padding:10px;
-}
-.both {
-  border: 1px solid black;
-  clear: both;
-}
-.black {
-  float: left;
-  margin: 0;
-  background-color: black;
-  color: #fff;
-  width:20%;
-}
-.red {
-  float: right;
-  margin: 0;
-  background-color: red;
-  width:20%;
-}
-p {
-  width: 45%;
-}
- -

{{EmbedLiveSample('clear_both','100%','300')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Ajout des valeurs inline-start et inline-end
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}Pas de modification significative, clarification de certains détails.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.clear")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/clear/index.md b/files/fr/web/css/clear/index.md new file mode 100644 index 0000000000..541ff870fa --- /dev/null +++ b/files/fr/web/css/clear/index.md @@ -0,0 +1,232 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

La propriété clear indique si un élément peut être situé à côté d'éléments flottants qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété clear s'applique aux éléments flottants comme aux éléments non-flottants.

+ +
{{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 é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.

+ +
+

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: "";
+   display: block;
+   clear: both;
+}
+
+
+ +

Syntaxe

+ +
/* Valeurs avec mot-clé */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Valeurs globales */
+clear: inherit;
+clear: initial;
+clear: unset;
+
+ +

Valeurs

+ +
+
none
+
Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.
+
left
+
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.
+
right
+
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.
+
both
+
Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.
+
inline-start
+
Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu vers le début du bloc englobant. Autrement dit, cela dégage à gauche pour les scripts de gauche à droite (LTR pour left to right) et dégage à droite pour les scripts de droite à gauche (RTL pour droite à gauche).
+
inline-end
+
Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu du côté de la fin du bloc englobant. Autrement dit, cela dégage à droite pour les scripts de gauche à droite (LTR pour left to right) et dégage à gauche pour les scripts de droite à gauche (RTL pour droite à gauche).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

clear: left

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">Ce paragraphe est dégagé à gauche.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+
+ +

{{EmbedLiveSample('clear_left','100%','250')}}

+ +

clear: right

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">Ce paragraphe est dégagé à droite.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+ +

{{EmbedLiveSample('clear_right','100%','250')}}

+ +

clear: both

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">Ce paragraphe est dégagé de chaque côté.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 45%;
+}
+ +

{{EmbedLiveSample('clear_both','100%','300')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Ajout des valeurs inline-start et inline-end
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}Pas de modification significative, clarification de certains détails.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.clear")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/clip-path/index.html b/files/fr/web/css/clip-path/index.html deleted file mode 100644 index 1888fb3c17..0000000000 --- a/files/fr/web/css/clip-path/index.html +++ /dev/null @@ -1,604 +0,0 @@ ---- -title: clip-path -slug: Web/CSS/clip-path -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/clip-path ---- -
{{CSSRef}}
- -

La propriété clip-path empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme circle().

- -
{{EmbedInteractiveExample("pages/css/clip-path.html")}}
- -
-

Note : La propriété clip-path remplace la propriété {{cssxref("clip")}} désormais dépréciée.

-
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-clip-path: none;
-
-/* Valeurs pointant vers une image */
-/* Type <clip-source> */
-clip-path: url(resources.svg#c1);
-
-/* Valeurs de boîte */
-clip-path: fill-box;
-clip-path: stroke-box;
-clip-path: view-box;
-clip-path: margin-box;
-clip-path: border-box;
-clip-path: padding-box;
-clip-path: content-box;
-
-/* Valeurs géométriques            */
-/* avec une notation fonctionnelle */
-clip-path: inset(100px 50px);
-clip-path: circle(50px at 0 100px);
-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
-
-/* Combinaison boîte & géométrie */
-clip-path: padding-box circle(50px at 0 100px);
-
-/* Valeurs globales */
-clip-path: inherit;
-clip-path: initial;
-clip-path: unset;
-
- -

La propriété clip-path est définie avec une ou plusieurs des valeurs listées ci-après.

- -

Valeurs

- -
-
url()
-
Une URL qui fait référence à un élément contenant le chemin de rognage.
-
inset(), circle(), ellipse(), polygon()
-
Une fonction {{cssxref("<basic-shape>")}}. Une telle forme utilise la valeur <geometry-box> pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (border-box) qui sera utilisée comme boîte de réference.
-
<geometry-box>
-
Si cette valeur est combinée avec une valeur <basic-shape>, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante : -
-
fill-box
-
La boîte englobant (bounding box) est utilisée comme boîte de référence.
-
stroke-box
-
La boîte de contour de la boîte englobante est utilisée comme boîte de référence.
-
view-box
-
La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par viewBox et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut viewBox.
-
margin-box
-
La boîte de marge est utilisée comme boîte de référence
-
border-box
-
La boîte de bordure est utilisée comme boîte de référence
-
padding-box
-
La boîte de remplissage (padding) est utilisée comme boîte de référence
-
content-box
-
La boîte de contenu est utilisée comme boîte de référence.
-
-
-
none
-
Aucun chemin de rognage n'est créé.
-
- -
-

Note : Si la valeur calculée est différente de none, cela entraînera  la création d'un nouveau contexte d'empilement (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1).

-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Comparaison entre HTML et SVG

- - - -
html,body {
-  height: 100%;
-  box-sizing: border-box;
-  background: #EEE;
-}
-
-.grid {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  font: 1em monospace;
-}
-
-.row {
-  display: flex;
-  flex: 1 auto;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.col {
-  flex: 1 auto;
-}
-
-.cell {
-  margin: .5em;
-  padding: .5em;
-  background-color: #FFF;
-  overflow: hidden;
-  text-align: center;
-  flex: 1;
-}
-
-.note {
-  background: #fff3d4;
-  padding: 1em;
-  margin: .5em .5em 0;
-  font: .8em sans-serif;
-  text-align: left;
-  white-space: nowrap;
-}
-
-.note + .row .cell {
-  margin-top: 0;
-}
-
-.container {
-  display: inline-block;
-  border: 1px dotted grey;
-  position:relative;
-}
-
-.container:before {
-  content: 'margin';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  font: italic .6em sans-serif;
-}
-
-.viewbox {
-  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
-}
-
-.container.viewbox:after {
-  content: 'viewbox';
-  position: absolute;
-  left: 1.1rem;
-  top: 1.1rem;
-  font: italic .6em sans-serif;
-}
-
-.cell span {
-  display: block;
-  margin-bottom: .5em;
-}
-
-p {
-  font-family: sans-serif;
-  background: #000;
-  color: pink;
-  margin: 2em;
-  padding: 3em 1em;
-  border: 1em solid pink;
-  width: 6em;
-}
-
-.none { clip-path: none; }
-.svg  { clip-path: url(#myPath); }
-.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
-.shape1 { clip-path: circle(25%); }
-.shape2 { clip-path: circle(25% at 25% 25%); }
-.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
-.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
-.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
-.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
-.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
-.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
-.shape9 { clip-path: content-box circle(25% at 25% 25%); }
-
-.defs {
-  width: 0;
-  height: 0;
-  margin: 0;
-}
-
-pre { margin-bottom: 0; }
-
-svg {
-  margin: 1em;
-  font-family: sans-serif;
-  width: 192px;
-  height: 192px;
-}
-
-svg rect {
-  stroke: pink;
-  stroke-width: 16px;
-}
-
-svg text {
-  fill: pink;
-  text-anchor: middle;
-}
-
-svg text.em {
-  font-style: italic;
-}
- -

{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}}

- -

Exemple complet

- -

HTML

- -
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
-    alt="MDN logo">
-<svg height="0" width="0">
-  <defs>
-    <clipPath id="cross">
-      <rect y="110" x="137" width="90" height="90"/>
-      <rect x="0" y="110" width="90" height="90"/>
-      <rect x="137" y="0" width="90" height="90"/>
-      <rect x="0" y="0" width="90" height="90"/>
-    </clipPath>
-  </defs>
-</svg>
-
-<select id="clipPath">
-  <option value="none">none</option>
-  <option value="circle(100px at 110px 100px)">circle</option>
-  <option value="url(#cross)" selected>cross</option>
-  <option value="inset(20px round 20px)">inset</option>
-  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
-</select>
-
- -

CSS

- -
#clipped {
-  margin-bottom: 20px;
-  clip-path: url(#cross);
-}
-
- - - -

Résultat

- -

{{EmbedLiveSample("Exemple_complet", 230, 250)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Extension aux élément HTML. clip-path remplace la propriété {{cssxref("clip")}} désormais dépréciée.
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Définition initiale (s'applique uniquement aux éléments SVG)
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.clip-path")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md new file mode 100644 index 0000000000..1888fb3c17 --- /dev/null +++ b/files/fr/web/css/clip-path/index.md @@ -0,0 +1,604 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/clip-path +--- +
{{CSSRef}}
+ +

La propriété clip-path empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme circle().

+ +
{{EmbedInteractiveExample("pages/css/clip-path.html")}}
+ +
+

Note : La propriété clip-path remplace la propriété {{cssxref("clip")}} désormais dépréciée.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+clip-path: none;
+
+/* Valeurs pointant vers une image */
+/* Type <clip-source> */
+clip-path: url(resources.svg#c1);
+
+/* Valeurs de boîte */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Valeurs géométriques            */
+/* avec une notation fonctionnelle */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* Combinaison boîte & géométrie */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Valeurs globales */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+
+ +

La propriété clip-path est définie avec une ou plusieurs des valeurs listées ci-après.

+ +

Valeurs

+ +
+
url()
+
Une URL qui fait référence à un élément contenant le chemin de rognage.
+
inset(), circle(), ellipse(), polygon()
+
Une fonction {{cssxref("<basic-shape>")}}. Une telle forme utilise la valeur <geometry-box> pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (border-box) qui sera utilisée comme boîte de réference.
+
<geometry-box>
+
Si cette valeur est combinée avec une valeur <basic-shape>, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante : +
+
fill-box
+
La boîte englobant (bounding box) est utilisée comme boîte de référence.
+
stroke-box
+
La boîte de contour de la boîte englobante est utilisée comme boîte de référence.
+
view-box
+
La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par viewBox et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut viewBox.
+
margin-box
+
La boîte de marge est utilisée comme boîte de référence
+
border-box
+
La boîte de bordure est utilisée comme boîte de référence
+
padding-box
+
La boîte de remplissage (padding) est utilisée comme boîte de référence
+
content-box
+
La boîte de contenu est utilisée comme boîte de référence.
+
+
+
none
+
Aucun chemin de rognage n'est créé.
+
+ +
+

Note : Si la valeur calculée est différente de none, cela entraînera  la création d'un nouveau contexte d'empilement (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1).

+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Comparaison entre HTML et SVG

+ + + +
html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1 auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+  flex: 1;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  display: inline-block;
+  border: 1px dotted grey;
+  position:relative;
+}
+
+.container:before {
+  content: 'margin';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font: italic .6em sans-serif;
+}
+
+.viewbox {
+  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
+}
+
+.container.viewbox:after {
+  content: 'viewbox';
+  position: absolute;
+  left: 1.1rem;
+  top: 1.1rem;
+  font: italic .6em sans-serif;
+}
+
+.cell span {
+  display: block;
+  margin-bottom: .5em;
+}
+
+p {
+  font-family: sans-serif;
+  background: #000;
+  color: pink;
+  margin: 2em;
+  padding: 3em 1em;
+  border: 1em solid pink;
+  width: 6em;
+}
+
+.none { clip-path: none; }
+.svg  { clip-path: url(#myPath); }
+.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
+.shape1 { clip-path: circle(25%); }
+.shape2 { clip-path: circle(25% at 25% 25%); }
+.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
+.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
+.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
+.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
+.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
+.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
+.shape9 { clip-path: content-box circle(25% at 25% 25%); }
+
+.defs {
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+pre { margin-bottom: 0; }
+
+svg {
+  margin: 1em;
+  font-family: sans-serif;
+  width: 192px;
+  height: 192px;
+}
+
+svg rect {
+  stroke: pink;
+  stroke-width: 16px;
+}
+
+svg text {
+  fill: pink;
+  text-anchor: middle;
+}
+
+svg text.em {
+  font-style: italic;
+}
+ +

{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}}

+ +

Exemple complet

+ +

HTML

+ +
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
+</select>
+
+ +

CSS

+ +
#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+
+ + + +

Résultat

+ +

{{EmbedLiveSample("Exemple_complet", 230, 250)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Extension aux élément HTML. clip-path remplace la propriété {{cssxref("clip")}} désormais dépréciée.
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Définition initiale (s'applique uniquement aux éléments SVG)
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.clip-path")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/clip/index.html b/files/fr/web/css/clip/index.html deleted file mode 100644 index a7cf1ead61..0000000000 --- a/files/fr/web/css/clip/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: clip -slug: Web/CSS/clip -tags: - - CSS - - Déprécié - - Propriété - - Reference -translation_of: Web/CSS/clip ---- -
{{CSSRef}}{{deprecated_header}}
- -

La propriété clip permet de définir la zone d'un élément qui est visible. La propriété clip s'applique uniquement aux éléments positionnés de façon absolue (autrement dit, ceux avec {{cssxref("position","position:absolute")}} ou {{cssxref("position","position:fixed")}}).

- -
/* Valeur avec un mot-clé */
-clip: auto;
-
-/* Valeurs de forme */
-/* Type <shape>     */
-clip: rect(1px 10em 3rem 2ch);
-clip: rect(1px, 10em, 3rem, 2ch);
-
-/* Valeurs globales */
-clip: inherit;
-clip: initial;
-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.

-
- -

{{cssinfo}}

- -

Syntaxe

- -

Valeurs

- -
-
<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.
-
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).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.dotted-border {
-  border: dotted;
-  position: relative;
-  width: 536px;
-  height: 350px;
-}
-
-#top-left, #middle, #bottom-right {
-  position: absolute;
-  top: 0px;
-}
-
-#top-left {
-  left: 360px;
-  clip: rect(0px, 175px, 113px, 0px);
-}
-
-
-#middle {
-  left: 280px;
-  clip: rect(119px, 255px, 229px, 80px);
-  /* standard syntax, unsupported by Internet Explorer 4-7 */
-}
-
-#bottom-right {
-  left: 200px;
-  clip: rect(235px 335px 345px 160px);
-  /* non-standard syntax, but supported by all major browsers*/
-}
- -

HTML

- -
<p class="dotted-border">
-  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
-  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
-  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
-  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
-</p>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '689px', '410px')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}Dépréciation de la propriété clip et proposition de  {{cssxref("clip-path")}} comme remplacement.
{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}{{Spec2('CSS3 Transitions')}}clip peut être animée.
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.clip")}}

- -

Voir aussi

- -
    -
  • La propriété {{cssxref("clip-path")}} qui doit être utilisée à la place
    • -
  • {{cssxref("text-overflow")}}
    • -
  • {{cssxref("white-space")}}
    • -
  • {{cssxref("overflow-x")}}
    • -
  • {{cssxref("overflow-y")}}
    • -
  • {{cssxref("overflow")}}
    • -
  • {{cssxref("display")}}
    • -
  • {{cssxref("position")}}
    • -
diff --git a/files/fr/web/css/clip/index.md b/files/fr/web/css/clip/index.md new file mode 100644 index 0000000000..a7cf1ead61 --- /dev/null +++ b/files/fr/web/css/clip/index.md @@ -0,0 +1,141 @@ +--- +title: clip +slug: Web/CSS/clip +tags: + - CSS + - Déprécié + - Propriété + - Reference +translation_of: Web/CSS/clip +--- +
{{CSSRef}}{{deprecated_header}}
+ +

La propriété clip permet de définir la zone d'un élément qui est visible. La propriété clip s'applique uniquement aux éléments positionnés de façon absolue (autrement dit, ceux avec {{cssxref("position","position:absolute")}} ou {{cssxref("position","position:fixed")}}).

+ +
/* Valeur avec un mot-clé */
+clip: auto;
+
+/* Valeurs de forme */
+/* Type <shape>     */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Valeurs globales */
+clip: inherit;
+clip: initial;
+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.

+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
<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.
+
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).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.dotted-border {
+  border: dotted;
+  position: relative;
+  width: 536px;
+  height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+  position: absolute;
+  top: 0px;
+}
+
+#top-left {
+  left: 360px;
+  clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+  left: 280px;
+  clip: rect(119px, 255px, 229px, 80px);
+  /* standard syntax, unsupported by Internet Explorer 4-7 */
+}
+
+#bottom-right {
+  left: 200px;
+  clip: rect(235px 335px 345px 160px);
+  /* non-standard syntax, but supported by all major browsers*/
+}
+ +

HTML

+ +
<p class="dotted-border">
+  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
+  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
+  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
+  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '689px', '410px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}Dépréciation de la propriété clip et proposition de  {{cssxref("clip-path")}} comme remplacement.
{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}{{Spec2('CSS3 Transitions')}}clip peut être animée.
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.clip")}}

+ +

Voir aussi

+ +
    +
  • La propriété {{cssxref("clip-path")}} qui doit être utilisée à la place
    • +
  • {{cssxref("text-overflow")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("display")}}
    • +
  • {{cssxref("position")}}
    • +
diff --git a/files/fr/web/css/color-adjust/index.html b/files/fr/web/css/color-adjust/index.html deleted file mode 100644 index 53e02b582a..0000000000 --- a/files/fr/web/css/color-adjust/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: color-adjust -slug: Web/CSS/color-adjust -tags: - - CSS - - Propriété - - Reference - - Web - - color-adjust -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é.

- -
{{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

- -
color-adjust: economy;
-color-adjust: exact;
- -

La valeur de la propriété color-adjust peut être un de ces deux mots-clés.

- -

Valeurs

- -
-
economy
-
L'agent utilisateur est autorisé à appliquer les ajustements estimés nécessaires afin d'optimiser l'affichage du document sur l'appareil. Par exemple, un navigateur pourra, lors d'une impression, supprimer les images d'arrière-plan et ajuster les couleurs du texte afin de s'assurer que le contraste obtenu sur le papier sera suffisant. Cette valeur est la valeur par défaut.
-
exact
-
Le contenu de l'élément a spécifiquement été conçu afin d'utiliser des couleurs, des images et des styles de façon importante et toute modification opérée par le navigateur détériorerait le document. L'apparence du contenu ne devrait pas être modifiée sauf si l'utilisateur le demande. Ainsi, si une page contient un tableau dont les lignes sont alternées en gris et blanc, il ne faudrait pas retirer cette alternance au risque de perdre en lisibilité.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Notes d'utilisation

- -

Plusieurs raisons peuvent entraîner un agent utilisateur à modifier l'apparence finale par rapport à l'apparence indiquée via CSS :

- -
    -
  • Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan pour que le résultat soit lisible sur l'appareil ciblé (écran ou papier par exemple)..
    • -
  • Si l'appareil d'affichage est une imprimante, afin d'économiser de l'encre, le navigateur peut choisir de retirer les images d'arrière-plan sombres ou trop denses.
    • -
  • Lors de l'impression, l'agent utilisateur peut choisir de remplacer du texte clair sur un fond sombre par du texte sombre sur un fond blanc.
    • -
- -

Si l'agent utilisateur propose des options à l'utilisateur quant à l'affichage des couleurs et des images, celles-ci seront prioritaires sur color-adjust. Autrement dit, il n'est pas absolument certain que color-adjust ait un quelconque effet. Tout d'abord parce que l'utilisateur peut choisir d'outrepasser ces règles mais aussi parce qu'il revient à l'agent utilisateur de choisir comment gérer color-adjust dans chaque situation.

- -

Exemples

- -

Dans cet exemple, une boîte utilise une image d'arrière-plan ({{cssxref("background-image")}}) ainsi qu'un dégradé linéaire ({{cssxref("linear-gradient()")}}) sur un arrière-plan noir afin d'avoir un dégradé bleu foncé derrière un texte rouge. Pour une raison quelconque, c'est l'apparence souhaitée quel que soit l'environnement (y compris du papier) et c'est donc color-adjust: exact qui est utilisé afin d'interdire au navigateur d'ajuster quoi que ce soit.

- -

CSS

- -
.ma-boite {
-  background-color: black;
-  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
-  color: #900;
-  width: 15rem;
-  height: 6rem;
-  text-align: center;
-  font: 24px "Helvetica", sans-serif;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color-adjust: exact;
-}
-
- -

HTML

- -
<div class="ma-boite">
-  <p>Il nous faut plus de contraste !</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 640, 120)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}{{Spec2('CSS Color Adjust')}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.color-adjust")}}

- -

Voir aussi

- -
    -
  • Appliquer des couleurs sur des éléments HTML grâce à CSS
    • -
  • Les autres propriétés CSS 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")}}
    • -
  • {{cssxref("background-image")}}
    • -
diff --git a/files/fr/web/css/color-adjust/index.md b/files/fr/web/css/color-adjust/index.md new file mode 100644 index 0000000000..53e02b582a --- /dev/null +++ b/files/fr/web/css/color-adjust/index.md @@ -0,0 +1,114 @@ +--- +title: color-adjust +slug: Web/CSS/color-adjust +tags: + - CSS + - Propriété + - Reference + - Web + - color-adjust +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é.

+ +
{{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

+ +
color-adjust: economy;
+color-adjust: exact;
+ +

La valeur de la propriété color-adjust peut être un de ces deux mots-clés.

+ +

Valeurs

+ +
+
economy
+
L'agent utilisateur est autorisé à appliquer les ajustements estimés nécessaires afin d'optimiser l'affichage du document sur l'appareil. Par exemple, un navigateur pourra, lors d'une impression, supprimer les images d'arrière-plan et ajuster les couleurs du texte afin de s'assurer que le contraste obtenu sur le papier sera suffisant. Cette valeur est la valeur par défaut.
+
exact
+
Le contenu de l'élément a spécifiquement été conçu afin d'utiliser des couleurs, des images et des styles de façon importante et toute modification opérée par le navigateur détériorerait le document. L'apparence du contenu ne devrait pas être modifiée sauf si l'utilisateur le demande. Ainsi, si une page contient un tableau dont les lignes sont alternées en gris et blanc, il ne faudrait pas retirer cette alternance au risque de perdre en lisibilité.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Notes d'utilisation

+ +

Plusieurs raisons peuvent entraîner un agent utilisateur à modifier l'apparence finale par rapport à l'apparence indiquée via CSS :

+ +
    +
  • Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan pour que le résultat soit lisible sur l'appareil ciblé (écran ou papier par exemple)..
    • +
  • Si l'appareil d'affichage est une imprimante, afin d'économiser de l'encre, le navigateur peut choisir de retirer les images d'arrière-plan sombres ou trop denses.
    • +
  • Lors de l'impression, l'agent utilisateur peut choisir de remplacer du texte clair sur un fond sombre par du texte sombre sur un fond blanc.
    • +
+ +

Si l'agent utilisateur propose des options à l'utilisateur quant à l'affichage des couleurs et des images, celles-ci seront prioritaires sur color-adjust. Autrement dit, il n'est pas absolument certain que color-adjust ait un quelconque effet. Tout d'abord parce que l'utilisateur peut choisir d'outrepasser ces règles mais aussi parce qu'il revient à l'agent utilisateur de choisir comment gérer color-adjust dans chaque situation.

+ +

Exemples

+ +

Dans cet exemple, une boîte utilise une image d'arrière-plan ({{cssxref("background-image")}}) ainsi qu'un dégradé linéaire ({{cssxref("linear-gradient()")}}) sur un arrière-plan noir afin d'avoir un dégradé bleu foncé derrière un texte rouge. Pour une raison quelconque, c'est l'apparence souhaitée quel que soit l'environnement (y compris du papier) et c'est donc color-adjust: exact qui est utilisé afin d'interdire au navigateur d'ajuster quoi que ce soit.

+ +

CSS

+ +
.ma-boite {
+  background-color: black;
+  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  color: #900;
+  width: 15rem;
+  height: 6rem;
+  text-align: center;
+  font: 24px "Helvetica", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color-adjust: exact;
+}
+
+ +

HTML

+ +
<div class="ma-boite">
+  <p>Il nous faut plus de contraste !</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 640, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}{{Spec2('CSS Color Adjust')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.color-adjust")}}

+ +

Voir aussi

+ +
    +
  • Appliquer des couleurs sur des éléments HTML grâce à CSS
    • +
  • Les autres propriétés CSS 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")}}
    • +
  • {{cssxref("background-image")}}
    • +
diff --git a/files/fr/web/css/color-scheme/index.html b/files/fr/web/css/color-scheme/index.html deleted file mode 100644 index f46bc5b275..0000000000 --- a/files/fr/web/css/color-scheme/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: color-scheme -slug: Web/CSS/color-scheme -browser-compat: css.properties.color-scheme -translation_of: Web/CSS/color-scheme ---- -
{{CSSRef}}
- -

La propriété CSS color-scheme permet d'indiquer les jeux de couleurs dans lesquels un élément peut être rendu sans risque.

-

Les jeux de couleurs communément utilisés par les systèmes d'exploitation sont light (clair) et dark (sombre), ou day mode (mode jour) et night mode (mode nuit). Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.

- -

Syntaxe

- -
color-scheme: normal;
-color-scheme: light;
-color-scheme: dark;
-color-scheme: light dark;
-
-/* Valeurs globales */
-color-scheme: inherit;
-color-scheme: initial;
-color-scheme: revert;
-color-scheme: unset;
- -

La valeur de la propriété color-scheme doit être un des mots-clés suivants.

- -

Valeurs

- -
-
normal
-
Indique que l'élément ne tient pas compte d'un éventuel jeu de couleurs et qu'il devrait être rendu à l'aide du jeu de couleurs par défaut du navigateur.
-
light
-
Indique que l'élément peut être rendu en utilisant le jeu de couleurs claires du système d'exploitation.
-
dark
-
Indique que l'élément peut être rendu en utilisant le jeu de couleurs sombres du système d'exploitation.
-
- -

Définition formelle

- -

{{cssinfo}}

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

Adaptation aux jeux de couleurs

- -

Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble de la page, color-scheme peut être déclaré sur l'élément {{cssxref(":root")}}.

- -
:root {
-  color-scheme: light dark;
-}
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- -
    -
  • Appliquer des couleurs aux éléments HTML grâce à CSS
    • -
  • 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")}}
    • -
  • {{cssxref("background-image")}}
    • -
  • {{cssxref("-webkit-print-color-adjust")}}
    • -
diff --git a/files/fr/web/css/color-scheme/index.md b/files/fr/web/css/color-scheme/index.md new file mode 100644 index 0000000000..f46bc5b275 --- /dev/null +++ b/files/fr/web/css/color-scheme/index.md @@ -0,0 +1,72 @@ +--- +title: color-scheme +slug: Web/CSS/color-scheme +browser-compat: css.properties.color-scheme +translation_of: Web/CSS/color-scheme +--- +
{{CSSRef}}
+ +

La propriété CSS color-scheme permet d'indiquer les jeux de couleurs dans lesquels un élément peut être rendu sans risque.

+

Les jeux de couleurs communément utilisés par les systèmes d'exploitation sont light (clair) et dark (sombre), ou day mode (mode jour) et night mode (mode nuit). Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.

+ +

Syntaxe

+ +
color-scheme: normal;
+color-scheme: light;
+color-scheme: dark;
+color-scheme: light dark;
+
+/* Valeurs globales */
+color-scheme: inherit;
+color-scheme: initial;
+color-scheme: revert;
+color-scheme: unset;
+ +

La valeur de la propriété color-scheme doit être un des mots-clés suivants.

+ +

Valeurs

+ +
+
normal
+
Indique que l'élément ne tient pas compte d'un éventuel jeu de couleurs et qu'il devrait être rendu à l'aide du jeu de couleurs par défaut du navigateur.
+
light
+
Indique que l'élément peut être rendu en utilisant le jeu de couleurs claires du système d'exploitation.
+
dark
+
Indique que l'élément peut être rendu en utilisant le jeu de couleurs sombres du système d'exploitation.
+
+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

Adaptation aux jeux de couleurs

+ +

Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble de la page, color-scheme peut être déclaré sur l'élément {{cssxref(":root")}}.

+ +
:root {
+  color-scheme: light dark;
+}
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ +
    +
  • Appliquer des couleurs aux éléments HTML grâce à CSS
    • +
  • 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")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("-webkit-print-color-adjust")}}
    • +
diff --git a/files/fr/web/css/color/index.html b/files/fr/web/css/color/index.html deleted file mode 100644 index 2b31fd1dae..0000000000 --- a/files/fr/web/css/color/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: color -slug: Web/CSS/color -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/color ---- -
{{CSSRef}}
- -

La propriété color définit la couleur de premier plan d'un élément texte et de ses éventuelles décorations. Elle définit également la valeur de {{cssxref("currentColor")}} qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pour {{cssxref("border-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

- -
/* Valeurs avec un mot-clé */
-color: currentcolor;
-
-/* Valeurs avec un mot-clé pour une couleur nommée */
-color: red;
-color: orange;
-color: tan;
-color: rebeccapurple;
-
-/* Valeurs hexadécimales <hex-color> */
-color: #090;
-color: #009900;
-color: #090a;
-color: #009900aa;
-
-/* Valeurs utilisant la fonction <rgb()> */
-color: rgb(34, 12, 64, 0.6);
-color: rgba(34, 12, 64, 0.6);
-color: rgb(34 12 64 / 0.6);
-color: rgba(34 12 64 / 0.3);
-color: rgb(34.0 12 64 / 60%);
-color: rgba(34.6 12 64 / 30%);
-
-/* Valeurs <hsl()> */
-color: hsl(30, 100%, 50%, 0.6);
-color: hsla(30, 100%, 50%, 0.6);
-color: hsl(30 100% 50% / 0.6);
-color: hsla(30 100% 50% / 0.6);
-color: hsl(30.0 100% 50% / 60%);
-color: hsla(30.2 100% 50% / 60%);
-
-
-/* Valeurs globales */
-color: inherit;
-color: initial;
-color: unset;
-
- -

La propriété color est définie grâce à une valeur de type {{cssxref("<color>")}}.

- -

Valeurs

- -
-
<color>
-
Une valeur de type {{cssxref("<color>")}} qui fournit la couleur pour les éléments textuels de l'élément.
-
- -

Formal syntax

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  color: rgb(0, 0, 255);
-  /* équivalent à
-  color: blue;
-  color: #0000ff;
-  color: #00f;
-  color: hsl(0, 100%, 50%); */
-}
-
-.confiture {
-  color: orange;
-  /* on pourrait aussi utiliser
-  color: rgb(255, 128, 0); */
-}
-
- -

HTML

- -
<p class="exemple">
-  En passant elle prit sur un rayon un pot de
-  confiture portant cette étiquette,
-  <span class="confiture">
-    « MARMELADE D’ORANGES. »
-  </span>
-  Mais, à son grand regret, le pot était vide :
-  elle n’osait le laisser tomber dans la crainte
-  de tuer quelqu’un ; aussi s’arrangea-t-elle de
-  manière à le déposer en passant dans une
-  des armoires.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Accessibilité

- -

Il est important de vérifier le contraste entre la couleur utilisée pour le texte et celle utilisée pour l'arrière-plan afin que les personnes ayant une vision faible ou lisant le document dans de mauvaises conditions puissent correctement lire le document.

- -

Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Afin de respecter les règles d'accessibilité (WCAG), on doit avoir un ratio de 4.5:1 pour les textes « normaux » et un ratio de 3:1 pour les textes plus grands comme les titres (un texte est considéré comme « grand » s'il est en gras et qu'une lettre mesure plus de 18.66 px ou bien si une lettre mesure plus de 24 pixels).

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}}Ajout de la syntaxe sans virgule pour les fonctions rgb(), rgba(), hsl() et hsla() Une valeur alpha peut être utilisée dans rgb() et hsl(), rgba() et hsla() sont donc des synonymes (dépréciés) de ces fonctions. Ajout de la couleur rebeccapurple.
- Ajout des valeurs hexadécimales sur 4 et 8 chiffres où le dernier chiffre indique la composante alpha.
- Ajout des fonctions hwb(), device-cmyk() et color().
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}{{Spec2('CSS3 Transitions')}}color peut désormais être animée.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions rgba(), hsl() et hsla().
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Définition initiale.
- -
{{cssinfo}}
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.color")}}

- -

Voir aussi

- -
    -
  • Le type de donnée {{cssxref("<color>")}}
    • -
  • Les autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} et {{cssxref("color-adjust")}}
    • -
  • Appliquer des couleurs aux éléments HTML grâce à CSS
    • -
diff --git a/files/fr/web/css/color/index.md b/files/fr/web/css/color/index.md new file mode 100644 index 0000000000..2b31fd1dae --- /dev/null +++ b/files/fr/web/css/color/index.md @@ -0,0 +1,175 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/color +--- +
{{CSSRef}}
+ +

La propriété color définit la couleur de premier plan d'un élément texte et de ses éventuelles décorations. Elle définit également la valeur de {{cssxref("currentColor")}} qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pour {{cssxref("border-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

+ +
/* Valeurs avec un mot-clé */
+color: currentcolor;
+
+/* Valeurs avec un mot-clé pour une couleur nommée */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* Valeurs hexadécimales <hex-color> */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* Valeurs utilisant la fonction <rgb()> */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* Valeurs <hsl()> */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+
+/* Valeurs globales */
+color: inherit;
+color: initial;
+color: unset;
+
+ +

La propriété color est définie grâce à une valeur de type {{cssxref("<color>")}}.

+ +

Valeurs

+ +
+
<color>
+
Une valeur de type {{cssxref("<color>")}} qui fournit la couleur pour les éléments textuels de l'élément.
+
+ +

Formal syntax

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  color: rgb(0, 0, 255);
+  /* équivalent à
+  color: blue;
+  color: #0000ff;
+  color: #00f;
+  color: hsl(0, 100%, 50%); */
+}
+
+.confiture {
+  color: orange;
+  /* on pourrait aussi utiliser
+  color: rgb(255, 128, 0); */
+}
+
+ +

HTML

+ +
<p class="exemple">
+  En passant elle prit sur un rayon un pot de
+  confiture portant cette étiquette,
+  <span class="confiture">
+    « MARMELADE D’ORANGES. »
+  </span>
+  Mais, à son grand regret, le pot était vide :
+  elle n’osait le laisser tomber dans la crainte
+  de tuer quelqu’un ; aussi s’arrangea-t-elle de
+  manière à le déposer en passant dans une
+  des armoires.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Accessibilité

+ +

Il est important de vérifier le contraste entre la couleur utilisée pour le texte et celle utilisée pour l'arrière-plan afin que les personnes ayant une vision faible ou lisant le document dans de mauvaises conditions puissent correctement lire le document.

+ +

Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Afin de respecter les règles d'accessibilité (WCAG), on doit avoir un ratio de 4.5:1 pour les textes « normaux » et un ratio de 3:1 pour les textes plus grands comme les titres (un texte est considéré comme « grand » s'il est en gras et qu'une lettre mesure plus de 18.66 px ou bien si une lettre mesure plus de 24 pixels).

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}}Ajout de la syntaxe sans virgule pour les fonctions rgb(), rgba(), hsl() et hsla() Une valeur alpha peut être utilisée dans rgb() et hsl(), rgba() et hsla() sont donc des synonymes (dépréciés) de ces fonctions. Ajout de la couleur rebeccapurple.
+ Ajout des valeurs hexadécimales sur 4 et 8 chiffres où le dernier chiffre indique la composante alpha.
+ Ajout des fonctions hwb(), device-cmyk() et color().
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}{{Spec2('CSS3 Transitions')}}color peut désormais être animée.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions rgba(), hsl() et hsla().
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.color")}}

+ +

Voir aussi

+ +
    +
  • Le type de donnée {{cssxref("<color>")}}
    • +
  • Les autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} et {{cssxref("color-adjust")}}
    • +
  • Appliquer des couleurs aux éléments HTML grâce à CSS
    • +
diff --git a/files/fr/web/css/color_value/index.html b/files/fr/web/css/color_value/index.html deleted file mode 100644 index e35eb28083..0000000000 --- a/files/fr/web/css/color_value/index.html +++ /dev/null @@ -1,1368 +0,0 @@ ---- -title: -slug: Web/CSS/color_value -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/color_value -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 :

- - - -

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.

-
- -

Syntaxe

- -
-

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>.

- -

Les mots-clés

- -

Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, blue le bleu, brown le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :

- -
    -
  • La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs VGA disponibles sur les cartes graphiques.
    • -
  • La spécification CSS de niveau 2 a ajouté le mot-clé orange.
    • -
  • Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (extended colors), couleurs X11 ou couleurs SVG.
    • -
  • La spécification CSS de niveau a ajouté la couleur rebeccapurple en l'honneur d'Eric Meyer.
    • -
- -

Voici quelques inconvénients liés aux mots-clés :

- -
    -
  • En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.
    • -
  • Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).
    • -
  • Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.
    • -
  • Certains mots-clés désignent la même couleur : -
      -
    • aqua / cyan
      • -
    • fuchsia / magenta
      • -
    • darkgray / darkgrey
      • -
    • darkslategray / darkslategrey
      • -
    • dimgray / dimgrey
      • -
    • lightgray / lightgrey
      • -
    • lightslategray / lightslategrey
      • -
    • gray / grey
      • -
    • slategray / slategrey
      • -
    -
    • -
  • 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.
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationCouleurMot-cléValeurs exprimées en hexadécimal RGBExemple « live » dans le navigateur
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan (synonyme de aqua)#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta (synonyme de fuchsia)#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
- -

La couleur rebeccapurple est équivalente à la couleur #639. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « Honorer un grand homme » (en anglais).

- -

Le mot-clé transparent

- -

transparent est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : rgba(0,0,0,0).

- -
-

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 : 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

- -

Le mot-clé currentColor représente la valeur calculée de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.

- -

Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.

- -

Si currentColor est utilisée comme valeur pour la propriété color, sa valeur est déterminée à partir de la valeur héritée pour la propriété color.

- -

Exemples

- -

La couleur de la ligne prend la couleur héritée depuis son élément parent.

- -
-
Exemple live n°1
- -
<div style="color:darkred">
- La couleur de ce texte est bleu.
-  <div style="background:currentColor; height:1px"></div>
- Un peu de texte.
-</div>
-
- -

{{EmbedLiveSample('Exemple_live_n°1')}}

- -
Exemple live n°2
- -
<div style="color:blue; border-bottom: 1px dashed currentColor;">
- La couleur de ce texte est bleu :
-  <div style="background:currentColor; height:1px"></div>
- Un peu de texte.
-</div>
- -

{{EmbedLiveSample('Exemple_live_n°2')}}

-
- -

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.

- -

Syntaxe

- -

Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #) ou avec des notations fonctionnelles (rgb() ou rgba()).

- -
-

Note : Dans la spécification du module CSS Color de niveau 4, rgba() a été définie comme une fonction historique dont la grammaire et le comportement est le même que rgb(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

-
- -
-
Notation hexadécimale : #RRGGBB[AA]
-
Le signe « # » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.
-
Notation hexadécimale : #RGB[A]
-
le signe « # » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.
-
Notation fonctionnelle avec des virgules : rgb(R, G, B[, A]) ou rgba(R, G, B, A)
-
Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction rgb()). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("<number>")}}) ou des pourcentages ({{cssxref("<percentage>")}}) (ex. rgb(1e2, .5e1, .5e0, +.25e2%)).
-
Notation fonctionnelle : rgb(R G B[ / A]) ou rgba(R G B / A)
-
Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification CSS Colors Level 4.
-
- -

Exemples

- -
Les différentes variantes pour la syntaxe RGB
- -
/* Ces exemples définissent tous la même couleur */
-#f03
-#F03
-#ff0033
-#FF0033
-rgb(255,0,51)
-rgb(255, 0, 51)
-rgb(255, 0, 51.0)
-rgb(100%,0%,20%)
-rgb(100%, 0%, 20%)
-rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
-
- -
RGBa
- -
/* Notation hexadécimale */
-#f030               /*   0% opacité - rouge */
-#F03F               /* 100% opacité - rouge */
-#ff003300           /*   0% opacité - rouge */
-#FF003388           /*  50% opacité - rouge */
-
-/* Notation fonctionnelle */
-rgba(255,0,0,0.1)   /*  10% opacité - rouge */
-rgba(255,0,0,0.4)   /*  40% opacité - rouge */
-rgba(255,0,0,0.7)   /*  70% opacité - rouge */
-rgba(255,0,0,  1)   /* 100% opacité - rouge */
-
-/* Notation fonctionnelle avec des nombres décimaux */
-rgba(255, 0, 153.6, 1)
-rgba(1e2, .5e1, .5e0, +.25e2%)
-
-/* Notation avec un espace */
-rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
-rgba(255 0 0 / 40%) /* 40% opacité - rouge */
- -

Les couleurs HSL

- -

Les couleurs peuvent également être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-clarté).

- -

HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).

- -

Syntaxe

- -

Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles hsl() ou hsla().

- -
-

Note : Dans la spécification du module CSS Color de niveau 4, hsla() a été définie comme une fonction historique dont la grammaire et le comportement est le même que hsl(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

-
- -
-
Notation fonctionnelle : hsl(H, S, L,[, A]) ou hsla(H, S, L, A)
-
-

La valeur H correspond à la teinte (hue) et est représentée comme un angle {{cssxref("<angle>")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, le rouge correspond à 0 et 360 et les autres couleurs évoluent sur le cercle. Vert correspond à 120 et bleu à 240. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).

- -

La valeur S correspond à la saturation (saturation) et la valeur L correspond à la clarté (lightness), ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec 100% l'image sera complètement saturée et avec 0%, l'image sera en nuances de gris. Pour la clarté, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une clarté « normale ».

- -

La valeur A (canal alpha) peut être un nombre (type {{cssxref("<number>")}} entre 0 et 1 ou un pourcentage (type {{cssxref("<percentage>")}} (la valeur 100% correspond alors à la valeur numérique 1 : opacité complète).

-
-
Notation fonctionnelle : hsl(H S L[ / A]) ou hsla(H S L / A)
-
-

Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.

-
-
- -

Exemples

- -
HSL
- -
hsl(0,  100%,50%)   /* red */
-hsl(30, 100%,50%)
-hsl(60, 100%,50%)
-hsl(90, 100%,50%)
-hsl(120,100%,50%)   /* green */
-hsl(150,100%,50%)
-hsl(180,100%,50%)
-hsl(210,100%,50%)
-hsl(240,100%,50%)   /* blue */
-hsl(270,100%,50%)
-hsl(300,100%,50%)
-hsl(330,100%,50%)
-hsl(360,100%,50%)   /* red */
-
-hsl(120,100%,25%)   /* dark green */
-hsl(120,100%,50%)   /* green */
-hsl(120,100%,75%)   /* light green */
-
-hsl(120,100%,50%)   /* green */
-hsl(120, 67%,50%)
-hsl(120, 33%,50%)
-hsl(120,  0%,50%)
-
-hsl(120, 60%,70%)   /* pastel green */
-
-/* syntaxe avec les espaces */
-hsl(120 60% 70%) /* pastel green */
-
-/* Valeur d'angle */
-/* on peut également utiliser les unités */
-/* rad, grad, turn */
-hsl(120deg 60% 70%) /* pastel green */
-
-/* Valeur alpha optionnelle */
-hsl(240,100%,50%,0.05)   /* 5% opaque blue */
-hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
-hsl(240 100% 50% / 0.05) /* 5% opaque blue */
-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.4)  /* 40% opaque blue */
-hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
-hsla(240,100%,50%,   1)  /* full opaque blue */
-
-/* syntaxe avec un espace */
-hsla(240 100% 50% / 0.05)/* 5% opaque blue */
-
-/* valeur en pourcentage pour l'alpha */
-hsla(240 100% 50% / 5%)/* 5% opaque blue */
-
-/* valeur d'angle pour la teinte */
-/* les unités rad, grad et turn*/
-/* sont également acceptées */
-hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
-hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
- -

Couleurs système

- -

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
-
La légende de la fenêtre active. Devrait être utilisé avec CaptionText comme couleur de premier-plan.
-
AppWorkspace
-
La couleur d'arrière-plan d'une interface avec plusieurs documents.
-
Background
-
L'arrière-plan du bureau.
-
ButtonFace
-
La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
-
ButtonHighlight
-
La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.
-
ButtonShadow
-
La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..
-
ButtonText
-
La couleur du texte sur les bouttons. Devrait être utilisée avec ButtonFace ou ThreeDFace comme couleur d'arrière-plan.
-
CaptionText
-
La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec ActiveCaption comme couleur d'arrière-plan.
-
GrayText
-
Texte (désactivé) en gris.
-
Highlight
-
La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec HighlightText comme couleur de premier-plan.
-
HighlightText
-
La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec Highlight comme couleur d'arrière-plan.
-
InactiveBorder
-
La couleur de la bordure d'une fenêtre inactive.
-
InactiveCaption
-
La couleur de la légende de fenêtre inactive. Devrait être utilisée avec InactiveCaptionText comme couleur de premier-plan.
-
InactiveCaptionText
-
La couleur du texte pour une légende inactive. Devrait être utilisée avec InactiveCaption comme couleur d'arrière-plan.
-
InfoBackground
-
La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec InfoText comme couleur de premier-plan.
-
InfoText
-
La couleur du texte pour les bulles d'informations. Devrait être utilisée avec InfoBackground comme couleur d'arrière-plan.
-
Menu
-
La couleur d'arrière-plan du menu. Devrait être utilisée avec MenuText ou -moz-MenuBarText comme couleur de premier-plan.
-
MenuText
-
La couleur du texte dans les menus. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
-
Scrollbar
-
La couleur d'arrière-plan de la barre de défilement (ascenseur).
-
ThreeDDarkShadow
-
La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDFace
-
La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
-
ThreeDHighlight
-
La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDLightShadow
-
La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDShadow
-
La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
Window
-
La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur WindowText en premier plan.
-
WindowFrame
-
La couleur du cadre de la fenêtre.
-
WindowText
-
La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur Window en arrière-plan.
-
- -

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
-
La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait ThreeDFace ou ButtonFace lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec -moz-ButtonHoverText comme couleur de premier-plan.
-
-moz-ButtonHoverText
-
La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec-moz-ButtonHoverFace comme couleur d'arrière-plan.
-
-moz-CellHighlight
-
La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlightText comme couleur de premier-plan. Voir aussi -moz-html-CellHighlight.
-
-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
-
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
-
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
-
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
-
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
-
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
-
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
-
La couleur par défaut de la plate-forme pour les hyperliens.
-
-moz-OddTreeRow
-
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
-
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
-
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
-
Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("appearance")}}: -moz-win-communications-toolbox;.
-
-moz-win-mediatext
-
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
-
La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
-
-moz-default-color
-
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
-
La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-
- -

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.

- -

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).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Ajout de la couleur rebeccapurple, de la notation hexadécimale sur quatre chiffres (#RGBA) et sur huit chiffres (#RRGGBBAA). rgba() et hsla() sont désormais synonymes de rgb() et hsl(), les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.color")}}

- -

Voir aussi

- -
    -
  • {{cssxref("opacity")}}
    • -
  • {{cssxref("color")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("outline-color")}}
    • -
  • {{cssxref("text-shadow")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
diff --git a/files/fr/web/css/color_value/index.md b/files/fr/web/css/color_value/index.md new file mode 100644 index 0000000000..e35eb28083 --- /dev/null +++ b/files/fr/web/css/color_value/index.md @@ -0,0 +1,1368 @@ +--- +title: +slug: Web/CSS/color_value +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/color_value +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 :

+ + + +

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.

+
+ +

Syntaxe

+ +
+

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>.

+ +

Les mots-clés

+ +

Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, blue le bleu, brown le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :

+ +
    +
  • La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs VGA disponibles sur les cartes graphiques.
    • +
  • La spécification CSS de niveau 2 a ajouté le mot-clé orange.
    • +
  • Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (extended colors), couleurs X11 ou couleurs SVG.
    • +
  • La spécification CSS de niveau a ajouté la couleur rebeccapurple en l'honneur d'Eric Meyer.
    • +
+ +

Voici quelques inconvénients liés aux mots-clés :

+ +
    +
  • En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.
    • +
  • Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).
    • +
  • Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.
    • +
  • Certains mots-clés désignent la même couleur : +
      +
    • aqua / cyan
      • +
    • fuchsia / magenta
      • +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • 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.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationCouleurMot-cléValeurs exprimées en hexadécimal RGBExemple « live » dans le navigateur
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan (synonyme de aqua)#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta (synonyme de fuchsia)#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
+ +

La couleur rebeccapurple est équivalente à la couleur #639. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « Honorer un grand homme » (en anglais).

+ +

Le mot-clé transparent

+ +

transparent est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : rgba(0,0,0,0).

+ +
+

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 : 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

+ +

Le mot-clé currentColor représente la valeur calculée de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.

+ +

Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.

+ +

Si currentColor est utilisée comme valeur pour la propriété color, sa valeur est déterminée à partir de la valeur héritée pour la propriété color.

+ +

Exemples

+ +

La couleur de la ligne prend la couleur héritée depuis son élément parent.

+ +
+
Exemple live n°1
+ +
<div style="color:darkred">
+ La couleur de ce texte est bleu.
+  <div style="background:currentColor; height:1px"></div>
+ Un peu de texte.
+</div>
+
+ +

{{EmbedLiveSample('Exemple_live_n°1')}}

+ +
Exemple live n°2
+ +
<div style="color:blue; border-bottom: 1px dashed currentColor;">
+ La couleur de ce texte est bleu :
+  <div style="background:currentColor; height:1px"></div>
+ Un peu de texte.
+</div>
+ +

{{EmbedLiveSample('Exemple_live_n°2')}}

+
+ +

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.

+ +

Syntaxe

+ +

Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #) ou avec des notations fonctionnelles (rgb() ou rgba()).

+ +
+

Note : Dans la spécification du module CSS Color de niveau 4, rgba() a été définie comme une fonction historique dont la grammaire et le comportement est le même que rgb(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

+
+ +
+
Notation hexadécimale : #RRGGBB[AA]
+
Le signe « # » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.
+
Notation hexadécimale : #RGB[A]
+
le signe « # » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.
+
Notation fonctionnelle avec des virgules : rgb(R, G, B[, A]) ou rgba(R, G, B, A)
+
Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction rgb()). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("<number>")}}) ou des pourcentages ({{cssxref("<percentage>")}}) (ex. rgb(1e2, .5e1, .5e0, +.25e2%)).
+
Notation fonctionnelle : rgb(R G B[ / A]) ou rgba(R G B / A)
+
Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification CSS Colors Level 4.
+
+ +

Exemples

+ +
Les différentes variantes pour la syntaxe RGB
+ +
/* Ces exemples définissent tous la même couleur */
+#f03
+#F03
+#ff0033
+#FF0033
+rgb(255,0,51)
+rgb(255, 0, 51)
+rgb(255, 0, 51.0)
+rgb(100%,0%,20%)
+rgb(100%, 0%, 20%)
+rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
+
+ +
RGBa
+ +
/* Notation hexadécimale */
+#f030               /*   0% opacité - rouge */
+#F03F               /* 100% opacité - rouge */
+#ff003300           /*   0% opacité - rouge */
+#FF003388           /*  50% opacité - rouge */
+
+/* Notation fonctionnelle */
+rgba(255,0,0,0.1)   /*  10% opacité - rouge */
+rgba(255,0,0,0.4)   /*  40% opacité - rouge */
+rgba(255,0,0,0.7)   /*  70% opacité - rouge */
+rgba(255,0,0,  1)   /* 100% opacité - rouge */
+
+/* Notation fonctionnelle avec des nombres décimaux */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+
+/* Notation avec un espace */
+rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
+rgba(255 0 0 / 40%) /* 40% opacité - rouge */
+ +

Les couleurs HSL

+ +

Les couleurs peuvent également être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-clarté).

+ +

HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).

+ +

Syntaxe

+ +

Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles hsl() ou hsla().

+ +
+

Note : Dans la spécification du module CSS Color de niveau 4, hsla() a été définie comme une fonction historique dont la grammaire et le comportement est le même que hsl(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

+
+ +
+
Notation fonctionnelle : hsl(H, S, L,[, A]) ou hsla(H, S, L, A)
+
+

La valeur H correspond à la teinte (hue) et est représentée comme un angle {{cssxref("<angle>")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, le rouge correspond à 0 et 360 et les autres couleurs évoluent sur le cercle. Vert correspond à 120 et bleu à 240. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).

+ +

La valeur S correspond à la saturation (saturation) et la valeur L correspond à la clarté (lightness), ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec 100% l'image sera complètement saturée et avec 0%, l'image sera en nuances de gris. Pour la clarté, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une clarté « normale ».

+ +

La valeur A (canal alpha) peut être un nombre (type {{cssxref("<number>")}} entre 0 et 1 ou un pourcentage (type {{cssxref("<percentage>")}} (la valeur 100% correspond alors à la valeur numérique 1 : opacité complète).

+
+
Notation fonctionnelle : hsl(H S L[ / A]) ou hsla(H S L / A)
+
+

Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.

+
+
+ +

Exemples

+ +
HSL
+ +
hsl(0,  100%,50%)   /* red */
+hsl(30, 100%,50%)
+hsl(60, 100%,50%)
+hsl(90, 100%,50%)
+hsl(120,100%,50%)   /* green */
+hsl(150,100%,50%)
+hsl(180,100%,50%)
+hsl(210,100%,50%)
+hsl(240,100%,50%)   /* blue */
+hsl(270,100%,50%)
+hsl(300,100%,50%)
+hsl(330,100%,50%)
+hsl(360,100%,50%)   /* red */
+
+hsl(120,100%,25%)   /* dark green */
+hsl(120,100%,50%)   /* green */
+hsl(120,100%,75%)   /* light green */
+
+hsl(120,100%,50%)   /* green */
+hsl(120, 67%,50%)
+hsl(120, 33%,50%)
+hsl(120,  0%,50%)
+
+hsl(120, 60%,70%)   /* pastel green */
+
+/* syntaxe avec les espaces */
+hsl(120 60% 70%) /* pastel green */
+
+/* Valeur d'angle */
+/* on peut également utiliser les unités */
+/* rad, grad, turn */
+hsl(120deg 60% 70%) /* pastel green */
+
+/* Valeur alpha optionnelle */
+hsl(240,100%,50%,0.05)   /* 5% opaque blue */
+hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
+hsl(240 100% 50% / 0.05) /* 5% opaque blue */
+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.4)  /* 40% opaque blue */
+hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
+hsla(240,100%,50%,   1)  /* full opaque blue */
+
+/* syntaxe avec un espace */
+hsla(240 100% 50% / 0.05)/* 5% opaque blue */
+
+/* valeur en pourcentage pour l'alpha */
+hsla(240 100% 50% / 5%)/* 5% opaque blue */
+
+/* valeur d'angle pour la teinte */
+/* les unités rad, grad et turn*/
+/* sont également acceptées */
+hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
+hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
+ +

Couleurs système

+ +

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
+
La légende de la fenêtre active. Devrait être utilisé avec CaptionText comme couleur de premier-plan.
+
AppWorkspace
+
La couleur d'arrière-plan d'une interface avec plusieurs documents.
+
Background
+
L'arrière-plan du bureau.
+
ButtonFace
+
La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
+
ButtonHighlight
+
La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.
+
ButtonShadow
+
La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..
+
ButtonText
+
La couleur du texte sur les bouttons. Devrait être utilisée avec ButtonFace ou ThreeDFace comme couleur d'arrière-plan.
+
CaptionText
+
La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec ActiveCaption comme couleur d'arrière-plan.
+
GrayText
+
Texte (désactivé) en gris.
+
Highlight
+
La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec HighlightText comme couleur de premier-plan.
+
HighlightText
+
La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec Highlight comme couleur d'arrière-plan.
+
InactiveBorder
+
La couleur de la bordure d'une fenêtre inactive.
+
InactiveCaption
+
La couleur de la légende de fenêtre inactive. Devrait être utilisée avec InactiveCaptionText comme couleur de premier-plan.
+
InactiveCaptionText
+
La couleur du texte pour une légende inactive. Devrait être utilisée avec InactiveCaption comme couleur d'arrière-plan.
+
InfoBackground
+
La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec InfoText comme couleur de premier-plan.
+
InfoText
+
La couleur du texte pour les bulles d'informations. Devrait être utilisée avec InfoBackground comme couleur d'arrière-plan.
+
Menu
+
La couleur d'arrière-plan du menu. Devrait être utilisée avec MenuText ou -moz-MenuBarText comme couleur de premier-plan.
+
MenuText
+
La couleur du texte dans les menus. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
+
Scrollbar
+
La couleur d'arrière-plan de la barre de défilement (ascenseur).
+
ThreeDDarkShadow
+
La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDFace
+
La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
+
ThreeDHighlight
+
La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDLightShadow
+
La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDShadow
+
La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
Window
+
La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur WindowText en premier plan.
+
WindowFrame
+
La couleur du cadre de la fenêtre.
+
WindowText
+
La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur Window en arrière-plan.
+
+ +

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
+
La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait ThreeDFace ou ButtonFace lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec -moz-ButtonHoverText comme couleur de premier-plan.
+
-moz-ButtonHoverText
+
La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec-moz-ButtonHoverFace comme couleur d'arrière-plan.
+
-moz-CellHighlight
+
La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlightText comme couleur de premier-plan. Voir aussi -moz-html-CellHighlight.
+
-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
+
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
+
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
+
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
+
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
+
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
+
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
+
La couleur par défaut de la plate-forme pour les hyperliens.
+
-moz-OddTreeRow
+
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
+
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
+
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
+
Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("appearance")}}: -moz-win-communications-toolbox;.
+
-moz-win-mediatext
+
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
+
La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
+
-moz-default-color
+
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
+
La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+
+ +

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.

+ +

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).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Ajout de la couleur rebeccapurple, de la notation hexadécimale sur quatre chiffres (#RGBA) et sur huit chiffres (#RRGGBBAA). rgba() et hsla() sont désormais synonymes de rgb() et hsl(), les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.color")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("opacity")}}
    • +
  • {{cssxref("color")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("outline-color")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
diff --git a/files/fr/web/css/column-count/index.html b/files/fr/web/css/column-count/index.html deleted file mode 100644 index 372e04db1d..0000000000 --- a/files/fr/web/css/column-count/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: column-count -slug: Web/CSS/column-count -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-count ---- -
{{CSSRef}}
- -

La propriété column-count décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.

- -
{{EmbedInteractiveExample("pages/css/column-count.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-column-count: auto;
-
-/* Valeurs numériques */
-/* Type <number> */
-column-count: 3;
-
-/* Valeurs globales */
-column-count: inherit;
-column-count: initial;
-column-count: unset;
-
- -

Valeurs

- -
-
auto
-
Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de {{cssxref("column-width")}}).
-
<number>
-
Un nombre (type {{cssxref("<integer>")}}) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas auto, cette propriété indique simplement le nombre maximal de colonnes autorisé.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border: 10px solid #000000;
-  column-count:3;
-}
- -

HTML

- -
<p class="exemple">
-  « Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »
-  « Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","800","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.column-count")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/column-count/index.md b/files/fr/web/css/column-count/index.md new file mode 100644 index 0000000000..372e04db1d --- /dev/null +++ b/files/fr/web/css/column-count/index.md @@ -0,0 +1,102 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-count +--- +
{{CSSRef}}
+ +

La propriété column-count décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.

+ +
{{EmbedInteractiveExample("pages/css/column-count.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+column-count: auto;
+
+/* Valeurs numériques */
+/* Type <number> */
+column-count: 3;
+
+/* Valeurs globales */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de {{cssxref("column-width")}}).
+
<number>
+
Un nombre (type {{cssxref("<integer>")}}) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas auto, cette propriété indique simplement le nombre maximal de colonnes autorisé.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border: 10px solid #000000;
+  column-count:3;
+}
+ +

HTML

+ +
<p class="exemple">
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","800","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.column-count")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/column-fill/index.html b/files/fr/web/css/column-fill/index.html deleted file mode 100644 index 9d27ef3d0e..0000000000 --- a/files/fr/web/css/column-fill/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: column-fill -slug: Web/CSS/column-fill -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-fill ---- -
{{CSSRef}}
- -

La propriété column-fill permet de contrôler la façon dont le contenu est réparti entre les colonnes. Le contenu peut être équilibré (afin de prendre la même hauteur sur toutes les colonnes) ou être réparti de façon automatique (avec auto) et remplir l'espace nécessaire.

- -
{{EmbedInteractiveExample("pages/css/column-fill.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-column-fill: auto;
-column-fill: balance;
-column-fill: balance-all;
-
-/* Valeurs globales */
-column-fill: inherit;
-column-fill: initial;
-column-fill: unset;
-
- -

Cette propriété est définie grâce à l'un des mots-clés définis ci-après.

- -

Valeurs

- -
-
auto
-
Un mot-clé indiquant que les colonnes sont remplies dans l'ordre.
-
balance
-
Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les médias paginés, seule la dernière page est équilibrée.
-
balance-all
-
Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les média paginés, toutes les pages sont équilibrées.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border: 10px solid #000000;
-  column-count:3;
-  column-fill: balance;
-}
- -

HTML

- -
<p class="exemple">
-  « Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »
-  « Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","800","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#cf', 'column-fill')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.column-fill")}}

diff --git a/files/fr/web/css/column-fill/index.md b/files/fr/web/css/column-fill/index.md new file mode 100644 index 0000000000..9d27ef3d0e --- /dev/null +++ b/files/fr/web/css/column-fill/index.md @@ -0,0 +1,98 @@ +--- +title: column-fill +slug: Web/CSS/column-fill +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-fill +--- +
{{CSSRef}}
+ +

La propriété column-fill permet de contrôler la façon dont le contenu est réparti entre les colonnes. Le contenu peut être équilibré (afin de prendre la même hauteur sur toutes les colonnes) ou être réparti de façon automatique (avec auto) et remplir l'espace nécessaire.

+ +
{{EmbedInteractiveExample("pages/css/column-fill.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+column-fill: auto;
+column-fill: balance;
+column-fill: balance-all;
+
+/* Valeurs globales */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+
+ +

Cette propriété est définie grâce à l'un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
auto
+
Un mot-clé indiquant que les colonnes sont remplies dans l'ordre.
+
balance
+
Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les médias paginés, seule la dernière page est équilibrée.
+
balance-all
+
Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les média paginés, toutes les pages sont équilibrées.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border: 10px solid #000000;
+  column-count:3;
+  column-fill: balance;
+}
+ +

HTML

+ +
<p class="exemple">
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","800","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#cf', 'column-fill')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.column-fill")}}

diff --git a/files/fr/web/css/column-gap/index.html b/files/fr/web/css/column-gap/index.html deleted file mode 100644 index d59b181788..0000000000 --- a/files/fr/web/css/column-gap/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: column-gap -slug: Web/CSS/column-gap -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-gap ---- -
{{CSSRef}}
- -

La propriété column-gap permet de définir l'espace entre les colonnes d'un élément.

- -
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
- -
{{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.

- -
-

Note : Le module de spécification CSS Grid Layout définissait initialement la propriété grid-column-gap. Cette version préfixée a été remplacée par column-gap. Toutefois, à des fins de compatibilité envers les navigateurs qui ne prendraient pas en charge cette évolution, mieux vaut utiliser les deux versions (voir l'exemple interactif ci-avant).

-
- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-column-gap: normal;
-
-/* Valeurs de longueur */
-/* Type <length>       */
-column-gap: 3px;
-column-gap: 2.5em;
-
-/* Valeurs de pourcentage */
-/* Type <percentage> */
-column-gap: 3%;
-
-/* Valeurs globales */
-column-gap: inherit;
-column-gap: initial;
-column-gap: unset;
-
- -

Valeurs

- -
-
normal
-
Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. Pour les dispositions en colonnes, cette valeur correspond à 1em, sinon elle correspond à 0.
-
<length>
-
Une valeur de longueur (type {{cssxref("<length>")}}) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
-
<percentage>
-
Une valeur de pourcentage (type {{cssxref("<percentage>")}} qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Disposition flexible

- -

{{SeeCompatTable}}

- -

HTML

- -
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- -
#flexbox {
-  display: flex;
-  height: 100px;
-  column-gap: 20px;
-}
-
-#flexbox > div {
-  border: 1opx solid green;
-  background-color: lime;
-  flex: auto;
-}
- -

Résultat

- -

{{EmbedLiveSample("Disposition_flexible","auto","120px")}}

- -

Disposition en colonnes

- -

HTML

- -
<p class="content-box">
-  Un texte sur plusieurs colonnes avec une gouttière
-  de 40px paramétrée grâce à la propriété `column-gap`.
-  C'est plutôt pas mal comme effet non ?
-</p>
-
- -

CSS

- -
.content-box {
-  column-count: 3;
-  column-gap: 40px;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Disposition_en_colonnes", "auto", "120px")}}

- -

Disposition en grille

- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- -
#grid {
-  display: grid;
-  height: 100px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px;
-  column-gap: 20px;
-}
-
-#grid > div {
-  background-color: lime;
-}
-
- - - -

Résultat

- -

{{EmbedLiveSample("Disposition_en_grille", "auto", "120px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}{{Spec2("CSS3 Box Alignment")}}Applique cette propriété aux grilles et aux boîtes flexibles (flexbox).
{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}{{Spec2("CSS3 Grid")}}Définition de l'impact de cette propriété sur les dispositions en grille.
{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}{{Spec2("CSS3 Multicol")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

Prise en charge pour les dispositions flexibles

- -

{{Compat("css.properties.column-gap.flex_context")}}

- -

Prise en charge pour les dispositions en grille

- -

{{Compat("css.properties.column-gap.grid_context")}}

- -

Prise en charge pour les dispositions en colonnes

- -

{{Compat("css.properties.column-gap.multicol_context")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/column-gap/index.md b/files/fr/web/css/column-gap/index.md new file mode 100644 index 0000000000..d59b181788 --- /dev/null +++ b/files/fr/web/css/column-gap/index.md @@ -0,0 +1,200 @@ +--- +title: column-gap +slug: Web/CSS/column-gap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-gap +--- +
{{CSSRef}}
+ +

La propriété column-gap permet de définir l'espace entre les colonnes d'un élément.

+ +
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
+ +
{{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.

+ +
+

Note : Le module de spécification CSS Grid Layout définissait initialement la propriété grid-column-gap. Cette version préfixée a été remplacée par column-gap. Toutefois, à des fins de compatibilité envers les navigateurs qui ne prendraient pas en charge cette évolution, mieux vaut utiliser les deux versions (voir l'exemple interactif ci-avant).

+
+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+column-gap: normal;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* Valeurs de pourcentage */
+/* Type <percentage> */
+column-gap: 3%;
+
+/* Valeurs globales */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+
+ +

Valeurs

+ +
+
normal
+
Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. Pour les dispositions en colonnes, cette valeur correspond à 1em, sinon elle correspond à 0.
+
<length>
+
Une valeur de longueur (type {{cssxref("<length>")}}) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
+
<percentage>
+
Une valeur de pourcentage (type {{cssxref("<percentage>")}} qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Disposition flexible

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  height: 100px;
+  column-gap: 20px;
+}
+
+#flexbox > div {
+  border: 1opx solid green;
+  background-color: lime;
+  flex: auto;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Disposition_flexible","auto","120px")}}

+ +

Disposition en colonnes

+ +

HTML

+ +
<p class="content-box">
+  Un texte sur plusieurs colonnes avec une gouttière
+  de 40px paramétrée grâce à la propriété `column-gap`.
+  C'est plutôt pas mal comme effet non ?
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Disposition_en_colonnes", "auto", "120px")}}

+ +

Disposition en grille

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  column-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ + + +

Résultat

+ +

{{EmbedLiveSample("Disposition_en_grille", "auto", "120px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}{{Spec2("CSS3 Box Alignment")}}Applique cette propriété aux grilles et aux boîtes flexibles (flexbox).
{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}{{Spec2("CSS3 Grid")}}Définition de l'impact de cette propriété sur les dispositions en grille.
{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}{{Spec2("CSS3 Multicol")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

Prise en charge pour les dispositions en grille

+ +

{{Compat("css.properties.column-gap.grid_context")}}

+ +

Prise en charge pour les dispositions en colonnes

+ +

{{Compat("css.properties.column-gap.multicol_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/column-rule-color/index.html b/files/fr/web/css/column-rule-color/index.html deleted file mode 100644 index c3d4c6938b..0000000000 --- a/files/fr/web/css/column-rule-color/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: column-rule-color -slug: Web/CSS/column-rule-color -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-rule-color ---- -
{{CSSRef}}
- -

La propriété column-rule-color permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes.

- -
{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
- -

Syntaxe

- -
/* Valeurs de couleur */
-/* Type <color> */
-column-rule-color: red;
-column-rule-color: rgb(192, 56, 78);
-column-rule-color: transparent;
-column-rule-color: hsla(0, 100%, 50%, 0.6);
-
-/* Valeurs globales */
-column-rule-color: inherit;
-column-rule-color: initial;
-column-rule-color: unset;
-
- -

Valeurs

- -
-
<color>
-
Une valeur de couleur (type {{cssxref("<color>")}}) qui indique la couleur du trait entre les colonnes.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border: 10px solid #000000;
-
-  columns:3;
-  column-rule-width: thick;
-  column-rule-color: blue;
-  column-rule-style: solid;
-}
- -

HTML

- -
<p class=exemple>
-  « Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »
-  « Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}{{Spec2('CSS3 Multicol')}} 
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.column-rule-color")}}

- -

Voir aussi

- -
    -
  • Le type de donnée {{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")}} et {{cssxref("caret-color")}}
    • -
  • Appliquer des couleurs aux éléments HTML grâce à CSS
    • -
diff --git a/files/fr/web/css/column-rule-color/index.md b/files/fr/web/css/column-rule-color/index.md new file mode 100644 index 0000000000..c3d4c6938b --- /dev/null +++ b/files/fr/web/css/column-rule-color/index.md @@ -0,0 +1,105 @@ +--- +title: column-rule-color +slug: Web/CSS/column-rule-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-rule-color +--- +
{{CSSRef}}
+ +

La propriété column-rule-color permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes.

+ +
{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
+ +

Syntaxe

+ +
/* Valeurs de couleur */
+/* Type <color> */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* Valeurs globales */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+
+ +

Valeurs

+ +
+
<color>
+
Une valeur de couleur (type {{cssxref("<color>")}}) qui indique la couleur du trait entre les colonnes.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border: 10px solid #000000;
+
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: solid;
+}
+ +

HTML

+ +
<p class=exemple>
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}{{Spec2('CSS3 Multicol')}} 
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.column-rule-color")}}

+ +

Voir aussi

+ +
    +
  • Le type de donnée {{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")}} et {{cssxref("caret-color")}}
    • +
  • Appliquer des couleurs aux éléments HTML grâce à CSS
    • +
diff --git a/files/fr/web/css/column-rule-style/index.html b/files/fr/web/css/column-rule-style/index.html deleted file mode 100644 index 70bab31e69..0000000000 --- a/files/fr/web/css/column-rule-style/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: column-rule-style -slug: Web/CSS/column-rule-style -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-rule-style ---- -
{{CSSRef}}
- -

La propriété column-rule-style permet de définir le style de la ligne tracée entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.

- -
{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-column-rule-style: none;
-column-rule-style: hidden;
-column-rule-style: dotted;
-column-rule-style: dashed;
-column-rule-style: solid;
-column-rule-style: double;
-column-rule-style: groove;
-column-rule-style: ridge;
-column-rule-style: inset;
-column-rule-style: outset;
-
-/* Valeurs globales */
-column-rule-style: inherit;
-column-rule-style: initial;
-column-rule-style: unset;
-
- -

La propriété column-rule-style avec une valeur unique de type <br-style>.

- -

Valeurs

- -
-
<br-style> 
-
Un mot-clé (défini comme pour {{cssxref("border-style")}}) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. collapsing border model).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border: 10px solid #000000;
-
-  columns:3;
-  column-rule-width: thick;
-  column-rule-color: blue;
-  column-rule-style: dashed;
-}
- -

HTML

- -
<p class=exemple>
-  « Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »
-  « Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#crs', 'column-rule-style')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.column-rule-style")}}

diff --git a/files/fr/web/css/column-rule-style/index.md b/files/fr/web/css/column-rule-style/index.md new file mode 100644 index 0000000000..70bab31e69 --- /dev/null +++ b/files/fr/web/css/column-rule-style/index.md @@ -0,0 +1,104 @@ +--- +title: column-rule-style +slug: Web/CSS/column-rule-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-rule-style +--- +
{{CSSRef}}
+ +

La propriété column-rule-style permet de définir le style de la ligne tracée entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.

+ +
{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* Valeurs globales */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+
+ +

La propriété column-rule-style avec une valeur unique de type <br-style>.

+ +

Valeurs

+ +
+
<br-style> 
+
Un mot-clé (défini comme pour {{cssxref("border-style")}}) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. collapsing border model).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border: 10px solid #000000;
+
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: dashed;
+}
+ +

HTML

+ +
<p class=exemple>
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#crs', 'column-rule-style')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.column-rule-style")}}

diff --git a/files/fr/web/css/column-rule-width/index.html b/files/fr/web/css/column-rule-width/index.html deleted file mode 100644 index 27b3b4397a..0000000000 --- a/files/fr/web/css/column-rule-width/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: column-rule-width -slug: Web/CSS/column-rule-width -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-rule-width ---- -
{{CSSRef}}
- -

La propriété column-rule-width permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.

- -
{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}
- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-column-rule-width: thin;
-column-rule-width: medium;
-column-rule-width: thick;
-
-/* Valeurs de longueurs */
-/* Type <length>        */
-column-rule-width: 1px;
-column-rule-width: 2.5em;
-
-/* Valeurs globales */
-column-rule-width: inherit;
-column-rule-width: initial;
-column-rule-width: unset;
-
- -

La propriété column-rule-width est définie grâce à une valeur de type <br-width>.

- -

Valeurs

- -
-
<br-width>
-
Une valeur de longueur (type {{cssxref("<length>")}}) ou un mot-clé parmi thin, medium ou thick qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriété {{cssxref("border-width")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border: 10px solid #000000;
-  columns:3;
-  column-rule-width: thick;
-  column-rule-color: blue;
-  column-rule-style: dashed;
-}
- -

HTML

- -
<p class=exemple>
-  « Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »
-  « Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#crw', 'column-rule-width')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.column-rule-width")}}

diff --git a/files/fr/web/css/column-rule-width/index.md b/files/fr/web/css/column-rule-width/index.md new file mode 100644 index 0000000000..27b3b4397a --- /dev/null +++ b/files/fr/web/css/column-rule-width/index.md @@ -0,0 +1,101 @@ +--- +title: column-rule-width +slug: Web/CSS/column-rule-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-rule-width +--- +
{{CSSRef}}
+ +

La propriété column-rule-width permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.

+ +
{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* Valeurs de longueurs */
+/* Type <length>        */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* Valeurs globales */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+
+ +

La propriété column-rule-width est définie grâce à une valeur de type <br-width>.

+ +

Valeurs

+ +
+
<br-width>
+
Une valeur de longueur (type {{cssxref("<length>")}}) ou un mot-clé parmi thin, medium ou thick qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriété {{cssxref("border-width")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border: 10px solid #000000;
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: dashed;
+}
+ +

HTML

+ +
<p class=exemple>
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#crw', 'column-rule-width')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.column-rule-width")}}

diff --git a/files/fr/web/css/column-rule/index.html b/files/fr/web/css/column-rule/index.html deleted file mode 100644 index 9ac19f4c6f..0000000000 --- a/files/fr/web/css/column-rule/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: column-rule -slug: Web/CSS/column-rule -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-rule ---- -
{{CSSRef}}
- -

Lorsqu'on utilise une disposition sur plusieurs colonnes, la propriété raccourcie column-rule permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.

- -
{{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).

- -
-

Note : Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.

-
- -

Syntaxe

- -
/* Syntaxe avec des mots-clés */
-column-rule: dotted;
-column-rule: solid blue;
-column-rule: solid 8px;
-column-rule: thick inset blue;
-
-/* Valeurs globales */
-column-rule: inherit;
-column-rule: initial;
-column-rule: unset;
-
- -

Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.

- -

Valeurs

- -
-
<'column-rule-width'>
-
Une valeur de longueur (type {{cssxref("<length>")}}) ou l'un des mots-clés thin, medium ou thick. Pour plus de détails, voir {{cssxref("border-width")}}.
-
<'column-rule-style'>
-
Voir {{cssxref("border-style")}} pour les différentes valeurs possibles.
-
<'column-rule-color'>
-
Une valeur de couleur (type {{cssxref("<color>")}}).
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<div id="col_rul">
-  <p> column one </p>
-  <p> column two </p>
-  <p> column three </p>
-</div>
-
- -

CSS

- -
#col_rul{
-  padding: 0.3em;
-  background: gold;
-  border: groove 2px gold;
-  column-rule: inset 2px gold;
-  column-count: 3;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.column-rule")}}

diff --git a/files/fr/web/css/column-rule/index.md b/files/fr/web/css/column-rule/index.md new file mode 100644 index 0000000000..9ac19f4c6f --- /dev/null +++ b/files/fr/web/css/column-rule/index.md @@ -0,0 +1,102 @@ +--- +title: column-rule +slug: Web/CSS/column-rule +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-rule +--- +
{{CSSRef}}
+ +

Lorsqu'on utilise une disposition sur plusieurs colonnes, la propriété raccourcie column-rule permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.

+ +
{{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).

+ +
+

Note : Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.

+
+ +

Syntaxe

+ +
/* Syntaxe avec des mots-clés */
+column-rule: dotted;
+column-rule: solid blue;
+column-rule: solid 8px;
+column-rule: thick inset blue;
+
+/* Valeurs globales */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+
+ +

Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.

+ +

Valeurs

+ +
+
<'column-rule-width'>
+
Une valeur de longueur (type {{cssxref("<length>")}}) ou l'un des mots-clés thin, medium ou thick. Pour plus de détails, voir {{cssxref("border-width")}}.
+
<'column-rule-style'>
+
Voir {{cssxref("border-style")}} pour les différentes valeurs possibles.
+
<'column-rule-color'>
+
Une valeur de couleur (type {{cssxref("<color>")}}).
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<div id="col_rul">
+  <p> column one </p>
+  <p> column two </p>
+  <p> column three </p>
+</div>
+
+ +

CSS

+ +
#col_rul{
+  padding: 0.3em;
+  background: gold;
+  border: groove 2px gold;
+  column-rule: inset 2px gold;
+  column-count: 3;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.column-rule")}}

diff --git a/files/fr/web/css/column-span/index.html b/files/fr/web/css/column-span/index.html deleted file mode 100644 index ab7508ea5b..0000000000 --- a/files/fr/web/css/column-span/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: column-span -slug: Web/CSS/column-span -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-span ---- -
{{CSSRef}}
- -

La propriété column-span permet à un élément de s'étendre sur toutes les colonnes lorsque la valeur de cette propriété est all. Un élément qui s'étend sur plus d'une colonne est appelé un élément étendu (spanning element).

- -
{{EmbedInteractiveExample("pages/css/column-span.html")}}
- -
/* Valeurs avec un mot-clé */
-column-span: none;
-column-span: all;
-
-/* Valeurs globales */
-column-span: inherit;
-column-span: initial;
-column-span: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
none
-
L'élément ne s'étend pas sur plusieurs colonnes.
-
all
-
L'élément s'étend sur l'ensemble des colonnes. Le contenu du flux normal apparaissant avant l'élément est équilibré entre toutes les colonnes de façon automatique. L'élément établit un nouveau bloc de contexte de formatage.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  border: 10px solid #000000;
-  columns:3;
-}
-
-h2 {
-  column-span: all;
-}
- -

HTML

- -
<div class=exemple>
-  « Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »
-  <h2> La suite</h2>
-  « Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","auto",120)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.column-span")}}

diff --git a/files/fr/web/css/column-span/index.md b/files/fr/web/css/column-span/index.md new file mode 100644 index 0000000000..ab7508ea5b --- /dev/null +++ b/files/fr/web/css/column-span/index.md @@ -0,0 +1,97 @@ +--- +title: column-span +slug: Web/CSS/column-span +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-span +--- +
{{CSSRef}}
+ +

La propriété column-span permet à un élément de s'étendre sur toutes les colonnes lorsque la valeur de cette propriété est all. Un élément qui s'étend sur plus d'une colonne est appelé un élément étendu (spanning element).

+ +
{{EmbedInteractiveExample("pages/css/column-span.html")}}
+ +
/* Valeurs avec un mot-clé */
+column-span: none;
+column-span: all;
+
+/* Valeurs globales */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
L'élément ne s'étend pas sur plusieurs colonnes.
+
all
+
L'élément s'étend sur l'ensemble des colonnes. Le contenu du flux normal apparaissant avant l'élément est équilibré entre toutes les colonnes de façon automatique. L'élément établit un nouveau bloc de contexte de formatage.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  border: 10px solid #000000;
+  columns:3;
+}
+
+h2 {
+  column-span: all;
+}
+ +

HTML

+ +
<div class=exemple>
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  <h2> La suite</h2>
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","auto",120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.column-span")}}

diff --git a/files/fr/web/css/column-width/index.html b/files/fr/web/css/column-width/index.html deleted file mode 100644 index ebc538bee6..0000000000 --- a/files/fr/web/css/column-width/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: column-width -slug: Web/CSS/column-width -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-width ---- -
{{CSSRef}}
- -

La propriété column-width définit une largeur de colonne idéale lorsqu'on utilise une disposition en colonnes. Aussi, on aura le plus de colonnes possible et pour lesquelles aucune n'est moins large que column-width. La colonne réelle peut être plus petite que cette taille si son conteneur est moins large que cette valeur.

- -
{{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

- -
/* Valeur avec un mot-clé */
-column-width: auto;
-
-/* Valeurs de longueur */
-/* Type <length>       */
-column-width: 60px;
-column-width: 15.5em;
-column-width: 3.3vw;
-
-/* Valeurs globales */
-column-width: inherit;
-column-width: initial;
-column-width: unset;
-
- -

Valeurs

- -
-
<length>
-
Une valeur de longueur (type {{cssxref("<length>")}}) qui fournit une indication sur la largeur optimale d'une colonne. La colonne réelle peut être plus large que cette longueur (pour remplir l'espace disponible) ou plus étroite (uniquement si l'espace disponible est inférieur à la largeur indiquée). La longueur exprimée doit être strictement positive sinon la déclaration est considérée invalide. Les valeurs exprimées en pourcentages sont invalides.
-
auto
-
Un mot-clé indiquant que la largeur de la colonne doit être déterminée grâce aux autres propriétés CSS comme {{cssxref("column-count")}}.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.content-box {
-  border: 10px solid #0ff;
-
-  -webkit-column-width: 100px;
-  -moz-column-width: 100px;
-  column-width: 100px;
-}
- -

HTML

- -
<div class="content-box">
-  Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
-  sed diam nonummy nibh euismod tincidunt ut laoreet dolore
-  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
-  quis nostrud exerci tation ullamcorper suscipit lobortis
-  nisl ut aliquip ex ea commodo consequat.
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '300px', '200px')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}{{Spec2('CSS4 Writing Modes')}}Ajoutes des tailles intrinsèques grâce aux mots-clés min-content, max-content, fill-available et fit-content.
{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.column-width")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/column-width/index.md b/files/fr/web/css/column-width/index.md new file mode 100644 index 0000000000..ebc538bee6 --- /dev/null +++ b/files/fr/web/css/column-width/index.md @@ -0,0 +1,109 @@ +--- +title: column-width +slug: Web/CSS/column-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-width +--- +
{{CSSRef}}
+ +

La propriété column-width définit une largeur de colonne idéale lorsqu'on utilise une disposition en colonnes. Aussi, on aura le plus de colonnes possible et pour lesquelles aucune n'est moins large que column-width. La colonne réelle peut être plus petite que cette taille si son conteneur est moins large que cette valeur.

+ +
{{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

+ +
/* Valeur avec un mot-clé */
+column-width: auto;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+column-width: 60px;
+column-width: 15.5em;
+column-width: 3.3vw;
+
+/* Valeurs globales */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Une valeur de longueur (type {{cssxref("<length>")}}) qui fournit une indication sur la largeur optimale d'une colonne. La colonne réelle peut être plus large que cette longueur (pour remplir l'espace disponible) ou plus étroite (uniquement si l'espace disponible est inférieur à la largeur indiquée). La longueur exprimée doit être strictement positive sinon la déclaration est considérée invalide. Les valeurs exprimées en pourcentages sont invalides.
+
auto
+
Un mot-clé indiquant que la largeur de la colonne doit être déterminée grâce aux autres propriétés CSS comme {{cssxref("column-count")}}.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.content-box {
+  border: 10px solid #0ff;
+
+  -webkit-column-width: 100px;
+  -moz-column-width: 100px;
+  column-width: 100px;
+}
+ +

HTML

+ +
<div class="content-box">
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+  sed diam nonummy nibh euismod tincidunt ut laoreet dolore
+  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
+  quis nostrud exerci tation ullamcorper suscipit lobortis
+  nisl ut aliquip ex ea commodo consequat.
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '300px', '200px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}{{Spec2('CSS4 Writing Modes')}}Ajoutes des tailles intrinsèques grâce aux mots-clés min-content, max-content, fill-available et fit-content.
{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.column-width")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/column_combinator/index.html b/files/fr/web/css/column_combinator/index.html deleted file mode 100644 index 869a1e10dc..0000000000 --- a/files/fr/web/css/column_combinator/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Combinateur de colonne -slug: Web/CSS/Column_combinator -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Column_combinator -original_slug: Web/CSS/Combinateur_colonne ---- -
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
- -

Le combinateur de colonne (||) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.

- -
/* Les cellules de tableaux qui appartiennent */
-/* à la colonne "selected" */
-col.selected || td {
-  background: gray;
-}
-
- -

Syntaxe

- -
column-selector || cell-selector {
-  /* propriétés pour le style */
-}
-
- -

Exemples

- -

HTML

- -
<table border="1">
-  <colgroup>
-    <col span="2"/>
-    <col class="selected"/>
-  </colgroup>
-  <tbody>
-    <tr>
-      <td>A
-      <td>B
-      <td>C
-    </tr>
-    <tr>
-      <td colspan="2">D</td>
-      <td>E</td>
-    </tr>
-    <tr>
-      <td>F</td>
-      <td colspan="2">G</td>
-    </tr>
-  </tbody>
-</table>
- -

CSS

- -
col.selected || td {
-  background: gray;
-  color: white;
-  font-weight: bold;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("javascript.builtins.Array.sort")}}

- -

Voir aussi

- -
    -
  • {{HTMLElement("col")}}
    • -
  • {{HTMLElement("colgroup")}}
    • -
  • {{CSSxRef("grid")}}
    • -
diff --git a/files/fr/web/css/column_combinator/index.md b/files/fr/web/css/column_combinator/index.md new file mode 100644 index 0000000000..869a1e10dc --- /dev/null +++ b/files/fr/web/css/column_combinator/index.md @@ -0,0 +1,96 @@ +--- +title: Combinateur de colonne +slug: Web/CSS/Column_combinator +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Column_combinator +original_slug: Web/CSS/Combinateur_colonne +--- +
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
+ +

Le combinateur de colonne (||) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.

+ +
/* Les cellules de tableaux qui appartiennent */
+/* à la colonne "selected" */
+col.selected || td {
+  background: gray;
+}
+
+ +

Syntaxe

+ +
column-selector || cell-selector {
+  /* propriétés pour le style */
+}
+
+ +

Exemples

+ +

HTML

+ +
<table border="1">
+  <colgroup>
+    <col span="2"/>
+    <col class="selected"/>
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A
+      <td>B
+      <td>C
+    </tr>
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("javascript.builtins.Array.sort")}}

+ +

Voir aussi

+ +
    +
  • {{HTMLElement("col")}}
    • +
  • {{HTMLElement("colgroup")}}
    • +
  • {{CSSxRef("grid")}}
    • +
diff --git a/files/fr/web/css/columns/index.html b/files/fr/web/css/columns/index.html deleted file mode 100644 index f13537bfe4..0000000000 --- a/files/fr/web/css/columns/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: columns -slug: Web/CSS/columns -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference -translation_of: Web/CSS/columns ---- -
{{CSSRef}}
- -

La propriété columns est une propriété raccourcie permettant de définir les deux propriétés {{cssxref('column-width')}} (qui définit la largeur des colonnes) et {{cssxref("column-count")}} (qui définit le nombre de colonnes) en même temps.

- -
{{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

- -
/* Largeur */
-columns: 18em;
-
-/* Nombre de colonnes */
-columns: 1;
-columns: auto;
-
-/* Combinaison d'une largeur et d'un nombre */
-columns: 1 auto;
-columns: auto 12em;
-columns: auto auto;
-
-
-/* Valeurs globales */
-columns: inherit;
-columns: initial;
-columns: unset;
-
- -

La propriété columns se définit avec un ou deux valeurs parmi celles décrites ci-après. L'ordre de ces valeurs n'a pas d'importance.

- -

Valeurs

- -
-
<'column-width'>
-
Une valeur de longueur (type {{cssxref("<length>")}}) fournissant une indication quant à la largeur optimale de la colonne ou le mot-clé auto. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide.
-
<'column-count'>
-
Une quantité (type {{cssxref("<integer>")}}) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
.exemple {
-  margin: 0;
-  height: 90px;
-  border: 3px solid black;
-  columns: 3;
-}
- -

HTML

- -
<p class=exemple>
-  « Mais alors, » pensa Alice, « ne serai-je donc
-  jamais plus vieille que je ne le suis maintenant ?
-  D’un côté cela aura ses avantages, ne jamais être
-  une vieille femme. Mais alors avoir toujours des
-  leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »
-  « Oh ! Alice, petite folle, » se répondit-elle.
-  « Comment pourriez-vous apprendre des leçons ici ?
-  Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Exemples",300,120)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#columns', 'columns')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.columns")}}

diff --git a/files/fr/web/css/columns/index.md b/files/fr/web/css/columns/index.md new file mode 100644 index 0000000000..f13537bfe4 --- /dev/null +++ b/files/fr/web/css/columns/index.md @@ -0,0 +1,108 @@ +--- +title: columns +slug: Web/CSS/columns +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/columns +--- +
{{CSSRef}}
+ +

La propriété columns est une propriété raccourcie permettant de définir les deux propriétés {{cssxref('column-width')}} (qui définit la largeur des colonnes) et {{cssxref("column-count")}} (qui définit le nombre de colonnes) en même temps.

+ +
{{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

+ +
/* Largeur */
+columns: 18em;
+
+/* Nombre de colonnes */
+columns: 1;
+columns: auto;
+
+/* Combinaison d'une largeur et d'un nombre */
+columns: 1 auto;
+columns: auto 12em;
+columns: auto auto;
+
+
+/* Valeurs globales */
+columns: inherit;
+columns: initial;
+columns: unset;
+
+ +

La propriété columns se définit avec un ou deux valeurs parmi celles décrites ci-après. L'ordre de ces valeurs n'a pas d'importance.

+ +

Valeurs

+ +
+
<'column-width'>
+
Une valeur de longueur (type {{cssxref("<length>")}}) fournissant une indication quant à la largeur optimale de la colonne ou le mot-clé auto. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide.
+
<'column-count'>
+
Une quantité (type {{cssxref("<integer>")}}) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
.exemple {
+  margin: 0;
+  height: 90px;
+  border: 3px solid black;
+  columns: 3;
+}
+ +

HTML

+ +
<p class=exemple>
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples",300,120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol', '#columns', 'columns')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.columns")}}

diff --git a/files/fr/web/css/comments/index.html b/files/fr/web/css/comments/index.html deleted file mode 100644 index 1176e56c99..0000000000 --- a/files/fr/web/css/comments/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Commentaires -slug: Web/CSS/Comments -tags: - - CSS - - Débutant - - Reference -translation_of: Web/CSS/Comments ---- -
{{CSSRef}}
- -

Les commentaires sont utilisés afin d'ajouter des notes explicatives ou pour empêcher le navigateur d'interpréter certaines parties de la feuille de style. Les commentaires n'ont donc aucun impact sur la disposition d'un document.

- -

Syntaxe

- -

On peut utiliser des commentaires à chaque endroit où un blanc est autorisé.

- -
/* Commentaire */
-
- -

Exemples

- -
/* Commentaire sur une ligne */
-
-/*
-Commentaire
-sur plusieurs
-lignes
-*/
-
-
-/* Le commentaire qui suit permet
-   de désactiver une règle */
-/*
-span {
-  color: blue;
-  font-size: 1.5em;
-}
-*/
-
- -

Notes

- -

La syntaxe des commentaires avec /* */ est utilisée pour étaler un commentaire sur une ou plusieurs lignes. On ne peut pas utiliser d'autres moyens pour les commentaires dans une feuille de style externe. Lorsqu'on utilise l'élément {{HTMLElement("style")}}, on peut utiliser les commentaires HTML <!-- --> pour masquer du CSS sur des navigateurs plus anciens mais cela n'est pas une méthode recommandée.

- -

À l'instar des autres langages de programmation programmation qui utilisent /* */ pour les commentaires, il est impossible de les imbriquer. Autrement dit, la première apparition de */ suivant un /*, ferme le commentaire.

- -

Spécifications

- - diff --git a/files/fr/web/css/comments/index.md b/files/fr/web/css/comments/index.md new file mode 100644 index 0000000000..1176e56c99 --- /dev/null +++ b/files/fr/web/css/comments/index.md @@ -0,0 +1,54 @@ +--- +title: Commentaires +slug: Web/CSS/Comments +tags: + - CSS + - Débutant + - Reference +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

Les commentaires sont utilisés afin d'ajouter des notes explicatives ou pour empêcher le navigateur d'interpréter certaines parties de la feuille de style. Les commentaires n'ont donc aucun impact sur la disposition d'un document.

+ +

Syntaxe

+ +

On peut utiliser des commentaires à chaque endroit où un blanc est autorisé.

+ +
/* Commentaire */
+
+ +

Exemples

+ +
/* Commentaire sur une ligne */
+
+/*
+Commentaire
+sur plusieurs
+lignes
+*/
+
+
+/* Le commentaire qui suit permet
+   de désactiver une règle */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+
+ +

Notes

+ +

La syntaxe des commentaires avec /* */ est utilisée pour étaler un commentaire sur une ou plusieurs lignes. On ne peut pas utiliser d'autres moyens pour les commentaires dans une feuille de style externe. Lorsqu'on utilise l'élément {{HTMLElement("style")}}, on peut utiliser les commentaires HTML <!-- --> pour masquer du CSS sur des navigateurs plus anciens mais cela n'est pas une méthode recommandée.

+ +

À l'instar des autres langages de programmation programmation qui utilisent /* */ pour les commentaires, il est impossible de les imbriquer. Autrement dit, la première apparition de */ suivant un /*, ferme le commentaire.

+ +

Spécifications

+ + diff --git a/files/fr/web/css/compositing_and_blending/index.html b/files/fr/web/css/compositing_and_blending/index.html deleted file mode 100644 index 721ca17ac9..0000000000 --- a/files/fr/web/css/compositing_and_blending/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Compositing and Blending -slug: Web/CSS/Compositing_and_Blending -tags: - - Aperçu - - CSS - - Compositing and Blending - - Overview - - Reference -translation_of: Web/CSS/Compositing_and_Blending ---- -
{{CSSRef}}
- -

Compositing and Blending (Composition et fusion) est un module de la spécification CSS qui définit la façon dont les formes de différents éléments sont combinés afin de former une seule image.

- -

Référence

- -

Propriétés

- -
    -
  • {{cssxref("background-blend-mode")}}
    • -
  • {{cssxref("isolation")}}
    • -
  • {{cssxref("mix-blend-mode")}}
    • -
- -

Types de donnée

- -
    -
  • {{cssxref("<blend-mode>")}}
    • -
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("Compositing")}}{{Spec2("Compositing")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

background-blend-mode

- -

{{Compat("css.properties.background-blend-mode")}}

- -

isolation

- -

{{Compat("css.properties.isolation")}}

- -

mix-blend-mode

- -

{{Compat("css.properties.mix-blend-mode")}}

diff --git a/files/fr/web/css/compositing_and_blending/index.md b/files/fr/web/css/compositing_and_blending/index.md new file mode 100644 index 0000000000..721ca17ac9 --- /dev/null +++ b/files/fr/web/css/compositing_and_blending/index.md @@ -0,0 +1,63 @@ +--- +title: Compositing and Blending +slug: Web/CSS/Compositing_and_Blending +tags: + - Aperçu + - CSS + - Compositing and Blending + - Overview + - Reference +translation_of: Web/CSS/Compositing_and_Blending +--- +
{{CSSRef}}
+ +

Compositing and Blending (Composition et fusion) est un module de la spécification CSS qui définit la façon dont les formes de différents éléments sont combinés afin de former une seule image.

+ +

Référence

+ +

Propriétés

+ +
    +
  • {{cssxref("background-blend-mode")}}
    • +
  • {{cssxref("isolation")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
+ +

Types de donnée

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("Compositing")}}{{Spec2("Compositing")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

background-blend-mode

+ +

{{Compat("css.properties.background-blend-mode")}}

+ +

isolation

+ +

{{Compat("css.properties.isolation")}}

+ +

mix-blend-mode

+ +

{{Compat("css.properties.mix-blend-mode")}}

diff --git a/files/fr/web/css/computed_value/index.html b/files/fr/web/css/computed_value/index.html deleted file mode 100644 index 606b16f92c..0000000000 --- a/files/fr/web/css/computed_value/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Valeur calculée -slug: Web/CSS/computed_value -tags: - - CSS - - Reference -translation_of: Web/CSS/computed_value -original_slug: Web/CSS/Valeur_calculée ---- -
{{CSSRef}}
- -

La valeur calculée d'une propriété CSS est calculée à partir de la valeur définie :

- -
    -
  1. En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
    2. -
  2. En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.
    3. -
- -

Les calculs utilisés pour obtenir la valeur calculée correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme em ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes font-size: 16px et padding-top: 2em. La valeur calculée de la propriété padding-top sera 32px (on double la taille de la police).

- -

Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme width, margin-right, text-indent, et top), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété line-height sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine les valeurs utilisées.

- -

Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de la valeur spécifiée à la valeur utilisée) est l'héritage, notamment grâce au mot-clé {{cssxref("inherit")}}.

- -
-

Note : La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie la valeur résolue qui correspond à la valeur calculée ou à la valeur utilisée selon la propriété.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/computed_value/index.md b/files/fr/web/css/computed_value/index.md new file mode 100644 index 0000000000..606b16f92c --- /dev/null +++ b/files/fr/web/css/computed_value/index.md @@ -0,0 +1,68 @@ +--- +title: Valeur calculée +slug: Web/CSS/computed_value +tags: + - CSS + - Reference +translation_of: Web/CSS/computed_value +original_slug: Web/CSS/Valeur_calculée +--- +
{{CSSRef}}
+ +

La valeur calculée d'une propriété CSS est calculée à partir de la valeur définie :

+ +
    +
  1. En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
    2. +
  2. En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.
    3. +
+ +

Les calculs utilisés pour obtenir la valeur calculée correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme em ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes font-size: 16px et padding-top: 2em. La valeur calculée de la propriété padding-top sera 32px (on double la taille de la police).

+ +

Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme width, margin-right, text-indent, et top), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété line-height sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine les valeurs utilisées.

+ +

Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de la valeur spécifiée à la valeur utilisée) est l'héritage, notamment grâce au mot-clé {{cssxref("inherit")}}.

+ +
+

Note : La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie la valeur résolue qui correspond à la valeur calculée ou à la valeur utilisée selon la propriété.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/contain/index.html b/files/fr/web/css/contain/index.html deleted file mode 100644 index e08a63ec08..0000000000 --- a/files/fr/web/css/contain/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: contain -slug: Web/CSS/contain -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/contain ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété CSS contain permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les peintures ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète.

- -
/* Valeurs avec un mot-clé */
-contain: none;
-contain: strict;
-contain: content;
-contain: size;
-contain: layout;
-contain: style;
-contain: paint;
-
-/* Valeurs globales */
-contain: inherit;
-contain: initial;
-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 :

- - -
- -

Syntaxe

- -

Valeurs

- -
-
none
-
L'élément est affiché normalement, aucun confinement n'est appliqué.
-
strict
-
Toutes les règles possibles de confinement à l'exception de style sont appliquées. Cela correspond à contain: size layout paint.
-
content
-
Toutes les règles de confinement, à l'exception de celles pour size et style, sont appliquées à l'élément. Cela est équivalent à contain: layout paint.
-
size
-
Cette valeur indique que l'élément peut être dimensionné sans avoir à examiner les éléments descendants pour les modifications de la taille.
-
layout
-
Cette valeur indique qu'aucun élément en dehors de l'élément, ne peut impacter sa disposition interne et réciproquement.
-
style
-
Cette valeur indique que les propriétés ayant un effet sur un un élément et ses descendants voire plus sont bien limitées à l'élément englobant.
-
paint
-
Cette valeur indique que les éléments descendants de l'élément ne sont pas affichés en dehors de ses limites. Si un élément est en dehors de l'écran ou n'est pas visible, cette valeur assure que les éléments descendants ne sont pas visibles non plus.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Containment')}}{{Spec2('CSS Containment')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.contain")}}

- -

Voir aussi

- -
    -
  • La propriété CSS {{cssxref("position")}}
    • -
diff --git a/files/fr/web/css/contain/index.md b/files/fr/web/css/contain/index.md new file mode 100644 index 0000000000..e08a63ec08 --- /dev/null +++ b/files/fr/web/css/contain/index.md @@ -0,0 +1,96 @@ +--- +title: contain +slug: Web/CSS/contain +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/contain +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS contain permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les peintures ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète.

+ +
/* Valeurs avec un mot-clé */
+contain: none;
+contain: strict;
+contain: content;
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* Valeurs globales */
+contain: inherit;
+contain: initial;
+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 :

+ + +
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
L'élément est affiché normalement, aucun confinement n'est appliqué.
+
strict
+
Toutes les règles possibles de confinement à l'exception de style sont appliquées. Cela correspond à contain: size layout paint.
+
content
+
Toutes les règles de confinement, à l'exception de celles pour size et style, sont appliquées à l'élément. Cela est équivalent à contain: layout paint.
+
size
+
Cette valeur indique que l'élément peut être dimensionné sans avoir à examiner les éléments descendants pour les modifications de la taille.
+
layout
+
Cette valeur indique qu'aucun élément en dehors de l'élément, ne peut impacter sa disposition interne et réciproquement.
+
style
+
Cette valeur indique que les propriétés ayant un effet sur un un élément et ses descendants voire plus sont bien limitées à l'élément englobant.
+
paint
+
Cette valeur indique que les éléments descendants de l'élément ne sont pas affichés en dehors de ses limites. Si un élément est en dehors de l'écran ou n'est pas visible, cette valeur assure que les éléments descendants ne sont pas visibles non plus.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Containment')}}{{Spec2('CSS Containment')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.contain")}}

+ +

Voir aussi

+ +
    +
  • La propriété CSS {{cssxref("position")}}
    • +
diff --git a/files/fr/web/css/containing_block/index.html b/files/fr/web/css/containing_block/index.html deleted file mode 100644 index 8e3bff8fb9..0000000000 --- a/files/fr/web/css/containing_block/index.html +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: À propos du bloc conteneur -slug: Web/CSS/Containing_block -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/Containing_block -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.

- -

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 :

- -
    -
  1. La zone de contenu (content area)
    2. -
  2. La zone de remplissage (padding area)
    3. -
  3. La zone de bordure (border area)
    4. -
  4. La zone de marge (margin area)
    5. -
- -

Diagram of the box model

- -
-

Note : Voir cet article pour découvrir le modèle de boîtes en CSS.

-
- -

On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.

- -

Les effets du bloc englobant

- -

Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.

- -

Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut absolute ou fixed).

- -

Identifier le bloc englobant

- -

Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :

- -
    -
  • Si la propriété position vaut static, relative ou sticky, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec display qui vaut inline-block, block ou list-item) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).
    • -
  • Si la propriété position vaut absolute, le bloc englobant est constitué par le bord de la boîte de remplissage (padding) de l'ancêtre le plus proche dont la valeur de position est différente de static (fixed, absolute, relative ou sticky).
    • -
  • Si la propriété position vaut fixed, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés).
    • -
  • Si la propriété position vaut absolute ou fixed, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a : -
      -
    1. Une propriété {{cssxref("transform")}} ou {{cssxref("perspective")}} avec une valeur différente de none
      2. -
    2. Une propriété {{cssxref("will-change")}} qui vaut transform ou perspective
      3. -
    3. Une propriété {{cssxref("filter")}} différente de none ou une propriété will-change différente of filter (ne fonctionne que pour Firefox).
      4. -
    4. Une propriété {{cssxref("contain")}} qui vaut paint.
      5. -
    -
    • -
- -
-

Note : Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé bloc englobant initial. Ce dernier a les dimensions de la zone d'affichage (viewport) ou de la page (pour les média paginés).

-
- -

Calcul des pourcentages à partir du bloc englobant

- -

Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés box model et offset :

- -
    -
  1. Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.
    2. -
  2. Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (width) du bloc englobant.
    3. -
- -

Quelques exemples

- -

Le code HTML utilisé pour les exemples suivants sera :

- -
<body>
-  <section>
-    <p>Et voici un paragraphe !</p>
-  </section>
-</body>
-
- -

Premier exemple

- -

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 {
-  background: beige;
-}
-
-section {
-  display: block;
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  width: 50%;   /* == 400px * .5 = 200px */
-  height: 25%;  /* == 160px * .25 = 40px */
-  margin: 5%;   /* == 400px * .05 = 20px */
-  padding: 5%;  /* == 400px * .05 = 20px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Premier_exemple','100%','300')}}

- -

Deuxième exemple

- -

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>
-  <section>
-    <p>Et voici un paragraphe !</p>
-  </section>
-</body>
-
- -
body {
-  background: beige;
-}
-
-section {
-  display: inline;
-  background: lightgray;
-}
-
-p {
-  width: 50%;     /* == half the body's width */
-  height: 200px;  /* Note: a percentage would be 0 */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Deuxième_exemple','100%','300')}}

- -

Troisième exemple

- -

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 {
-  background: beige;
-}
-
-section {
-  position: absolute;
-  left: 30px;
-  top: 30px;
-  width: 400px;
-  height: 160px;
-  padding: 30px 20px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
-  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
-  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
-  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Troisième_exemple','100%','300')}}

- -

Quatrième exemple

- -

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 {
-  background: beige;
-}
-
-section {
-  width: 400px;
-  height: 480px;
-  margin: 30px;
-  padding: 15px;
-  background: lightgray;
-}
-
-p {
-  position: fixed;
-  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
-  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
-  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
-  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Quatrième_exemple','100%','300')}}

- -

Cinquième exemple

- -

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 {
-  background: beige;
-}
-
-section {
-  transform: rotate(0deg);
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  left: 80px;
-  top: 30px;
-  width: 50%;   /* == 200px */
-  height: 25%;  /* == 40px */
-  margin: 5%;   /* == 20px */
-  padding: 5%;  /* == 20px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Cinquième_exemple','100%','300')}}

- -

Voir aussi

- -
    -
  • La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des déclarations CSS dans un certain état.
    • -
diff --git a/files/fr/web/css/containing_block/index.md b/files/fr/web/css/containing_block/index.md new file mode 100644 index 0000000000..8e3bff8fb9 --- /dev/null +++ b/files/fr/web/css/containing_block/index.md @@ -0,0 +1,254 @@ +--- +title: À propos du bloc conteneur +slug: Web/CSS/Containing_block +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/Containing_block +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.

+ +

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 :

+ +
    +
  1. La zone de contenu (content area)
    2. +
  2. La zone de remplissage (padding area)
    3. +
  3. La zone de bordure (border area)
    4. +
  4. La zone de marge (margin area)
    5. +
+ +

Diagram of the box model

+ +
+

Note : Voir cet article pour découvrir le modèle de boîtes en CSS.

+
+ +

On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.

+ +

Les effets du bloc englobant

+ +

Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.

+ +

Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut absolute ou fixed).

+ +

Identifier le bloc englobant

+ +

Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :

+ +
    +
  • Si la propriété position vaut static, relative ou sticky, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec display qui vaut inline-block, block ou list-item) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).
    • +
  • Si la propriété position vaut absolute, le bloc englobant est constitué par le bord de la boîte de remplissage (padding) de l'ancêtre le plus proche dont la valeur de position est différente de static (fixed, absolute, relative ou sticky).
    • +
  • Si la propriété position vaut fixed, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés).
    • +
  • Si la propriété position vaut absolute ou fixed, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a : +
      +
    1. Une propriété {{cssxref("transform")}} ou {{cssxref("perspective")}} avec une valeur différente de none
      2. +
    2. Une propriété {{cssxref("will-change")}} qui vaut transform ou perspective
      3. +
    3. Une propriété {{cssxref("filter")}} différente de none ou une propriété will-change différente of filter (ne fonctionne que pour Firefox).
      4. +
    4. Une propriété {{cssxref("contain")}} qui vaut paint.
      5. +
    +
    • +
+ +
+

Note : Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé bloc englobant initial. Ce dernier a les dimensions de la zone d'affichage (viewport) ou de la page (pour les média paginés).

+
+ +

Calcul des pourcentages à partir du bloc englobant

+ +

Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés box model et offset :

+ +
    +
  1. Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.
    2. +
  2. Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (width) du bloc englobant.
    3. +
+ +

Quelques exemples

+ +

Le code HTML utilisé pour les exemples suivants sera :

+ +
<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+
+ +

Premier exemple

+ +

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 {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Premier_exemple','100%','300')}}

+ +

Deuxième exemple

+ +

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>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+
+ +
body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Deuxième_exemple','100%','300')}}

+ +

Troisième exemple

+ +

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 {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Troisième_exemple','100%','300')}}

+ +

Quatrième exemple

+ +

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 {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Quatrième_exemple','100%','300')}}

+ +

Cinquième exemple

+ +

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 {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Cinquième_exemple','100%','300')}}

+ +

Voir aussi

+ +
    +
  • La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des déclarations CSS dans un certain état.
    • +
diff --git a/files/fr/web/css/content-visibility/index.html b/files/fr/web/css/content-visibility/index.html deleted file mode 100644 index 91d03762bf..0000000000 --- a/files/fr/web/css/content-visibility/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: content-visibility -slug: Web/CSS/content-visibility -browser-compat: css.properties.content-visibility -translation_of: Web/CSS/content-visibility ---- -

{{CSSRef}}

- -

La propriété CSS content-visibility détermine si un élément affiche son contenu ou non, tout en forçant un solide jeu de restrictions permettant aux agents utilisateurs de potentiellement omettre de larges pans de la mise en page et du travail de rendu jusqu'au moment où le contenu doit être affiché. Fondamentalement, cela permet à l'agent utilisateur d'éviter le travail de rendu d'un élément (comprenant sa mise en page et sa peinture) tant qu'il n'y en a pas besoin — ce qui accélère la vitesse de chargement de la page initiale.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-content-visibility: visible;
-content-visibility: hidden;
-content-visibility: auto;
-
-/* Valeurs globales */
-content-visibility: inherit;
-content-visibility: initial;
-content-visibility: revert;
-content-visibility: unset;
-
- -

Valeurs

- -
-
visible
-
Aucun effet. Les contenus de l'élément sont disposés et rendus normalement.
-
hidden
-
L'élément n'affiche pas son contenu. Les contenus de l'élément ne doivent pas être accessibles aux fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il n'est pas possible de les sélectionner ou d'y placer le focus. Cela est similaire à l'utilisation de display: none sur ces contenus.
-
auto
-
L'élément suit les restrictions de mise en page, de style et de peinture. Si l'élément n'est pas pertinent pour l'utilisateur, cela évite également son contenu. Contrairement à la valeur hidden, le contenu évité doit toujours être disponible normalement pour les fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il est possible de les sélectionner ou d'y placer le focus.
-
- -

Définition formelle

- -

{{cssinfo}}

- -

Accessibilité

- -

Les titres et les autres contenus seront supprimés par content-visibility s'ils sont considérés comme s'affichant en dehors de l'écran. Cela signifie que les utilisateurs de lecteurs d'écrans pourraient perdre le bénéfice d'avoir une page complète disponible à des fins de vocalisation.

- -

Pour plus d'informations, consultez l'article Content-visibility and Accessible Semantics (en anglais).

- -

Exemples

- -

Utilisation de la valeur auto pour réduire les coûts de rendu des pages longues

- -

L'exemple suivant montre l'utilisation de la valeur auto pour éviter la peinture et le rendu des sections situées en dehors de l'écran. Cela aide à la fois le chargement et les interactions sur la page, car le contenu situé en dehors de la fenêtre d'affichage n'est pas rendu.

- -
<style>
-section {
-  content-visibility: auto;
-  contain-intrinsic-size: 0 500px;
-}
-
-<section>...
-<section>...
-<section>...
-<section>...
-...
-
- -

Utilisation de la valeur hidden pour gérer la visibilité manuellement

- -

L'exemple suivant montre qu'il est possible de gérer la visibilité à l'aide d'un script. La valeur ajoutée de l'utilisation de content-visibility: hidden par exemple à la place de display: none est que le contenu rendu masqué avec content-visibility préservera l'état de son rendu. Cela signifie que si le contenu est à nouveau affiché, il sera rendu plus rapidement qu'en modifiant la propriété display.

- -
<style>
-.hidden {
-  content-visibility: hidden;
-  /* lorsqu'il est masqué, nous voulons que la taille de l'élément soit la même que si celui-ci avait un élément enfant de 0x500 pixels */
-  contain-intrinsic-size: 0 500px;
-}
-.visible {
-  content-visibility: visible;
-  /* ceci est ajouté afin d'éviter tout décalage de mise en page lors de la bascule entre .hidden et .visible */
-  contain: style layout paint;
-}
-
-<div class=hidden>...
-<div class=visible>...
-<div class=hidden>...
-<div class=hidden>...
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/content-visibility/index.md b/files/fr/web/css/content-visibility/index.md new file mode 100644 index 0000000000..91d03762bf --- /dev/null +++ b/files/fr/web/css/content-visibility/index.md @@ -0,0 +1,99 @@ +--- +title: content-visibility +slug: Web/CSS/content-visibility +browser-compat: css.properties.content-visibility +translation_of: Web/CSS/content-visibility +--- +

{{CSSRef}}

+ +

La propriété CSS content-visibility détermine si un élément affiche son contenu ou non, tout en forçant un solide jeu de restrictions permettant aux agents utilisateurs de potentiellement omettre de larges pans de la mise en page et du travail de rendu jusqu'au moment où le contenu doit être affiché. Fondamentalement, cela permet à l'agent utilisateur d'éviter le travail de rendu d'un élément (comprenant sa mise en page et sa peinture) tant qu'il n'y en a pas besoin — ce qui accélère la vitesse de chargement de la page initiale.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+content-visibility: visible;
+content-visibility: hidden;
+content-visibility: auto;
+
+/* Valeurs globales */
+content-visibility: inherit;
+content-visibility: initial;
+content-visibility: revert;
+content-visibility: unset;
+
+ +

Valeurs

+ +
+
visible
+
Aucun effet. Les contenus de l'élément sont disposés et rendus normalement.
+
hidden
+
L'élément n'affiche pas son contenu. Les contenus de l'élément ne doivent pas être accessibles aux fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il n'est pas possible de les sélectionner ou d'y placer le focus. Cela est similaire à l'utilisation de display: none sur ces contenus.
+
auto
+
L'élément suit les restrictions de mise en page, de style et de peinture. Si l'élément n'est pas pertinent pour l'utilisateur, cela évite également son contenu. Contrairement à la valeur hidden, le contenu évité doit toujours être disponible normalement pour les fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il est possible de les sélectionner ou d'y placer le focus.
+
+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Accessibilité

+ +

Les titres et les autres contenus seront supprimés par content-visibility s'ils sont considérés comme s'affichant en dehors de l'écran. Cela signifie que les utilisateurs de lecteurs d'écrans pourraient perdre le bénéfice d'avoir une page complète disponible à des fins de vocalisation.

+ +

Pour plus d'informations, consultez l'article Content-visibility and Accessible Semantics (en anglais).

+ +

Exemples

+ +

Utilisation de la valeur auto pour réduire les coûts de rendu des pages longues

+ +

L'exemple suivant montre l'utilisation de la valeur auto pour éviter la peinture et le rendu des sections situées en dehors de l'écran. Cela aide à la fois le chargement et les interactions sur la page, car le contenu situé en dehors de la fenêtre d'affichage n'est pas rendu.

+ +
<style>
+section {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 500px;
+}
+
+<section>...
+<section>...
+<section>...
+<section>...
+...
+
+ +

Utilisation de la valeur hidden pour gérer la visibilité manuellement

+ +

L'exemple suivant montre qu'il est possible de gérer la visibilité à l'aide d'un script. La valeur ajoutée de l'utilisation de content-visibility: hidden par exemple à la place de display: none est que le contenu rendu masqué avec content-visibility préservera l'état de son rendu. Cela signifie que si le contenu est à nouveau affiché, il sera rendu plus rapidement qu'en modifiant la propriété display.

+ +
<style>
+.hidden {
+  content-visibility: hidden;
+  /* lorsqu'il est masqué, nous voulons que la taille de l'élément soit la même que si celui-ci avait un élément enfant de 0x500 pixels */
+  contain-intrinsic-size: 0 500px;
+}
+.visible {
+  content-visibility: visible;
+  /* ceci est ajouté afin d'éviter tout décalage de mise en page lors de la bascule entre .hidden et .visible */
+  contain: style layout paint;
+}
+
+<div class=hidden>...
+<div class=visible>...
+<div class=hidden>...
+<div class=hidden>...
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/content/index.html b/files/fr/web/css/content/index.html deleted file mode 100644 index cd5ad04b5f..0000000000 --- a/files/fr/web/css/content/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: content -slug: Web/CSS/content -tags: - - CSS - - Propriété - - Reference -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.

- -
/* Des mots-clés qui ne peuvent pas être mélangés
-  avec d'autres valeurs */
-content: normal;
-content: none;
-
-/* Valeurs pour une image */
-content: url("http://www.example.com/test.png");
-content: linear-gradient(#e66465, #9198e5);
-
-/* Une valeur <string>, les caractères non-latin */
-/* doivent être échappées par ex. \000A9 for &copy; */
-content: 'prefix';
-
-/* Valeurs utilisant un compteur */
-content: counter(compteur_chapitre);
-content: counter(compteur_section, ".");
-
-/* attr() lie à la valeur de l'attribut HTML */
-content: attr(value string);
-
-/* Mots-clés dépendant de langue */
-/* ou de la position             */
-content: open-quote;
-content: close-quote;
-content: no-open-quote;
-content: no-close-quote;
-
-/* Sauf avec normal et none, on peut utiliser */
-/* plusieurs valeurs de façon simultanée */
-content: open-quote chapter_counter;
-
-/* Valeurs globales */
-content: inherit;
-content: initial;
-content: unset;
-
- -

Syntaxe

- -

Valeurs

- -
-
none
-
Le pseudo-élément n'est pas généré.
-
normal
-
Résulte en none pour les pseudo-éléments :before et :after.
-
{{cssxref("<string>")}}
-
Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (\000A9 représentera par exemple le symbole ©).
-
{{cssxref("<image>")}}
-
Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.
-
counter() ou counters() (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})
-
Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(name)' ou 'counter(name, style)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (decimal par défaut). La seconde a également deux formes : counters(name, string) ou counters(name, string, style). Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (decimal par défaut). Voir la section sur les compteurs automatiques 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
-
Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.
-
no-open-quote | no-close-quote
-
N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Titres et citations

- -

HTML

- -
<h1>5</h1>
-<p> Commençons par une citation de Sir Tim Berners-Lee,
-    <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
-        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
-</p>
-
-<h1>6</h1>
-<p> Citons le manifeste Mozilla
-    <q cite="http://www.mozilla.org/about/manifesto/">
-        Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
-</p>
- -

CSS

- -
q {
-    color: #00008B;
-    font-style: italic;
-}
-
-q::before   { content: open-quote }
-q::after    { content: close-quote }
-
-h1::before  { content: "Chapitre "; }
- -

Résultat

- -

{{EmbedLiveSample('Titres_et_citations', 460, 100)}}

- -

Ajouter une icône avant un lien

- -

HTML

- -
<a href="http://www.mozilla.org/fr/">Accueil</a>
- -

CSS

- -
a::before{
-    content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: ";
-    font:    x-small Arial,freeSans,sans-serif;
-    color:   gray;
-}
- -

Résultat

- -

{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}

- -

Utiliser les classes

- -

HTML

- -
<h2>Top des ventes</h2>
-<ol>
-    <li>Thriller politique</li>
-    <li class="nouveaute">Histoires effrayantes</li>
-    <li>Ma biographie</li>
-    <li class="nouveaute">Bit-lit</li>
-</ol>
- -

CSS

- -
.nouveaute::after {
-    content: " Nouveau !";
-    color: red;
-}
- -

Résultat

- -

{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}

- -

Utiliser les attributs d’image et d’élément

- -

Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.

- -

HTML

- -
<ul>
-  <li><a id="moz" href="https://www.mozilla.org/">Page d'accueil Mozilla</a></li>
-  <li><a id="mdn" href="https://developer.mozilla.org/">Mozilla Developer Network</a></li>
-</ul>
- -

CSS

- -
a {
-  text-decoration: none;
-  border-bottom: 3px dotted navy;
-}
-
-a::after {
-  content: " (" attr(id) ")";
-}
-
-#moz::before {
-  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
-}
-
-#mdn::before {
-  content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico");
-}
-
-li {
-  margin: 1em;
-}
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}

- -

Remplacer un élément

- -

Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("<url>")}} ou {{cssxref("<image>")}} . Le contenu ajouté avec ::before ou avec ::after ne sera plus généré car l'élément sera devenu un élément remplacé.

- -

HTML

- -
<div id="replaced">Mozilla</div>
-
- -

CSS

- -
#replaced {
-  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
-}
-
-#replaced::after { /* Ceci ne sera pas affiché, */
-                   /* l'élément sera un élément remplacé */
-  content: " (" attr(id) ")";
-}
- -

Résultat

- -

{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}

- -

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.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Content", "#content-property", "content")}}{{Spec2("CSS3 Content")}}
{{SpecName('CSS2.1', 'generate.html#content', 'content')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.content")}}

- -

Voir aussi

- -
    -
  • {{cssxref("::after")}}
    • -
  • {{cssxref("::before")}}
    • -
  • {{cssxref("quotes")}}
    • -
  • {{Cssxref("::marker")}}
    • -
  • {{cssxref("url()", "url()")}}
    • -
diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md new file mode 100644 index 0000000000..cd5ad04b5f --- /dev/null +++ b/files/fr/web/css/content/index.md @@ -0,0 +1,263 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - Propriété + - Reference +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.

+ +
/* Des mots-clés qui ne peuvent pas être mélangés
+  avec d'autres valeurs */
+content: normal;
+content: none;
+
+/* Valeurs pour une image */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* Une valeur <string>, les caractères non-latin */
+/* doivent être échappées par ex. \000A9 for &copy; */
+content: 'prefix';
+
+/* Valeurs utilisant un compteur */
+content: counter(compteur_chapitre);
+content: counter(compteur_section, ".");
+
+/* attr() lie à la valeur de l'attribut HTML */
+content: attr(value string);
+
+/* Mots-clés dépendant de langue */
+/* ou de la position             */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* Sauf avec normal et none, on peut utiliser */
+/* plusieurs valeurs de façon simultanée */
+content: open-quote chapter_counter;
+
+/* Valeurs globales */
+content: inherit;
+content: initial;
+content: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Le pseudo-élément n'est pas généré.
+
normal
+
Résulte en none pour les pseudo-éléments :before et :after.
+
{{cssxref("<string>")}}
+
Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (\000A9 représentera par exemple le symbole ©).
+
{{cssxref("<image>")}}
+
Une image (valeur de type {{cssxref("<image>")}}) de type {{cssxref("<url>")}} ou {{cssxref("<gradient>")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.
+
counter() ou counters() (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})
+
Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(name)' ou 'counter(name, style)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (decimal par défaut). La seconde a également deux formes : counters(name, string) ou counters(name, string, style). Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (decimal par défaut). Voir la section sur les compteurs automatiques 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
+
Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.
+
no-open-quote | no-close-quote
+
N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Titres et citations

+ +

HTML

+ +
<h1>5</h1>
+<p> Commençons par une citation de Sir Tim Berners-Lee,
+    <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+</p>
+
+<h1>6</h1>
+<p> Citons le manifeste Mozilla
+    <q cite="http://www.mozilla.org/about/manifesto/">
+        Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
+</p>
+ +

CSS

+ +
q {
+    color: #00008B;
+    font-style: italic;
+}
+
+q::before   { content: open-quote }
+q::after    { content: close-quote }
+
+h1::before  { content: "Chapitre "; }
+ +

Résultat

+ +

{{EmbedLiveSample('Titres_et_citations', 460, 100)}}

+ +

Ajouter une icône avant un lien

+ +

HTML

+ +
<a href="http://www.mozilla.org/fr/">Accueil</a>
+ +

CSS

+ +
a::before{
+    content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: ";
+    font:    x-small Arial,freeSans,sans-serif;
+    color:   gray;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}

+ +

Utiliser les classes

+ +

HTML

+ +
<h2>Top des ventes</h2>
+<ol>
+    <li>Thriller politique</li>
+    <li class="nouveaute">Histoires effrayantes</li>
+    <li>Ma biographie</li>
+    <li class="nouveaute">Bit-lit</li>
+</ol>
+ +

CSS

+ +
.nouveaute::after {
+    content: " Nouveau !";
+    color: red;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}

+ +

Utiliser les attributs d’image et d’élément

+ +

Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.

+ +

HTML

+ +
<ul>
+  <li><a id="moz" href="https://www.mozilla.org/">Page d'accueil Mozilla</a></li>
+  <li><a id="mdn" href="https://developer.mozilla.org/">Mozilla Developer Network</a></li>
+</ul>
+ +

CSS

+ +
a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
+}
+
+#mdn::before {
+  content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico");
+}
+
+li {
+  margin: 1em;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}

+ +

Remplacer un élément

+ +

Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("<url>")}} ou {{cssxref("<image>")}} . Le contenu ajouté avec ::before ou avec ::after ne sera plus généré car l'élément sera devenu un élément remplacé.

+ +

HTML

+ +
<div id="replaced">Mozilla</div>
+
+ +

CSS

+ +
#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* Ceci ne sera pas affiché, */
+                   /* l'élément sera un élément remplacé */
+  content: " (" attr(id) ")";
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}

+ +

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.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Content", "#content-property", "content")}}{{Spec2("CSS3 Content")}}
{{SpecName('CSS2.1', 'generate.html#content', 'content')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.content")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("::after")}}
    • +
  • {{cssxref("::before")}}
    • +
  • {{cssxref("quotes")}}
    • +
  • {{Cssxref("::marker")}}
    • +
  • {{cssxref("url()", "url()")}}
    • +
diff --git a/files/fr/web/css/counter()/index.html b/files/fr/web/css/counter()/index.html deleted file mode 100644 index 073e209928..0000000000 --- a/files/fr/web/css/counter()/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: counter() -slug: Web/CSS/counter() -tags: - - CSS - - Compteur CSS - - Fonction - - Reference -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.

- -
/* Usage simple */
-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.

- -
-

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.

-
- -

Syntaxe

- -

Valeurs

- -
-
{{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.
-
none
-
Représente la chaîne de caractère vide.
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

Comparaison entre compteur par défaut et chiffres romains majuscules

- -

HTML

- -
<ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: listCounter;
-}
-li {
-  counter-increment: listCounter;
-}
-li::after {
-  content: "[" counter(listCounter) "] == ["
-               counter(listCounter, upper-roman) "]";
-}
- -

Résultat

- -

{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}}

- -

Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule

- -

HTML

- -
<ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: count;
-}
-
-li {
-  counter-increment: count;
-}
-
-li::after {
-  content: "[" counter(count, decimal-leading-zero) "] == ["
-               counter(count, lower-alpha) "]";
-}
- -

Résultat

- -

{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "100%", 150)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.counter")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/counter()/index.md b/files/fr/web/css/counter()/index.md new file mode 100644 index 0000000000..073e209928 --- /dev/null +++ b/files/fr/web/css/counter()/index.md @@ -0,0 +1,140 @@ +--- +title: counter() +slug: Web/CSS/counter() +tags: + - CSS + - Compteur CSS + - Fonction + - Reference +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.

+ +
/* Usage simple */
+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.

+ +
+

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.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
{{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.
+
none
+
Représente la chaîne de caractère vide.
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

Comparaison entre compteur par défaut et chiffres romains majuscules

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}}

+ +

Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+
+li {
+  counter-increment: count;
+}
+
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "100%", 150)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.counter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/counter-increment/index.html b/files/fr/web/css/counter-increment/index.html deleted file mode 100644 index d9e0aa20db..0000000000 --- a/files/fr/web/css/counter-increment/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: counter-increment -slug: Web/CSS/counter-increment -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/counter-increment ---- -
{{CSSRef}}
- -

La propriété counter-increment est utilisée afin d'augmenter la valeur d'un compteur CSS d'une valeur donnée.

- -
{{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")}}.

-
- -

Syntaxe

- -
/* On incrémente 'mon-compteur' de 1 */
-counter-increment: mon-compteur;
-
-/* On réduit 'mon-compteur' de 1 */
-counter-increment: mon-compteur -1;
-
-/* On incrémente 'compteur1' de 1 et on décrémente 'compteur2' de 4 */
-counter-increment: compteur1 compteur2 -4;
-
-/* On n'incrémente/décremente rien */
-/* cela permet d'effacer les règles moins spécifiques */
-counter-increment: none;
-
-/* Valeurs globales */
-counter-increment: inherit;
-counter-increment: initial;
-counter-increment: unset;
-
- -

La propriété counter-increment peut être définie de deux façons :

- -
    -
  • Avec le mot-clé none
    • -
  • Avec un identifiant ({{cssxref("<custom-ident>")}}) qui identifie le compteur et qui est éventuellement suivi par un entier ({{cssxref("<integer>")}}). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.
    • -
- -

Valeurs

- -
-
{{cssxref("<custom-ident>")}}
-
Le nom du compteur qu'on souhaite incrémenter.L'identifiant peut se composer d'une combinaison de lettres entre a et z (sensible à la casse), de nombres compris entre 0 et 9, de tirets bas (_ ou underscores) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être none, unset, initial ou inherit quelque soit la combinaison de la casse.
-
{{cssxref("<integer>")}}
-
La valeur qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).
-
none
-
Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
ol {
-  list-style-type: none;
-  counter-reset: compteListe;
-}
-
-li::before {
-  counter-increment: compteListe 2;
-  content: counter(compteListe) " ";
-}
-
- -

HTML

- -
<ol>
-  <li>Et de deux</li>
-  <li>Et de quatre</li>
-  <li>Et de six</li>
-</ol>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#propdef-counter-increment", "counter-increment")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.counter-increment")}}

- -

Voir aussi

- -
    -
  • Utiliser les compteurs CSS
    • -
  • {{cssxref("counter-reset")}}
    • -
  • {{cssxref("counter-set")}}
    • -
  • {{cssxref("@counter-style")}}
    • -
  • Les fonctions CSS {{cssxref("counter")}} et {{cssxref("counters")}}
    • -
diff --git a/files/fr/web/css/counter-increment/index.md b/files/fr/web/css/counter-increment/index.md new file mode 100644 index 0000000000..d9e0aa20db --- /dev/null +++ b/files/fr/web/css/counter-increment/index.md @@ -0,0 +1,129 @@ +--- +title: counter-increment +slug: Web/CSS/counter-increment +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/counter-increment +--- +
{{CSSRef}}
+ +

La propriété counter-increment est utilisée afin d'augmenter la valeur d'un compteur CSS d'une valeur donnée.

+ +
{{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")}}.

+
+ +

Syntaxe

+ +
/* On incrémente 'mon-compteur' de 1 */
+counter-increment: mon-compteur;
+
+/* On réduit 'mon-compteur' de 1 */
+counter-increment: mon-compteur -1;
+
+/* On incrémente 'compteur1' de 1 et on décrémente 'compteur2' de 4 */
+counter-increment: compteur1 compteur2 -4;
+
+/* On n'incrémente/décremente rien */
+/* cela permet d'effacer les règles moins spécifiques */
+counter-increment: none;
+
+/* Valeurs globales */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+
+ +

La propriété counter-increment peut être définie de deux façons :

+ +
    +
  • Avec le mot-clé none
    • +
  • Avec un identifiant ({{cssxref("<custom-ident>")}}) qui identifie le compteur et qui est éventuellement suivi par un entier ({{cssxref("<integer>")}}). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.
    • +
+ +

Valeurs

+ +
+
{{cssxref("<custom-ident>")}}
+
Le nom du compteur qu'on souhaite incrémenter.L'identifiant peut se composer d'une combinaison de lettres entre a et z (sensible à la casse), de nombres compris entre 0 et 9, de tirets bas (_ ou underscores) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être none, unset, initial ou inherit quelque soit la combinaison de la casse.
+
{{cssxref("<integer>")}}
+
La valeur qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).
+
none
+
Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
ol {
+  list-style-type: none;
+  counter-reset: compteListe;
+}
+
+li::before {
+  counter-increment: compteListe 2;
+  content: counter(compteListe) " ";
+}
+
+ +

HTML

+ +
<ol>
+  <li>Et de deux</li>
+  <li>Et de quatre</li>
+  <li>Et de six</li>
+</ol>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#propdef-counter-increment", "counter-increment")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.counter-increment")}}

+ +

Voir aussi

+ +
    +
  • Utiliser les compteurs CSS
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • Les fonctions CSS {{cssxref("counter")}} et {{cssxref("counters")}}
    • +
diff --git a/files/fr/web/css/counter-reset/index.html b/files/fr/web/css/counter-reset/index.html deleted file mode 100644 index 1b46b41b63..0000000000 --- a/files/fr/web/css/counter-reset/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: counter-reset -slug: Web/CSS/counter-reset -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/counter-reset ---- -
{{CSSRef}}
- -

La propriété counter-reset permet de réinitialiser un compteur CSS avec une valeur donnée.

- -
{{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")}}.

-
- -

Syntaxe

- -
/* On réinitialise nom-compteur à 0 */
-counter-reset: nom-compteur;
-
-/* On réinitialise nom-compteur à -1 */
-counter-reset: nom-compteur -1;
-
-/* On initialise compteur1 à 1 et compteur2 à 4 */
-counter-reset: compteur1 1 compteur2 4;
-
-/* On annule toute réinitialisation qui aurait
-   pu être déclarée avec des règles moins spé-
-   cifiques */
-counter-reset: none;
-
-/* Valeurs globales */
-counter-reset: inherit;
-counter-reset: initial;
-counter-reset: unset;
-
- -

Cette propriété se définit grâce à :

- -
    -
  • un identifiant (<custom-ident>) qui représente le compteur, éventuellement suivi par un entier (<integer>). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.
    • -
  • ou grâce au mot-clé none.
    • -
- -

Valeurs

- -
-
{{cssxref("custom-ident", "<custom-ident>")}}
-
Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre a et z (sensible à la casse), de nombres compris entre 0 et 9, de tirets bas (_ ou underscores) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être none, unset, initial ou inherit quelque soit la combinaison de la casse.
-
{{cssxref("<integer>")}}
-
La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est 0.
-
none
-
Un mot-clé indiquant qu'il ne faut pas réinitialiser le compteur. Cette valeur peut être utilisée pour masquer des réinitialisations provenant de règles moins spécifiques.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
ol {
-  list-style-type: none;
-  counter-reset: compteListe;
-}
-
-li::before {
-  counter-increment: compteListe;
-  content: counter(compteListe) " ";
-}
-
-.reinit {
-  counter-reset: compteListe;
-}
-
- -

HTML

- -
<ol>
-  <li>Et de un</li>
-  <li>Et de deux</li>
-  <li>Et de trois</li>
-  <li class="reinit">Et ça repart</li>
-  <li>Et de deux</li>
-</ol>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}{{Spec2('CSS3 Lists')}}Aucune modification.
{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.counter-reset")}}

- -

Voir aussi

- -
    -
  • Les compteurs CSS
    • -
  • {{cssxref("counter-increment")}}
    • -
  • {{cssxref("@counter-style")}}
    • -
  • {{cssxref("counter-set")}}
    • -
  • {{cssxref("counter")}} et {{cssxref("counters")}}
    • -
  • {{cssxref("content")}}
    • -
diff --git a/files/fr/web/css/counter-reset/index.md b/files/fr/web/css/counter-reset/index.md new file mode 100644 index 0000000000..1b46b41b63 --- /dev/null +++ b/files/fr/web/css/counter-reset/index.md @@ -0,0 +1,137 @@ +--- +title: counter-reset +slug: Web/CSS/counter-reset +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/counter-reset +--- +
{{CSSRef}}
+ +

La propriété counter-reset permet de réinitialiser un compteur CSS avec une valeur donnée.

+ +
{{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")}}.

+
+ +

Syntaxe

+ +
/* On réinitialise nom-compteur à 0 */
+counter-reset: nom-compteur;
+
+/* On réinitialise nom-compteur à -1 */
+counter-reset: nom-compteur -1;
+
+/* On initialise compteur1 à 1 et compteur2 à 4 */
+counter-reset: compteur1 1 compteur2 4;
+
+/* On annule toute réinitialisation qui aurait
+   pu être déclarée avec des règles moins spé-
+   cifiques */
+counter-reset: none;
+
+/* Valeurs globales */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+
+ +

Cette propriété se définit grâce à :

+ +
    +
  • un identifiant (<custom-ident>) qui représente le compteur, éventuellement suivi par un entier (<integer>). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.
    • +
  • ou grâce au mot-clé none.
    • +
+ +

Valeurs

+ +
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre a et z (sensible à la casse), de nombres compris entre 0 et 9, de tirets bas (_ ou underscores) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être none, unset, initial ou inherit quelque soit la combinaison de la casse.
+
{{cssxref("<integer>")}}
+
La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est 0.
+
none
+
Un mot-clé indiquant qu'il ne faut pas réinitialiser le compteur. Cette valeur peut être utilisée pour masquer des réinitialisations provenant de règles moins spécifiques.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
ol {
+  list-style-type: none;
+  counter-reset: compteListe;
+}
+
+li::before {
+  counter-increment: compteListe;
+  content: counter(compteListe) " ";
+}
+
+.reinit {
+  counter-reset: compteListe;
+}
+
+ +

HTML

+ +
<ol>
+  <li>Et de un</li>
+  <li>Et de deux</li>
+  <li>Et de trois</li>
+  <li class="reinit">Et ça repart</li>
+  <li>Et de deux</li>
+</ol>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}{{Spec2('CSS3 Lists')}}Aucune modification.
{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.counter-reset")}}

+ +

Voir aussi

+ +
    +
  • Les compteurs CSS
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("counter")}} et {{cssxref("counters")}}
    • +
  • {{cssxref("content")}}
    • +
diff --git a/files/fr/web/css/counter-set/index.html b/files/fr/web/css/counter-set/index.html deleted file mode 100644 index 2059dc4ad1..0000000000 --- a/files/fr/web/css/counter-set/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: counter-set -slug: Web/CSS/counter-set -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/counter-set ---- -
{{CSSRef}}
- -

La propriété CSS counter-set définit un compteur CSS avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.

- -
-

Note : La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}.

-
- -

Syntaxe

- -
/* Définir "mon-compteur" avec la valeur 0 */
-counter-set: mon-compteur;
-
-/* Définir "mon-compteur" avec la valeur -1 */
-counter-set: mon-compteur -1;
-
-/* Définir "compteur1" avec 1 et "compteur2" à 4 */
-counter-set: compteur1 1 compteur2 4;
-
-/* Réinitialiser les compteurs qui auraient été */
-/* définis avec des règles moins spécifiques */
-counter-set: none;
-
-/* Valeurs globales */
-counter-set: inherit;
-counter-set: initial;
-counter-set: unset;
-
- -

La propriété counter-set est définit avec l'une de ces deux valeurs :

- -
    -
  • Une valeur de type <custom-ident> qui fournit le nom du compteur, éventuellement suivie d'un entier (<integer>). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.
    • -
  • Le mot-clé none.
    • -
- -

Valeurs

- -
-
{{cssxref("custom-ident", "<custom-ident>")}}
-
Le nom du compteur à définir ou à modifier.
-
{{cssxref("<integer>")}}
-
La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera 0. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.
-
none
-
Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration counter-set d'une règle moins spécifique.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -
h1 {
-  counter-set: chapitre section 1 page;
-  /* Les compteurs "chapitre" et "page" sont
-     définis à 0, et le compteur "section"
-     est défini à 1. */
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#counter-set', 'counter-set')}}{{Spec2('CSS3 Lists')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.counter-set")}}

- -

Voir aussi

- -
    -
  • Utiliser les compteurs CSS
    • -
  • {{cssxref("counter-increment")}}
    • -
  • {{cssxref("counter-reset")}}
    • -
  • {{cssxref("@counter-style")}}
    • -
  • Les fonctions {{cssxref("counter")}} et {{cssxref("counters")}}
    • -
  • {{cssxref("content")}}
    • -
diff --git a/files/fr/web/css/counter-set/index.md b/files/fr/web/css/counter-set/index.md new file mode 100644 index 0000000000..2059dc4ad1 --- /dev/null +++ b/files/fr/web/css/counter-set/index.md @@ -0,0 +1,105 @@ +--- +title: counter-set +slug: Web/CSS/counter-set +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/counter-set +--- +
{{CSSRef}}
+ +

La propriété CSS counter-set définit un compteur CSS avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.

+ +
+

Note : La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}.

+
+ +

Syntaxe

+ +
/* Définir "mon-compteur" avec la valeur 0 */
+counter-set: mon-compteur;
+
+/* Définir "mon-compteur" avec la valeur -1 */
+counter-set: mon-compteur -1;
+
+/* Définir "compteur1" avec 1 et "compteur2" à 4 */
+counter-set: compteur1 1 compteur2 4;
+
+/* Réinitialiser les compteurs qui auraient été */
+/* définis avec des règles moins spécifiques */
+counter-set: none;
+
+/* Valeurs globales */
+counter-set: inherit;
+counter-set: initial;
+counter-set: unset;
+
+ +

La propriété counter-set est définit avec l'une de ces deux valeurs :

+ +
    +
  • Une valeur de type <custom-ident> qui fournit le nom du compteur, éventuellement suivie d'un entier (<integer>). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.
    • +
  • Le mot-clé none.
    • +
+ +

Valeurs

+ +
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
Le nom du compteur à définir ou à modifier.
+
{{cssxref("<integer>")}}
+
La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera 0. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.
+
none
+
Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration counter-set d'une règle moins spécifique.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +
h1 {
+  counter-set: chapitre section 1 page;
+  /* Les compteurs "chapitre" et "page" sont
+     définis à 0, et le compteur "section"
+     est défini à 1. */
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#counter-set', 'counter-set')}}{{Spec2('CSS3 Lists')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.counter-set")}}

+ +

Voir aussi

+ +
    +
  • Utiliser les compteurs CSS
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • Les fonctions {{cssxref("counter")}} et {{cssxref("counters")}}
    • +
  • {{cssxref("content")}}
    • +
diff --git a/files/fr/web/css/counters()/index.html b/files/fr/web/css/counters()/index.html deleted file mode 100644 index 6f78f5f900..0000000000 --- a/files/fr/web/css/counters()/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: counters() -slug: Web/CSS/counters() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/counters() ---- -
{{CSSRef}}
- -

La fonction CSS counters() permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction counters() peut s'utiliser sous deux formes :

- -
    -
  • counters(name, string)
    • -
  • 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).

- -
/* Utilisation simple - style decimal par défaut */
-counters(countername, '-');
-
-/* Changement du style d'affichage */
-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.

-
- -

Syntaxe

- -

Valeurs

- -
-
{{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.
-
{{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
-
Représente la chaîne vide.
-
- -

Syntaxe formelle

- -{{CSSSyntax}} - -

Exemples

- -

Style par défaut et chiffres romains

- -

HTML

- -
<ol>
-  <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
-  </li>
-  <li></li>
-  <li></li>
-  <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
-  </li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: listCounter;
-}
-li {
-  counter-increment: listCounter;
-}
-li::marker {
-   content:  counters(listCounter, '.', upper-roman) ') ';
-}
-li::before {
-  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
-}
- -

Résultat

- -

{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}}

- -

Numérotation décimale (avec zéro) et indices alphabétiques

- -

HTML

- -
<ol>
-  <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
-  </li>
-  <li></li>
-  <li></li>
-  <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
-  </li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: count;
-}
-li {
-  counter-increment: count;
-}
-li::marker {
-   content: counters(count, '.', upper-alpha) ') ';
-}
-li::before {
-  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
-}
- -

Résultat

- -

{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.types.counters")}}

- -

Voir aussi

- -
    -
  • Utiliser les compteurs CSS
    • -
  • {{cssxref("counter-reset")}}
    • -
  • {{cssxref("counter-increment")}}
    • -
  • {{cssxref("@counter-style")}}
    • -
  • La fonction CSS counter()
    • -
  • {{cssxref("::marker")}}
    • -
diff --git a/files/fr/web/css/counters()/index.md b/files/fr/web/css/counters()/index.md new file mode 100644 index 0000000000..6f78f5f900 --- /dev/null +++ b/files/fr/web/css/counters()/index.md @@ -0,0 +1,187 @@ +--- +title: counters() +slug: Web/CSS/counters() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/counters() +--- +
{{CSSRef}}
+ +

La fonction CSS counters() permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction counters() peut s'utiliser sous deux formes :

+ +
    +
  • counters(name, string)
    • +
  • 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).

+ +
/* Utilisation simple - style decimal par défaut */
+counters(countername, '-');
+
+/* Changement du style d'affichage */
+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.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
{{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.
+
{{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
+
Représente la chaîne vide.
+
+ +

Syntaxe formelle

+ +{{CSSSyntax}} + +

Exemples

+ +

Style par défaut et chiffres romains

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::marker {
+   content:  counters(listCounter, '.', upper-roman) ') ';
+}
+li::before {
+  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}}

+ +

Numérotation décimale (avec zéro) et indices alphabétiques

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::marker {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.types.counters")}}

+ +

Voir aussi

+ +
    +
  • Utiliser les compteurs CSS
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • La fonction CSS counter()
    • +
  • {{cssxref("::marker")}}
    • +
diff --git a/files/fr/web/css/cross-fade()/index.html b/files/fr/web/css/cross-fade()/index.html deleted file mode 100644 index 452ff95ab5..0000000000 --- a/files/fr/web/css/cross-fade()/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: cross-fade() -slug: Web/CSS/cross-fade() -tags: - - CSS - - Experimental - - Fonction - - Reference -translation_of: Web/CSS/cross-fade() ---- -
{{draft}}{{CSSRef}}
- -

La fonction CSS cross-fade() peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.

- -
-

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)

- -

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%.

- -

Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("<image>")}}) CSS peut être utilisée.

- -

Utilisation des pourcentages

- -

Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.

- -
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 */
-cross-fade(url(white.png) 100%, url(black.png)   0%); /* complètement blanche */
-cross-fade(url(green.png)  75%, url(red.png)    75%); /* image avec du rouge et vert à 75% */
-
- -

Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%.

- -

Les lignes précédentes peuvent ainsi s'écrire également :

- -
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 */
-cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */
-cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */
-
- -

Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%).

- -

Syntaxe formelle

- -

{{csssyntax}}

- -

Exemples

- -

HTML

- -
<div id="div"></div>
- -

CSS

- -
#div {
-    width: 300px;
-    height: 300px;
-    background-image: cross-fade(
-        75% url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'));
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "330", "330")}}

- -

Ancienne syntaxe (implémentations)

- -
cross-fade( <image, <image>, <percentage> )
- -

La spécification de la fonction cross-fade() permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, 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), 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 */
-cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
-
- -

Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément.

- -

Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.

- -

Exemples

- -

CSS

- -
.crossfade {
-    width: 300px;
-    height: 300px;
-    background-image: -webkit-cross-fade(
-        url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'),
-        75%);
-    background-image: cross-fade(
-        url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'),
-        75%);
-}
- -

HTML

- -
<div class="crossfade"></div>
- -

Résultat

- -

{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}}

- -

Accessibilité

- -

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}{{Spec2('CSS4 Images')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
{{Compat("css.types.image.cross-fade")}}
- -

Voir aussi

- -
    -
  • {{cssxref("image")}}
    • -
  • {{cssxref("url")}}
    • -
  • {{cssxref("_image", "image()")}}
    • -
  • {{cssxref("image-set")}}
    • -
  • {{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/cross-fade()/index.md b/files/fr/web/css/cross-fade()/index.md new file mode 100644 index 0000000000..452ff95ab5 --- /dev/null +++ b/files/fr/web/css/cross-fade()/index.md @@ -0,0 +1,159 @@ +--- +title: cross-fade() +slug: Web/CSS/cross-fade() +tags: + - CSS + - Experimental + - Fonction + - Reference +translation_of: Web/CSS/cross-fade() +--- +
{{draft}}{{CSSRef}}
+ +

La fonction CSS cross-fade() peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.

+ +
+

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)

+ +

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%.

+ +

Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("<image>")}}) CSS peut être utilisée.

+ +

Utilisation des pourcentages

+ +

Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.

+ +
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 */
+cross-fade(url(white.png) 100%, url(black.png)   0%); /* complètement blanche */
+cross-fade(url(green.png)  75%, url(red.png)    75%); /* image avec du rouge et vert à 75% */
+
+ +

Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%.

+ +

Les lignes précédentes peuvent ainsi s'écrire également :

+ +
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 */
+cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */
+cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */
+
+ +

Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%).

+ +

Syntaxe formelle

+ +

{{csssyntax}}

+ +

Exemples

+ +

HTML

+ +
<div id="div"></div>
+ +

CSS

+ +
#div {
+    width: 300px;
+    height: 300px;
+    background-image: cross-fade(
+        75% url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'));
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "330", "330")}}

+ +

Ancienne syntaxe (implémentations)

+ +
cross-fade( <image, <image>, <percentage> )
+ +

La spécification de la fonction cross-fade() permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, 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), 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 */
+cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
+
+ +

Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément.

+ +

Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.

+ +

Exemples

+ +

CSS

+ +
.crossfade {
+    width: 300px;
+    height: 300px;
+    background-image: -webkit-cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+    background-image: cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+}
+ +

HTML

+ +
<div class="crossfade"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}}

+ +

Accessibilité

+ +

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}{{Spec2('CSS4 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{Compat("css.types.image.cross-fade")}}
+ +

Voir aussi

+ +
    +
  • {{cssxref("image")}}
    • +
  • {{cssxref("url")}}
    • +
  • {{cssxref("_image", "image()")}}
    • +
  • {{cssxref("image-set")}}
    • +
  • {{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_animated_properties/index.html b/files/fr/web/css/css_animated_properties/index.html deleted file mode 100644 index 463b7f9669..0000000000 --- a/files/fr/web/css/css_animated_properties/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Liste des propriétés CSS animées -slug: Web/CSS/CSS_animated_properties -tags: - - Animations - - CSS - - Reference - - Transitions -translation_of: Web/CSS/CSS_animated_properties -original_slug: Web/CSS/Liste_propriétés_CSS_animées ---- -
{{CSSRef}}
- -

Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux animations CSS ou aux transitions CSS.

- -

Voici la liste des propriétés qui peuvent être animées :

- -

{{CSSAnimatedProperties}}

diff --git a/files/fr/web/css/css_animated_properties/index.md b/files/fr/web/css/css_animated_properties/index.md new file mode 100644 index 0000000000..463b7f9669 --- /dev/null +++ b/files/fr/web/css/css_animated_properties/index.md @@ -0,0 +1,18 @@ +--- +title: Liste des propriétés CSS animées +slug: Web/CSS/CSS_animated_properties +tags: + - Animations + - CSS + - Reference + - Transitions +translation_of: Web/CSS/CSS_animated_properties +original_slug: Web/CSS/Liste_propriétés_CSS_animées +--- +
{{CSSRef}}
+ +

Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux animations CSS ou aux transitions CSS.

+ +

Voici la liste des propriétés qui peuvent être animées :

+ +

{{CSSAnimatedProperties}}

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 deleted file mode 100644 index 7f33e6daf9..0000000000 --- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Détecter la prise en charge des animations CSS -slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support -tags: - - Avancé - - CSS - - Obsolete -translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support -original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS ---- -
{{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")}}.

-
- -

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.

- -

Détecter la prise en charge des animations CSS

- -

Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :

- -
var animation = false,
-  animationstring = 'animation',
-  keyframeprefix = '',
-  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
-  pfx  = '',
-  elem = document.createElement('div');
-
-if( elem.style.animationName !== undefined ) { animation = true; }
-
-if( animation === false ) {
-  for( var i = 0; i < domPrefixes.length; i++ ) {
-    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
-      pfx = domPrefixes[ i ];
-      animationstring = pfx + 'Animation';
-      keyframeprefix = '-' + pfx.toLowerCase() + '-';
-      animation = true;
-      break;
-    }
-  }
-}
-
- -

Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant animation avec false. On utilise la chaîne de caractères animationstring avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable pfx qu'on définit pour le moment avec la chaîne vide.

- -

Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable elem. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.

- -

Si le navigateur ne prend pas en charge la version sans préfixe et que animation vaut toujours false, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de AnimationName de la même façon.

- -

Une fois que ce code a fini son exécution, la valeur de animation sera false si les animations ne sont pas prises en charge ou true si animation est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le camelCase (ex. MozAnimation) et les tirets (-moz-x).

- -

Appliquer des animations avec la bonne syntaxe selon le navigateur

- -

Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :

- -
if( animation === false ) {
-
-  // on utilise JavaScript en fallback
-
-} else {
-  elem.style[ animationstring ] = 'rotate 1s linear infinite';
-
-  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
-                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
-                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
-                  '}';
-
-  if( document.styleSheets && document.styleSheets.length ) {
-
-      document.styleSheets[0].insertRule( keyframes, 0 );
-
-  } else {
-
-    var s = document.createElement( 'style' );
-    s.innerHTML = keyframes;
-    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
-
-  }
-
-}
-
- -

Ce code utilise la valeur d'animation : si c'est false, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.

- -

Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/keyframes car elles n'utilisent pas la syntaxe CSS traditionnelle.

- -

Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable keyframes qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.

- -

Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).

- -

S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.

- -

Voir dans JSFiddle

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md new file mode 100644 index 0000000000..7f33e6daf9 --- /dev/null +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md @@ -0,0 +1,100 @@ +--- +title: Détecter la prise en charge des animations CSS +slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +tags: + - Avancé + - CSS + - Obsolete +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS +--- +
{{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")}}.

+
+ +

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.

+ +

Détecter la prise en charge des animations CSS

+ +

Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :

+ +
var animation = false,
+  animationstring = 'animation',
+  keyframeprefix = '',
+  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+  pfx  = '',
+  elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant animation avec false. On utilise la chaîne de caractères animationstring avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable pfx qu'on définit pour le moment avec la chaîne vide.

+ +

Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable elem. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.

+ +

Si le navigateur ne prend pas en charge la version sans préfixe et que animation vaut toujours false, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de AnimationName de la même façon.

+ +

Une fois que ce code a fini son exécution, la valeur de animation sera false si les animations ne sont pas prises en charge ou true si animation est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le camelCase (ex. MozAnimation) et les tirets (-moz-x).

+ +

Appliquer des animations avec la bonne syntaxe selon le navigateur

+ +

Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :

+ +
if( animation === false ) {
+
+  // on utilise JavaScript en fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Ce code utilise la valeur d'animation : si c'est false, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.

+ +

Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/keyframes car elles n'utilisent pas la syntaxe CSS traditionnelle.

+ +

Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable keyframes qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.

+ +

Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).

+ +

S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.

+ +

Voir dans JSFiddle

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html deleted file mode 100644 index a0db694124..0000000000 --- a/files/fr/web/css/css_animations/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Les animations CSS -slug: Web/CSS/CSS_Animations -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Animations -original_slug: Web/CSS/Animations_CSS ---- -
{{CSSRef}}
- -

Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

- -

Référence

- -

Propriétés CSS

- -
    -
  • {{cssxref("animation")}}
    • -
  • {{cssxref("animation-delay")}}
    • -
  • {{cssxref("animation-direction")}}
    • -
  • {{cssxref("animation-duration")}}
    • -
  • {{cssxref("animation-fill-mode")}}
    • -
  • {{cssxref("animation-iteration-count")}}
    • -
  • {{cssxref("animation-name")}}
    • -
  • {{cssxref("animation-play-state")}}
    • -
  • {{cssxref("animation-timing-function")}}
    • -
- -

Règles @ CSS

- -
    -
  • {{cssxref("@keyframes")}}
    • -
- -

Guides

- -
-
Détecter la prise en charge des animations CSS
-
Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.
-
Manipuler les animations CSS
-
Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.
-
Conseils pour les animations CSS
-
Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

Propriété animation

- -

{{Compat("css.properties.animation")}}

- -

Voir aussi

- -
    -
  • Les transitions CSS qui permettent de déclencher des animations suite à des actions utilisateur.
    • -
diff --git a/files/fr/web/css/css_animations/index.md b/files/fr/web/css/css_animations/index.md new file mode 100644 index 0000000000..a0db694124 --- /dev/null +++ b/files/fr/web/css/css_animations/index.md @@ -0,0 +1,76 @@ +--- +title: Les animations CSS +slug: Web/CSS/CSS_Animations +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Animations +original_slug: Web/CSS/Animations_CSS +--- +
{{CSSRef}}
+ +

Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

+ +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+ +

Règles @ CSS

+ +
    +
  • {{cssxref("@keyframes")}}
    • +
+ +

Guides

+ +
+
Détecter la prise en charge des animations CSS
+
Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.
+
Manipuler les animations CSS
+
Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.
+
Conseils pour les animations CSS
+
Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Propriété animation

+ +

{{Compat("css.properties.animation")}}

+ +

Voir aussi

+ +
    +
  • Les transitions CSS qui permettent de déclencher des animations suite à des actions utilisateur.
    • +
diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html deleted file mode 100644 index 011e1c6e3a..0000000000 --- a/files/fr/web/css/css_animations/tips/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Trucs et astuces pour les animations CSS -slug: Web/CSS/CSS_Animations/Tips -tags: - - Animations CSS - - CSS - - Exemple - - Guide - - Tutoriel -translation_of: Web/CSS/CSS_Animations/Tips -original_slug: Web/CSS/Animations_CSS/Conseils ---- -
{{CSSRef}}
- -

Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.

- -

Relancer une animation

- -

La spécifications des animations CSS ne permet pas de relancer une animation. Il n'existe pas de méthode resetAnimation() qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur "running". Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.

- -

CSS

- -

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 }
-  100% { background: blue }
-}
-
-.box {
-  width: 100px;
-  height: 100px;
-  border: 1px solid black;
-}
-
-.changing {
-  animation: colorchange 2s;
-}
- -

On a deux classes qui sont définies. La classe box qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe changing qui indique que les {{cssxref("@keyframes")}} intitulées colorchange doivent être utilisées sur une période de deux secondes afin d'animer la boîte.

- -

Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.

- -

HTML

- -

Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.

- -
<div class="box">
-</div>
-
-<div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
- -

JavaScript

- -

Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction play() qui est appelée lorsque l'utilisateur clique sur le bouton.

- -
function play() {
-  document.querySelector(".box").className = "box";
-  window.requestAnimationFrame(function(time) {
-    window.requestAnimationFrame(function(time) {
-      document.querySelector(".box").className = "box changing";
-    });
-  });
-}
- -

Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.

- -

Voici ce qui se produit lorsque la fonction play() est appelée :

- -
    -
  1. On réinitialise la liste des classes CSS de la boîte avec uniquement box. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe changing en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.
    2. -
  2. Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (callback). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…
    3. -
  3. Notre fonction de rappel invoque à nouveau requestAnimationFrame() ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe changing à la boîte afin que l'animation soit lancée lors du rafraîchissement.
    4. -
- -

Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :

- -
document.querySelector(".runButton").addEventListener("click", play, false);
- -

Résultat

- -

{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}

- -

Arrêter une animation

- -

Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :

- -
    -
  1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur  animation-direction: alternate. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.
    2. -
  2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement animationiteration se déclenche.
    3. -
- -

Ces pistes sont utilisées dans la démonstration suivante :

- -

CSS

- -
.slidein {
-  animation-duration: 5s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
-.stopped {
-  animation-name: none;
-}
-
-@keyframes slidein {
-  0% {
-    margin-left: 0%;
-  }
-  50% {
-    margin-left: 50%;
-  }
-  100% {
-    margin-left: 0%;
-  }
-}
-
- -

HTML

- -
<h1 id="watchme">Cliquer pour arrêter</h1>
-
- -

JavaScript

- -
let watchme = document.getElementById('watchme')
-
-watchme.className = 'slidein'
-const listener = (e) => {
-  watchme.className = 'slidein stopped'
-}
-watchme.addEventListener('click', () =>
-  watchme.addEventListener('animationiteration', listener, false)
-)
-
- -

Résultat

- -

{{EmbedLiveSample("Arrêter_une_animation")}}

- -

Voir cette démo

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_animations/tips/index.md b/files/fr/web/css/css_animations/tips/index.md new file mode 100644 index 0000000000..011e1c6e3a --- /dev/null +++ b/files/fr/web/css/css_animations/tips/index.md @@ -0,0 +1,164 @@ +--- +title: Trucs et astuces pour les animations CSS +slug: Web/CSS/CSS_Animations/Tips +tags: + - Animations CSS + - CSS + - Exemple + - Guide + - Tutoriel +translation_of: Web/CSS/CSS_Animations/Tips +original_slug: Web/CSS/Animations_CSS/Conseils +--- +
{{CSSRef}}
+ +

Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.

+ +

Relancer une animation

+ +

La spécifications des animations CSS ne permet pas de relancer une animation. Il n'existe pas de méthode resetAnimation() qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur "running". Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.

+ +

CSS

+ +

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 }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

On a deux classes qui sont définies. La classe box qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe changing qui indique que les {{cssxref("@keyframes")}} intitulées colorchange doivent être utilisées sur une période de deux secondes afin d'animer la boîte.

+ +

Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.

+ +

HTML

+ +

Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.

+ +
<div class="box">
+</div>
+
+<div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
+ +

JavaScript

+ +

Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction play() qui est appelée lorsque l'utilisateur clique sur le bouton.

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.

+ +

Voici ce qui se produit lorsque la fonction play() est appelée :

+ +
    +
  1. On réinitialise la liste des classes CSS de la boîte avec uniquement box. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe changing en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.
    2. +
  2. Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (callback). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…
    3. +
  3. Notre fonction de rappel invoque à nouveau requestAnimationFrame() ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe changing à la boîte afin que l'animation soit lancée lors du rafraîchissement.
    4. +
+ +

Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

Résultat

+ +

{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}

+ +

Arrêter une animation

+ +

Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :

+ +
    +
  1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur  animation-direction: alternate. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.
    2. +
  2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement animationiteration se déclenche.
    3. +
+ +

Ces pistes sont utilisées dans la démonstration suivante :

+ +

CSS

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +

HTML

+ +
<h1 id="watchme">Cliquer pour arrêter</h1>
+
+ +

JavaScript

+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

Résultat

+ +

{{EmbedLiveSample("Arrêter_une_animation")}}

+ +

Voir cette démo

+ +

Voir aussi

+ + 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 deleted file mode 100644 index 2c0364c3f4..0000000000 --- a/files/fr/web/css/css_animations/using_css_animations/index.html +++ /dev/null @@ -1,366 +0,0 @@ ---- -title: Utiliser les animations CSS -slug: Web/CSS/CSS_Animations/Using_CSS_animations -tags: - - Avancé - - CSS - - Guide - - Reference -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations -original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS ---- -
{{CSSRef}}
- -

Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (keyframes) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.

- -

Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :

- -
    -
  1. On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.
    2. -
  2. Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le frame-skipping) afin que le résultat obtenu soit aussi fluide que possible.
    3. -
  3. En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.
    4. -
- -

Paramétrer l'animation

- -

Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.

- -

Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :

- -
-
{{cssxref("animation-delay")}}
-
Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.
-
{{cssxref("animation-direction")}}
-
Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.
-
{{cssxref("animation-duration")}}
-
Cette propriété définit la durée d'un cycle de l'animation.
-
{{cssxref("animation-fill-mode")}}
-
Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.
-
{{cssxref("animation-iteration-count")}}
-
Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.
-
{{cssxref("animation-name")}}
-
Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.
-
{{cssxref("animation-play-state")}}
-
Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
-
{{cssxref("animation-timing-function")}}
-
Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.
-
- -

Définir les étapes composant une animation (@keyframes)

- -

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.

- -

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0% ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.

- -

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.

- -

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.

-
- -

Utiliser une animation pour que le texte traverse la fenêtre du navigateur

- -

Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran

- -

On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}:hidden sur ce conteneur.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera slidein.

- -

Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.

- -

Les étapes (keyframes) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias from). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.

- -

La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias to). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.

- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
-
- -
-

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

-
- -

{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}

- -

Ajouter une autre étape

- -

Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ @keyframes :

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.

- -
-

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

-
- -

{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}

- -

Répéter une animation

- -

Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur infinite pour que l'animation se répète à l'infini :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

{{EmbedLiveSample("Répéter_une_animation","100%","250")}}

- -

Obtenir un effet aller-retour

- -

On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur alternate :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - - - -

{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}

- -

Utiliser la propriété raccourcie animation

- -

La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- -

On peut la réécrire de façon plus concise :

- -
p {
-  animation: 3s infinite alternate slidein;
-}
- -
-

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

- -

Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.

- -

Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 3s;
-animation-iteration-count: 1;
- -

Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple fadeInOut a une durée de 2.5s et 2 itérations.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s, 1s;
-animation-iteration-count: 2, 1, 5;
- -

Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, fadeInOut durera 2.5s, moveLeft300px durera 5s. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : bounce aura donc une durée de 2.5s. Le nombre d'itérations sera affecté de la même façon.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s;
-animation-iteration-count: 2, 1;
- -

Utiliser les événements liés aux animations

- -

Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.

- -

Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.

- -

La feuille de style CSS

- -

On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée slidein, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.

- -
.slidein {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: 3;
-  animation-direction: alternate;
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-    margin-left:0%;
-    width:100%;
-  }
-}
- -

Les gestionnaires d'événements

- -

On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).

- -
var element = document.getElementById("watchme");
-element.addEventListener("animationstart", listener, false);
-element.addEventListener("animationend", listener, false);
-element.addEventListener("animationiteration", listener, false);
-
-element.className = "slidein";
-
- -

Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur slidein sur l'élément.

- -

Quel est l'intérêt ? En fait, l'événement animationstart est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.

- -

Écouter les événements

- -

Les événements sont transmis à la fonction listener() décrite ici :

- -
function listener(event) {
-  var l = document.createElement("li");
-  switch(event.type) {
-    case "animationstart":
-      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.

- -

Le résultat obtenu devrait ressembler à quelque chose comme :

- -
    -
  • Début : durée écoulée : 0
    • -
  • Nouvelle boucle démarrée à : 3.01200008392334
    • -
  • Nouvelle boucle démarrée à : 6.00600004196167
    • -
  • Fin : durée écoulée : 9.234000205993652
    • -
- -

On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

- -

Le document HTML

- -

Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :

- -
<h1 id="watchme">Regardez-moi bouger</h1>
-<p>
-  Un exemple d'animation CSS pour déplacer
-  un élément <code>H1</code> sur une page.
-</p>
-<p>
-  Voici les événements relatifs aux animations :
-</p>
-<ul id="output">
-</ul>
-</body>
-
- -

{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_animations/using_css_animations/index.md b/files/fr/web/css/css_animations/using_css_animations/index.md new file mode 100644 index 0000000000..2c0364c3f4 --- /dev/null +++ b/files/fr/web/css/css_animations/using_css_animations/index.md @@ -0,0 +1,366 @@ +--- +title: Utiliser les animations CSS +slug: Web/CSS/CSS_Animations/Using_CSS_animations +tags: + - Avancé + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS +--- +
{{CSSRef}}
+ +

Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (keyframes) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.

+ +

Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :

+ +
    +
  1. On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.
    2. +
  2. Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le frame-skipping) afin que le résultat obtenu soit aussi fluide que possible.
    3. +
  3. En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.
    4. +
+ +

Paramétrer l'animation

+ +

Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.

+ +

Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :

+ +
+
{{cssxref("animation-delay")}}
+
Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.
+
{{cssxref("animation-direction")}}
+
Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.
+
{{cssxref("animation-duration")}}
+
Cette propriété définit la durée d'un cycle de l'animation.
+
{{cssxref("animation-fill-mode")}}
+
Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.
+
{{cssxref("animation-iteration-count")}}
+
Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.
+
{{cssxref("animation-name")}}
+
Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.
+
{{cssxref("animation-play-state")}}
+
Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
+
{{cssxref("animation-timing-function")}}
+
Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.
+
+ +

Définir les étapes composant une animation (@keyframes)

+ +

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.

+ +

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0% ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.

+ +

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.

+ +

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.

+
+ +

Utiliser une animation pour que le texte traverse la fenêtre du navigateur

+ +

Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran

+ +

On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}:hidden sur ce conteneur.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera slidein.

+ +

Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.

+ +

Les étapes (keyframes) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias from). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.

+ +

La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias to). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +
+

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

+
+ +

{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}

+ +

Ajouter une autre étape

+ +

Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ @keyframes :

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.

+ +
+

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

+
+ +

{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}

+ +

Répéter une animation

+ +

Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur infinite pour que l'animation se répète à l'infini :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Répéter_une_animation","100%","250")}}

+ +

Obtenir un effet aller-retour

+ +

On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur alternate :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}

+ +

Utiliser la propriété raccourcie animation

+ +

La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +

On peut la réécrire de façon plus concise :

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

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

+ +

Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.

+ +

Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+ +

Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple fadeInOut a une durée de 2.5s et 2 itérations.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, fadeInOut durera 2.5s, moveLeft300px durera 5s. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : bounce aura donc une durée de 2.5s. Le nombre d'itérations sera affecté de la même façon.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Utiliser les événements liés aux animations

+ +

Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.

+ +

Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.

+ +

La feuille de style CSS

+ +

On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée slidein, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

Les gestionnaires d'événements

+ +

On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).

+ +
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+
+ +

Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur slidein sur l'élément.

+ +

Quel est l'intérêt ? En fait, l'événement animationstart est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.

+ +

Écouter les événements

+ +

Les événements sont transmis à la fonction listener() décrite ici :

+ +
function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.

+ +

Le résultat obtenu devrait ressembler à quelque chose comme :

+ +
    +
  • Début : durée écoulée : 0
    • +
  • Nouvelle boucle démarrée à : 3.01200008392334
    • +
  • Nouvelle boucle démarrée à : 6.00600004196167
    • +
  • Fin : durée écoulée : 9.234000205993652
    • +
+ +

On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

+ +

Le document HTML

+ +

Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :

+ +
<h1 id="watchme">Regardez-moi bouger</h1>
+<p>
+  Un exemple d'animation CSS pour déplacer
+  un élément <code>H1</code> sur une page.
+</p>
+<p>
+  Voici les événements relatifs aux animations :
+</p>
+<ul id="output">
+</ul>
+</body>
+
+ +

{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}

+ +

Voir aussi

+ + 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 deleted file mode 100644 index c598a24870..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2617 +0,0 @@ ---- -title: Générateur de border-image -slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

- - - - - - - -

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md new file mode 100644 index 0000000000..c598a24870 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md @@ -0,0 +1,2617 @@ +--- +title: Générateur de border-image +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

+ + + + + + + +

{{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 deleted file mode 100644 index 0cb8e25181..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1593 +0,0 @@ ---- -title: Générateur de border-radius -slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

- -

border-radius-generator

- - - - - - - -

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md new file mode 100644 index 0000000000..0cb8e25181 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md @@ -0,0 +1,1593 @@ +--- +title: Générateur de border-radius +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

+ +

border-radius-generator

+ + + + + + + +

{{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 deleted file mode 100644 index bc0470ae50..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2878 +0,0 @@ ---- -title: Générateur de box-shadow -slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.

- - - - - - - -
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md new file mode 100644 index 0000000000..bc0470ae50 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md @@ -0,0 +1,2878 @@ +--- +title: Générateur de box-shadow +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.

+ + + + + + + +
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html deleted file mode 100644 index bac2b33946..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: CSS Backgrounds and Borders -slug: Web/CSS/CSS_Backgrounds_and_Borders -tags: - - Aperçu - - CSS - - CSS Backgrounds and Borders - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders ---- -
{{CSSRef}}
- -

CSS Backgrounds and Borders est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.

- -

Référence

- -

Propriétés CSS

- -
    -
  • {{cssxref("background")}}
    • -
  • {{cssxref("background-attachment")}}
    • -
  • {{cssxref("background-clip")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("background-image")}}
    • -
  • {{cssxref("background-origin")}}
    • -
  • {{cssxref("background-position")}}
    • -
  • {{cssxref("background-position-x")}}
    • -
  • {{cssxref("background-position-y")}}
    • -
  • {{cssxref("background-repeat")}}
    • -
  • {{cssxref("background-size")}}
    • -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-bottom")}}
    • -
  • {{cssxref("border-bottom-color")}}
    • -
  • {{cssxref("border-bottom-left-radius")}}
    • -
  • {{cssxref("border-bottom-right-radius")}}
    • -
  • {{cssxref("border-bottom-style")}}
    • -
  • {{cssxref("border-bottom-width")}}
    • -
  • {{cssxref("border-collapse")}}
    • -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("border-image")}}
    • -
  • {{cssxref("border-image-outset")}}
    • -
  • {{cssxref("border-image-repeat")}}
    • -
  • {{cssxref("border-image-slice")}}
    • -
  • {{cssxref("border-image-source")}}
    • -
  • {{cssxref("border-image-width")}}
    • -
  • {{cssxref("border-left")}}
    • -
  • {{cssxref("border-left-color")}}
    • -
  • {{cssxref("border-left-style")}}
    • -
  • {{cssxref("border-left-width")}}
    • -
  • {{cssxref("border-radius")}}
    • -
  • {{cssxref("border-right")}}
    • -
  • {{cssxref("border-right-color")}}
    • -
  • {{cssxref("border-right-style")}}
    • -
  • {{cssxref("border-right-width")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • {{cssxref("border-top")}}
    • -
  • {{cssxref("border-top-color")}}
    • -
  • {{cssxref("border-top-left-radius")}}
    • -
  • {{cssxref("border-top-right-radius")}}
    • -
  • {{cssxref("border-top-style")}}
    • -
  • {{cssxref("border-top-width")}}
    • -
  • {{cssxref("border-width")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
- -

Guides

- -
-
Manipuler plusieurs arrière-plans
-
Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.
-
Mettre à l'échelle les images utilisées pour un arrière-plan
-
Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.
-
Appliquer des couleurs sur des éléments HTML grâce à CSS
-
Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.
-
- -

Outils

- -
-
Générateur pour border-image
-
Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).
-
Générateur pour border-radius
-
Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).
-
Générateur pour box-shadow
-
Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds')}}{{Spec2('CSS3 Backgrounds')}} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.md b/files/fr/web/css/css_backgrounds_and_borders/index.md new file mode 100644 index 0000000000..bac2b33946 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/index.md @@ -0,0 +1,115 @@ +--- +title: CSS Backgrounds and Borders +slug: Web/CSS/CSS_Backgrounds_and_Borders +tags: + - Aperçu + - CSS + - CSS Backgrounds and Borders + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +
{{CSSRef}}
+ +

CSS Backgrounds and Borders est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.

+ +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
+ +

Guides

+ +
+
Manipuler plusieurs arrière-plans
+
Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.
+
Mettre à l'échelle les images utilisées pour un arrière-plan
+
Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.
+
Appliquer des couleurs sur des éléments HTML grâce à CSS
+
Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.
+
+ +

Outils

+ +
+
Générateur pour border-image
+
Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).
+
Générateur pour border-radius
+
Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).
+
Générateur pour box-shadow
+
Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds')}}{{Spec2('CSS3 Backgrounds')}} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
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 deleted file mode 100644 index 6a92d4d7e5..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Mettre à l'échelle des images en arrière-plan -slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -tags: - - CSS - - Guide - - Intermédiaire - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images ---- -
{{CSSRef}}
- -

La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.

- -

Carreler une image de grande taille

- -

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 {
-  width: 300px;
-  height: 300px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-}
-
- -

On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à auto.

- -

Étirer une image

- -

Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.

- -
background-size: 300px 150px;
-
- -

L'image suivante montre le résultat obtenu.

- -

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

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.

- -

Valeurs spéciales : contain et cover

- -

En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : contain et cover. 

- -

contain

- -

La valeur contain spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.

- -

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 {
-  height: 200px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

cover

- -

La valeur cover assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.

- -

{{EmbedLiveSample("cover", "100%", "220")}}

- -

Cet exemple utilise le document HTML et la feuille de style suivants :

- -
<div class="bgSizeCover">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-
- -

Voir aussi

- -
    -
  • {{cssxref("background-size")}}
    • -
  • {{cssxref("background")}}
    • -
diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md new file mode 100644 index 0000000000..6a92d4d7e5 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -0,0 +1,116 @@ +--- +title: Mettre à l'échelle des images en arrière-plan +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +tags: + - CSS + - Guide + - Intermédiaire + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +--- +
{{CSSRef}}
+ +

La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.

+ +

Carreler une image de grande taille

+ +

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 {
+  width: 300px;
+  height: 300px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à auto.

+ +

Étirer une image

+ +

Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.

+ +
background-size: 300px 150px;
+
+ +

L'image suivante montre le résultat obtenu.

+ +

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

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.

+ +

Valeurs spéciales : contain et cover

+ +

En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : contain et cover. 

+ +

contain

+ +

La valeur contain spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.

+ +

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 {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}
+ +

cover

+ +

La valeur cover assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.

+ +

{{EmbedLiveSample("cover", "100%", "220")}}

+ +

Cet exemple utilise le document HTML et la feuille de style suivants :

+ +
<div class="bgSizeCover">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+ +
.bgSizeCover {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+
+ +

Voir aussi

+ +
    +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("background")}}
    • +
diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index 04ac4ad67d..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Utiliser plusieurs arrière-plans -slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans ---- -
{{CSSRef}}
- -

Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

- -

Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :

- -
.maClasse {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

- -

Exemples

- -

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.

- -

CSS

- -
.exemple_multi_ar {
-  width: 100%;
-  height: 400px;
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-  background-repeat: no-repeat, no-repeat, no-repeat;
-  background-position: bottom right, left, right;
-}
- -

HTML

- -
<div class="exemple_multi_ar"></div>
- -

Résultat

- -

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

- -

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

- -
-

Note : Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton Tidy de la section CSS.

-
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md new file mode 100644 index 0000000000..04ac4ad67d --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -0,0 +1,56 @@ +--- +title: Utiliser plusieurs arrière-plans +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans +--- +
{{CSSRef}}
+ +

Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

+ +

Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :

+ +
.maClasse {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

+ +

Exemples

+ +

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.

+ +

CSS

+ +
.exemple_multi_ar {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+}
+ +

HTML

+ +
<div class="exemple_multi_ar"></div>
+ +

Résultat

+ +

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

+ +

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

+ +
+

Note : Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton Tidy de la section CSS.

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_basic_user_interface/index.html b/files/fr/web/css/css_basic_user_interface/index.html deleted file mode 100644 index b8e3ba66e4..0000000000 --- a/files/fr/web/css/css_basic_user_interface/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CSS Basic User Interface -slug: Web/CSS/CSS_Basic_User_Interface -tags: - - Aperçu - - CSS - - CSS Basic User Interface - - Overview - - Reference -translation_of: Web/CSS/CSS_Basic_User_Interface ---- -

{{CSSRef}}

- -

CSS Basic User Interface est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur.

- -

Référence

- -

Propriétés

- -
    -
  • {{CSSxRef("appearance")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("box-sizing")}}
    • -
  • {{CSSxRef("cursor")}}
    • -
  • {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
    • -
  • {{CSSxRef("nav-down")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("nav-left")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("nav-right")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("nav-up")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("outline")}}
    • -
  • {{CSSxRef("outline-width")}}
    • -
  • {{CSSxRef("outline-style")}}
    • -
  • {{CSSxRef("outline-color")}}
    • -
  • {{CSSxRef("outline-offset")}}
    • -
  • {{CSSxRef("resize")}}
    • -
  • {{CSSxRef("text-overflow")}}
    • -
  • {{CSSxRef("user-select")}} {{Experimental_Inline}}
    • -
- -

Guides

- -
-
Utiliser des URL pour la propriété cursor
-
Ce guide décrit comment utiliser des URL avec la propriété {{CSSxRef("cursor")}} afin de créer des curseurs personnalisés.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}}
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}Définition initiale.
diff --git a/files/fr/web/css/css_basic_user_interface/index.md b/files/fr/web/css/css_basic_user_interface/index.md new file mode 100644 index 0000000000..b8e3ba66e4 --- /dev/null +++ b/files/fr/web/css/css_basic_user_interface/index.md @@ -0,0 +1,73 @@ +--- +title: CSS Basic User Interface +slug: Web/CSS/CSS_Basic_User_Interface +tags: + - Aperçu + - CSS + - CSS Basic User Interface + - Overview + - Reference +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +

{{CSSRef}}

+ +

CSS Basic User Interface est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur.

+ +

Référence

+ +

Propriétés

+ +
    +
  • {{CSSxRef("appearance")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("box-sizing")}}
    • +
  • {{CSSxRef("cursor")}}
    • +
  • {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("nav-down")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-left")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-right")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-up")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("outline")}}
    • +
  • {{CSSxRef("outline-width")}}
    • +
  • {{CSSxRef("outline-style")}}
    • +
  • {{CSSxRef("outline-color")}}
    • +
  • {{CSSxRef("outline-offset")}}
    • +
  • {{CSSxRef("resize")}}
    • +
  • {{CSSxRef("text-overflow")}}
    • +
  • {{CSSxRef("user-select")}} {{Experimental_Inline}}
    • +
+ +

Guides

+ +
+
Utiliser des URL pour la propriété cursor
+
Ce guide décrit comment utiliser des URL avec la propriété {{CSSxRef("cursor")}} afin de créer des curseurs personnalisés.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}}
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}Définition initiale.
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 deleted file mode 100644 index d9cfe6891d..0000000000 --- a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Utilisation d'URL pour la propriété cursor -slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -tags: - - CSS - - Débutant - - Guide -translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor ---- -
{{CSSRef}}
- -

Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.

- -

Syntaxe

- -

La syntaxe de base (CSS 2.1) pour cette propriété est :

- -
{{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.

- -

On pourra ainsi utiliser :

- -
cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
-
- -

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.

- -
{{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:

- -
cursor: url(toto.png) 4 12, auto;
-
- -

Le premier nombre est la coordonnée x, le second numéro est la coordonnée y. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.

- -

Limitations

- -

Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.

- -
-

Note : À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.

-
- -

Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.

- -

Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.

- -

Compatibilité des navigateurs

- -

Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété cursor. Toutefois :

- -
    -
  • IE ne prend en charge que les formats CUR et ANI
    • -
  • IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion minimumFormatsCoordonnées x-y
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows et Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 pour la prise en charge des fichiers .cur
diff --git a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md new file mode 100644 index 0000000000..d9cfe6891d --- /dev/null +++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md @@ -0,0 +1,105 @@ +--- +title: Utilisation d'URL pour la propriété cursor +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +tags: + - CSS + - Débutant + - Guide +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor +--- +
{{CSSRef}}
+ +

Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.

+ +

Syntaxe

+ +

La syntaxe de base (CSS 2.1) pour cette propriété est :

+ +
{{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.

+ +

On pourra ainsi utiliser :

+ +
cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
+
+ +

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.

+ +
{{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:

+ +
cursor: url(toto.png) 4 12, auto;
+
+ +

Le premier nombre est la coordonnée x, le second numéro est la coordonnée y. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.

+ +

Limitations

+ +

Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.

+ +
+

Note : À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.

+
+ +

Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.

+ +

Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.

+ +

Compatibilité des navigateurs

+ +

Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété cursor. Toutefois :

+ +
    +
  • IE ne prend en charge que les formats CUR et ANI
    • +
  • IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimumFormatsCoordonnées x-y
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows et Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 pour la prise en charge des fichiers .cur
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 deleted file mode 100644 index f7fc54380d..0000000000 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau' -slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables -original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau ---- -
{{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.

- -
-

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.

-
- -

align-content et justify-content

- -

La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.

- -

La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que space-between, space-around ou space-evenly est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme un seul sujet d'alignement.

- -

justify-self

- -

La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.

- -

Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.

- -

Éléments positionnés de façon absolue

- -

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

- -

align-self

- -

La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.

- -

Éléments positionnés de façon absolue

- -

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

- -

Utilisation actuelle de l'alignement pour ces dispositions

- -

À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.

- -

Avant l'apparition des boîtes flexibles (flexbox), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec auto absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :

- -
.container {
-  width: 20em;
-  margin-left: auto;
-  margin-right: auto;
-}
-
- -

Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.

- -

Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

- -

Référence

- -

Propriétés CSS

- -
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("align-self")}}
    • -
- -

Termes du glossaire

- - diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md new file mode 100644 index 0000000000..f7fc54380d --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md @@ -0,0 +1,78 @@ +--- +title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau' +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau +--- +
{{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.

+ +
+

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.

+
+ +

align-content et justify-content

+ +

La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.

+ +

La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que space-between, space-around ou space-evenly est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme un seul sujet d'alignement.

+ +

justify-self

+ +

La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.

+ +

Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.

+ +

Éléments positionnés de façon absolue

+ +

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

+ +

align-self

+ +

La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.

+ +

Éléments positionnés de façon absolue

+ +

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

+ +

Utilisation actuelle de l'alignement pour ces dispositions

+ +

À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.

+ +

Avant l'apparition des boîtes flexibles (flexbox), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec auto absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :

+ +
.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +

Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.

+ +

Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
+ +

Termes du glossaire

+ + 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 deleted file mode 100644 index 2eb9626f5a..0000000000 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: L'alignement des boîtes avec Flexbox -slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox -tags: - - CSS - - Guide - - flexbox -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox -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.

- -

Exemple simple

- -

Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par align-itemsen utilisant center comme valeur pour la propriété {{cssxref("align-self")}}.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

- -

Liens entre les axes et flex-direction

- -

Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec flex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur row, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).

- -

Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction avec la valeur column. Dans ce cas, justify-content alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :

- -
    -
  • L'axe principal correspond à la direction fournie par flex-direction et l'alignement sur cet axe s'effectue avec justify-content
    • -
  • L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec align-content, align-self/align-items
    • -
- -

Alignement sur l'axe principal

- -
    -
  • {{cssxref("justify-content")}}
    • -
- -

Alignement sur l'axe secondaire

- -
    -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("align-content")}}
    • -
- -

Absence de justify-self pour Flexbox

- -

Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content contrôle la répartition de cet espace. Avec justify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around, il sera placé de chaque côté.

- -

Autrement dit, justify-self n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.

- -

Pour l'axe secondaire, align-self peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.

- -

Alignement et marges automatiques

- -

justify-self pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.

- -

En utilisant {{cssxref("margin")}} avec auto sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

- -

Les propriétés gap

- -
    -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
- -

Créer des gouttières fixes entre chaque objet

- -

Sur l'axe principal, la propriété column-gap permettra de créer des gouttières de taille fixe de chaque côté de l'objet.

- -

Sur l'axe secondaire, row-gap permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap vaille wrap afin que row-gap ait un effet.

- -
-

Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.

-
- -

Référence

- -

Propriétés CSS

- -
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}t
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
- -

Termes du glossaire

- - - -

Guides

- - - -

Ressources externes

- - diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.md new file mode 100644 index 0000000000..2eb9626f5a --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.md @@ -0,0 +1,116 @@ +--- +title: L'alignement des boîtes avec Flexbox +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +tags: + - CSS + - Guide + - flexbox +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +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.

+ +

Exemple simple

+ +

Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par align-itemsen utilisant center comme valeur pour la propriété {{cssxref("align-self")}}.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

Liens entre les axes et flex-direction

+ +

Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec flex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur row, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).

+ +

Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction avec la valeur column. Dans ce cas, justify-content alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :

+ +
    +
  • L'axe principal correspond à la direction fournie par flex-direction et l'alignement sur cet axe s'effectue avec justify-content
    • +
  • L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec align-content, align-self/align-items
    • +
+ +

Alignement sur l'axe principal

+ +
    +
  • {{cssxref("justify-content")}}
    • +
+ +

Alignement sur l'axe secondaire

+ +
    +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

Absence de justify-self pour Flexbox

+ +

Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content contrôle la répartition de cet espace. Avec justify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around, il sera placé de chaque côté.

+ +

Autrement dit, justify-self n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.

+ +

Pour l'axe secondaire, align-self peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.

+ +

Alignement et marges automatiques

+ +

justify-self pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.

+ +

En utilisant {{cssxref("margin")}} avec auto sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

+ +

Les propriétés gap

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

Créer des gouttières fixes entre chaque objet

+ +

Sur l'axe principal, la propriété column-gap permettra de créer des gouttières de taille fixe de chaque côté de l'objet.

+ +

Sur l'axe secondaire, row-gap permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap vaille wrap afin que row-gap ait un effet.

+ +
+

Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.

+
+ +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}t
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

Termes du glossaire

+ + + +

Guides

+ + + +

Ressources externes

+ + 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 deleted file mode 100644 index 8e6f9623b5..0000000000 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: L'alignement des boîtes avec une grille CSS -slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout -tags: - - CSS - - CSS Grid - - Grilles CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout -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.

- -

Exemple simple

- -

Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété justify-content. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété align-items. Le premier objet surcharge la valeur fournie par align-items en utilisant align-self avec la valeur center.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

- -

Axes de la grille

- -

La grille est une méthode de disposition sur deux dimensions.

- -

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")}}.

- -

L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).

- -

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

- -
    -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("place-self")}}
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
- -

Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés align-items et justify-items sont appliquées au conteneur de grille et définissent align-self et justify-self pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant align-self ou justify-self sur les éléments souhaités.

- -

Les valeurs initiales pour align-self et justify-self sont stretch. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec startsur les deux axes et l'élément n'est pas déformé.

- -

Alignement du contenu

- -
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}
    • -
- -

Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

- -

Gouttières et versions préfixées des propriétés

- -
    -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("grid-column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
- -

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é.

- -

Référence

- -

Propriétés CSS

- -
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}t
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("place-self")}}
    • -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
- -

Termes du glossaire

- - - -

Guides

- - - -

Ressources externes

- - diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md new file mode 100644 index 0000000000..8e6f9623b5 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md @@ -0,0 +1,116 @@ +--- +title: L'alignement des boîtes avec une grille CSS +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +tags: + - CSS + - CSS Grid + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +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.

+ +

Exemple simple

+ +

Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété justify-content. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété align-items. Le premier objet surcharge la valeur fournie par align-items en utilisant align-self avec la valeur center.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

Axes de la grille

+ +

La grille est une méthode de disposition sur deux dimensions.

+ +

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")}}.

+ +

L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).

+ +

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

+ +
    +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
+ +

Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés align-items et justify-items sont appliquées au conteneur de grille et définissent align-self et justify-self pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant align-self ou justify-self sur les éléments souhaités.

+ +

Les valeurs initiales pour align-self et justify-self sont stretch. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec startsur les deux axes et l'élément n'est pas déformé.

+ +

Alignement du contenu

+ +
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
+ +

Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

+ +

Gouttières et versions préfixées des propriétés

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

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é.

+ +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}t
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{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 deleted file mode 100644 index f6195db8dc..0000000000 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: L'alignement des boîtes avec une disposition en colonnes -slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout -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.

- -

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.

- -
-

Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

-
- -

align-content et justify-content

- -

La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.

- -

Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.

- -

column-gap

- -

La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

- -

On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.

- -

Référence

- -

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/box_alignment_in_multi-column_layout/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md new file mode 100644 index 0000000000..f6195db8dc --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md @@ -0,0 +1,48 @@ +--- +title: L'alignement des boîtes avec une disposition en colonnes +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +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.

+ +

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.

+ +
+

Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

+
+ +

align-content et justify-content

+ +

La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.

+ +

Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.

+ +

column-gap

+ +

La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

+ +

On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.

+ +

Référence

+ +

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 deleted file mode 100644 index 18feaec140..0000000000 --- a/files/fr/web/css/css_box_alignment/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: CSS Box Alignment -slug: Web/CSS/CSS_Box_Alignment -tags: - - Alignement - - CSS - - Guide -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.

- -
-

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.

- -

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.

- -

Alignement pour une disposition en grille

- -

Dans cet exemple avec une grille, on dispose d'un espace restant dans le conteneur après avoir placé les pistes de largeur fixe le long de l'axe en ligne (l'axe principal). L'espace est réparti grâce à la propriété {{cssxref("justify-content")}}. Sur l'axe de bloc (l'axe secondaire), l'alignement des éléments sur la grille est dicté par {{cssxref("align-items")}}. Le premier objet surcharge la règle fournie par align-items en utilisant {{cssxref("align-self")}} avec la valeur center.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

- -

Alignement pour une disposition flexible (flexbox)

- -

Dans cet exemple, trois objets flexibles sont alignés le long de l'axe principal avec justify-content et selon l'axe secondaire avec align-items. Le premier objet surcharge la règle indiquée avec align-items grâce à la propriété align-self qui vaut ici center.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

- -

Concepts majeurs et terminologie

- -

Ce module de spécification définit des termes relatifs à l'alignement afin de pouvoir se référer à ces concepts sans qu'ils soient particulièrement liés à l'implémentation particulière d'un mode de disposition. Ces concepts sont communs à l'ensemble des méthodes de disposition.

- -

Liens avec les modes d'écriture

- -

L'alignement est lié aux modes d'écriture et, lorsqu'on aligne un élément, on ne l'aligne pas selon des axes « physiques » (haut, droit, bas, gauche) mais selon le début ou la fin des dimensions utilisées par ce mode d'écriture. Cela permet de s'assurer que l'alignement fonctionne de la même façon, quel que soit le mode d'écriture utilisé par le document.

- -

Deux dimensions pour l'alignement

- -

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-:

- -
    -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("justify-content")}}
    • -
- -

Lorsqu'on aligne des objets le long de l'axe de bloc, on utilisera les propriétés qui commencent par align-:

- -
    -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("align-content")}}
    • -
- -

Flexbox ajoute un niveau de complexité car si {{cssxref("flex-direction")}} vaut row, ces règles sont vraies mais si flex-direction vaut column, elles sont inversées. Toutefois, lorsqu'on travaille avec les boîtes flexibles, il est préférable de penser en termes d'axe principal et d'axe secondaire plutôt qu'en termes d'axe en ligne et d'axe de bloc. Les propriétés justify- permettent toujours d'aligner selon l'axe principal et les propriétés align- d'aligner selon l'axe secondaire.

- -

Le sujet de l'alignement (alignment subject)

- -

Le sujet de l'alignement est l'objet qu'on aligne. Pour justify-self ou align-self, ou lorsqu'on paramètre ces valeurs pour un group avec justify-items ou align-items, cela correspondra à la boîte de marge de l'élément sur lequel la propriété est appliqué. Les propriétés justify-content et align-content varient selon la méthode de disposition utilisée.

- -

Le conteneur d'alignement (alignment container)

- -

Le conteneur d'alignement est la boîte au sein de laquelle le sujet est aligné. Il s'agit généralement du bloc englobant du sujet de l'alignement. Un conteneur d'alignement peut contenir un ou plusieurs sujets.

- -

Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.

- -

- -

L'alignement de recours (fallback)

- -

Si l'alignement défini ne peut pas être respecté, on utilisera un alignement de recours (fallback alignment) qui déterminera comment gérer l'espace disponible. L'alignement de recours est défini spécifiquement pour chaque méthode de disposition.

- -

Types d'alignement

- -

Il existe trois types d'alignement définis par la spécification et qui fonctionnent avec des mots-clés.

- -
    -
  • Alignement en position : la position du sujet est définie relativement à celle du conteneur.
    • -
  • Alignement selon la ligne de base : ces mots-clés définissent l'alignement comme une relation entre les lignes de base des sujets au sein d'un contexte d'alignement.
    • -
  • Alignement distribué : ces mots-clés définissent l'alignement comme une distribution de l'espace entre les sujets.
    • -
- -

Alignement en position avec des mots-clés

- -

Les valeurs suivantes permettent de réaliser un alignement en position et peuvent être utilisées comme valeurs pour justify-content, align-content ainsi que pour justify-self et align-self.

- -
    -
  • center
    • -
  • start
    • -
  • end
    • -
  • self-start
    • -
  • self-end
    • -
  • flex-start (uniquement pour les boîtes flexibles)
    • -
  • flex-end (uniquement pour les boîtes flexibles)
    • -
  • left
    • -
  • right
    • -
- -

En dehors des valeurs physiques left et right qui sont relatives à la disposition physique de l'écran, les autres valeurs sont des valeurs logiques qui font référence au mode d'écriture du contenu.

- -

Si on prendre l'exemple d'une disposition en grille : en français, utiliser justify-content avec start déplacera les éléments sur l'axe en ligne au début, ce qui correspondra, dans ce cas, à la gauche. Si on utilise cette même règle avec un document écrit en arabe, qui s'écrit de droite à gauche, la valeur start regroupera les éléments sur le côté droit de la page.

- -

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

- -

Les mots-clés pour l'alignement sur les lignes de bases permettent d'aligner les lignes de bases des boîtes parmi un groupe de sujets. Ces valeurs peuvent être utilisées avec justify-content, align-content ou avec justify-self et align-self.

- -
    -
  • baseline
    • -
  • first baseline
    • -
  • last baseline
    • -
- -

L'alignement du contenu selon la ligne de base (c'est-à-dire avec justify-content ou align-content) fonctionne pour les méthodes de disposition qui organisent les objets en lignes. Les sujets sont alignés sur une ligne de base commune en ajoutant du remplissage (padding) à l'intérieur de chaque boîte si nécessaire.

- -

L'alignement des éléments (self alignment) (c'est-à-dire avec justify-self ou align-self pour des sujets distincts ou avec justify-items et align-items pour des groupes) décale les boîtes afin de les aligner sur une ligne de base en ajoutant une marge à l'extérieur des boîtes.

- -

Alignement distribué

- -

Les mots-clés permettant de décrire un alignement distribué sont utilisés avec les propriétés align-content et justify-content. Ces mots-clés définissent ce qui se produit lorsqu'il reste de l'espace après que les sujets aient été affichés. Les valeurs correspondantes sont :

- -
    -
  • stretch
    • -
  • space-between
    • -
  • space-around
    • -
  • space-evenly
    • -
- -

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.

- -

Gestion du dépassement

- -

Les mots-clés safe et unsafe permettent de définir le comportement obtenu lorsque le sujet d'alignement est plus grand que le conteneur. Le mot-clé safe alignera selon start si l'alignement indiqué provoque un dépassement, afin de réduire la « perte de données » visible en dehors du conteneur et sur laquelle l'utilisateur ne pourra pas avoir accès.

- -

La valeur unsafe permet de respecter l'alignement indiqué, même si celui-ci provoque un dépassement entraînant une telle perte de données.

- -

Espaces entre les boîtes

- -

La spécification pour l'alignement des boîtes inclut également les propriétés gap, row-gap et column-gap. Ces propriétés permettent d'obtenir un espacement cohérents entre les objets d'une ligne ou d'une colonne pour tout mode de disposition organisant les objets de cette façon.

- -

La propriété gap est une propriété raccourcie pour row-gap et column-gap et qui permet de définir ces deux propriétés en une seule règle.

- -
    -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
- -

Dans l'exemple suivant, on a une disposition en grille et on utilise la propriété raccourcie gap afin de définir un espace de 10px entre chaque piste de ligne et un espace de 2em entre chaque piste de colonne.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

- -

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("row-gap")}}
    • -
  • {{cssxref("grid-column-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.

- -

Attention, d'autres éléments peuvent rentrer en jeu et ajouter de l'espace (les mots-clés de distribution ou les marges sur les éléments par exemple).

- -

Pages associées à chaque propriété d'alignement

- -

Les propriétés d'alignement des boîtes CSS sont implémentées différemment selon le mode de disposition utilisé. Vous pouvez vous référer aux pages suivantes afin de connaître les détails de ces différences :

- - - -

Référence

- -

Propriétés CSS

- -
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("place-self")}}
    • -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
- -

Termes du glossaire

- - - -

Guides

- - - -

Ressources externes

- - diff --git a/files/fr/web/css/css_box_alignment/index.md b/files/fr/web/css/css_box_alignment/index.md new file mode 100644 index 0000000000..18feaec140 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/index.md @@ -0,0 +1,245 @@ +--- +title: CSS Box Alignment +slug: Web/CSS/CSS_Box_Alignment +tags: + - Alignement + - CSS + - Guide +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.

+ +
+

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.

+ +

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.

+ +

Alignement pour une disposition en grille

+ +

Dans cet exemple avec une grille, on dispose d'un espace restant dans le conteneur après avoir placé les pistes de largeur fixe le long de l'axe en ligne (l'axe principal). L'espace est réparti grâce à la propriété {{cssxref("justify-content")}}. Sur l'axe de bloc (l'axe secondaire), l'alignement des éléments sur la grille est dicté par {{cssxref("align-items")}}. Le premier objet surcharge la règle fournie par align-items en utilisant {{cssxref("align-self")}} avec la valeur center.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

Alignement pour une disposition flexible (flexbox)

+ +

Dans cet exemple, trois objets flexibles sont alignés le long de l'axe principal avec justify-content et selon l'axe secondaire avec align-items. Le premier objet surcharge la règle indiquée avec align-items grâce à la propriété align-self qui vaut ici center.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

Concepts majeurs et terminologie

+ +

Ce module de spécification définit des termes relatifs à l'alignement afin de pouvoir se référer à ces concepts sans qu'ils soient particulièrement liés à l'implémentation particulière d'un mode de disposition. Ces concepts sont communs à l'ensemble des méthodes de disposition.

+ +

Liens avec les modes d'écriture

+ +

L'alignement est lié aux modes d'écriture et, lorsqu'on aligne un élément, on ne l'aligne pas selon des axes « physiques » (haut, droit, bas, gauche) mais selon le début ou la fin des dimensions utilisées par ce mode d'écriture. Cela permet de s'assurer que l'alignement fonctionne de la même façon, quel que soit le mode d'écriture utilisé par le document.

+ +

Deux dimensions pour l'alignement

+ +

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-:

+ +
    +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("justify-content")}}
    • +
+ +

Lorsqu'on aligne des objets le long de l'axe de bloc, on utilisera les propriétés qui commencent par align-:

+ +
    +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

Flexbox ajoute un niveau de complexité car si {{cssxref("flex-direction")}} vaut row, ces règles sont vraies mais si flex-direction vaut column, elles sont inversées. Toutefois, lorsqu'on travaille avec les boîtes flexibles, il est préférable de penser en termes d'axe principal et d'axe secondaire plutôt qu'en termes d'axe en ligne et d'axe de bloc. Les propriétés justify- permettent toujours d'aligner selon l'axe principal et les propriétés align- d'aligner selon l'axe secondaire.

+ +

Le sujet de l'alignement (alignment subject)

+ +

Le sujet de l'alignement est l'objet qu'on aligne. Pour justify-self ou align-self, ou lorsqu'on paramètre ces valeurs pour un group avec justify-items ou align-items, cela correspondra à la boîte de marge de l'élément sur lequel la propriété est appliqué. Les propriétés justify-content et align-content varient selon la méthode de disposition utilisée.

+ +

Le conteneur d'alignement (alignment container)

+ +

Le conteneur d'alignement est la boîte au sein de laquelle le sujet est aligné. Il s'agit généralement du bloc englobant du sujet de l'alignement. Un conteneur d'alignement peut contenir un ou plusieurs sujets.

+ +

Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.

+ +

+ +

L'alignement de recours (fallback)

+ +

Si l'alignement défini ne peut pas être respecté, on utilisera un alignement de recours (fallback alignment) qui déterminera comment gérer l'espace disponible. L'alignement de recours est défini spécifiquement pour chaque méthode de disposition.

+ +

Types d'alignement

+ +

Il existe trois types d'alignement définis par la spécification et qui fonctionnent avec des mots-clés.

+ +
    +
  • Alignement en position : la position du sujet est définie relativement à celle du conteneur.
    • +
  • Alignement selon la ligne de base : ces mots-clés définissent l'alignement comme une relation entre les lignes de base des sujets au sein d'un contexte d'alignement.
    • +
  • Alignement distribué : ces mots-clés définissent l'alignement comme une distribution de l'espace entre les sujets.
    • +
+ +

Alignement en position avec des mots-clés

+ +

Les valeurs suivantes permettent de réaliser un alignement en position et peuvent être utilisées comme valeurs pour justify-content, align-content ainsi que pour justify-self et align-self.

+ +
    +
  • center
    • +
  • start
    • +
  • end
    • +
  • self-start
    • +
  • self-end
    • +
  • flex-start (uniquement pour les boîtes flexibles)
    • +
  • flex-end (uniquement pour les boîtes flexibles)
    • +
  • left
    • +
  • right
    • +
+ +

En dehors des valeurs physiques left et right qui sont relatives à la disposition physique de l'écran, les autres valeurs sont des valeurs logiques qui font référence au mode d'écriture du contenu.

+ +

Si on prendre l'exemple d'une disposition en grille : en français, utiliser justify-content avec start déplacera les éléments sur l'axe en ligne au début, ce qui correspondra, dans ce cas, à la gauche. Si on utilise cette même règle avec un document écrit en arabe, qui s'écrit de droite à gauche, la valeur start regroupera les éléments sur le côté droit de la page.

+ +

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

+ +

Les mots-clés pour l'alignement sur les lignes de bases permettent d'aligner les lignes de bases des boîtes parmi un groupe de sujets. Ces valeurs peuvent être utilisées avec justify-content, align-content ou avec justify-self et align-self.

+ +
    +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

L'alignement du contenu selon la ligne de base (c'est-à-dire avec justify-content ou align-content) fonctionne pour les méthodes de disposition qui organisent les objets en lignes. Les sujets sont alignés sur une ligne de base commune en ajoutant du remplissage (padding) à l'intérieur de chaque boîte si nécessaire.

+ +

L'alignement des éléments (self alignment) (c'est-à-dire avec justify-self ou align-self pour des sujets distincts ou avec justify-items et align-items pour des groupes) décale les boîtes afin de les aligner sur une ligne de base en ajoutant une marge à l'extérieur des boîtes.

+ +

Alignement distribué

+ +

Les mots-clés permettant de décrire un alignement distribué sont utilisés avec les propriétés align-content et justify-content. Ces mots-clés définissent ce qui se produit lorsqu'il reste de l'espace après que les sujets aient été affichés. Les valeurs correspondantes sont :

+ +
    +
  • stretch
    • +
  • space-between
    • +
  • space-around
    • +
  • space-evenly
    • +
+ +

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.

+ +

Gestion du dépassement

+ +

Les mots-clés safe et unsafe permettent de définir le comportement obtenu lorsque le sujet d'alignement est plus grand que le conteneur. Le mot-clé safe alignera selon start si l'alignement indiqué provoque un dépassement, afin de réduire la « perte de données » visible en dehors du conteneur et sur laquelle l'utilisateur ne pourra pas avoir accès.

+ +

La valeur unsafe permet de respecter l'alignement indiqué, même si celui-ci provoque un dépassement entraînant une telle perte de données.

+ +

Espaces entre les boîtes

+ +

La spécification pour l'alignement des boîtes inclut également les propriétés gap, row-gap et column-gap. Ces propriétés permettent d'obtenir un espacement cohérents entre les objets d'une ligne ou d'une colonne pour tout mode de disposition organisant les objets de cette façon.

+ +

La propriété gap est une propriété raccourcie pour row-gap et column-gap et qui permet de définir ces deux propriétés en une seule règle.

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

Dans l'exemple suivant, on a une disposition en grille et on utilise la propriété raccourcie gap afin de définir un espace de 10px entre chaque piste de ligne et un espace de 2em entre chaque piste de colonne.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

+ +

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("row-gap")}}
    • +
  • {{cssxref("grid-column-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.

+ +

Attention, d'autres éléments peuvent rentrer en jeu et ajouter de l'espace (les mots-clés de distribution ou les marges sur les éléments par exemple).

+ +

Pages associées à chaque propriété d'alignement

+ +

Les propriétés d'alignement des boîtes CSS sont implémentées différemment selon le mode de disposition utilisé. Vous pouvez vous référer aux pages suivantes afin de connaître les détails de ces différences :

+ + + +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{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 deleted file mode 100644 index 61ad9dfd61..0000000000 --- a/files/fr/web/css/css_box_model/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Modèle de boîte -slug: Web/CSS/CSS_Box_Model -tags: - - Aperçu - - CSS - - CSS Box Model - - Overview - - Reference -translation_of: Web/CSS/CSS_Box_Model -original_slug: Web/CSS/Modèle_de_boîte_CSS ---- -
{{CSSRef}}
- -

Le modèle de boîte CSS (Basic Box Model en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (padding) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.

- -

Référence

- -

Propriétés

- -

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")}}
    • -
  • {{cssxref("max-height")}}
    • -
  • {{cssxref("max-width")}}
    • -
  • {{cssxref("min-height")}}
    • -
  • {{cssxref("min-width")}}
    • -
- -

Les propriétés qui définissent les marges d'une boîte

- -
    -
  • {{cssxref("margin")}}
    • -
  • {{cssxref("margin-bottom")}}
    • -
  • {{cssxref("margin-left")}}
    • -
  • {{cssxref("margin-right")}}
    • -
  • {{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")}}
    • -
  • {{cssxref("padding-left")}}
    • -
  • {{cssxref("padding-right")}}
    • -
  • {{cssxref("padding-top")}}
    • -
- -

Les autres propriétés

- -
    -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("visibility")}}
    • -
- -

Guides

- -
-
Une introduction au modèle de boîte CSS
-
Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (padding) ainsi que les différentes zones qui forment une boîte.
-
Maîtriser la fusion des marges
-
Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.
-
Le modèle de mise en forme visuel
-
Cet article explique le modèle de mise en forme visuel.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
diff --git a/files/fr/web/css/css_box_model/index.md b/files/fr/web/css/css_box_model/index.md new file mode 100644 index 0000000000..61ad9dfd61 --- /dev/null +++ b/files/fr/web/css/css_box_model/index.md @@ -0,0 +1,106 @@ +--- +title: Modèle de boîte +slug: Web/CSS/CSS_Box_Model +tags: + - Aperçu + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +original_slug: Web/CSS/Modèle_de_boîte_CSS +--- +
{{CSSRef}}
+ +

Le modèle de boîte CSS (Basic Box Model en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (padding) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.

+ +

Référence

+ +

Propriétés

+ +

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")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+ +

Les propriétés qui définissent les marges d'une boîte

+ +
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{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")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+ +

Les autres propriétés

+ +
    +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("visibility")}}
    • +
+ +

Guides

+ +
+
Une introduction au modèle de boîte CSS
+
Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (padding) ainsi que les différentes zones qui forment une boîte.
+
Maîtriser la fusion des marges
+
Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.
+
Le modèle de mise en forme visuel
+
Cet article explique le modèle de mise en forme visuel.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
diff --git a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html deleted file mode 100644 index ec87b13973..0000000000 --- a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Fusion des marges -slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -original_slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges ---- -
{{CSSRef}}
- -
Les marges haute et basse des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle la fusion des marges.
- -

La fusion des marges se produit si on a l'un de ces trois cas :

- -
-
Des éléments voisins adjacents
-
Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements). Ainsi : - 
 <p>La marge basse de ce paragraphe est fusionnée…</p>
- <p>… avec la marge haute de celui-ci.</p>
-
-
-
Aucun contenu séparant le parent et ses descendants
-
S'il n'y a aucune bordure, remplissage, contenu en ligne (inline), lorsqu' un contexte de formatage de blocs est créé ou dégagement pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
-
Des blocs vides
-
S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.
-
- -

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.

- -

Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).

- -

Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).

- -

Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.

- -

Exemples

- -

HTML

- -
<p>La marge basse de ce paragraphe est fusionnée…</p>
-<p>… avec la marge haute de ce paragraphe. On a donc une marge
-   de <code>1.2rem</code> entre les deux.</p>
-
-<div>Cet élément contient deux paragraphes !
-  <p>Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.</p>
-  <p>La marge basse de cet élément fusionne avec la marge basse
-     de l'élément parent. On a donc <code>2rem</code> de marge.
-</p>
-</div>
-
-<p>Bip bap bop.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples','100%',250)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md new file mode 100644 index 0000000000..ec87b13973 --- /dev/null +++ b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md @@ -0,0 +1,93 @@ +--- +title: Fusion des marges +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +original_slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges +--- +
{{CSSRef}}
+ +
Les marges haute et basse des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle la fusion des marges.
+ +

La fusion des marges se produit si on a l'un de ces trois cas :

+ +
+
Des éléments voisins adjacents
+
Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements). Ainsi : + 
 <p>La marge basse de ce paragraphe est fusionnée…</p>
+ <p>… avec la marge haute de celui-ci.</p>
+
+
+
Aucun contenu séparant le parent et ses descendants
+
S'il n'y a aucune bordure, remplissage, contenu en ligne (inline), lorsqu' un contexte de formatage de blocs est créé ou dégagement pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
+
Des blocs vides
+
S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.
+
+ +

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.

+ +

Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).

+ +

Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).

+ +

Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.

+ +

Exemples

+ +

HTML

+ +
<p>La marge basse de ce paragraphe est fusionnée…</p>
+<p>… avec la marge haute de ce paragraphe. On a donc une marge
+   de <code>1.2rem</code> entre les deux.</p>
+
+<div>Cet élément contient deux paragraphes !
+  <p>Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.</p>
+  <p>La marge basse de cet élément fusionne avec la marge basse
+     de l'élément parent. On a donc <code>2rem</code> de marge.
+</p>
+</div>
+
+<p>Bip bap bop.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','100%',250)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_charsets/index.html b/files/fr/web/css/css_charsets/index.html deleted file mode 100644 index 07d2f1c593..0000000000 --- a/files/fr/web/css/css_charsets/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Jeux de caractères CSS -slug: Web/CSS/CSS_Charsets -tags: - - Aperçu - - CSS - - CSS Charsets - - Reference -translation_of: Web/CSS/CSS_Charsets -original_slug: Web/CSS/Jeux_de_caractères_CSS ---- -
{{CSSRef}}
- -

Les jeux de caractères pour CSS est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.

- -

Référence

- -

Règles @

- -
    -
  • {{cssxref("@charset")}}
    • -
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

Règle-@ @charset

- -

{{Compat("css.at-rules.charset")}}

diff --git a/files/fr/web/css/css_charsets/index.md b/files/fr/web/css/css_charsets/index.md new file mode 100644 index 0000000000..07d2f1c593 --- /dev/null +++ b/files/fr/web/css/css_charsets/index.md @@ -0,0 +1,47 @@ +--- +title: Jeux de caractères CSS +slug: Web/CSS/CSS_Charsets +tags: + - Aperçu + - CSS + - CSS Charsets + - Reference +translation_of: Web/CSS/CSS_Charsets +original_slug: Web/CSS/Jeux_de_caractères_CSS +--- +
{{CSSRef}}
+ +

Les jeux de caractères pour CSS est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.

+ +

Référence

+ +

Règles @

+ +
    +
  • {{cssxref("@charset")}}
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

Règle-@ @charset

+ +

{{Compat("css.at-rules.charset")}}

diff --git a/files/fr/web/css/css_color/index.html b/files/fr/web/css/css_color/index.html deleted file mode 100644 index f07f716fe6..0000000000 --- a/files/fr/web/css/css_color/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: CSS Color -slug: Web/CSS/CSS_Color -tags: - - Aperçu - - CSS - - CSS Colors - - Couleurs - - Overview - - Reference -translation_of: Web/CSS/CSS_Color ---- -
{{CSSRef}}
- -

CSS Color est un module des spécifications CSS qui décrit la gestion des couleurs, les types de donnée associés, la fusion des couleurs et la gestion de l'opacitié. Ce module ne contient pas l'ensemble des propriétés CSS qui prennent une valeur de type {{cssxref("<color>")}}, toutefois, ces propriétés dépendent des notions et règles définies dans cette spécification.

- -

Référence

- -

Propriétés

- -
    -
  • {{cssxref("color")}}
    • -
  • {{cssxref("opacity")}}
    • -
  • {{cssxref("color-adjust")}}
    • -
- -

Types de données

- -
    -
  • {{cssxref("<color>")}}
    • -
- -

Guides

- -
-
Appliquer des couleurs à des éléments HTML grâce à CSS
-
Un guide décrivant comment utiliser CSS pour colorer différents types de contenu. Cet article couvre l'ensemble des propriétés CSS ayant trait aux couleurs.
-
- -

Outils

- -
-
Sélecteur de couleurs
-
Cet outil permet de créer, ajuster et tester des couleurs sur mesure.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors')}}{{Spec2('CSS4 Colors')}} 
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

color property

- -

{{Compat("css.properties.color")}}

- -

color-adjust property

- -

{{Compat("css.properties.color-adjust")}}

- -

opacity property

- -

{{Compat("css.properties.opacity")}}

- -

Voir aussi

- -
    -
  • Des propriétés liées aux couleurs mais qui font partie d'autres spécifications : -
      -
    • {{cssxref("background-color")}},
      • -
    • {{cssxref("border-color")}},
      • -
    • {{cssxref("outline-color")}},
      • -
    • {{cssxref("text-decoration-color")}},
      • -
    • {{cssxref("text-emphasis-color")}},
      • -
    • {{cssxref("text-shadow")}},
      • -
    • {{cssxref("caret-color")}},
      • -
    • {{cssxref("column-rule-color")}}
      • -
    -
    • -
  • En CSS, les dégradés ne sont pas des couleurs mais des images.
    • -
diff --git a/files/fr/web/css/css_color/index.md b/files/fr/web/css/css_color/index.md new file mode 100644 index 0000000000..f07f716fe6 --- /dev/null +++ b/files/fr/web/css/css_color/index.md @@ -0,0 +1,111 @@ +--- +title: CSS Color +slug: Web/CSS/CSS_Color +tags: + - Aperçu + - CSS + - CSS Colors + - Couleurs + - Overview + - Reference +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

CSS Color est un module des spécifications CSS qui décrit la gestion des couleurs, les types de donnée associés, la fusion des couleurs et la gestion de l'opacitié. Ce module ne contient pas l'ensemble des propriétés CSS qui prennent une valeur de type {{cssxref("<color>")}}, toutefois, ces propriétés dépendent des notions et règles définies dans cette spécification.

+ +

Référence

+ +

Propriétés

+ +
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("opacity")}}
    • +
  • {{cssxref("color-adjust")}}
    • +
+ +

Types de données

+ +
    +
  • {{cssxref("<color>")}}
    • +
+ +

Guides

+ +
+
Appliquer des couleurs à des éléments HTML grâce à CSS
+
Un guide décrivant comment utiliser CSS pour colorer différents types de contenu. Cet article couvre l'ensemble des propriétés CSS ayant trait aux couleurs.
+
+ +

Outils

+ +
+
Sélecteur de couleurs
+
Cet outil permet de créer, ajuster et tester des couleurs sur mesure.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors')}}{{Spec2('CSS4 Colors')}} 
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

color property

+ +

{{Compat("css.properties.color")}}

+ +

color-adjust property

+ +

{{Compat("css.properties.color-adjust")}}

+ +

opacity property

+ +

{{Compat("css.properties.opacity")}}

+ +

Voir aussi

+ +
    +
  • Des propriétés liées aux couleurs mais qui font partie d'autres spécifications : +
      +
    • {{cssxref("background-color")}},
      • +
    • {{cssxref("border-color")}},
      • +
    • {{cssxref("outline-color")}},
      • +
    • {{cssxref("text-decoration-color")}},
      • +
    • {{cssxref("text-emphasis-color")}},
      • +
    • {{cssxref("text-shadow")}},
      • +
    • {{cssxref("caret-color")}},
      • +
    • {{cssxref("column-rule-color")}}
      • +
    +
    • +
  • En CSS, les dégradés ne sont pas des couleurs mais des images.
    • +
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 deleted file mode 100644 index 0715ba2707..0000000000 --- a/files/fr/web/css/css_colors/color_picker_tool/index.html +++ /dev/null @@ -1,3226 +0,0 @@ ---- -title: Sélecteur de couleurs CSS -slug: Web/CSS/CSS_Colors/Color_picker_tool -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Colors/Color_picker_tool -original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs ---- -